Beaver Builder vs Divi: Um é bom para você, outro não (2024)

Beaver Builder contra Divi

Então, você está procurando um novo plug-in do construtor de páginas do WordPress. Como você escolhe entre Beaver Builder ou Divi quando esses são dois dos produtos mais populares do mercado?

Você pode ter feito alguma pesquisa preliminar e descobriu que essas duas são as escolhas mais elogiadas para a construção de sites e fornecem ferramentas semelhantes a outros construtores de páginas líderes.

Agora você deseja descobrir qual desses plug-ins populares é o melhor. E acima de tudo, o que vale o seu dinheiro?

Vamos explorar todos os recursos importantes desses plug-ins de construtor de páginas e compará-los frente a frente para ajudar a encontrar o melhor para você.

Continue lendo para descobrir qual é o melhor plug-in de construtor de páginas para WordPress. Se você estiver interessado em plug-ins WordPress em geral, você pode querer verificar nossas outras análises e resumos apresentados em Collectiveray.

Temos sites em execução com esses dois produtos instalados, por isso revisitamos este artigo em março de 2024 para atualizar todos os detalhes relevantes conforme necessário.

Beaver Builder contra Divi

Beaver Builder é muito fácil de usar, mas o Divi tem mais opções de personalização. Ambos os produtos oferecem acesso a layouts de aparência profissional. Divi tem mais de 2,000 layouts em comparação com Beaver Builder50 modelos de. Divi é um pouco mais barato do que Beaver Builder por US $ 89, que inclui todos os produtos de ElegantThemes.

  Construtor Divi beaver builder logotipo
Preço $ 89 (inclui todos os plug-ins ET e temas WordPress) $ 99 +
Free Version Não Sim
Editor em tempo real Sim Sim
Front-end / Back-end Ambos Ambos
Público-Alvo Desenvolvedor / Designer / Usuário Web Developer / Designer
Elementos suportados 200+  31 
Código Limpo Sim Sim
Modelos / layouts pré-fabricados 2,000+ 50+
Recurso legal Teste A / B Themer do castor
Performance ⭐⭐⭐⭐⭐
Do que gostamos  Uma solução muito poderosa para criar qualquer tipo de layout  Interface de usuário simples
   Opções superiores de gerenciamento de layout  O conteúdo permanece intacto mesmo após a desativação do plugin
   Preço atraente com acesso a muitos outros temas e plug-ins do WordPress  Modo de editor exclusivo para clientes
   Novas melhorias de desempenho mudam o jogo  Permite que você use widgets WordPress nos layouts
O que não gostamos  Leva algum tempo para se acostumar  Mais caro do que os outros construtores de página
   O editor de front-end leva algum tempo para carregar.  Não tantos recursos
No geral
Vencedora 🏆  
Site Visite a Elegant Themes (10% DE DESCONTO) Visite a Beaver Builder 

 

Por que usar um construtor de páginas?

Beaver builder vs DiviSe você é relativamente novo no mundo do WordPress, talvez não conheça toda a história dos criadores de páginas e como eles surgiram.

Essencialmente, até alguns anos atrás, o WordPress podia criar páginas ou posts. Ambos os itens de conteúdo são muito semelhantes.

Eles suportavam principalmente texto e imagens e seu conteúdo de site comum, como postagens de blog.

Se você queria algo mais sofisticado, tinha que usar plug-ins e / ou códigos de acesso conforme necessário.

Agora, os códigos de acesso eram ótimos, porque permitiam inserir recursos e funções específicas onde você quisesse em uma página.

Mas eles ainda tinham suas limitações - você ainda tinha que instalar vários plug-ins diferentes para conseguir e usar vários elementos diferentes em uma página.

Se você queria controles deslizantes, botões de chamada para ação, vídeos, galerias de imagens e outras coisas, tinha que continuar adicionando mais e mais plugins.

Isso trouxe outro problema - quanto mais produtos você adicionar à instalação, mais pesado seu site ficará e mais sujeito a vulnerabilidades de segurança provenientes dos vários itens que você precisa instalar.

Isso era um problema.

Houve outro problema. Você não pode criar uma página ou postagem visualmente. Você tinha que projetar uma página usando códigos de acesso e, após várias iterações de alterações, chegaria a um resultado próximo ao desejado.

Eventualmente, os desenvolvedores e fornecedores começaram a perceber que a maioria das pessoas queria a capacidade de projetar e definir suas próprias páginas sem restrições - não usar modelos, o que fazia com que todos os sites tivessem a mesma aparência.

E assim, o conceito de construtores de páginas surgiu.

Este é essencialmente o núcleo desse recurso - a capacidade de arrastar e soltar diferentes elementos para projetar e definir uma página ou postagem da maneira que VOCÊ quiser.

Leia mais: Assistant Pro - salve modelos de construtor de páginas na web

Divi builder vs beaver builder

Não temos certeza de quem veio com o produto criador de primeira página, mas definitivamente, Elegant Themes tem sido um dos fornecedores que tornou esse conceito muito bem-sucedido.

Assim que as pessoas perceberam o potencial, todos os principais fornecedores começaram a embarcar no movimento.

Hoje, a maioria dos principais fornecedores irá agrupar algum tipo de construtor de página visual em seus temas - se eles não tiverem um, eles farão parceria com alguém e incorporarão / habilitarão esse recurso em seu tema.

E quanto a Divi e Beaver Builder?

Divi

ElegantThemes estão neste nicho há tanto tempo que realmente entenderam o que as pessoas querem e deram a elas - seu produto é um dos mais populares, com mais de 600,000, 880,000 vendas.

Eles estão focados nos usuários que desejam criar um site, mas não se preocupam com o que está acontecendo nos bastidores - eles apenas querem que as coisas funcionem e não querem ser técnicos sobre isso ou mexer com qualquer código.

Elegant Themes Público-alvo: 

