Beaver Builder vs Divi 2022

Os editores O que você vê é o que você obtém (WYSIWYG) têm sido um grampo em software de computação desde a década de 1970, mas no mundo WordPress, estamos vendo cada vez mais proprietários de sites mudarem para construtores de páginas de arrastar e soltar para ajudá-los a criar estilos postagens de blog e páginas profissionais.

Essa adoção se intensificou desde que o WordPress introduziu o novo editor de blocos chamado Gutenberg no WordPress 5.0 em 2018. Claro, o Editor Clássico ainda está disponível para aqueles que preferem o antigo editor visual.

O novo editor de blocos é gratuito, possui uma interface amigável e muitos blocos de conteúdo úteis disponíveis para seleção.

Eu amo a simplicidade do editor de blocos do WordPress, mas não há como negar que é uma solução básica. Seus blocos de conteúdo têm poucas opções de personalização e não há um sistema de modelagem integrado. Isso restringe muito o que você pode criar.

Se você deseja levar seu site para o próximo nível, recomendo usar uma solução avançada de criação de páginas de arrastar e soltar, como Beaver Builder ou Divi.

Esses plugins responsivos do WordPress oferecem maior controle sobre como você estiliza suas postagens de blog, páginas e tipos de postagem personalizados.

Neste artigo, gostaria de mostrar como esses plugins de criação de páginas se comparam para ajudá-lo a ver qual é o melhor para você e seus projetos.

Uma versão lite do Beaver Builder está disponível no WordPress.org, mas como a versão gratuita não possui muitos recursos, este artigo se concentrará na versão completa do Beaver Builder.

A interface do Beaver Builder

O Beaver Builder é um editor de frontend que pode ser iniciado a partir de algumas áreas diferentes do WordPress.

Ao criar uma nova postagem de blog, página ou tipo de postagem personalizada no editor de blocos do WordPress, você verá uma opção para "Iniciar o Beaver Builder" ou "Usar o editor padrão".

O botão 'Launch Beaver Builder' não é exibido automaticamente no editor Gutenberg. Ele só aparece quando você adiciona um bloco Beaver Builder à sua página.

Se o bloco Beaver Builder não estiver disponível, verifique a página de configurações do Beaver Builder para garantir que o tipo de postagem correspondente esteja ativado.

O Beaver Builder também pode ser iniciado a partir do Classic Editor e da página de listagem principal de postagens, páginas e tipos de postagem personalizados.

Quando estiver logado, você verá uma opção para modificar uma página na barra de administração do WordPress também.

Quando o Beaver Builder for carregado, você verá um menu no lado direito que exibe os módulos disponíveis. Abas para linhas, modelos e layouts salvos também são exibidos aqui.

Clicar no símbolo X acima fecha o menu, mas você pode recarregar o menu clicando no símbolo + que agora é exibido.

No canto superior direito da página, você verá um lembrete de que sua página foi editada e possui alterações não publicadas. Se você clicar no botão Concluído, as opções serão exibidas para permitir que você descarte seu layout, salve o rascunho ou publique seu layout.

O lado superior esquerdo da página mostra a postagem, a página ou o tipo de postagem personalizada que você está editando. Clicar nele carregará o menu de ferramentas do Beaver Builder.

Existem muitas configurações e recursos escondidos neste menu.

A partir daqui, você pode publicar seu layout, salvar o layout como modelo, duplicar o layout, ver todas as suas revisões, verificar seu histórico de edições e muito mais.

As configurações globais e as configurações de Javascript e CSS também podem ser acessadas neste menu, e a parte inferior do menu exibe atalhos para a área de administração do WordPress e páginas de suporte.

À direita do menu de ferramentas há um sino de notificação que exibe atualizações de plugins e as últimas postagens do blog Beaver Builder.

Para adicionar um novo módulo ou linha ao seu layout, basta arrastá-lo e soltá-lo na área de tela principal.

Várias configurações de coluna pré-configuradas estão disponíveis para linhas junto com layouts de coluna salvos, linhas salvas e linhas pré-criadas.

Depois de adicionar novas linhas, um esboço da estrutura é exibido em sua página. Você pode arrastar e soltar um módulo de conteúdo em qualquer uma dessas caixas.

No canto superior esquerdo das linhas e módulos, você verá opções para mover o elemento para outra parte do seu layout. A linha ou módulo em questão também pode ser duplicado ou excluído daqui.

Linhas e colunas têm um botão de configurações e um botão de ações que permite redefinir as larguras de linha e coluna.

