Beaver Builder vs Divi - Qual WordPress Builder é bom para você e qual não é? (2021)

Beaver Builder vs Divi

Então, você está procurando um novo plug-in de construtor de páginas para WordPress, certo? Como você escolhe entre Beaver Builder vs Divi quando estes são os produtos mais populares do mercado?

Você fez uma pesquisa preliminar e descobriu que esses dois são as opções mais elogiadas para a construção de sites. Você também pode ter alguma experiência no uso de um desses plug-ins do construtor de páginas.

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

Nesse caso, você veio ao lugar certo. Na postagem de hoje em CollectiveRay, vamos explorar todos os recursos importantes desses plug-ins do construtor de páginas e compará-los frente a frente para ajudá-lo a encontrar o melhor para você - e onde você deve gastar seu dinheiro.

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, portanto, revisitamos este artigo em Outubro 2021 para atualizar todos os detalhes relevantes conforme necessário.

Beaver Builder vs 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 140 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.

Resumo

  Divi Builer 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
Frontend / Backend Ambos Ambos
Público-Alvo Desenvolvedor / Designer / Usuário Web Developer / Designer
Elementos suportados 46  31 
Código Limpo Sim Sim
Modelos / layouts pré-fabricados 140+ 50+
Recurso legal Teste A / B Beaver Themer
atuação
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.  
No geral
Vencedora 🏆  
Website Visite Elegant Themes (10% DE DESCONTO) Visite Beaver Builder 

Por que usar Beaver ou Divi Builder?

Logotipo do BBSe 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 WP podia criar páginas ou postagens. Ambos os itens de conteúdo são muito semelhantes.

Eles suportavam principalmente textos e imagens e o conteúdo comum do seu site, como vídeo, etc.

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ê quisesse controles deslizantes, botões de call-to-action, vídeos, galerias de imagens e outras coisas, você teria que adicionar cada vez mais plug-ins.

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 de WP começaram a perceber que a maioria das pessoas queria a capacidade de projetar e definir suas próprias páginas sem restrições - sem usar modelos, que faziam todos os sites parecerem iguais.

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.

Divi 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?

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, 701,600 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.

Designer vs Desenvolvedor

Beaver Builder tem um tipo diferente de usuário. Enquanto ElegantThemes visa aqueles que são less "técnico", o BB 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 o BB identifica e corrige esses problemas muito bem. 

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

Se você estiver interessado em como os produtos de ET se comparam a outras opções populares disponíveis, você pode querer considerar os dois artigos a seguir que também escrevemos:

https://www.collectiveray.com/wp/themes/divi-vs-genesis-website.html

e

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

Continuando na imagem acima, o BB ficaria 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 fora do caminho, vamos começar a cavar em cada produto, para que possamos ver os recursos, funções, PRÓS e CONTRAS do uso de qualquer um desses dois itens.

Vamos começar discutindo a interface do usuário de ambos os produtos.

Interface do usuário e experiência do usuário do WordPress PageBuilder

A Divi Builder Interface

ElegantThemes têm trabalhado em seu produto por vários anos neste momento. Com uma forte comunidade a apoiá-los, dando-lhes muitos comentários excelentes - esses caras sabem como ficar por dentro 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.

zH0xUAb3Yws

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á é esta:

interface divi

Clicando sobre o Utilização Divi Builder botão irá redirecioná-lo para o novo editor visual, que foi introduzido no Divi 3.18.

Esta função é uma resposta ao WordPress 5.0 após a introdução do novo editor Gutenberg, 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 do WordPress.

É 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 do WordPress clássico. Tudo que você precisa fazer é ir para Divi > Opções de plugins > Avançada.

habilitar editor clássico

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

Eles têm trabalhado recentemente para criar uma nova versão do Builder (que foi lançada como versão 3.0). O ponto crucial dessa versão é que, em vez de ter duas "visualizações" separadas, uma visualização de back-end e uma visualização ao vivo, as duas se fundem na mesma coisa. O editor de back-end mostra a versão ao vivo enquanto você trabalha.

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). 

Dê uma olhada na imagem abaixo - vê aquele design no back-end? É exatamente assim que ficará quando for publicado.

Para acessar o construtor de páginas do backend, vá para Postagens> Adicionar novo. 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 3 Pagebuilder Frontend

 

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 especializada apresenta nove estruturas de coluna especialmente criadas. Você pode adicionar várias linhas dentro de uma seção para ter várias estruturas de coluna.

colunas

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 em seus locais desejados. Existem botões dedicados para excluir, duplicar e abrir a seção de configurações de 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.