Pessoas que desejam que um site seja projetado e instalado e funcionando sem envolver um desenvolvedor or saber muito sobre código.

Usuários de exemplo:

  1. Proprietários de pequenas empresas
  2. Bloggers
  3. SEOs
  4. Proprietários de sites afiliados
  5. Escritores de conteúdo que estão criando sites
  6. Web designers
  7. Agências de marketing digital

Se você tivesse que dar uma olhada na imagem abaixo, Divi é voltado para o designer. Na verdade, você pode querer verificar alguns exemplos de temas Divi ao vivo aqui. E esses caras estão sempre na vanguarda da tecnologia, tendo acabado de incorporar IA em Divi.

Designer vs Desenvolvedor

Beaver Builder

Beaver Builder tem um tipo diferente de usuário. Enquanto ElegantThemes visa aqueles que são less "técnico", Beaver Builder vai atrás daqueles usuários que são designers e desenvolvedores de coração.

Divi tem algumas limitações que esses tipos de desenvolvedores acham frustrantes e Beaver Builder identifica e corrige bem esses problemas. 

Isso permitiu que este produto decolasse com aqueles que se identificam mais como desenvolvedores.

Se você está interessado em saber como Elegant Themes produtos se comparam a outras opções populares disponíveis no mercado, considere os dois artigos a seguir que também escrevemos:

https://www.collectiveray.com/divi-vs-genesis

e

https://www.collectiveray.com/divi-vs-avada

Continuando na imagem acima, Beaver Builder estaria mais em casa com o desenvolvedor.

Público-alvo da BeaverBulder:

Desenvolvedores e designers da Web que gostam para mexer no código, ter controle total sobre o que está acontecendo e poder ajustar as coisas para que funcionem da maneira que desejam, não da maneira como o fornecedor o projetou.

Usuários de exemplo:

  1. Os desenvolvedores da Web
  2. Web designers que desejam mexer no código
  3. Agências digitais
  4. Freelancers

Com essa introdução feita, vamos começar a nos aprofundar em cada produto, para que possamos ver os recursos, funções, prós e contras de usar qualquer um desses dois itens.

Vamos começar discutindo a interface do usuário desses dois produtos.

Beaver Builder vs Divi - WordPress Page Builder UI e UX

Como tendemos a gastar muito tempo no back-end do nosso construtor de páginas, vamos primeiro ver como cada um deles se parece e o que eles oferecem em termos de usabilidade.

A Divi Builder Interface

ElegantThemes trabalham em seus produtos há vários anos e isso mostra. Com uma forte comunidade apoiando-os, dando-lhes muitos feedbacks excelentes - esses caras sabem como ficar no pulso de seus usuários.

Eles construíram uma interface totalmente focada em uma ótima experiência do usuário.

Eles não construíram hordas de fãs por acidente. Seu foco estrito no design e na usabilidade de seu produto tem sido um dos principais aspectos para tornar este construtor tão bem-sucedido.

Dê uma olhada neste pequeno vídeo de introdução (2 minutos). Isso é desde a primeira versão de Divi (2015), muitas coisas mudaram desde então, mas é ótimo obter um rápido resumo das possibilidades.

Mas vamos dar uma olhada na IU.

Depois de instalar o Divi, você poderá acessar o construtor criando um novo post ou página.

A primeira coisa que você verá é isto:

A Divi Builder Interface

Clicando sobre o Use Divi Builder botão irá redirecioná-lo para o novo editor visual.

Esta função é uma resposta à introdução do novo editor de blocos do WordPress, como você pode ver na imagem acima. O antigo editor de back-end Divi agora não está disponível para uso com o novo editor de postagem.

É por isso que Elegant Themes focado em melhorar seu editor visual de front-end e torná-lo tal que o back-end e o front-end agora são unidoslesstotalmente integrados um com o outro.

No entanto, você ainda tem a opção de reverter não apenas para o editor de back-end Divi clássico, mas também para o editor de postagem clássico do WordPress.

Tudo que você tem a fazer é ir para Divi > Opções de plugins > Avançada.

opções divi1 página

Alterne o “Habilitar Editor Clássico”Para Ligado para trazer de volta o editor de postagem original do WordPress.

Habilitar esta opção também trará de volta o editor de back-end completo do Divi. Então, alternando o “Habilite o mais recente Divi Builder Experiência" desabilitado trará de volta o construtor de backend pré-Gutenberg Divi (no entanto, tenha em mente que você perderá alguns dos recursos e melhorias mais recentes do construtor moderno).

O editor front-end em tempo real agora permite que você projete e visualizar a página na qual você está trabalhando imediatamente.

Francamente, esse é um ótimo recurso porque você não precisa "adivinhar" ou atualizar o front-end para ver o resultado do design em que está trabalhando.

Você pode ver como você o projeta.

Isso é o que ElegantThemes estão ligando "Uma nova experiência visual".

Interface de Usuário

O novo editor visual Divi substituiu os editores back-end / front-end mais antigos.

Abaixo você pode ver a aparência do novo construtor. Observe como você pode costurarlessAlterne entre a visualização de backend (wireframe) e a visualização de front-end com um único clique do mouse.

visualização wireframe

Esta é uma experiência WYSIWYG completa (o que você vê é o que você obtém). 

Para acessar o construtor de páginas do back-end, vá para POSTAGENS > adicionar Novo.

Você verá uma nova página com três opções: Construir do zero, Escolher um layout predefinido ou clonar uma página.

Divi nova pagina

Depois de fazer sua escolha, você verá uma opção para criar uma nova página, escolher na lista de modelos ou escolher uma página para clonar.

Escolheremos criar uma página do zero para que você possa ver o que está acontecendo.

Na página resultante, clique no botão “Use o Divi Builder" botão. Isso abrirá a interface, que se parece com o seguinte

Divi nova página1

 

Divi (que já revisamos aqui) permite que você crie seções separadas para várias partes da página. Ele suporta três tipos de seções - padrão, largura total e especial.