Larguras, cores, planos de fundo, bordas e muito mais podem ser ajustados na guia de estilo da caixa de configurações. Além de margens e preenchimento, a guia avançada permite restringir a visibilidade para usuários conectados e ajustar o ponto de interrupção para usuários móveis.

Demora um pouco para se familiarizar com qualquer construtor de páginas do WordPress, no entanto, o Beaver Builder é, sem dúvida, uma das soluções mais fáceis de aprender. Também é um dos mais rápidos, com as alterações que você faz carregando quase que instantaneamente.

O Beaver Builder permite que você estilize todos os aspectos do seu layout, mas, como você verá, o Divi oferece muito mais opções de personalização ao criar layouts.

A interface do Divi Builder

Temas elegantes usam a palavra Divi para descrever seu popular tema WordPress e o construtor de páginas de arrastar e soltar.

Isso causa um pouco de confusão entre aqueles que são novos no Elegant Themes, e é por isso que eles às vezes distinguem os produtos chamando o design de “Divi Theme” e o construtor de páginas “Divi Builder”.

Por enquanto, gostaria de me concentrar no Divi Builder. Este construtor de páginas é incorporado ao Divi Theme, mas também está disponível como um plugin WordPress autônomo para aqueles que desejam usá-lo com outros temas WordPress.

Depois que o Divi Builder for ativado, você verá uma opção para “Usar o Divi Builder” ao adicionar uma nova postagem, página ou tipo de postagem personalizada.

Isso iniciará o construtor visual de front-end, mas um editor de back-end chamado Legacy Builder também estará disponível.

Você pode alternar para o Divi Builder a qualquer momento no editor de blocos padrão do WordPress.

O Divi Builder também pode ser iniciado a partir das principais páginas de listagem de postagens, páginas e tipos de postagem personalizados.

Como o Beaver Builder, se você estiver logado, verá uma opção para habilitar o Divi Builder na barra de administração do WordPress.

Os temas elegantes também têm um bloco de layout Divi.

Este bloco permite que você insira qualquer layout Divi diretamente em um layout que você criou com o editor de blocos padrão do WordPress.

Ao iniciar o Divi Builder pela primeira vez, você será perguntado se deseja criar um layout do zero, escolher um layout pré-criado ou clonar outra página que você já criou.

Se você começar do zero, o Divi Builder carregará sua tela em branco e exibirá uma caixa para inserir uma nova linha.

Existem 20 linhas disponíveis para seleção, e cada uma tem uma estrutura de colunas diferente.

Depois de inserir uma linha, o Divi Builder solicita que você selecione um módulo para adicionar à sua página.

O Divi Builder então carrega a caixa de configurações para o módulo que você selecionou.

Se você é novo no Divi Builder, recomendo se familiarizar com o funcionamento do editor selecionando um layout pré-fabricado, pois ele oferece algo para você brincar.

Usuários experientes podem preferir começar com uma tela em branco, mas esteja ciente de que o menu principal não é carregado automaticamente quando você seleciona essa opção.

Para carregar o menu principal, clique no botão com os três pontos horizontais na parte inferior da página.

As opções do menu principal estão divididas em três colunas.

Você pode carregar as configurações do construtor por meio do ícone de três pontos verticais no lado esquerdo do menu.

Três modos de visualização diferentes podem ser adicionados ao seu menu a partir daqui: modo de foco, modo de clique e modo de grade. Esses modos alteram a forma como você interage com seu layout e faz alterações. Por exemplo, no modo de foco, basta passar o mouse sobre uma parte de sua página para destacar módulos, colunas, linhas e seções, e você pode fazer modificações.

Outras configurações na caixa de configurações do construtor incluem o modo de visualização padrão, intervalo de estado do histórico e fluxo de criação de página.

Se você criou um layout complexo, pode haver situações em que a parte errada da página seja destacada. Por exemplo, você pode querer mover uma coluna, mas acidentalmente seleciona a linha à qual ela pertence.

Uma maneira de resolver isso é usar o modo de visualização de wireframe. Isso remove elementos de design desnecessários de sua exibição para ajudá-lo a ver a estrutura de sua página com mais facilidade. É incrivelmente útil ao mover coisas dentro de um layout complexo.

O lado esquerdo do menu também tem opções para permitir que você veja seu design na área de trabalho, tablet e visualização móvel.

Existem sete opções no menu do meio. O botão X no meio fecha o menu.

