Visual Composer vs Beaver Builder

Nossa comparação de todos os principais construtores de páginas de arrastar e soltar do WordPress provou ser muito popular. O artigo destacou os melhores recursos das soluções gratuitas e premium de criação de páginas de arrastar e soltar.

Não tenho dúvidas de que você achará o artigo de comparação útil, no entanto, pensamos em colocar dois dos construtores de páginas favoritos da comunidade WordPress frente a frente e examinar seus pontos fortes e fracos com mais detalhes.

O Visual Composer foi o plugin do WordPress que realmente definiu o que são os construtores de páginas de arrastar e soltar e continua sendo o construtor de páginas de arrastar e soltar mais vendido para WordPress. O Beaver Builder é uma solução mais recente que se fortaleceu desde seu lançamento em 2014 e está realmente se destacando este ano.

Como essas grandes soluções se comparam? Vamos dar uma olhada mais de perto e ver.

Compositor Visual

O Visual Composer não é apenas o plugin WordPress mais vendido no CodeCanyon, mas também está incluído em um grande número de temas WordPress no ThemeForest. Isso ajuda a explicar por que o plug-in está sendo usado em mais de 500.000 sites.

O Visual Composer ajuda você a criar layouts responsivos em minutos usando uma interface amigável. Ele permite que você crie layouts no backend ou frontend do seu site. Funciona com qualquer tema WordPress e tem suporte para WordPress Multisite e WooCommerce.

Mais de dez pacotes de idiomas estão incluídos no plugin e tem suporte para o WordPress Multilingual Plugin. Uma enorme variedade de elementos de conteúdo e layouts predefinidos também são empacotados com o plug-in.

O Visual Composer é compatível com todos os tipos de postagem personalizados disponíveis. Isso significa que você pode usá-lo para modificar qualquer postagem de blog, página e tipos de postagem personalizados adicionados por meio de temas e plugins do WordPress.

Um dos recursos mais legais do Visual Composer é o quão flexível ele é. Existem muitas opções de desenvolvedor disponíveis no plugin e existem mais de cem complementos disponíveis para ele no CodeCanyon.

Fui uma das primeiras pessoas a testar e revisar o Visual Composer e, desde o seu lançamento, eles adicionaram mais recursos e funcionalidades a cada ano.

Usando o Visual Composer

Depois que o Visual Composer for instalado, você verá uma nova barra do Visual Composer nas telas de edição. Um carrega o editor de back-end, o outro carrega o editor de front-end (esta barra é exibida mesmo se você tiver desativado o editor visual do WordPress).

Quando você carrega o editor de backend, sua área de conteúdo é transformada em uma tela para construir sua página. Um botão intitulado “Modo Clássico” substitui o botão do editor de back-end que você clicou anteriormente e ajuda você a retornar ao modo de edição padrão do WordPress.

Na parte superior da interface há cinco botões: três à esquerda e dois à direita.

À esquerda, o ícone do Visual Composer leva você ao site oficial do plugin, o símbolo de adição permite adicionar elementos à sua página e o ícone T abre a caixa do modelo. À direita, há um ícone de configuração que abre uma caixa para adicionar código CSS personalizado e um botão para alternar para o editor frontend.

Se você ainda não adicionou nenhum conteúdo, verá uma explicação sobre como adicionar conteúdo rapidamente. Você pode optar por adicionar um elemento, adicionar um bloco de texto ou escolher um dos layouts predefinidos. Por exemplo, você pode adicionar uma página de destino ou página de produto com o clique de um botão.

No meu artigo de comparação de construtores de páginas de arrastar e soltar do WordPress, notei que os módulos de conteúdo têm muitos nomes. Alguns desenvolvedores os chamam de módulos, alguns os chamam de blocos, outros os chamam de widgets. O Visual Composer os chama de elementos. Todos eles se referem aos pequenos blocos de conteúdo que ajudam a construir seu layout.