Para usar o construtor de páginas do frontend, visite a página que deseja editar e clique no botão “Habilitar Construtor Visual”.

Dependendo do conteúdo da página, pode demorar um pouco para carregar a interface (tenha paciência conosco, o editor de front-end é bastante pesado e precisa de tempo para fazer o download e renderizar).

Interface do frontend Divi

Depois que o criador de páginas frontal for carregado, você pode 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 muito bem com D&D.

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% DE DESCONTO no Divi até Outubro 2021

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

E quanto a ElegantThemes concorrente? Tem a mesma flexibilidade? Funciona em tempo real no front-end?

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

Como usar Beaver Builder

Não querendo ficar para trás na corrida para a dominação do pagebuilder, BB saiu com todas as armas em punho.

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

O BB oferece edição tanto no front-end quanto no back-end, portanto, não fica para trás a esse respeito.

Ele pode ser usado em páginas, postagens e na maioria dos outros tipos personalizados do WP, desde que tenham sido 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 assistir ao seguinte vídeo curto (2 minutos) sobre o uso do BB.

tCNDDQ7Jrs8

Essencialmente, no método de backend, depois de fazer login no painel primeiro, vá para Postagens> Adicionar novo e clique no botão “Construtor de páginas”. Isso abrirá a interface do pagebuilder - algo semelhante ao mostrado abaixo.

BB PageBuilder UI

A primeira etapa é escolher um modelo para a página. Você pode escolher qualquer um dos modelos prontos ou começar com o modelo em branco para criar seu próprio modelo. Depois de escolher o modelo, a próxima etapa é 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.

BeaverBuilder 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.

Estrutura de linha de castor

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ê receberá 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 “Construtor de páginas”. Isso abrirá a mesma interface de criação da página a partir do back-end.

BeaverBuilder interface de frontend

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 BeaverBuilder agora? Clique no botão abaixo. (Abre em uma nova janela)

Experimente o BeaverBuilder demonstração agora

 

Os módulos disponíveis para Beaver Builder / Divi

Divi Builder

Este plugin atualmente vem com 46 módulos de conteúdo, mas dada a escala de desenvolvimento e lançamentos de novas versões, você provavelmente verá mais quando estiver lendo este artigo.

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.

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,
  • procurar,
  • acordeão,
  • botão,
  • CTA,
  • áudio,
  • vídeo,
  • Código personalizado,
  • divisor

As escolhas avançadas de elementos incluem:

  • contador,
  • optin,
  • portfólio,
  • conecte-se,
  • mapa,
  • pessoa,
  • tabela de preços,
  • depoimento, e
  • 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 46 elementos suportados, estaríamos aqui para sempre.

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

Se você não encontrar esse módulo integrado, pode optar por elementos de terceiros desenvolvidos especificamente para requisitos específicos.

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 builder módulos

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 e
  3. Avançada.

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% DE DESCONTO no Divi até Outubro 2021

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

Beaver Builder

O BB divide os módulos em duas categorias -

  1. Módulos Básicos e
  2. Módulos Avançados

Os módulos básicos incluem:

  • editor de texto,
  • posição,
  • HTML,
  • botão,
  • imagem,
  • vídeo e assim por diante.

A outra categoria contém módulos mais avançados:

  • CTA,
  • controle deslizante de conteúdo,
  • cronômetro de contagem regressiva,
  • menu
  • controle deslizante de postagens,
  • guias,
  • etc.

Módulos BB

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

  1. Geral,
  2. Estilo e
  3. Avançada.

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

A Estilo 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 BeaverBuilder Website

A próxima parte do nosso Beaver Builder vs revisão Divi lidará com os modelos de página disponíveis ou layouts predefinidos. Isso é algo que certamente tornará sua vida simples e permitirá que você crie sites totalmente novos em questão de horas, até mesmo minutos, em vez de semanas.

Veja abaixo o que queremos dizer!

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.

Você pode usar um modelo clicando no botão “Carregar da biblioteca” no editor de postagem. Isso abrirá uma lista dos modelos disponíveis.

layout pré-construído divi

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 o ET os chama) layouts de página, mas o ponto principal é se eles são ou não bons e utilizáveis ​​para criar seus próprios designs.

Essencialmente, a ideia básica é esta - você carrega um layout predefinido, depois personaliza o texto, as imagens e outros conteúdos para se adequar ao seu negócio e - voila - você tem um site incrível "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 250 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!).

Y31_8DPOqlY

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.

 Página de destino do restaurante

  • 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.