À esquerda, você pode carregar um layout da biblioteca, salvar seu layout atual e limpar seu layout. À direita, você pode visualizar as configurações da página, o histórico de edição e a portabilidade.

A caixa de configurações de postagem/página permite alterar o título, o trecho, a imagem em destaque e as categorias. Uma série de configurações de design também estão disponíveis aqui, como espaçamento, paleta de cores, CSS personalizado e visibilidade.

A caixa de histórico de edição permite desfazer e refazer alterações recentes com facilidade e visualizar um histórico completo de todas as alterações feitas.

Os layouts podem ser exportados e importados no formato JSON por meio da caixa de configurações de portabilidade. Isso é útil para transferir layouts para outros sites.

Seu layout pode ser salvo e publicado no lado direito da página.

Tutoriais em vídeo e atalhos de teclado também podem ser exibidos através da caixa Divi Helper nesta área. Há também um recurso de pesquisa que ajuda a encontrar recursos e documentação.

As interfaces de usuário do Beaver Builder e do Divi Builder funcionam de maneira diferente, mas quando se trata de ajustar linhas e colunas, elas funcionam de maneira semelhante.

Ambas as soluções exibem as configurações no canto superior esquerdo e permitem mover, duplicar e ajustar linhas e colunas. Divi, no entanto, tem mais opções de personalização.

O Divi Builder tem um elemento acima das linhas, chamado de seções.

As seções podem conter várias linhas e cada linha pode conter várias colunas. Dá-lhe um pouco de flexibilidade extra com a forma como você constrói as páginas.

Nas versões anteriores do Divi Builder, os layouts eram criados diretamente do editor do WordPress, no entanto, o construtor visual de frontend agora é a maneira padrão de criar layouts com o Divi.

Felizmente, o editor antigo ainda está disponível no Divi Builder.

Para ativar o Legacy Builder, primeiro você precisa ir para a seção avançada da área de opções do plug-in Divi, desativar a experiência mais recente do Divi Builder e ativar o Classic Editor.

A interface do usuário do Legacy Builder é semelhante ao modo de visualização de estrutura de arame disponível no editor visual.

Embora não permita que você visualize as alterações feitas em tempo real, adoro o quão rápido e eficiente é. Tudo carrega um pouco mais rápido do que no editor frontend, e é mais fácil ver a estrutura da sua página.

O Beaver Builder carrega tudo um pouco mais rápido que o Divi Builder, e sua interface de usuário é mais fácil de entender, no entanto, o Divi Builder oferece muito mais configurações de personalização e recursos adicionais que estão faltando no Beaver Builder.

A inclusão do modo wireframe e do Legacy Builder também torna o Divi Builder uma solução mais flexível.

Para uma visão mais abrangente de como o Divi Builder funciona, confira nossa análise completa do Divi Builder.

Layouts pré-fabricados do Beaver Builder

Eu sou um grande fã de layouts pré-fabricados, pois eles reduzem bastante o tempo necessário para criar conteúdo elegante. Eles também ajudam você a entender como criar layouts avançados.

O Beaver Builder não oferece tantos layouts pré-fabricados quanto o Divi, mas a qualidade de cada modelo é tão alta quanto.

Modelos de página de destino e modelos de página de conteúdo estão disponíveis na guia de modelos do menu de conteúdo principal ao lado de todos os modelos salvos que você possui.

Os modelos de página de destino são modelos completos de página inteira. Um total de 15 modelos de página de destino estão disponíveis junto com um modelo de página de tela em branco.

Existem modelos para pequenas empresas, academias, advogados, músicos, fotógrafos, restaurantes, eBooks e muito mais.

Ao selecionar um modelo de página de destino, você será perguntado se deseja substituir o layout existente ou anexá-lo ao que já possui.

Layouts pré-fabricados são inseridos em seu layout em segundos.

Depois de adicionados, você pode ajustá-los como achar melhor e salvá-los como modelos personalizados.

Os modelos de página de conteúdo são modelos universais para parte de uma página que são adequados para qualquer tipo de site.

25 modelos de página de conteúdo estão disponíveis. Existem layouts para ajudá-lo a inserir uma área sobre, informações da equipe, serviços, formulário de contato, tabelas de preços, formulário de inscrição e muito mais.

O Beaver Builder também oferece dezenas de linhas pré-construídas. Esses layouts podem ser facilmente inseridos em qualquer parte da sua página.

Você os encontrará nas guias de linhas do menu de conteúdo principal.