O número de elementos disponíveis é impressionante. No total, a versão atual do Visual Composer oferece quarenta e oito elementos de conteúdo (esse número inclui widgets padrão do WordPress). Sete elementos de conteúdo obsoletos mais antigos também estão disponíveis e elementos de conteúdo adicionais podem ser adicionados por meio do uso de extensões de plug-in.

Você pode criar páginas complexas usando esses elementos. Você pode adicionar gráficos, galerias de imagens, vídeos, mapas, grades de postagem, ícones, botões de compartilhamento de mídia social e muito mais.

Adicionar elementos de conteúdo e colocá-los em linhas e colunas é simples. Linhas e elementos podem ser arrastados para onde você deseja colocá-los. O número de colunas exibidas em uma linha pode ser determinado selecionando uma das onze estruturas de coluna, por exemplo, 2/3 + 1/3. Alternativamente, você pode criar sua própria estrutura personalizada.

Existem opções para excluir elementos, colunas e linhas. Novos elementos podem ser adicionados a colunas e linhas selecionando o símbolo de mais. Você também pode clonar linhas inteiras de conteúdo.

Uma série de configurações estão disponíveis para colunas e linhas.

Na guia geral, existem opções para usar um plano de fundo de vídeo, esticar a linha/coluna e adicionar CSS personalizado. A guia de design permite que você estilize a coluna ou linha da maneira que desejar. Você pode definir a margem, borda, preenchimento e cores.

As configurações disponíveis para elementos individuais dependem do elemento que está sendo modificado. Um elemento básico, como um botão de curtir do Facebook, permite apenas selecionar o tipo de botão, enquanto elementos mais complexos podem ter dezenas de opções diferentes.

Qualquer layout que você criar pode ser salvo como um modelo e aplicado a outras páginas do seu site. Quarenta e quatro layouts predefinidos são fornecidos para ajudar você a começar. Isso inclui um modelo de perguntas frequentes, modelo de ajuda, modelo de serviços e vários modelos para sua página sobre.

Você pode ativar o editor frontend clicando no botão frontend em seu editor de postagem/página. Se você estiver logado em seu site, também verá um link “Editar com o Visual Composer” na barra de administração do WordPress na parte superior de cada página. Clicar neste link carregará o editor frontend para você editar essa página.

O editor de back-end e front-end funcionam de maneira semelhante. Você verá os mesmos botões na parte superior da página para adicionar elementos e abrir a caixa do modelo. No lado direito, você verá um botão que o leva de volta ao editor de backend e um botão de atualização para salvar as alterações feitas.

O botão de guias permite que você modifique sua página. Você pode fazer tudo o que puder no editor de back-end, como editar elementos e mover colunas e linhas.

Clicar no ícone da tela permite alterar sua visualização do modo desktop para o modo paisagem e retrato de tablets e smartphones. Isso é útil para ver como sua página ficará em dispositivos móveis.

Sempre achei o editor de back-end do Visual Composer muito mais fácil de usar do que o editor de front-end. Posso criar designs profissionais em minutos usando o editor de back-end, mas com o editor de front-end sinto que mover as coisas é mais desajeitado e menos fluido. Ele ainda funciona como deveria, mas simplesmente não parece tão amigável para mim.

No entanto, eu sei pela leitura dos comentários de outros usuários do Visual Composer que muitos preferem usar o editor frontend ao editor backend, então talvez seja uma questão de qual interface você está acostumado a usar (o editor frontend foi introduzido no Visual Composer muito mais tarde então tenho mais experiência com o editor de backend).

Configurações do compositor visual

A área Configurações do Visual Composer permite modificar muitos recursos e opções diferentes.

Na página de configurações gerais, você pode definir em quais tipos de postagem o Visual Composer estará ativo. Quaisquer tipos de postagem personalizados adicionais adicionados por meio de seu tema ou de plug-ins serão listados aqui. Você também pode desativar elementos de conteúdo responsivo e ativar subconjuntos de fontes do Google.

A parte central desta página permite controlar o acesso ao Visual Composer para cada grupo de usuários do WordPress. Você pode definir se um grupo de usuários vê o Visual Composer, se eles veem o Visual Composer e o editor padrão e se eles veem apenas o Visual Composer (ou seja, desabilitar o editor padrão).