Para as seções padrão e de largura total, você pode escolher uma estrutura baseada em colunas. Existem muitas combinações, incluindo duas, três, quatro colunas em tamanhos diferentes.

A seção de especialidade apresenta nove estruturas de colunas especialmente criadas. Você pode adicionar várias linhas dentro de uma seção para ter várias estruturas de colunas.

divi nova página 3

Depois de escolher um layout, você pode adicionar módulos às colunas individuais. Você encontrará opções separadas para fornecer o conteúdo do módulo, configurar as opções de design e fornecer CSS personalizado.

Você pode reposicionar os módulos, colunas, linhas e seções arrastando e soltando-os nos locais desejados. Existem botões dedicados para excluir, duplicar e abrir a seção de configurações para cada um desses itens.

Também é possível desfazer, refazer as últimas ações e reverter para as ações anteriores usando o recurso de histórico.

divi nova página 3

Depois que o construtor de página de front-end for carregado, você poderá começar a personalizar a página.

Como a interface de back-end, você pode adicionar uma nova seção, escolher a estrutura da coluna e desfrutar de acesso completo a todas as opções de configuração do módulo.

Claro, um designer sem arrastar e soltar está morto na água, mas é claro, este produto lida com isso muito bem.

Na verdade, não é apenas arrastar e soltar, mas também mantém a capacidade de resposta enquanto você projeta.

Visto que você estará trabalhando nos blocos reais de conteúdo e elementos, estará arrastando as partes reais do conteúdo.

E, claro, tudo ainda está totalmente responsivo.

Dê uma olhada na breve demonstração de blocos responsivos ao vivo a seguir.

 

 Edição responsiva

 

Você pode arrastar e soltar os módulos, linhas, colunas e também copiar, colar, excluir ou editá-los de acordo com seus requisitos. 

Ganhe 10% OFF no Divi até março de 2024

PS. A oferta acima está disponível apenas através de CollectiveRay.

E quanto a ElegantThemes concorrente? Faz Beaver Builder tem a mesma flexibilidade? Funciona em tempo real no front-end?

Leia o restante deste artigo para descobrir a resposta a essas perguntas. 

A Beaver Builder Interface

Não querendo ficar para trás na corrida para dominar o construtor de páginas, Beaver Builder saiu com todas as armas em punho.

Ou ranger de dentes, se quisermos manter a analogia do Beaver. 😀

Beaver Builder oferece edição no front-end e no back-end, portanto, não fica para trás nesse aspecto.

Ele pode ser usado em páginas, postagens e na maioria dos outros tipos personalizados do WordPress, desde que estejam ativados.

Ao clicar na guia Admin para o tipo customizado relevante, você verá o construtor sendo carregado para que possa usá-lo para projetar seu conteúdo.

Antes de continuarmos, você pode querer ver o seguinte vídeo curto (2 minutos) sobre como usar Beaver Builder.

Essencialmente, no método de back-end, depois de fazer login no painel primeiro, vá para POSTAGENS > adicionar Novo, e clique no botão “página Builder"Botão.

Isso abrirá a interface do construtor de páginas - algo semelhante ao abaixo.

A Beaver Builder Interface

O primeiro passo é escolher um template para a página. Você pode escolher qualquer um dos modelos prontos ou começar com o em branco para criar seu próprio modelo.

Depois de escolher o modelo, o próximo passo é escolher o layout da linha.

Você pode escolher o layout da linha na barra lateral esquerda. Abra a barra lateral clicando no botão “Adicionar conteúdo” no menu superior esquerdo da página.

O menu também oferece alguns outros botões para alterar o modelo, abrir as ferramentas, seção, publicar a página e um botão de ajuda dedicado.

Beaver Builder oferece várias estruturas de coluna, incluindo uma, duas, três, quatro, cinco ou seis colunas e linhas com esquerda, direita ou ambas as barras laterais.

Basta arrastar o layout da linha para a posição desejada na página.

A Beaver Builder Interface1

A próxima etapa é adicionar módulos às colunas. Você encontrará os módulos na barra lateral esquerda.

Escolha o módulo que deseja usar e arraste-o para a coluna desejada na página. Neste ponto, você será fornecido com a janela de configurações do módulo.

Existem várias seções para gerenciar o conteúdo e o estilo do módulo.

Você pode arrastar e soltar as linhas e módulos para alterar suas posições. Existem botões separados para excluir, duplicar ou abrir as configurações de qualquer linha ou módulo.

Também é possível alterar a estrutura da coluna de uma linha.

Para acessar o construtor de páginas a partir do frontend, visite a página que deseja editar e clique no botão “página Builder" botão. Isso abrirá a mesma interface da criação da página no back-end.

A Beaver Builder Interface2

Você pode trabalhar com o design existente ou escolher um novo layout. Todas as outras opções, como adicionar várias linhas, módulos, widgets e gerenciá-los, são exatamente as mesmas do backend.

Você gostaria de ver uma demonstração gratuita ao vivo de Beaver Builder agora? Clique no botão abaixo. (Abre em uma nova janela)

Tente o BeaverBuilder demonstração

Beaver Builder vs Divi - Módulos

A usabilidade é apenas um aspecto de um construtor de páginas. O número de módulos que ele fornece sem a necessidade de instalar plugins extras também conta.

Divi Builder

Este plugin atualmente vem com mais de 200 módulos de conteúdo (Elementos em Divi-speak).

Por falar em novos lançamentos, a nova atualização de desempenho do Divi lançada em agosto de 2021 colocou o Divi no topo da fila de temas WordPress.

A página construída usando a nova versão do Divi carrega mais rápido do que nunca graças a uma série de melhorias no código.

Versões mais recentes do Divi, como a 4.20 lançada em fevereiro de 2023, melhoraram drasticamente a maneira como funciona e a rapidez com que carrega.