Se você utilizar o sistema de modelagem do Beaver Builder, poderá reduzir bastante o tempo necessário para criar novos layouts.

Os layouts podem ser salvos a qualquer momento e reutilizados quantas vezes você desejar.

Todos os modelos salvos podem ser gerenciados no menu principal do administrador do Beaver Builder e editados posteriormente, se necessário.

Você pode salvar modelos, linhas, colunas e módulos, e cada layout salvo pode ser atribuído a categorias.

O Beaver Builder fez um trabalho fantástico integrando layouts pré-fabricados em sua interface de usuário. Os layouts podem ser inseridos em segundos e as personalizações podem ser salvas e usadas várias vezes.

Layouts pré-fabricados Divi

Assim como o Beaver Builder, o Divi oferece aos usuários uma ampla variedade de layouts pré-fabricados.

Mais de 1.100 pacotes de layout estão disponíveis para seleção.

150 desses layouts são pacotes de layout que incluem designs para várias áreas do seu site, como página sobre, blog, página de destino e galeria.

Conforme observado anteriormente, ao iniciar o Divi Builder em uma nova página, uma das opções disponíveis é escolher um layout pré-fabricado.

A Biblioteca Divi também pode ser carregada a partir do menu principal.

A Biblioteca Divi permite inserir layouts pré-criados, layouts salvos e páginas inteiras.

Você pode restringir sua pesquisa por um layout adequado usando a caixa de pesquisa ou selecionando uma das 13 categorias às quais os layouts são atribuídos.

Certifique-se de salvar seu layout atual antes de inserir um layout pré-criado, pois o Divi Builder o substituirá.

Os pacotes de layout destacam todos os layouts incluídos no pacote, no entanto, recomendo fortemente clicar no botão "Visualizar demonstração ao vivo" para ver exatamente como seu site ficará se você selecionar um design.

Para ajudar a ilustrar esse ponto, dê uma olhada na área de demonstração do design Divi Web Freelancer que é mostrado na captura de tela abaixo.

Dependendo da sua configuração de hospedagem, o Divi Builder pode levar até um minuto para importar todos os layouts em um pacote de layouts.

Depois de inserir um layout em sua página, você pode personalizá-lo e torná-lo seu alterando cores, adicionando módulos e removendo seções que não são relevantes para você.

Os layouts podem ser salvos na Biblioteca Divi a qualquer momento no menu principal do Divi.

Você pode nomear cada layout e agrupá-los em categorias.

O menu de administração do Divi leva à página principal de opções do plug-in, ao Divi Theme Builder, à Biblioteca Divi e a algumas outras páginas de configurações (que discutiremos mais tarde).

O Divi Theme Builder é uma ferramenta fantástica que permite criar modelos de página personalizados. Você pode atribuir os modelos a postagens, páginas e tipos de postagem personalizados.

Para cada modelo, você pode atribuir um layout ao cabeçalho, corpo e rodapé. Você pode especificar exatamente em quais áreas do seu site esses modelos devem ser usados.

Por exemplo, você pode criar um design exclusivo para o seu blog, mas excluí-lo de determinadas categorias de postagem. Você também pode criar modelos exclusivos para sua página de resultados de pesquisa, página 404, arquivos, página inicial e muito mais.

Todos os layouts salvos podem ser visualizados na página "Biblioteca Divi", vinculada ao menu principal do administrador do Divi.

Os layouts podem ser importados e exportados desta página. Você também pode gerenciar suas categorias de layout aqui.

Ao clicar para editar um layout na página principal da Biblioteca Divi, você será levado a uma visão geral do seu design no modo de visualização de estrutura de arame.

Esse modo é útil para ajustar a estrutura do seu layout, mas se você quiser fazer alterações mais específicas, poderá alternar para a visualização de desktop, tablet ou telefone. Isso permite que você modifique seu layout salvo usando o editor visual.

Se preferir, você pode iniciar o editor visual de frontend normal e fazer personalizações na própria página.

Lado a lado, não acredito que a qualidade dos layouts pré-fabricados do Divi Builder seja melhor do que os designs disponíveis no Beaver Builder, no entanto, toda a configuração no Divi Builder é significativamente melhor.

Os pacotes de layout do Divi Builder oferecem até uma dúzia de modelos para ajudá-lo a criar um site completo, enquanto o Beaver Builder oferece apenas layouts de página única e layouts para seções específicas da sua página.