Na página de opções de design, você pode alterar as cores padrão dos elementos de conteúdo. Você também pode modificar a margem na parte inferior dos elementos, o espaçamento entre as colunas e a largura da tela do celular.

O código CSS personalizado pode ser adicionado sem a necessidade de modificar os arquivos principais do plug-in.

Uma licença de produto é fornecida quando você compra o Visual Composer. É válido para um site e garante suporte contínuo e atualizações automáticas através da sua área de administração.

Shortcodes fornecidos por plugins de terceiros podem ser mapeados para elementos de conteúdo do Visual Composer.

Na página sobre, há uma página de boas-vindas que informa sobre as últimas adições ao plugin. Há também uma página de perguntas frequentes que tem links para muitos tutoriais excelentes e uma página de recursos com links para uma base de conhecimento, academia de vídeo e contas de mídia social dos desenvolvedores.

Construtor de grade avançado

O Visual Composer permite adicionar novos elementos de grade para os seguintes elementos de conteúdo: Post grid, post grade de alvenaria, grade de mídia e grade de mídia de alvenaria. Esses são os elementos de conteúdo que podem ser usados ​​para exibir postagens de blog, galerias e outros conteúdos em seu site.

O vídeo abaixo mostra exatamente como o construtor de grade funciona. Eu recomendo assistir para entender melhor como tudo se encaixa, pois quando você visita a página do construtor de grade pela primeira vez, não fica claro como isso pode ajudá-lo.

Preços do compositor visual

O Visual Composer é vendido por apenas US $ 34. Não há taxas de renovação anuais. Depois de comprar o plug-in, você pode receber suporte e atualizações indefinidamente.

Observe que, para se qualificar para suporte e atualizações automáticas, você precisa inserir sua chave de licença na área de configurações.

Tecnicamente, o Visual Composer não é compatível com GPL. Apesar do WordPress não permitir que o uso seja restrito, os desenvolvedores pedem a todos os clientes que comprem uma licença regular para cada site em que usam o Visual Composer.

Felizmente, o plug-in ainda funciona corretamente sem inserir sua chave de licença. Portanto, não há nada que o impeça de usar o plug-in em todos os sites que você possui.

Beaver Builder Construtor de páginas de arrastar e soltar

Assim como o Visual Composer, o Beaver Builder ajuda você a criar páginas profissionais facilmente usando uma interface de arrastar e soltar. Uma das maiores diferenças entre as duas soluções é que toda a edição com o Beaver Builder ocorre no frontend do seu site.

Todos os layouts são responsivos e o editor visual é compatível com postagens de blog, páginas e todos os outros tipos de postagem personalizados. Devido ao suporte de códigos de acesso e widgets, o Beaver Builder funciona bem com a maioria dos outros plugins do WordPress. Por exemplo, você pode integrar facilmente itens de outros plugins em seus layouts, como formulários, tabelas e galerias.

Beaver tem um bom suporte para WooCommerce e WordPress Multilingual Plugin e deve funcionar com praticamente qualquer tema WordPress. Ele também tem suporte para WordPress Multisite, mas infelizmente esse recurso não está incluído na licença padrão do Beaver Builder (mais informações sobre opções de preços posteriormente).

O recurso do Beaver Builder que realmente se destaca para mim é o seu sistema de templates de página. Ele permite que você crie grandes páginas detalhadas em segundos. Tudo o que você precisa fazer é selecionar o modelo de página desejado. Por exemplo, você pode criar uma página de contato comercial com o clique de um botão.

As licenças mais caras do Beaver Builder também vêm embaladas com o tema Beaver Builder WordPress.

Usando o Beaver Builder

O Beaver Builder se integra ao WordPress da mesma maneira que o Visual Composer. Depois que o plug-in for ativado, você poderá carregar o editor clicando na guia “Página Builder” em seu editor de postagem.

Alternativamente, se você estiver logado, você pode clicar no link “Page Builder” na barra de administração do WordPress na parte superior de cada página.