Essas melhorias incluem:

  • CSS 94% menor
  • CSS inteligente que carrega apenas o que é necessário
  • Os estilos inteligentes reduzem a duplicação nas folhas de estilo para um carregamento mais rápido
  • PHP dinâmico para processamento mais rápido
  • Otimização de JavaScript
  • Adiamento da folha de estilo de Gutenberg
  • adiamento jQuery

Entre eles, você encontrará os regulares, como:

  • Texto
  • Pesquisar
  • Acordeão
  • Botão
  • CTA
  • em áudio
  • Vídeo
  • Código personalizado
  • Divisor

As escolhas avançadas de elementos incluem:

  • Contador
  • Optar por
  • Portfólio
  • Entrar
  • Mapa
  • Pessoa
  • tabela de preços
  • Testimonial
  • Controle deslizante de vídeo

Claro, esses não são os únicos módulos disponíveis, mas se continuássemos listando-os, visto que existem mais de 200 elementos suportados, estaríamos aqui para sempre.

Digamos apenas que você provavelmente encontrará um módulo para todos os requisitos de que precisa.

Existem plug-ins de módulo extras para os poucos que você pode precisar, mas o Divi não possui.

Com a versão 3.1, uma API foi desenvolvida e lançada, para que você possa esperar que elementos e módulos customizados comecem a aparecer em todos os lugares.

Tempos divertidos pela frente!

Vamos ver o que outros desenvolvedores criarão. Fique atento.

Mas chega de falar sobre isso, vamos dar uma olhada em como usar um módulo:

Divi adicionar módulo

Clique no módulo desejado para adicioná-lo à postagem. Neste ponto, você deve definir as configurações do módulo. 

O pagebuilder fornece três seções para essa finalidade:

  1. Conteúdo
  2. Design
  3. Avançado

A Conteúdo seção inclui todas as opções relativas ao conteúdo do módulo escolhido.

Design permite que você escolha a cor, fonte, estilo de fundo, borda, margem e preenchimento para o módulo.

Por último, Avançado inclui campos dedicados para adicionar ID CSS personalizado, classe e para aplicar CSS personalizado antes ou depois do módulo ou ao conteúdo principal.

Gostaria de ler mais informações sobre este plugin agora? Clique no botão abaixo para visitar o ElegantThemes .

Ganhe 10% OFF no Divi até março de 2024

PS. A oferta está disponível apenas no link acima. 

Beaver Builder

Beaver Builder tem 29 módulos ao todo e os divide em três categorias:

  1. Módulos padrão
  2. Widgets WordPress
  3. Módulos salvos

Os módulos padrão incluem:

  • Editor de texto
  • Título
  • HTML
  • Botão
  • Imagem
  • Vídeo
  • auditivo
  • separador

A categoria WordPress contém alguns módulos familiares:

  • Arquivo
  • Calendário
  • Categorias
  • Meta
  • RSS
  • Menu de navegação
  • E outros

A seção Módulos salvos apresentará todos os módulos que você criar e salvar para uso posterior.

módulo Beaver Manage

O plug-in oferece três seções para gerenciar um módulo:

  1. Geral
  2. Style
  3. Avançado

Entre estes, o Geral A seção permite definir as configurações relacionadas ao tipo de módulo.

A Style A seção permite que você escolha a cor, o alinhamento, a fonte e outros estilos para as versões desktop e móvel.

Avançado inclui opções para configurar a visibilidade, animação junto com campos dedicados para adicionar classe CSS e ID.

Você pode ver uma demonstração mais clara do BeaverBuilder recursos abaixo.

Visite o Beaver Builder Site

A próxima parte do nosso Beaver Builder vs A revisão do Divi lidará com os modelos de página disponíveis ou layouts predefinidos.

Isso é algo que certamente simplificará sua vida e permitirá que você crie novos sites em questão de horas, até minutos, em vez de semanas.

Veja abaixo o que queremos dizer!

Beaver Builder vs Divi - modelos de página integrados

Os modelos de página integrados existem essencialmente para reduzir o tempo de design / desenvolvimento. Com isso instalado, você só precisa ajustar um pouco o conteúdo e o design e pronto!

Divi Builder Modelos de página (também conhecidos como layouts)

Quando a versão 3.0 foi lançada, ela veio com vários (mais de 100) modelos prontos para ajudá-lo a começar o mais rápido possível.

Versões subseqüentes adicionaram mais, com o número agora em mais de 2,000!

Você pode usar um modelo clicando na opção "Escolher um layout predefinido" ao carregar uma nova página ou postagem pela primeira vez.

divi carregar um layout

Você encontrará layouts profissionais para a landing page, em breve, sobre mim, entre em contato conosco, equipe, página de manutenção junto com diversas variações para a homepage, blog, loja e páginas de portfólio.

É possível usar esses layouts como estão ou personalizá-los de acordo com seus requisitos.

Claro, pode-se ter um grande número de modelos (ou como Divi os chama) layouts de página, mas a verdadeira carne é se eles são realmente bons e utilizáveis ​​para criar seus próprios designs.

Essencialmente, a ideia básica é esta - você cria uma página no WordPress, carrega um layout predefinido, personaliza o texto, as imagens e outros conteúdos para se adequar ao seu negócio e - voila - você tem um incrível site "projetado" sem exigir nenhum conhecimento real de design.

Esse é um grande poder nas mãos de quem deseja colocar as coisas em funcionamento rapidamente, mas não se sente muito confortável com código ou design em si.

Apenas um FYI - há mais de 2,000 layouts disponíveis no momento da redação deste artigo.

Vamos dar uma olhada rápida no que está disponível em termos de layouts.

Pacotes completos de sites

Este aqui é um recurso matador que consideramos ótimo para o público-alvo ao qual este produto se destina. Visto que mencionamos que o público-alvo são pessoas que querem lançar algo rapidamente, a disponibilidade de pacotes completos de sites é realmente ablessing.