Também há muito mais opções no Divi Builder, com o plug-in oferecendo 950 modelos de página de destino contra os 15 do Beaver Builder. Uma grande variedade de layouts de terceiros também está disponível para o Divi.

É importante notar, no entanto, que o Beaver Builder tende a inserir layouts em sua página um pouco mais rápido que o Divi Builder.

Confira a página Divi Layouts para ver quais layouts pré-fabricados estão disponíveis com o Divi Builder.

Módulos de conteúdo do Beaver Builder

Um total de 29 módulos estão disponíveis no Beaver Builder. Os módulos são divididos em seis categorias: Básico, Mídia, Ações, Layout, Informações e Postagens.

Há uma boa variedade de módulos para adicionar conteúdo rico, ajustar seu layout e extrair conteúdo do seu blog.

Um dos módulos da categoria layout é o módulo da barra lateral, que permite inserir widgets do WordPress. Isso abre muitas possibilidades para integrar funcionalidades em seus layouts de outros plugins do WordPress.

Quando um módulo for arrastado e solto em sua área de tela, sua caixa de configurações aparecerá.

Você encontrará configurações comuns em todos os módulos para estilo, espaçamento, visibilidade, animações e muito mais, no entanto, cada módulo possui configurações exclusivas para permitir que você altere o que é exibido.

Por exemplo, no módulo de mapa, há campos para inserir o endereço do mapa, a altura do mapa e o atributo do título do mapa.

O Beaver Builder não possui a maior coleção de módulos de conteúdo e não oferece tantas opções de personalização quanto o Divi.

Acredito, no entanto, que o Beaver Builder tem tudo o que você precisa para criar belos layouts, pois a funcionalidade ausente pode ser inserida em layouts por meio de widgets do WordPress.

Módulos de conteúdo do Divi Builder

38 módulos de conteúdo estão disponíveis para seleção no Divi Builder.

Juntamente com módulos essenciais, como imagem, vídeo, portfólio e depoimento, existem módulos úteis para adicionar contadores de barras, sinopses, controles deslizantes e chamadas para ações.

O Divi Builder também adiciona um novo tipo de postagem personalizado para projetos.

Assim como o Beaver Builder, o Divi possui um módulo de barra lateral para que você possa integrar widgets do WordPress em seus layouts.

O Divi Builder usa um sistema codificado por cores para ajudá-lo a criar layouts elegantes.

As seções são azuis, as linhas são verdes e os módulos são cinza escuro (quase preto).

Você pode adicionar um novo módulo passando o mouse sobre uma coluna e clicando no botão “Adicionar novo módulo”.

Como mostrei anteriormente, quando você seleciona um módulo, a caixa de configurações do módulo aparecerá automaticamente para que você possa inserir valores e ajustar o estilo.

Quaisquer personalizações que você fizer podem ser salvas na Biblioteca Divi. Isso pode economizar muito tempo ao criar páginas.

Por exemplo, você pode modificar o módulo de mapa para que ele exiba um mapa do endereço da sua empresa. Você pode salvar facilmente o mapa e inseri-lo em sua página sobre, formulário de contato, postagens de blog e muito mais.

O Divi Builder oferece mais opções de estilo e personalização do que o Beaver Builder e possui nove módulos de conteúdo adicionais, mas não acredito que alguém se sinta restrito ao que está disponível em qualquer um dos plugins do WordPress, principalmente porque os widgets do WordPress podem ser inseridos em layouts usando o módulo da barra lateral.

Configurando o Beaver Builder

A caixa de configurações globais pode ser carregada a partir do menu de ferramentas na interface do usuário do Beaver Builder.

Ele permite habilitar e desabilitar o cabeçalho da página e as margens e preenchimento de linhas, colunas e módulos. Layouts responsivos também podem ser ajustados nesta área, e há caixas para inserir código CSS e Javascript.

A página principal de configurações do Beaver Builder é dividida em várias seções.

Para receber atualizações automáticas de plugins, você precisa inserir sua chave de licença na seção de licença. Módulos e tipos de postagem podem ser habilitados e desabilitados na próxima seção.

O acesso ao sistema de templates pode ser ajustado na próxima seção. Você pode habilitar modelos principais, modelos de usuário ou todos os modelos. Os modelos também podem ser desativados.

A área de configurações de acesso do usuário permite definir quais grupos de usuários do WordPress podem usar o Beaver Builder. As permissões são divididas em cinco áreas diferentes, como acesso ao construtor e ao menu de administração do Beaver Builder.