Quando o construtor de páginas é ativado pela primeira vez, uma sobreposição exibindo modelos de layout será exibida. Como o nome sugere, os modelos iniciais são projetados para serem usados ​​na página inicial do seu site.

Quatorze modelos exclusivos de layout de página inicial estão disponíveis. Como alternativa, você pode optar por usar uma página em branco.

Os modelos de layout de conteúdo ajudam você a criar páginas comuns rapidamente. Por exemplo, existem layouts para sua página sobre, sua página de contato e sua página de blog.

No total, existem treze modelos de conteúdo para escolher. Você pode, é claro, salvar qualquer página criada manualmente como um modelo e usá-la em outro lugar do seu site.

Beaver Builder tem uma interface amigável que não demora muito para entender.

Na barra de administração, há links no canto superior direito: Modelos, Ferramentas, Concluído e um ícone de ajuda. No lado direito estão menus suspensos para layouts de linha, módulos básicos, módulos avançados e widgets do WordPress.

O botão de modelos carrega a caixa de modelos de layout que destaquei anteriormente.

Clicar na caixa de ferramentas traz algumas opções. Duplicar a página irá gerar uma cópia do post/page/post-type com o mesmo layout. Há uma opção para salvar seu layout como um modelo também.

Selecionar "Editar configurações globais" carregará a caixa "Configurações do construtor de páginas". A partir daqui, você pode modificar as configurações do cabeçalho da página padrão, linhas, módulos e layout responsivo.

Clicar no botão concluído permite publicar as alterações feitas ou salvá-las como rascunho. Se você optar por descartar as alterações, todas as modificações feitas serão perdidas e a página será revertida para a última versão salva.

O ícone de ajuda traz opções para fazer um tour interativo, assistir a um vídeo tutorial de sete minutos e pular para a base de conhecimento ou fóruns do Beaver Builder.

Eu recomendo fazer o tour quando você carregar o Beaver Builder pela primeira vez. Ele lhe dará uma boa visão geral de como tudo funciona.

A primeira opção no menu do lado direito são os layouts de linha. Você pode optar por ter de uma a seis colunas de conteúdo. Barras laterais esquerda e direita também podem ser adicionadas.

Tudo o que você precisa fazer é selecionar as colunas ou a barra lateral desejada e arrastá-la para a área de conteúdo. Funciona muito bem.

Você pode excluir, duplicar ou mover linhas. Você também pode modificar as configurações de linha.

A exclusão de uma coluna reduzirá automaticamente o número de linhas nessa linha específica. Por exemplo, reduza de três colunas para duas etc.

As mesmas configurações estão disponíveis para linhas e colunas. Você pode ajustar a largura, o texto, mudar de uma cor de fundo para uma foto de fundo, modificar suas configurações de fundo e definir sua borda. Na guia avançada, você pode modificar as margens e o preenchimento, o layout responsivo e os seletores de CSS.

Você salvará suas alterações assim que clicar no botão Salvar. Achei tudo funcionando perfeitamente. Por exemplo, por padrão, a largura de uma linha de duas colunas será de 50% cada, mas se você ajustar uma para 70% de largura, a outra coluna mudará automaticamente para 30% de largura.

Existem cinco módulos básicos de conteúdo: Título, foto, separador, editor de texto e vídeo.

Como seria de esperar, basta arrastar e soltar os módulos de conteúdo em sua página na coluna e linha que desejar. Depois de fazer isso, você pode modificar as configurações desse módulo de conteúdo. Assim como o Visual Composer, as configurações exibidas dependem do módulo de conteúdo que você está modificando.

Você pode ficar um pouco confuso depois de adicionar seu primeiro módulo de conteúdo, pois o menu no lado direito da página desaparece. Para fazer o menu retornar, você precisa clicar no botão “Adicionar conteúdo” na parte superior da página.

Vinte e dois módulos avançados estão disponíveis. Isso inclui acordeões de postagem, controles deslizantes, tabelas de preços e formulários de assinatura.

Doze widgets padrão do WordPress também estão disponíveis. Isso traz o número total de módulos de conteúdo para trinta e nove.