Essencialmente, trata-se de um pacote de 7 a 8 páginas projetadas individualmente, necessárias para alguém lançar um site completo em questão de minutos. 

Dê uma olhada em como Nick Roach do ET descreve o valor que os layouts trazem para este produto. (Sim, você notará que o cabelo do Nick está mais comprido, já passou algum tempo entre os dois vídeos!).

As páginas são customizadas para o nicho / indústria específico, possuindo os elementos essenciais necessários para aquele tipo específico de negócio.

Tudo o que você precisa fazer como usuário é importar o design e alterar o conteúdo para atender aos seus requisitos específicos.

Aqui estão alguns dos nichos que estão disponíveis como pacotes de sites. A partir de agora, existem 31 pacotes de layout disponíveis com um total de 250 páginas projetadas.

  • Página inicial do restaurante - trata-se de um pack constituído por 8 páginas para disponibilizar de tudo o que um restaurante ou empresa alimentar para lançar a sua presença online, incluindo o horário de funcionamento no rodapé para fácil acesso pelos clientes.

 Pacote de layout do restaurante Divi

  • Agência de Design - o pacote de agência de design é um pacote de 9 páginas de páginas projetadas de maneira criativa e profissional para uma agência digital ou de design. Claro, destaque é dado ao trabalho e estilo, mostrando as habilidades do negócio de uma forma que converte
  • Página inicial da moda - uma indústria que certamente precisa ter uma ótima aparência online é o blog de moda. Este pacote de layout de 8 páginas se concentra em permitir que o blogueiro faça uma marca de sua imagem conforme necessário. É ótimo para uso por fotógrafos e outras empresas visuais.
  • Agência de Viagens - o design aqui tem um forte foco na ação do usuário que visita o site, pressionando e incentivando o visualizador atual a ligar ou reservar agora com atraentes botões de call to action.
  • Página inicial do casamento - uma maneira perfeita de lançar rapidamente uma vitrine de casamento. É claro que se concentra muito na estética e em muitos outros recursos personalizados específicos para casamentos.
  • Empresa de SaaS - outro tipo de negócio, geralmente startups, que normalmente tem pouco tempo a perder e precisa ser colocado em funcionamento rapidamente. Este pacote de layout oferece tudo de que precisam para começar a trabalhar e obter as informações necessárias.

Pacotes de layout Divi

Existem muitos outros layouts disponíveis, incluindo, mas não se limitando a:

  • Learning Management System
  • Cafeteria
  • Farmers Market
  • Estúdio de ioga ou fitness
  • Mercado de fotos
  • Redactor
  • Florista
  • Agência Web
  • Empresa de design de interiores
  • Negócio de pagamentos digitais
  • Ateliê de cerâmica e artesanato
  • Agência SEO
  • Consultoria de negócios
  • Conferência de design
  • Receitas de comida
  • Escritório de advocacia
  • Autor
  • etc., etc.

Conforme o tempo passa, ET continua adicionando mais e mais layouts à sua biblioteca para atender a nichos específicos. Mesmo que seu setor específico não tenha sido atendido agora, você definitivamente poderá personalizar um dos layouts existentes e projetado para atender às suas necessidades.

Confira todos os layouts agora

Beaver Builder Modelos de Página

Beaver Builder também vem com muitos modelos projetados profissionalmente. Você será solicitado a escolher um modelo ao criar uma nova postagem.

Também é possível alterar o modelo atual clicando no botão “Modelos”.

modelos de castores

Existem três tipos de layout:

  • Páginas de aterragem
  • Páginas de conteúdo
  • Micro páginas

As páginas de destino incluem modelos para produtos físicos, aplicativos, profissionais, restaurantes, tecnologia, moda, fotografia, celular, música, automotivo e assim por diante.

Páginas de conteúdo inclua modelos para as páginas necessárias do site, como sobre nós, serviços, portfólio, equipe, contato, perguntas frequentes, blog, etc. A maioria desses modelos está disponível em estilos diferentes.

Micro páginas são pequenas páginas que podem funcionar sozinhas ou ser incorporadas a outra página.

Como os modelos são fornecidos com uma imagem, você pode escolher facilmente o melhor de acordo com suas necessidades.

Vamos dar uma olhada mais aprofundada no que está disponível para você como cliente de Beaver Builder.

Páginas de aterragem

Beaver Builder projetou vários modelos de página de destino prontos para uso. Entre estes podemos encontrar:

  • Modelo de pequena empresa - com base no modelo Probiz, isso o ajudará a criar uma presença para uma pequena empresa rapidamente.
  • Modelo de fitness, ginásio ou desportivo - fitness e esporte são sempre um nicho em alta e o modelo The Body Factory é projetado especificamente para clientes neste setor. Ioga, academia ou qualquer indústria de condicionamento físico funcionam bem com isso.
  • Revista, Blogger, modelo de blogueiro de moda - Outra indústria que está sempre em alta, o modelo Fashion Freaks é perfeito como um design de alta qualidade que grita classe, sofisticação e luxo.
  • Advogado, modelo de escritório de advocacia - outro nicho quente, advogados e escritórios de advocacia são clientes lucrativos, que exigem uma presença que pode converter clientes com altos salários. A presença profissional na web pode ser facilmente adaptada a outras indústrias baseadas na prática.
    Mencionaremos apenas brevemente o resto dos modelos
    página inicial do castor
  • Modelo de portfólio de fotografia
  • Modelo de DJ / músico / banda
  • Modelo de restaurante / café
  • Modelo de layout de tela inteira
  • Criativo, modelo de agência da web
  • modelo de e-book
  • Modelo de educação ou universidade
  • Modelo de carros / automotivos
  • Modelo de aplicativo móvel
  • Modelo geral de negócios
  • Template de construção
  • Em breve modelo

É altamente recomendável que você dê uma olhada nas demonstrações disponíveis com cada um desses modelos, para ver como é fácil começar a usá-los.