A página de configurações gerais também permite ativar e desativar conjuntos de ícones, marca de plug-in, marca de tema e configurações de ajuda. O armazenamento em cache e a depuração estão disponíveis na seção de ferramentas.

Eu recomendo verificar a página de configurações do Beaver Builder depois de instalar o Beaver Builder, mas a maior parte da personalização que você fará ocorre na interface principal do Beaver Builder.

Configurando o Divi Builder

Como o Beaver Builder, a maior parte do seu tempo será gasto personalizando layouts no próprio editor Divi Builder, mas existem algumas configurações importantes que podem ser encontradas no menu principal de administração do Divi.

A página principal de opções do plug-in tem uma guia para inserir seu nome de usuário e chave de API do Elegant Themes. Você precisa concluir isso para receber atualizações automáticas do plug-in.

Na próxima guia, você pode inserir sua chave de API do Google. Isso é necessário se você quiser usar o módulo de mapa. O Google Fonts também pode ser desativado nesta página.

A próxima guia permite ativar e desativar o Divi Builder para tipos de postagem específicos do WordPress. Isso é útil se você deseja restringir o acesso ao Divi Builder para determinados tipos de postagem, como sua galeria.

Na guia avançada, você pode ativar e desativar a minificação de CSS e Javascript. Também é aqui que você pode ativar o editor do Legacy Builder.

O Divi Builder oferece controle total sobre o que cada grupo de usuários em seu site pode e não pode fazer.

Enquanto o Beaver Builder permite restringir o acesso a algumas áreas-chave, o Divi Builder permite definir exatamente quais recursos os usuários podem acessar.

Por exemplo, você pode impedir que os usuários carreguem layouts ou desativem recursos no Divi Builder.

O centro de suporte da Divi fornece um relatório sobre seu sistema. Isso pode ajudá-lo a diagnosticar quaisquer problemas com sua configuração de hospedagem.

Por exemplo, para meu site WordPress de teste, o relatório mostrou que minha instalação do WordPress tinha uma quantidade limitada de recursos.

O acesso remoto também está disponível nesta página. Isso pode ajudar a equipe de suporte da Elegant Themes a resolver quaisquer problemas que você tenha com o Divi Builder.

O centro de suporte também possui links para tutoriais em vídeo úteis e há um modo de segurança que desativa recursos que podem causar problemas com outros plugins e temas do WordPress.

Os erros também são exibidos nesta página, se WP_DEBUG_LOG estiver ativado.

O Divi Builder é um plugin WordPress simples de configurar, com apenas algumas configurações para verificar após a instalação.

O recurso de destaque na área de configurações é o Divi Role Editor. É algo que os proprietários de grandes sites WordPress com vários funcionários irão apreciar.

O tema Beaver Builder

Beaver Builder Theme é uma estrutura HTML5 e Bootstrap WordPress que está incluída nos planos Beaver Builder Pro e Agency.

É um design minimalista do WordPress que funciona como uma tela em branco para criar designs com o Beaver Builder. Ganchos e filtros estão disponíveis dentro do tema para ajudar os desenvolvedores a modificar o design do site e tem um ótimo suporte para WooCommerce.

Todas as configurações do Tema Beaver Builder estão contidas no WordPress Customizer.

O estilo e a posição podem ser ajustados para dezenas de áreas da sua página. Há também layouts para seu cabeçalho, menu de navegação, blog, arquivos, postagens de blog, páginas WooCommerce e rodapé.

Embora em sua essência, o Beaver Builder continue sendo um tema WordPress mínimo, os desenvolvedores se esforçaram para adicionar muitas opções extras de personalização.

Pegue o logotipo do seu site, por exemplo. Você pode fazer upload de uma imagem de logotipo normal, uma para dispositivos retina, logotipos fade-in para dispositivos regulares e dispositivos retina e outro logotipo para dispositivos móveis.

Em muitos outros temas do WordPress, diferentes partes do design, como cabeçalho, barra lateral e rodapé, podem impedir que o Beaver Builder exiba layouts corretamente. É por isso que muitos usuários do Beaver Builder mudaram para o Beaver Builder Theme.

É uma ótima opção se você deseja usar os layouts do Beaver Builder em seu site.

O Tema Divi

O Beaver Builder comercializa seu design como um tema de estrutura para o Beaver Builder, enquanto o Elegant Themes comercializa o Divi Theme como um tema versátil do WordPress tudo-em-um.

Isso destaca o quão influente o marketing pode ser, pois há mais semelhanças entre o Beaver Builder Theme e o Divi Theme do que as pessoas pensam.