Layouts 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
  • Copywriter
  • 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

O BB 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”.

BeaverBuilder modelos

Existem dois tipos de layouts -

  • Landing Pages e
  • Páginas de conteúdo.

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 do site necessárias, como sobre nós, serviços, portfólio, equipe, contato, FAQ, blog, etc. A maioria desses modelos está disponível em estilos diferentes. 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 a fundo no que está disponível para você como cliente do BB.

Páginas de aterragem

O BB desenvolveu 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
    Modelo DJ Beaver
  • 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 isso, o BB também possui muitas páginas de conteúdo pensadas e prontas para uso.

Páginas de conteúdo

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.

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

Confira BeaverBuilder modelos

 

Configurações do PageBuilder 

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.

divi builder opções de configurações

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 Divi Role Editor 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 do BB estão localizadas 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 plugin.

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

  • FontAwesome,
  • Fundação, e
  • Dashicons. 

Este é um exemplo de como o BB permite que você personalize e altere todas as opções de que precisa. Se você não gosta de usar 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

Características adicionais

Tema Divi

O plugin de Elegant Themes vem com vários outros recursos interessantes. Por exemplo, a Biblioteca PageBuilder permite salvar módulos e layouts personalizados para que você possa usá-los novamente no futuro. Além do mais, também é possível importar ou exportar esses itens de e para outros sites.

As opções de espaçamento de layout superior também exigem menção especial. Essas opções tornam muito mais fácil aplicar o 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 das linhas e colunas.

Opções de espaçamento divi

Em alguns casos, pode ser necessário usar o mesmo módulo em vários lugares. Você pode copiar e colar facilmente 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 serão aplicadas automaticamente aos outros locais também. 

Divi Theme Builder

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

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

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.

construtor de tema 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% DE DESCONTO no Divi até Outubro 2021

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

Beaver Builder

Por outro lado, o BB 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 onde você pode editar a página e obter o resultado exato sem qualquer suposição. Ele também permite que você use os widgets padrão do WordPress e os 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 do BB é que o conteúdo da página permanece intacto mesmo após a desativação do plugin.

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 BeaverBuilder site do Network Development Group

 

Prós e Contras

Tema Divi

Prós

  1. Uma solução muito poderosa para criar qualquer tipo de layout,
  2. Nova atualização de desempenho (agosto de 2021) torna 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

Contras

  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 o BB
  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 WP nativos para que você possa usar qualquer plug-in disponível para WP em BB

Contras

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

Preços de Divi vs Beaver Builder

 

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 $ 399. Cada plano ou licença 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

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 para você - Acesso anual e Acesso vitalício.

O plano de acesso anual custa US $ 89 por ano. Por outro lado, 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é Outubro 2021

 

Beaver Builder

Beaver Builder preços

Beaver Builder oferece três planos de preços. O plano Standard tem um preço de $ 99, o que permite que você use o plugin em um site, dá um ano de suporte e acesso a módulos e modelos premium.

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

Por último, o preço da Agency é de US $ 399 e oferece todos os recursos do Pro, juntamente com a permissão completa de etiquetagem branca.

Comprar BeaverBuilder Estamos

PERGUNTAS FREQUENTES

Qual é o melhor Divi ou Beaver Builder?

Divi é melhor que Beaver Builder em algumas situações. Divi é ideal se você deseja controle total sobre o design do seu site e planeja usá-lo por um longo tempo. Beaver Builder tem a vantagem de ser menor e fácil de manusear. Embora digamos que Divi é melhor, não há muito nele!

Is Beaver Builder mais rápido do que Divi?

Beaver Builder não é mais rápido do que Divi. Ele costumava carregar o editor mais rápido e é mais rápido de usar e aprender. No entanto, uma nova atualização de desempenho do Divi introduzida em agosto de 2021 transformou a maneira como o Divi 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?

 

 

 

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, os dois plug-ins oferecem um excelente valor pelo dinheiro. Eles oferecem uma interface de usuário excelente 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 vs 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% DE DESCONTO no Divi até Outubro 2021

Comprar BeaverBuilder Estamos

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

Sobre o autor
David Attard
Autor: David AttardSite: https://www.linkedin.com/in/dattard/
David tem trabalhado na ou em torno da indústria online / digital nos últimos 18 anos. Ele tem vasta experiência nas indústrias de software e web design usando WordPress, Joomla e nichos ao seu redor. Como consultor digital, seu foco é ajudar as empresas a obter uma vantagem competitiva usando uma combinação de seu website e plataformas digitais disponíveis hoje.

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 ...