Páginas de conteúdo

Embora os modelos de sites completos sejam fantásticos, às vezes ainda queremos ajustar ou criar páginas específicas. Por esta razão, Beaver Builder também tem muitas páginas de conteúdo que foram projetadas e prontas para uso.

Páginas de conteúdo do Beaver

Aqui estão algumas das páginas que estão disponíveis para uso:

  • Sobre nós (várias versões)
  • Nossos serviços 
  • Portfólio de fotos
  • Portfólio de design
  • Nossa equipe (várias versões)
  • Contato (várias versões)
  • Preços (várias versões)
  • Blog (várias versões)

Claro, esperamos que eles cresçam com o tempo.

As micropáginas oferecem seções de uma página ou páginas minimalistas, caso você precise delas.

micro páginas Beaver

Clique no link abaixo para ir diretamente para a página de modelos. 

Confira Beaver Builder Modelos

Beaver Builder vs Divi - Configurações do Construtor de Páginas

Agora que você tem uma ideia de quais módulos e modelos cada construtor de página oferece, vamos nos aprofundar um pouco mais nas configurações.

Divi Builder Configurações

A configuração deste plugin é muito simples.

Depois de instalar e ativar o plug-in, vá para Opções de pluginse forneça seu nome de usuário e chave de API na seção “Atualizações” para receber atualizações automáticas.

Chave Divi

Você pode ver configurações adicionais aqui, como configurações de API, integração de pós-tipo e avançado.

As configurações de API contêm opções para integração de fontes do Google e Google Maps.

Em Post Type Integration, você poderá habilitar ou desabilitar Divi builder em certos tipos de post.

Na guia Avançado, você pode encontrar opções para minificação, gerador de arquivo CSS estático, etc. e as opções para habilitar o editor WordPress clássico e o construtor de back-end Divi clássico.

O item mais novo aqui é a página “Theme Builder”.

Aqui, você pode encontrar os modelos de construtor de temas que construiu ou importou junto com opções para importá-los e exportá-los, visualizar o histórico de edição do construtor de temas e muito mais. Abordaremos esse novo recurso com mais detalhes posteriormente neste artigo.

Você encontrará uma lista de todos os layouts personalizados no Divi Library página. Existem botões separados para gerenciar a categoria de layout e para importar ou exportar os layouts. Vamos para Editor de função Divi para definir quanto acesso as funções de usuário diferentes terão.

Finalmente, no Centro de Suporte, você pode verificar o status do servidor do sistema, essencialmente, ele exibe algumas informações importantes sobre o seu servidor.

Se houver opções que não estão definidas para determinados valores recomendados, Divi irá notificá-lo sobre eles aqui para que você possa corrigi-los.

Aqui também é onde você pode configurar o “acesso remoto”, permitindo que a equipe de suporte do Elegant Theme acesse diretamente o seu painel de administração para ajudá-lo a corrigir quaisquer erros que possa ter.

Outros itens incluem modo de segurança e registro.

Beaver Builder Configurações

As opções de configuração para Beaver Builder estão localizados na página Configurações > Construtor de páginas. Forneça sua chave de licença na seção Licença para habilitar atualizações automáticas para o plug-in.

Em Módulos, você pode ativar ou desativar os módulos. Tipos de postagem permitem que você defina quais tipos de postagem podem ser usados BeaverBuilder. Em Templates, você pode decidir quais templates estarão disponíveis na interface do pagebuilder.

beaver builder opções de configurações

A seção Ícones permite que você decida quais ícones devem estar disponíveis na interface.

As opções disponíveis incluem

  • FonteIncrível,
  • Fundação, e
  • Dashicons. 

Este é um exemplo de como Beaver Builder permite que você personalize e mexa com todas as opções que você precisa. Se você não estiver satisfeito com o FontAwesome, escolha algo de que goste.

Você também encontrará seções separadas para limpar o cache, o que removerá qualquer CSS e Javascript gerado dinamicamente.

Finalmente, você encontrará uma opção para desinstalar Beaver Builder. Essas funções removem todos os dados relacionados ao BB de seu banco de dados WordPress - portanto, faça backups antes de usá-los e certifique-se de saber o que está fazendo.

Leitura recomendada: https://www.collectiveray.com/beaver-builder-vs-elementor

Beaver Builder vs Divi - Recursos adicionais

Que outras vantagens esses construtores de páginas oferecem?

Tema Divi

O plugin de Elegant Themes vem com vários outros recursos interessantes. Por exemplo, a Biblioteca do PageBuilder permite salvar módulos e layouts personalizados para que você possa usá-los novamente no futuro.

Além disso, também é possível importar ou exportar esses itens de e para outros sites.

As opções superiores de espaçamento de layout também merecem menção especial. Essas opções facilitam muito a aplicação do espaçamento exato que você deseja entre as linhas, elementos e seções.

Você encontrará opções dedicadas para definir a margem, preenchimento, espaçamento vertical e horizontal. Também é possível configurar as larguras de linha e coluna.

Biblioteca Divi

Em alguns casos, pode ser necessário usar o mesmo módulo em vários lugares. Você pode facilmente copiar e colar qualquer módulo, linha ou coluna em outras postagens ou páginas.

Além do mais, você pode marcá-los como itens globais.

Isso permite que você faça alterações em um único item global e as alterações também serão aplicadas automaticamente aos outros locais. 

Criador de temas Divi

Uma das maiores atualizações Elegant Themes lançado para a Divi nos últimos anos é o Theme Builder.

Esse recurso permite que você crie, projete e personalize todo o seu site. Não é mais apenas um construtor de páginas, é um construtor de temas completo.

Você pode criar cabeçalhos e rodapés personalizados globais ou definir um para áreas individuais do seu site.