No início, o Divi era um tema WordPress completo, no entanto, a maior parte da versatilidade que todos associados ao Divi Theme foram posteriormente migrados para o Divi Builder. Esta era, sem dúvida, a coisa certa a fazer.

Portanto, com a maioria das funcionalidades sendo incorporadas ao Divi Builder, o Divi Theme pode ser considerado uma estrutura como o Beaver Builder Theme. Portanto, se você possuir os dois produtos, poderá usar o Divi Theme com o Beaver Builder ou o Beaver Builder Theme com o Divi Builder.

Depois que o Divi Theme for ativado, você verá algumas mudanças sutis no menu de administração do Divi.

Isso inclui a substituição da página de opções do plugin por uma página de opções de tema e um link para o WordPress Customizer.

Além da área de configurações ser expandida, todo o resto permanece o mesmo.

Curiosamente, se o Divi Theme estiver ativado, o plug-in Divi Builder será desativado automaticamente. Isso é necessário, pois a funcionalidade do Divi Builder é construída diretamente no Divi Theme (e no tema Extra WordPress do Elegant Themes).

Você encontrará centenas de opções úteis no WordPress Customizer, espalhadas por cerca de uma dúzia de seções. Eles podem ser usados ​​para controlar áreas como cabeçalho, rodapé e barras laterais.

A área de conteúdo principal para postagens, páginas e tipos de postagem personalizados ainda é controlada pelo Divi Builder.

Quando se trata de personalizar o design do seu site, não acredito que o Divi Theme seja melhor ou pior do que o Beaver Builder Theme. Existem algumas áreas em que o Divi Theme oferece mais opções e algumas áreas em que o Beaver Builder Theme oferece mais.

Todas as opções de plug-in do Divi Builder foram integradas à área de opções mais extensa do Divi Theme.

Por exemplo, as configurações de tipo de postagem agora estão disponíveis na guia do construtor e as opções da página de configurações avançadas agora estão localizadas na página de opções gerais.

A página de configurações gerais também possui campos para ícones de mídia social, rolagem, código CSS personalizado e muito mais.

Opções adicionais também estão disponíveis para usuários do Divi Theme.

Há uma área de opções dedicada para o menu de navegação do seu site e uma página de layout onde você pode indicar quais recursos devem ser ativados em posts e páginas.

Há também páginas para adicionar um banner de 468 × 60 pixels e detalhes gerais de SEO sobre seu site.

Como o Beaver Builder Theme, o Divi Theme é um tema WordPress mínimo que foi otimizado para uso com o Divi Builder.

Eu recomendo usar este design se você quiser aproveitar a enorme variedade de layouts pré-fabricados do Divi.

O custo do Beaver Builder

Recursos e funcionalidades são dois fatores que você precisa considerar ao revisar o Beaver Builder e o Divi, mas você também precisa considerar o custo desses produtos e o orçamento disponível para seus projetos.

Muitas empresas premium do WordPress cobram mais pelo uso de seus produtos em sites adicionais. Por exemplo, o plano básico pode suportar um site, o plano intermediário pode suportar três sites e o plano avançado pode suportar dez sites.

Beaver Builder e Elegant Themes são mais generosos, oferecendo suporte e atualizações para um número ilimitado de sites.

Embora este artigo tenha se concentrado principalmente na versão premium do Beaver Builder, eu ainda recomendaria verificar o Beaver Builder Lite.

É uma boa solução para sites simples e também ajuda a ver como funciona a interface do Beaver Builder.

Observe, no entanto, que a versão gratuita do Beaver Builder não possui módulos úteis, como formulário de contato, tabela de preços e mapa. There is no access to the Beaver Builder templating system or pre-made layouts either.

For the vast majority of projects, the full version of Beaver Builder is a better fit than the lite version.

Three different premium plans are available: Standard, Pro, and Agency. All plans come with one year of premium support and access to premium modules and templates.

The standard plan retails at $99 per year. To get WordPress multisite support and access to the Beaver Builder Theme, you need to upgrade to the $199 per year Pro plan.

The $399 per year Agency plan adds white labeling. Web design companies may be interested in this plan as it allows you to rebrand the plugin as your own and change all references to Beaver Builder in templates and the admin area.

O Beaver Builder oferece uma garantia de reembolso de 30 dias.

