O tão aguardado lançamento do Beaver Builder 2.8, também conhecido como “Alpine”, chegou!

O Beaver Builder 2.8 traz o poder do flexbox e da grade CSS para o novo Box Module, juntamente com a introdução da funcionalidade Global Styles. Além disso, esta versão incorpora melhorias notáveis, incluindo o módulo North Commerce e integração com Popup Maker, com pequenas melhorias em módulos importantes como Menu, Post Carousel, Post Slider e Photo.

Neste post, apresentaremos a nova atualização do Beaver Builder 2.8. Em seguida, mostraremos alguns dos melhores novos recursos.

Uma introdução ao Beaver Builder 2.8

No Beaver Builder, continuamos atualizando nosso plugin construtor de páginas fácil de usar, simplificando o processo de criação e personalização de sites WordPress. Independentemente do seu nível de habilidade, nosso editor visual de arrastar e soltar, modelos de páginas pré-concebidos, configurações globais e muito mais permitem que você crie rapidamente os projetos de seu site:

No Beaver Builder 2.7, adicionamos um novo editor responsivo para visualizar visualizações de dispositivos móveis. Também substituímos o menu suspenso do ponto de interrupção por ícones mais fáceis de usar.

A atualização 2.7 trouxe a capacidade de personalizar as configurações de código para linhas, colunas ou módulos específicos. Também tornamos possível selecionar vários tipos de postagem. Por fim, o Beaver Builder 2.7 é totalmente integrado ao ACF Blocks, dando acesso a uma experiência avançada de edição de conteúdo.

Ao atualizar para o Beaver Builder 2.8, você desbloqueará o poder do flexbox, da grade CSS e das camadas em nosso novo Box Module. Também possibilitamos a aplicação de Estilos Globais, adição de conteúdo do North Commerce sem códigos de acesso e integração mais completa com o PopUp Maker, proporcionando uma experiência de edição mais fácil.

5 novos recursos e atualizações para Beaver Builder 2.8

Beaver Builder 2.8 é nossa primeira atualização para 2024 e traz alguns recursos poderosos. Vamos explorar algumas novas adições que farão desta atualização uma virada de jogo.

1. Módulo Box: Construindo Precisão com Flexbox e CSS Grid

Ao atualizar para o Beaver Builder 2.8, todos os usuários do nosso construtor de páginas, incluindo a versão Lite, terão acesso às opções avançadas de Flex , Grid e Layers dentro do Box Module:

O módulo Box funciona como uma linha ou coluna, servindo como um contêiner. Ele utiliza flexbox ou grade CSS, permitindo criar layouts complexos, fluidos e flexíveis. Você pode aninhar, empilhar e organizar caixas nas orientações horizontal e vertical, bem como em uma grade.

Flexbox e CSS Grid são modelos de layout em CSS, mas atendem a propósitos diferentes e possuem características distintas:

• Flexbox – Ideal para layouts unidimensionais, organizando itens em uma linha ou coluna com flexibilidade de dimensionamento e alinhamento.
• Grade – Adequado para layouts bidimensionais, oferecendo controle preciso sobre linhas e colunas, permitindo designs mais complexos.

Em muitos casos, estes modelos de layout podem complementar-se. Por exemplo, pode-se usar o flexbox em itens de grade individuais para lidar com sua estrutura interna, combinando os pontos fortes de ambos os modelos para soluções de layout abrangentes como esta:

Para adicionar o Box Module ao editar com o Beaver Builder, clique no símbolo de adição (+) localizado na barra superior para abrir o painel de conteúdo . Clique na guia Módulos para acessar todos os Módulos Padrão e role para baixo até a seção “Caixa”:

Junto com o próprio Box Module, você notará que adicionamos várias predefinições que facilitam o início:

• Colunas flexíveis – Esta predefinição cria uma linha horizontal de três caixas flexíveis situadas dentro da caixa pai.
• Grade 3×2 – Uma estrutura de layout que usa caixas de grade que consistem em três colunas e duas linhas dentro da caixa pai.
• Grade 4×2 – Uma estrutura de layout de caixas de grade que consiste em quatro colunas e duas linhas dentro da caixa pai.
• Cabeçalho dividido – Esta estrutura é uma grade que define 3 colunas com um módulo de foto centralizado e módulos de menu em cada lado.
• Photo Grid – Este layout é composto por uma grade 4×3 e módulos fotográficos.

Embora pretendamos tornar o módulo Box o mais amigável possível, recomendamos fortemente ter um conhecimento sólido de Flexbox e CSS Grid. Usando nosso novo módulo box, você pode levar seus designs web ainda mais longe!

2. Estilos globais (recurso premium)

O Beaver Builder já oferece suporte a configurações globais que permitem configurar valores padrão para opções como largura máxima da linha, margem/preenchimento, pontos de interrupção e código personalizado (CSS e JavaScript) que são então aplicados globalmente em seu site. Além disso, você pode substituir a maioria dessas configurações por linha, coluna e módulo por meio de suas configurações.

O novo recurso Estilos Globais, disponível exclusivamente na versão premium do construtor de páginas do Beaver Builder, oferece a capacidade de definir preferências de estilo para elementos e cores no Beaver Builder:

• Elementos Globais – Esta guia permite definir estilos para vários elementos HTML que são controlados pelo Beaver Builder, como Texto, Títulos, Links e Botões.
• Cores Globais – Esta guia permite configurar uma paleta de cores global que é disponibilizada no seletor de cores em Estilos Globais ou em qualquer outro lugar onde você possa selecionar cores.

Para acessar os Estilos Globais, abra o menu Ferramentas clicando na seta na Barra Superior no canto superior esquerdo da tela de edição e selecione “Estilos Globais” conforme mostrado:

A guia Elementos permite definir estilos globais para elementos como texto, títulos, links e botões:

Todos os módulos do seu site que não possuem opções de estilo pré-configuradas herdam o estilo global. Você pode substituir essas opções de estilo caso a caso usando as opções de estilo do módulo.

A guia Cores permite gerar uma paleta de cores global que está disponível em todo o seu site:

Você pode acessar facilmente essas cores nos layouts do Beaver Builder por meio da ferramenta de seleção de cores. Além disso, as cores que você estabelece são convertidas em variáveis ​​CSS, permitindo sua integração em CSS customizado.

Com esta atualização, você pode personalizar facilmente os elementos e cores do seu site em escala global. Esses estilos globais permanecem acessíveis em todo o site, aprimorando o fluxo de trabalho do construtor de páginas.

3. Módulo NorthCommerce

Até agora, discutimos como o Beaver Builder 2.8 introduz dois novos recursos, o Box Module e os Global Styles, para tornar a construção de layouts complexos mais fácil de usar.

O Beaver Builder 2.8 também apresenta um módulo para North Commerce, um plugin de comércio eletrônico para WordPress que ajuda os usuários a construir lojas online de alta conversão de forma rápida e fácil:

Por exemplo, agora você pode exibir os resultados dos códigos de acesso do North Commerce sem precisar inserir ou usar nenhum código de acesso. Em vez disso, você pode usar o novo módulo North Commerce, semelhante ao nosso módulo WooCommerce, para exibir facilmente seu conteúdo.

Este novo módulo lhe dará mais controle e acelerará seu fluxo de trabalho ao trabalhar com NorthCommerce.

4. Integração do Popup Maker

No Beaver Builder 2.8, também introduzimos uma integração com o Popup Maker, um plugin desenvolvido para sites WordPress que permite aos usuários criar e gerenciar pop-ups:

Essencialmente, agora você pode usar nosso construtor de páginas para projetar o conteúdo de seus pop-ups

Ele também renderizará um pop-up dentro do Beaver Builder durante a edição, bem como a capacidade de selecionar um pop-up no campo do link para acionar um pop-up quando um link for clicado.

Depois de instalar e ativar o plugin Popup Maker, o tipo de postagem do Popup Maker (pop-ups) será ativado automaticamente nas configurações do Beaver Builder.

5. Pequenas atualizações em módulos, menu de ferramentas e configurações de loop

Por último, o Beaver Builder 2.8 inclui as seguintes pequenas adições:

• Módulo de Menu – A opção de preenchimento de link agora suporta alternância responsiva; adiciona uma nova opção de preenchimento para configurações de alternância responsivas.
• Post Carousel & Post Slider – Adiciona a opção de comprimento do trecho a ambos os módulos, permitindo que você defina o comprimento do conteúdo.
• Menu Ferramentas – Inclui a capacidade de abrir e interagir com a Biblioteca de mídia WordPress na interface do usuário do Beaver Builder.
• Módulo Foto – Adicione opções de ajuste e posição do objeto à guia de estilo.
• Configurações de loop – Adiciona a opção de filtrar por autor atual e usuário conectado no momento.
• Sobreposições de linhas, colunas e módulos – Atualizadas para serem consistentes entre os tipos de nós.
• Painel de estrutura de tópicos – Também recebi uma atualização nesta versão para funcionar com mais facilidade.

Conclusão: recursos poderosos para construção web aprimorada

A atualização para o Beaver Builder 2.8 desbloqueia uma experiência de construção de páginas mais robusta e personalizável. O Box Module apresenta opções avançadas de layout com Flexbox e CSS Grid, enquanto Global Styles simplifica o gerenciamento de cores.

Para recapitular, aqui está o que você pode esperar no Beaver Builder 2.8:

1. Módulo Caixa
2. Estilos Globais
3. Módulo NorthCommerce
4. Integração com Popup Maker
5. Pequenas atualizações em módulos, menu de ferramentas e configurações de loop

Atualize para o Beaver Builder 2.8 hoje para aproveitar esses novos recursos interessantes. Como sempre, nossa equipe de suporte está aqui para ajudar caso você tenha alguma dúvida ou precise de assistência.

Perguntas relacionadas

Qual é a versão mais recente do Beaver Builder?

Em fevereiro de 2024, Beaver Builder 2.8 é a versão mais recente do nosso plugin. Suporta integração com plug-ins NorthCommerce e Popup Maker. Você também encontrará um novo módulo Box que permite criar layouts facilmente usando flexbox, grade CSS e camadas.

O que o Beaver Builder faz?

Beaver Builder é um conjunto de produtos de web design para WordPress composto por um Framework Theme, um plugin Page Builder e um Theme Builder que permite aos usuários criar e personalizar sites sem esforço por meio da funcionalidade de arrastar e soltar. Crie sites impressionantes de nível profissional sem a necessidade de conhecimento em codificação.