Você também pode definir modelos de corpo personalizados que permitem construir modelos de produtos personalizados, modelos de postagem de blog, páginas 404, páginas de resultados de pesquisa, bem como páginas de arquivo personalizadas, como páginas de categorias personalizadas, páginas de autor personalizadas e muito mais.

Criador de temas Divi

O criador de temas estende o poder do criador de páginas a todo o seu site.

Ao criar um novo modelo, você tem acesso a todas as ferramentas e recursos do construtor de páginas, permitindo que você construa e projete da maneira que desejar.

Isso significa que você pode criar designs personalizados para cabeçalhos e rodapés, se desejar. Para complementar isso, o módulo de menu vem com melhorias, como opções de layout adicionais e controle total de design para ajudá-lo a construir belos cabeçalhos e rodapés com um menu personalizado.

Os novos modelos de corpo personalizados permitem que você altere todas as suas postagens, produtos ou design e estrutura da página de uma só vez.

Antes disso, você teria que ir a cada postagem, produto ou página e editá-los usando o construtor de páginas para fazer alterações. Agora, tudo que você precisa fazer é definir um modelo, aplicá-lo às áreas apropriadas do seu site e pronto.

Você pode até usar módulos WooCommerce para criar modelos de produtos personalizados para sua loja online. Existem também módulos de conteúdo dinâmico equipados com um pós-loop atualizado e opções de filtragem que você pode usar para criar páginas de arquivo personalizadas.

Claro, você também tem todos os meios para controlar onde e como seu modelo será aplicado. Você pode facilmente incluir ou excluir certos itens de um modelo por meio das caixas de seleção, como pode ser visto abaixo:

lógica condicional

A partir da versão 4.0, Divi não é mais um construtor de páginas, é um construtor de temas.

Ganhe 10% OFF no Divi até março de 2024

PS. A oferta acima está disponível apenas através do link acima em CollectiveRay

Beaver Builder

Por outro lado, Beaver Builder também tem alguns truques na manga.

Em primeiro lugar, a edição de front-end ao vivo é impressionante. Ele oferece uma experiência intuitiva na qual você pode editar a página e obter a saída exata sem adivinhar.

Ele também permite que você use os widgets padrão do WordPress e widgets personalizados em seus layouts.

Beaver Builder Widgets WordPress

O modo de editor será útil ao entregar um projeto ao cliente. Este modo permite que você limite as habilidades do cliente para se certificar de que ele não está fazendo nenhuma alteração indesejada no layout do núcleo.

Outra característica importante de Beaver Builder é que o conteúdo da página permanece intacto mesmo depois de desativar o plug-in.

Você perderá os estilos, mas a página ainda exibirá o conteúdo. Em contraste, a maioria dos outros construtores de página vai deixar você com uma confusão de códigos de acesso quando você desativa esse plug-in.

Visite a BeaverBuilder site do Network Development Group

Beaver Builder vs Divi - prós e contras

Todo produto, não importa quão bem projetado ou maduro, terá pontos fortes e fracos. Esses dois construtores de páginas não são diferentes.

Tema Divi

Prós

  1. Uma solução muito poderosa para criar qualquer tipo de layout,
  2. Novas atualizações de desempenho tornam o Divi mais rápido do que nunca,
  3. Preço atraente com acesso a muitos outros temas e plug-ins do WordPress - comprá-lo é um acéfalo, um excelente valor
  4. Muitos designs excelentes, com muitas opções de personalização,
  5. Construtor poderoso de temas,
  6. Documentação extensa e suporte excelente e responsivo

Desvantagens

  1. Tire algum tempo para se acostumar,
  2. O editor de front-end leva algum tempo para carregar e adicionar módulos às páginas é muito mais lento do que Beaver Builder
  3. Você está limitado aos módulos disponíveis e desenvolvidos pela ET (embora a versão 3.1 agora suporte uma API de desenvolvedor, o que significa que os desenvolvedores começarão a integrar seus plug-ins com ela)
  4. Não é possível remover os dados que adiciona ao banco de dados, tornando o afastamento do tema Divi uma dor

Beaver Builder

Prós

  1. Uma interface de usuário simples,
  2. O conteúdo permanece intacto mesmo após a desativação do plugin,
  3. Modo de editor exclusivo para clientes,
  4. Ele permite que você use widgets do WordPress nos layouts.
  5. IU rápida, ágil e responsiva, interface de fácil compreensão
  6. Grande seleção de modelos profissionais para ajudá-lo a começar com seu design
  7. Suporta widgets nativos do WordPress para que você possa usar qualquer coisa

Desvantagens

  1. Mais caro do que os outros criadores de páginas do WordPress

Divisão vs Beaver Builder - Preços

Ambos Beaver Builder e Divi são compatíveis com a GPL, o que significa que você pode usá-los em quantos sites precisar. produtos para que você possa usá-los em quantos sites desejar.

Existem três planos diferentes que você pode escolher com Beaver Builder de $ 99 chegando a $ 546. Cada plano oferece acesso total ao Beaver Builder plugin e todos os módulos e modelos, com as camadas mais altas oferecendo alguns recursos mais avançados, como Multisite, White labeling e Themer.

Com o Divi, você tem apenas duas opções, anualmente, a um preço padrão de $ 89, que requer uma compra anual, ou a opção vitalícia, de $ 249. Ambos têm exatamente o mesmo acesso, mas é claro, você perde acesso a suporte e atualizações uma vez que o ano passa.

Vamos dar uma olhada mais detalhada. 

Divi Builder

Divi Builder preços

Você tem que ser um Elegant Themes membro para usar seus plug-ins - e o acesso vem nas taxas abaixo. 

Existem dois planos disponíveis - Acesso Anual e Acesso Vitalício.

O plano de acesso anual custa $ 89 por ano. O acesso vitalício permite que você aproveite todos esses benefícios por um pagamento único de $ 249.

Felizmente, existe um EXCLUSIVO para CollectiveRay Oferta de 10% OFF acontecendo agora então arranje uma pechincha hoje. Já que você está nisso, pode muito bem obter o Acesso vitalício com este desconto por tempo limitado!