Todos os membros do Beaver Builder também recebem um desconto de 40% após um ano. Isso reduz o preço dos planos da Beaver Builder nos anos subsequentes para US$ 59,40 por ano, US$ 119,40 por ano e US$ 239,40 por ano.

Se você não tiver certeza sobre qualquer aspecto do uso do Beaver Builder, recomendo verificar sua base de conhecimento detalhada. Você também pode pedir ajuda por meio de suporte por ticket e no fórum da comunidade Beaver Builder, no grupo Beaver Builder no Facebook e na sala Beaver Builder Slack.

O custo da divisão

A política de preços de uma associação Elegant Themes é mais direta.

Existem dois planos disponíveis e ambos os planos oferecem acesso total a todos os produtos Elegant Themes.

A assinatura anual do Elegant Themes custa US$ 89 por ano.

Assim como o Beaver Builder, você pode continuar a usar produtos como o Divi Builder assim que sua assinatura expirar, mas não receberá suporte e atualizações se não renovar.

Se você acha que renovará sua associação por alguns anos, considere obter o plano de acesso vitalício. Por uma taxa única de US$ 249, você receberá acesso vitalício, suporte e atualizações para todos os produtos Elegant Themes.

A Elegant Themes também oferece uma garantia de reembolso de 30 dias para todos os novos clientes.

Para ajudá-lo a entender melhor seus produtos, a Elegant Themes criou uma das áreas de documentação mais extensas que já vi. Existem centenas de tutoriais escritos e tutoriais em vídeo que explicam como os temas e plugins do Elegant Themes WordPress funcionam.

Os membros também podem solicitar ajuda por meio de suporte a tickets, e também há um grande fórum da comunidade, rede Meetup e um grupo popular no Facebook.

Comparar o custo do Beaver Builder e do Divi é difícil, pois eles têm modelos de preços ligeiramente diferentes.

Apesar de ser mais limitado, eu aprecio o fato de uma versão gratuita do Beaver Builder estar disponível, pois o Beaver Builder Lite é suficiente para blogs básicos e projetos de sites simples.

Acredito, no entanto, que a versão completa do Beaver Builder é a melhor opção para a maioria dos usuários do WordPress.

Por US $ 99, uma licença padrão do Beaver Builder custa US $ 10 a mais do que o Elegant Themes, no entanto, as renovações subsequentes custam apenas US $ 59,40 por ano.

Este é um desconto generoso para membros leais, no entanto, um plano vitalício da Elegant Themes ainda pode acabar sendo mais barato para muitos proprietários de sites.

Uma associação Elegant Themes também inclui o Divi Theme, enquanto você terá que pagar US $ 199 para obter acesso ao Beaver Builder Theme.

Mais importante ainda, uma associação Elegant Themes inclui cinco produtos de alta qualidade: Divi Theme, Divi Builder, o tema da revista WordPress Extra, o plug-in de e-mail do WordPress Bloom e o plug-in de mídia social WordPress Monarch.

Devido a isso, acredito que uma associação Elegant Themes oferece uma melhor relação custo-benefício para a maioria dos usuários do WordPress.

Pensamentos finais

Os construtores de páginas de arrastar e soltar podem ajudar os usuários do WordPress a criar belos layouts de sites em minutos por meio de uma interface amigável.

Em um artigo de comparação como este, é minha responsabilidade mostrar os pontos fortes e fracos do Beaver Builder e do Divi, porém é importante lembrar que ambas as soluções são produtos refinados e existem muitas semelhanças entre elas.

O processo de criação de novas linhas e colunas é semelhante em ambos os produtos, mas sinto que a interface do Beaver Builder é mais fácil de aprender e um pouco mais rápida também.

O Divi oferece muito mais opções de personalização e mais layouts pré-fabricados. Com cinco produtos incluídos em uma associação Elegant Themes, eu diria que também oferece uma melhor relação custo / benefício.

Espero que você tenha gostado de nossa análise detalhada do Beaver Builder e do Divi.

Para saber mais sobre o Beaver Builder, confira a página de vendas oficial ou leia nossa análise completa do Beaver Builder. Você também pode entender melhor como o Beaver Builder funciona visitando a página de demonstração do Beaver Builder ou testando a versão gratuita do plug-in.

Você pode aprender sobre como Divi no site Elegant Themes e em nossa análise completa do Divi Builder. Embora nenhuma versão gratuita do Divi Builder esteja disponível, você pode testar o plug-in na página de demonstração do Divi Builder. Isso ajudará você a ver o que o Divi Builder pode fazer.

Obrigado por ler.
Kevin