Depois de criar sua página, você deve salvar o rascunho ou publicar a página. Eu também recomendo salvar seu layout como um modelo.

Tema do construtor de castores

O tema Beaver Builder está incluído nas versões profissional e de agência do Beaver Builder (mais informações sobre planos de preços posteriormente). O tema é essencialmente uma tela em branco que permite criar o site desejado.

Nos últimos anos, o WordPress tem incentivado os desenvolvedores de temas a integrar o personalizador de temas do WordPress em seu design. A taxa de adoção tem sido lenta, com a maioria dos desenvolvedores de temas ainda usando sua própria página de configurações de temas.

No entanto, os desenvolvedores do tema Beaver Builder adotaram o personalizador de temas. Todas as opções e configurações de tema podem ser encontradas lá. Isso se encaixa muito bem com o plug-in Beaver Builder WordPress, pois significa que todas as alterações que você faz no seu site podem ser visualizadas em tempo real.

Há uma enorme quantidade de opções de configuração disponíveis. Você pode modificar seu cabeçalho, rodapé, widgets, cores e muito mais. Uma ferramenta de importação e exportação também está incluída.

Fiquei satisfeito com o número de opções oferecidas e achei muito fácil alterar cores, planos de fundo e fontes.

É claro que o tema Beaver Builder foi construído para usuários do plugin, pois o tema em si é muito básico. Ele permite que você personalize uma enorme quantidade de configurações do seu design, mas há poucas opções para alterar a estrutura do seu site. A esse respeito, o tema parece datado para mim.

Existem, no entanto, dez predefinições de temas diferentes disponíveis. Essas predefinições alterarão o esquema de cores do seu site.

Embora o tema Beaver Builder seja uma boa adição, ele não possui os recursos e extras que a maioria dos temas modernos do WordPress oferece. Para o dinheiro extra que o Beaver Builder deseja para este tema, seria melhor comprar um tema WordPress completo, como o Divi, pois oferece muito mais.

Configurações do Construtor de Páginas

A área de configurações do plug-in Beaver Builder é exibida em uma página. Dez seções são exibidas no menu.

A primeira seção é uma opção para inserir sua chave de licença para receber atualizações e suporte remotos. O plug-in ainda funcionará corretamente se você não inserir sua chave.

Todos os módulos básicos e avançados podem ser desabilitados na seção de módulos.

Você também pode desabilitar os widgets do WordPress para seleção, mas não há opção para desabilitar os widgets individualmente.

Na seção de modelos, você pode habilitar todos os modelos, habilitar apenas os modelos principais, habilitar os modelos de usuário (ou seja, os modelos que você salvou) e desabilitar todos os modelos.

Há também opções para editar os modelos do construtor de páginas na área de administração e substituir os modelos principais.

Todos os tipos de postagem disponíveis em seu site WordPress são exibidos na seção de tipos de postagem. Você pode desabilitar qualquer tipo de postagem que você não deseja que o Beaver Builder esteja ativo.

Três conjuntos de ícones diferentes estão incluídos no plugin. Estes podem ser desabilitados na seção de ícones. Há uma opção para fazer upload de seu próprio conjunto de ícones também.

Na seção de edição, você pode definir o nível de capacidade do WordPress necessário para editar o Beaver Builder.

A etiqueta branca está disponível para aqueles que adquirirem a licença de agência do Beaver Builder. Você pode inserir sua própria marca e definir o ícone da sua própria empresa.

Falei anteriormente sobre o que acontece quando você clica no ícone de ajuda no construtor de páginas. Você pode desabilitar este ícone se desejar. Como alternativa, você pode desativar itens individuais. O URL do vídeo de ajuda, base de conhecimento e fóruns também podem ser definidos.

Se você transferiu seu site para um novo plano de hospedagem, pode ser necessário limpar o cache do plug-in.

Fiquei satisfeito ao ver uma opção de desinstalação incluída no Beaver Builder. Clicar no botão de desinstalação removerá o plug-in e todos os dados associados a ele.