Ambos os planos oferecem acesso ilimitado a todos os temas e plug-ins desenvolvidos por ElegantThemes.

Você receberá atualizações oportunas, suporte premium e uma garantia de reembolso de 30 dias.

Ganhe 10% DE DESCONTO no Divi até março de 2024

 

Beaver Builder

Beaver Builder preços

Beaver Builder oferece quatro planos de preços. O plano Standard custa $ 99, o que permite que você use o plug-in em um site, oferece um ano de suporte e acesso a módulos e modelos premium.

O Pro custa $ 199, que inclui todos os benefícios do plano padrão, além do tema e compatibilidade multisite.

A agência custa $ 399 e desfruta de todos os recursos do Pro, juntamente com a permissão completa de etiqueta branca.

O Ultimate custa US$ 546 por ano e adiciona o Assistant Pro, uma opção de armazenamento baseada em nuvem para projetos e ativos.

Comprar BeaverBuilder Atual

Beaver Builder vs Divi - Perguntas Frequentes

Is Beaver Builder mais rápido do que Divi?

Beaver Builder não é mais rápido que o Divi. Costumava carregar o editor mais rápido e é mais rápido de usar e aprender. No entanto, uma nova atualização de desempenho da Divi transformou a maneira como funciona. Agora é um dos temas WordPress mais rápidos que você pode comprar.

Qual é melhor - Divi ou Elementor?

Divi é melhor que Elementor para algumas coisas, enquanto Elementor é mais forte em outras. Divi é melhor para acessar plug-ins e recursos, seu plano de agência e o poder absoluto do construtor de páginas. O Elementor é melhor por ser gratuito, com opções premium e muito fácil de usar.

Elementor é o melhor construtor de páginas?

Elementoou o melhor construtor de páginas se desejar um construtor de páginas acessível gratuitamente. Se você está procurando um construtor autônomo poderoso para fazer um ou dois sites, você simplesmente não pode ficar melhor do que o Elementor. É rápido, gratuito e fácil de usar. Do que mais você precisa?

Is Beaver Builder bom para SEO?

Sim, Beaver Builder tem todos os recursos necessários para controlar a otimização do mecanismo de pesquisa do seu site, incluindo rapidez, controle sobre cabeçalhos e tags de título e outros recursos necessários. 

Qual construtor de páginas você deve escolher?

Agora chegamos à parte (difícil) em que precisamos escolher entre esses construtores de páginas.

Como você notou, ambos os plugins oferecem uma excelente relação custo-benefício. Eles oferecem uma excelente interface de usuário e facilitam muito a criação de layouts personalizados.

Como os dois plug-ins têm seus casos de uso, você precisa descobrir qual deles atende mais aos seus requisitos. Deixe-me te ajudar com isso -

  • Escolha Divi se você deseja controle total sobre o layout. Depois de se acostumar com as opções disponíveis, é uma ferramenta muito poderosa que permite criar qualquer tipo de layout que desejar.
    Resultado final: 5 de 5.
  • Ir com Beaver Builder se você quiser começar rapidamente. Como este construtor de páginas não usa nenhum código de acesso, você pode facilmente descartar o design atual e tentar um novo com alguns cliques do mouse.
     Resultado final: 4.5 de 5

Se você está procurando outras opções, você também pode verificar Visual Composer or Elementor Pro, ambos cobertos separadamente neste site. Tanto o Elementor quanto o Visual Composer são jogadores importantes no nicho de construtor de páginas.

Palavras finais: Beaver Builder contra Divi

Divi e Beaver Builder são dois dos plug-ins do construtor de páginas mais populares no momento. Unless você usou ambos os plug-ins extensivamente, é realmente desafiador escolher um em vez do outro. Este post de comparação deve ajudá-lo a tomar essa decisão.

Acreditamos que Elegant Themes oferece mais valor no geral, visto que você está tendo acesso a uma tonelada de temas e plug-ins do WordPress, mas o BB também é uma ótima escolha. Além disso, a nova atualização de desempenho que eles introduziram mudou genuinamente o jogo. É seriamente difícil escolher Beaver Builder sobre Divi agora.

Ganhe 10% OFF no Divi até março de 2024

Comprar BeaverBuilder Atual

Então, qual você escolheu? Deixe-nos saber nos comentários abaixo. 

Sobre o autor
David Attard
David trabalha na indústria online e digital ou em torno dela há 21 anos. Ele tem vasta experiência nas indústrias de software e web design usando WordPress, Joomla e nichos que os cercam. Ele trabalhou com agências de desenvolvimento de software, empresas internacionais de software, agências de marketing locais e agora é Chefe de Operações de Marketing na Aphex Media – uma agência de SEO. Como consultor digital, seu foco é ajudar as empresas a obter uma vantagem competitiva usando uma combinação de seus sites e plataformas digitais disponíveis atualmente. Sua combinação de experiência em tecnologia combinada com uma forte visão de negócios traz uma vantagem competitiva aos seus escritos.

Mais uma coisa... Você sabia que as pessoas que compartilham coisas úteis como esta postagem também parecem FANTÁSTICAS? ;-)
. deixe um útil comente com suas ideias, depois compartilhe com seu (s) grupo (s) do Facebook, que considerariam isso útil e vamos colher os benefícios juntos. Obrigado por compartilhar e ser legal!

Divulgação: Esta página pode conter links para sites externos de produtos que amamos e recomendamos de todo o coração. Se você comprar produtos que sugerimos, podemos receber uma taxa de referência. Essas taxas não influenciam nossas recomendações e não aceitamos pagamentos por análises positivas.

Autor (es) em destaque em:  Logotipo da revista Inc   Logotipo do Sitepoint   Logotipo do CSS Tricks    logotipo do webdesignerdepot   Logotipo WPMU DEV   e muitos mais ...