Como você pode ver, o Beaver Builder tem muitas opções úteis para configurar na página de configurações. A única coisa que eu acho que realmente precisa é a capacidade de modificar permissões com base na função do usuário (é algo que o Visual Composer tem).

Preços do Beaver Builder

Os desenvolvedores do Beaver Builder adotaram a popular estratégia de preços de três opções de licença diferentes. As opções são padrão, profissional e agência.

Todas as licenças permitem que você use o Beaver Builder em um número ilimitado de sites pelo tempo que desejar. O suporte e as atualizações são fornecidos por um ano e os anos subsequentes estão disponíveis com uma taxa de desconto de 40% do preço original (embora você possa continuar usando o plug-in se não renovar).

A equipe de suporte também ajudará você a criar módulos personalizados para o seu site.

Uma licença padrão para o Beaver Builder custa US$ 99. Esta licença fornece uma cópia completa do plug-in Beaver Builder, mas não inclui o tema Beaver Builder WordPress ou suporte para WordPress Multisite. Para receber essas duas adições, você precisa atualizar para a licença pro que custa US$ 199.

A licença mais cara é agência. Que custa US $ 399. Oferece tudo o que a licença profissional oferece, mas também oferece recursos de marca branca. Você tem permissão para substituir todas as referências ao Beaver Builder pelo nome da sua própria empresa e a capacidade de modificar os modelos de página principais do Beaver Builder.

A menos que você precise de suporte para WordPress Multisite, acredito que a licença padrão de US $ 99 oferece tudo o que você precisa, pois o tema Beaver Builder não vale a pena pagar US $ 100 a mais.

Visual Composer vs Beaver Builder: Resumo

Como você viu, o Visual Composer e o Beaver Builder têm seus pontos fortes e fracos. Pessoalmente, não sinto que haja muito entre as duas soluções no que diz respeito à criação de layouts, pois ambas podem ser usadas para criar sites com ótima aparência.

Se você preferir criar layouts no frontend do seu site, acredito que o Beaver Builder o supere um pouco, pois a interface é mais fluida (embora não haja uma grande quantidade entre eles).

Se você preferir criar layouts no back-end do seu site, o Visual Composer é o ideal para você, pois o Beaver Builder não oferece essa funcionalidade.

Após criar layouts com as duas soluções, cheguei à conclusão de que prefiro criar layouts no backend usando o Visual Composer. Isso pode ser em parte devido ao fato de eu ter mais experiência com o plugin, mas senti que poderia criar as páginas que queria mais rapidamente usando o Visual Composer. No entanto, acredito que realmente depende de sua preferência sobre qual interface você prefere, pois embora o Beaver Builder possa não parecer tão profissional, achei sua interface simples um prazer de usar.

Para ajudá-lo a decidir, vamos recapitular rapidamente os prós e contras de ambos os plugins.

Profissionais do Visual Composer

• Significativamente mais barato que o Beaver Builder
• Permite criar layouts no back-end e front-end do seu site
• Tem uma gama maior de módulos de conteúdo em oferta
• Oferece muitas opções de desenvolvedor e há uma vasta gama de plugins do WordPress disponíveis que adicionam funcionalidades adicionais

Contras do compositor visual

• O plugin não é compatível com GPL e os desenvolvedores esperam que você compre uma licença do Visual Composer para cada site que você possui (embora tecnicamente você possa usar o plugin em vários sites de qualquer maneira)
• O editor frontend poderia ser um pouco mais polido

Profissionais do Beaver Builder

• Tem uma interface amigável que é muito fácil de entender
• Pode ser usado em um número ilimitado de sites
• Tem uma boa variedade de módulos de conteúdo e widgets

Contras do Beaver Builder

• Mais caro que o Visual Composer
• Você só pode editar layouts no front-end do seu site
• As licenças profissionais e de agência com preços mais altos não justificam seu custo adicional (principalmente porque o suporte multisite vem como padrão com o Visual Composer)

Espero que você tenha achado este artigo de comparação útil. Para saber mais sobre esses plugins do WordPress, visite as páginas de informações do Visual Composer e do Beaver Builder.

Obrigado por ler.

Kevin