Revisão do Divi Builder: um construtor de páginas WordPress moderno

O Divi Builder é legitimamente considerado um dos melhores construtores de páginas de arrastar e soltar do mercado. Este popular plugin WordPress permite que você crie layouts de sites responsivos complexos em minutos sem usar nenhum código.

Portanto, mesmo que você não tenha experiência em projetar sites, você pode criar belos sites com o Divi Builder e introduzir mídia avançada em seu conteúdo, como imagens, texto elegante, vídeos, formulários, tabelas e muito mais.

Neste artigo, gostaria de mostrar como você pode usar o Divi Builder para criar layouts e páginas profissionais de sites.

Isso lhe dará uma melhor compreensão de por que tantos proprietários de sites usam este plugin WordPress.

O que a Divi Builder oferece?

No final de 2018, o WordPress lançou a versão 5.0 de seu software. Este foi um lançamento significativo, pois substituiu o antigo editor WYSIWYG (O que você vê é o que você obtém) por um novo editor de blocos de arrastar e soltar chamado Gutenberg.

Agora que o WordPress vem com um construtor de páginas de arrastar e soltar, você pode estar se perguntando por que alguém quer comprar uma solução alternativa de construção de páginas, como o Divi Builder.

Gosto da simplicidade do novo editor de blocos do WordPress, no entanto, se você já o usou, saberá que é uma solução básica que possui muitas restrições e poucas opções de personalização.

Em contraste, as possibilidades com o Divi são ilimitadas. Ele pode ser usado para criar tudo, desde designs de blog simples até lojas online complexas e sites de empresas. Realmente leva a construção de páginas a um nível totalmente novo.

O Divi Builder foi lançado em 2015 como uma solução autônoma de criação de páginas que funciona com qualquer tema do WordPress. Anteriormente, essa funcionalidade só podia ser usada no tema Divi WordPress, lançado pela Elegant Themes dois anos antes.

O plugin foi continuamente expandido e refinado ao longo dos anos. A Elegant Themes está publicando constantemente atualizações em seu blog que detalham correções de bugs, ajustes e novas funcionalidades importantes.

Um bom exemplo de evolução do Divi Builder é o construtor visual. Nas versões anteriores do Divi Builder, os layouts personalizados eram criados no editor do WordPress. Um “Visual Builder” fácil de usar foi adicionado posteriormente para ajudá-lo a criar layouts no frontend do seu site.

O construtor visual ocupou o centro do palco como a principal interface de usuário do Divi Builder, no entanto, você ainda pode criar layouts no back-end usando o construtor legado, se desejar (mais sobre isso posteriormente).

O Divi Builder possui um sistema de biblioteca que permite salvar qualquer layout que você criar. Você pode carregar layouts de sua biblioteca quando precisar deles e ajustá-los para se adequar à página em que está usando.

O plug-in vem com mais de 1.000 layouts pré-fabricados impressionantes e mais estão sendo lançados através do Divi Marketplace oficial e mercados de terceiros.

Esses designs são pontos de partida fantásticos para seus próprios layouts personalizados e designs de sites. Sou um grande fã deles, pois reduzem drasticamente o tempo necessário para criar um layout exclusivo.

O verdadeiro ponto de venda do Divi Builder é a personalização.

Depois de passar algum tempo aprendendo como o Divi Builder funciona, você começa a apreciar a versatilidade do plug-in. Cada elemento em sua página pode ser ajustado, seja estilo, módulos, linhas, colunas ou qualquer outra coisa.

Simplificando, se estiver na página, você pode alterá-lo.

O Divi Builder tem um ótimo suporte para WooCommerce; A Elegant Themes chama essa integração de “WooBuilder”.

Usando o Divi Builder, você pode criar layouts personalizados para páginas de produtos e adicionar módulos de conteúdo específicos do WooCommerce. Layouts pré-fabricados para lojas online também estão disponíveis.

Vamos dar uma olhada em como o Divi Builder funciona…

Iniciando o Visual Builder

Depois que o plug-in Divi Builder WordPress for ativado em seu site, você verá um botão “Usar o Divi Builder” na parte superior de suas postagens, páginas e tipos de postagem personalizados.

Uma pequena área de configurações também pode ser acessada no editor do WordPress que permite modificar a largura do seu conteúdo.

Se você entrar em uma postagem de blog ou página e clicar no botão Divi Builder, verá uma mensagem informando que “Este layout é construído com Divi”.

Você precisa clicar neste botão para iniciar o Divi Builder no frontend do seu site.

Esteja ciente, no entanto, que se você desabilitar a configuração do editor visual na tela do seu perfil do WordPress, o Divi Builder não funcionará.

Se você estiver criando uma nova postagem de blog ou página, terá a opção de usar o Divi Builder ou o editor padrão do WordPress.

Como alternativa, você pode iniciar o Divi Builder diretamente do frontend do seu site, na barra de administração do WordPress. O link “Ativar Visual Builder” será exibido em seu site se você estiver logado.

Embora o Divi Builder seja geralmente usado pelos usuários do WordPress como substituto do editor padrão do WordPress, ele pode funcionar em harmonia com o editor Gutenberg usando o Divi Layout Block.

O Divi Layout Block pode ser inserido em qualquer área da sua página e ser colocado ao lado de blocos regulares do editor WordPress.

Vários blocos de layout Divi podem ser inseridos em seu conteúdo. Você pode criar layouts totalmente novos dentro do bloco ou carregar layouts salvos anteriormente da sua Biblioteca Divi.

Como você pode ver, o Divi Builder complementa o WordPress incrivelmente bem, não assumindo todo o seu site. Você só precisa usar o Divi Builder quando precisar.

Os belos layouts de Divi

Quando o Divi Builder é iniciado, você recebe três opções.

Você pode optar por criar um novo layout do zero, escolher um layout predefinido ou clonar uma página existente.

Se você escolher um layout pré-fabricado, a Biblioteca Divi carregará e mostrará todos os designs pré-fabricados. Não se preocupe se você fechar isso acidentalmente, pois ele pode ser carregado no menu principal do Divi Builder a qualquer momento.

No momento da redação deste artigo, existem mais de 1.100 layouts disponíveis e 149 pacotes de layout. Os designs são divididos em 13 categorias: Arte e Design, Negócios, Comunidade e Sem Fins Lucrativos, Educação, Eventos, Moda e Beleza, Comida e Bebida, Saúde e Fitness, Estilo de Vida, Loja Online, Serviços, Simples e Tecnologia.

Se preferir, você pode simplesmente pesquisar na biblioteca de layouts pré-criados. Você também pode visualizar seus layouts salvos e páginas existentes nesta área.

Um pacote de layout é uma coleção de layouts que possui designs para várias áreas do seu site. Por exemplo, pode incluir um layout para sua página inicial, um para seu blog, um para sua página sobre e outro para sua loja.

Clicar no botão de demonstração carregará uma visualização ao vivo do design. Você pode ver demonstrações de todos os layouts na página Divi Layout Packs.

Se você clicar em “Usar este layout”, o Divi Builder começará a importar o layout ou pacote de layout em questão.

Como todas as soluções de criação de páginas do WordPress, o Divi Builder insere layouts diretamente na área de conteúdo principal de postagens, páginas e tipos de postagem personalizados.

Portanto, se você importar um layout para uma postagem de blog, uma barra lateral será exibida, a menos que você a remova manualmente. Nas páginas, esse processo é mais direto, pois a maioria dos temas do WordPress apresenta um modelo de página de largura total ou modelo de página de destino que remove a barra lateral.

Depois de importar um layout, você pode começar a personalizar o design para torná-lo seu. Quaisquer alterações feitas podem ser salvas e reutilizadas sempre que você quiser.

Os layouts também podem ser categorizados, algo que você achará útil à medida que sua biblioteca de layouts crescer.

O menu principal de administração do Divi tem links para o Divi Theme Builder e a Divi Library.

O Divi Theme Builder permite criar modelos de página exclusivos com cabeçalho, corpo e rodapé definidos.

Você pode atribuir qualquer layout aos seus modelos e definir exatamente quais áreas do seu site devem ser exibidas.

Por exemplo, você pode criar um modelo para sua página inicial e blog, um para sua loja online, um para páginas de erro 404 e outro para uma série de postagens de blog que você publicou.

Cada layout que você salvar será exibido na página principal da Biblioteca Divi.

Nessa área, você pode acessar todos os layouts, modificar categorias de layout e importar e exportar layouts.

Quando você escolhe editar um layout na página de layout principal, seu layout será mostrado em “Wireframe View”.

Esse modo se assemelha à aparência do construtor legado. Você pode voltar para o construtor visual de front-end, se desejar, mas deve descobrir que essa é uma ótima maneira de visualizar a estrutura do seu layout e fazer algumas alterações rápidas.

A grande coleção de layouts pré-fabricados do Divi Builder ajudará você a criar designs fantásticos em minutos. Eles são um ótimo ponto de partida para seus próprios layouts personalizados e, navegando pelos layouts disponíveis, você pode aprender mais sobre como o Divi Builder funciona.

Sem dúvida, o sistema de templates Divi Library e Divi Theme Builder são a espinha dorsal do Divi Builder e uma das razões pelas quais o Divi é tão versátil e porque os designs profissionais podem ser criados tão rapidamente. É um recurso que ainda está faltando em soluções alternativas, como o editor de blocos padrão do WordPress.

A interface do Visual Builder

Cada construtor de páginas do WordPress funciona de maneira diferente, portanto, você precisa se familiarizar com o funcionamento do construtor visual do Divi Builder.

A interface principal do Divi Builder é exibida na parte inferior de cada página. Quando o menu estiver minimizado, apenas um botão com três pontos é exibido.

Clicar no botão com três pontos carrega a interface principal.

Você verá muitas opções sendo exibidas no lado esquerdo, no meio e no lado direito da página.

No lado esquerdo, há seis botões. O botão com os três pontos verticais carrega o menu de configurações do construtor visual.

Este menu permite que você adicione três botões adicionais ao menu para o modo de foco, modo de clique e modo de grade. O modo de foco mostrará opções para diferentes partes da sua página quando você passar o mouse sobre elas, enquanto o modo de clique exige que você clique nessa parte específica da página. O menu de grade mostra tudo de uma vez.

Existem várias outras opções aqui para alterar os modos de visualização padrão e ativar/desativar os principais recursos.

Os outros botões no lado esquerdo do construtor visual são para visualização de estrutura de arame, zoom in e out do seu design e visualização de sua página em desktop, tablet e dispositivos móveis.

Todos esses recursos podem ajudá-lo a ver como sua página é construída e como ela fica em muitas situações diferentes.

Eu sou um grande fã do modo de visualização wireframe, pois ele remove todos os elementos de design e mostra como a página é estruturada. Isso é particularmente útil ao mover as coisas e alterar a forma como as coisas são posicionadas.

Existem sete botões no meio da interface do construtor visual: três à esquerda, três à direita e um grande X no meio que fecha o menu.

O primeiro botão à esquerda carrega a Biblioteca Divi, o segundo salva os layouts em sua biblioteca e o terceiro limpa o layout da página.

Do outro lado, você verá botões para configurações de página, histórico de edição e portabilidade.

A caixa de configurações da página permite que você altere o título da página, trecho, imagem em destaque, cores de fundo, estilo, teste de divisão, visibilidade e muito mais.

Ser capaz de desfazer e refazer alterações significa que você nunca precisa se preocupar em cometer erros. Você pode reverter as alterações a qualquer momento e voltar aos estados anteriores do layout atual e para layouts globais.

O botão de portabilidade também é útil, pois permite exportar e importar o layout da página.

À direita da interface do Divi Builder, você verá um botão de pesquisa, um botão de ajuda e um botão para salvar seu layout.

O Divi permite pesquisar modos de visualização, configurações, documentação e muito mais. Clicar em um resultado de pesquisa carregará imediatamente o recurso.

A caixa Divi Builder Helper também é incrivelmente útil. Ele mostra vários tutoriais em vídeo e exibe uma referência aos atalhos de teclado.

Esses atalhos podem ser usados ​​para acelerar o processo de criação de layouts. Existem atalhos para desfazer e refazer alterações, salvar seu layout, alterar modos de visualização, copiar módulos e muito mais.

Elegant Themes tem um guia detalhado sobre o Visual Builder que explica como tudo funciona.

É uma referência fantástica, mas quando você estiver usando o Divi pela primeira vez, recomendo carregar um layout pré-fabricado para que você possa mexer em tudo. Ele irá ajudá-lo a ver como tudo se une.

Linhas, colunas, módulos e mais

A beleza dos construtores de páginas é que você pode preencher cada parte da sua página com muitos tipos diferentes de conteúdo. Isso inclui mapas, tabelas, imagens, vídeos, widgets e muito mais.

Em alguns construtores de páginas do WordPress, esses vários tipos de conteúdo são chamados de blocos. Em outros, eles são chamados de elementos.

Divi os chama de Módulos .

Infelizmente, os temas elegantes são um pouco inconsistentes em seus nomes. No Divi Builder, eles são chamados de módulos, mas em seu material de marketing e documentação, você verá muitas referências a blocos em vez de módulos.

Existem mais de 40 módulos de conteúdo no Divi Builder e cada um contém dezenas de opções de personalização para ajudá-lo a moldar o que o módulo exibe.

Os módulos devem ser colocados dentro de colunas e linhas.

Se você estiver iniciando um layout de página com uma tela em branco, verá um botão verde com um símbolo de adição exibido na página.

Ao passar o mouse sobre isso, você verá uma opção para adicionar uma nova linha. O contorno azul exibido ao redor da linha é chamado de seção. Você pode adicionar quantas linhas e colunas desejar às seções.

Em outras palavras, os módulos são colocados dentro de colunas, as colunas estão contidas em linhas e as linhas são colocadas dentro de seções.

Ao passar o mouse sobre a seção, você verá botões para mover a seção, acessar as configurações da seção, duplicar a seção, salvar a seção na biblioteca e excluir a seção.

Você verá esses mesmos botões no canto superior esquerdo das linhas e colunas também. Certifique-se de explorar todas as opções aqui, pois isso lhe dará uma melhor compreensão de como você controla onde o conteúdo é colocado e como o conteúdo é estilizado.

Se você clicar nos três pontos no final do menu, uma dúzia de configurações adicionais serão reveladas.

Ao adicionar uma nova linha no Divi Builder, você também precisa selecionar qual estrutura de coluna deseja para a linha.

Você pode alterar facilmente quantas colunas são exibidas posteriormente se decidir estruturar as coisas de maneira diferente. Você também pode arrastar e soltar colunas na área de tela principal até encontrar a estrutura desejada.

Depois de selecionar uma estrutura de linha e coluna, a caixa “Inserir módulo” aparecerá e você poderá selecionar um módulo de conteúdo para seu layout.

Quando um módulo for selecionado, sua caixa de configurações aparecerá.

O nível de personalização disponível para cada módulo de conteúdo é impressionante. Você pode definir todos os aspectos de seu design, incluindo cores, espaçamento, transições, CSS personalizado, posição, efeitos e muito mais.

As opções exibidas na caixa de configurações serão alteradas de acordo com o módulo selecionado.

Layouts pré-fabricados podem economizar seu tempo, mas se você quiser obter o máximo do Divi Builder e tornar seus layouts exclusivos, precisará explorar a caixa de configurações para módulos, colunas, linhas e seções. Isso lhe dá controle total sobre o estilo e a posição de tudo em sua página.

Se você adicionar uma tonelada de módulos, colunas, linhas e seções a uma página, pode haver algumas áreas da página que parecem um pouco lotadas. Por exemplo, há momentos em que você passa o mouse sobre um módulo para carregar suas configurações e as configurações da linha e da seção também são exibidas.

Quando isso acontece, recomendo mudar para a visualização de wireframe, pois tudo é exibido em um formato mais limpo.

É difícil mostrar exatamente o quão flexível o Divi Builder está usando texto e imagens.

Portanto, encorajo você a passar algum tempo na página de demonstração oficial do Divi para ver por si mesmo o que este plugin do WordPress pode fazer.

Usando o Construtor Legado

Os temas elegantes tornaram o construtor visual o método padrão de uso do Divi Builder, mas você ainda pode criar layouts diretamente no editor do WordPress, se desejar.

Divi agora chama o editor de back-end de “Legacy Builder”.

Para usá-lo, você precisa acessar a seção avançada da página de opções do plug-in Divi Builder, desativar a experiência mais recente do Divi Builder e ativar o editor clássico.

Acima do construtor legado estão botões para voltar ao editor padrão do WordPress e construir no frontend.

Aqueles de vocês que usam o Divi há anos estarão familiarizados com o construtor legado exibido abaixo. Novos usuários perceberão que ele se parece com o modo de visualização de estrutura de arame do construtor visual.

Na parte superior da interface há uma opção de importação e exportação que permite fazer backup e restaurar os layouts do Divi Builder. Ao lado disso, há um menu de configurações que apresenta testes de divisão e uma série de opções de estilo e configurações de CSS.

Abaixo estão links para salvar na biblioteca, carregar da biblioteca e limpar o layout. Por outro lado, você encontrará botões para desfazer alterações, refazer alterações e visualizar um histórico de alterações.

Novas linhas e colunas podem ser facilmente inseridas em sua página.

Você também pode adicionar seções de largura total e seções especiais em que as colunas abrangem várias linhas.

Como o construtor legado é exibido diretamente no editor do WordPress, você não pode visualizar as alterações em seu layout em tempo real, mas isso significa que há mais espaço para criar layouts e adicionar módulos.

Eu prefiro essa configuração ao estruturar a página, pois parece menos apertada do que o construtor visual.

O construtor legado continua sendo uma maneira eficiente de criar layouts personalizados, pois você pode mover qualquer parte da página usando a funcionalidade de arrastar e soltar.

Para alguns usuários do Divi, essa continua sendo a maneira preferida de criar conteúdo e estilizar páginas. Eu posso ver porque muitos ainda usam esse modo, pois uma vez que você entende como ele funciona, criar novos layouts é rápido e tem poucas distrações.

Configurações do plug-in do Divi Builder

A grande maioria das configurações de personalização pode ser encontrada na interface principal do Divi Builder, no entanto, algumas configurações adicionais podem ser encontradas no menu principal de administração do Divi.

Além do Divi Theme Builder e da Divi Library, você verá a página principal de opções do plugin Divi Builder, um editor de funções e o centro de suporte.

A página de opções do plug-in é dividida em quatro seções: Atualizações, Configurações de API, Integração de tipo de postagem e Avançado.

Você precisará inserir seu nome de usuário do Elegant Themes e a chave de API para receber atualizações automáticas do Divi Builder.

Para usar o bloco de conteúdo do Google Maps, você precisará inserir sua chave de API do Google na seção de configurações da API. O Google Fonts também pode ser desativado nesta seção.

O Divi Builder permite que você selecione exatamente com quais tipos de postagem você usa o construtor de páginas. Por exemplo, você pode desativar o Divi Builder no tipo de postagem da sua galeria.

Uma série de outras configurações podem ser encontradas na seção avançada, como a minificação de Javascript e CSS e a desativação do tour do produto Divi Builder.

Conforme observado anteriormente, também é aqui que você ativa a interface do construtor herdado e substitui o editor de blocos do WordPress (Gutenberg) pelo Editor Clássico.

O Divi Role Editor permite especificar exatamente o que diferentes funções de usuário podem e não podem fazer.

Você pode definir se os usuários podem acessar a página de opções, o construtor de temas, a interface principal do Divi Builder, a biblioteca de layout e muito mais.

Por exemplo, você pode permitir que os contribuidores acessem o Divi Builder e os layouts ao escrever postagens no blog, mas restringi-los de acessar a página de opções do plug-in.

A última página no menu de administração do Divi é o “Centro de ajuda e suporte do Divi Builder”.

Um relatório do sistema é exibido na parte superior da página que destaca se você tem a configuração de hospedagem correta para o Divi Builder. Eu recomendo consultar esta página se você estiver tendo alguns problemas com o Divi. Por exemplo, as importações de layout podem estar paralisadas porque os recursos são limitados.

Desde que eu ativei o Divi Builder no meu site WordPress de teste, recebi alguns avisos sobre minha configuração de hospedagem não ser a ideal.

Também há opções aqui para dar acesso remoto a Temas elegantes e conversar diretamente com o suporte.

Uma variedade de tutoriais do Divi Builder também estão vinculados a esta página.

Além de tutoriais escritos, existem tutoriais em vídeo para ajudá-lo a começar, usando layouts pré-fabricados e usando a biblioteca Divi.

A página de suporte também possui uma opção de modo de segurança e uma lista de erros gerados por WP_DEBUG_LOG .

O Divi Builder é uma solução amigável, mas se você é novo no plugin, recomendo passar por alguns dos tutoriais fornecidos depois de mexer na interface do Divi Builder. Ele lhe dará uma boa compreensão do que o Divi Builder pode fazer e mostrará alguns recursos e truques interessantes que você pode ter perdido.

Quanto custa o Divi Builder?

Elegant Themes tem uma das políticas de preços mais simples e justas do mundo WordPress.

Você pode adquirir uma assinatura do Elegant Themes anualmente ou como uma taxa única. Ambos os planos dão acesso a todos os produtos Elegant Themes e permitem que você os use em quantos sites quiser.

Custa $ 89 por ano para comprar uma licença anual e $ 249 para comprar a licença de acesso vitalício.

Se você escolher a licença anual, poderá continuar a usar os produtos Elegant Themes após a expiração da licença. No entanto, você não receberá nenhum suporte ou atualizações depois que sua associação expirar.

A licença de acesso vitalício faz sentido se você planeja usar produtos Elegant Themes por mais de dois anos.

Todas as licenças vêm com uma garantia de reembolso de 30 dias sem perguntas e você pode cancelar sua associação a qualquer momento.

O Divi Builder é apenas uma parte do pacote de assinatura Elegant Themes.

Uma assinatura também lhe dá acesso ao versátil tema Divi. Este é um ótimo tema do WordPress para usar se você é fã do Divi Builder, pois a funcionalidade de criação de páginas é incorporada diretamente ao tema.

A associação Elegant Themes inclui o belo tema WordPress de revista Extra também - um design que é desenvolvido pelo Divi Builder.

Também incluído na associação está o plugin WordPress de marketing por e-mail e geração de leads Bloom e o plugin WordPress de compartilhamento de mídia social Monarch.

Elegant Themes tem uma das melhores áreas de suporte do mundo WordPress. Sua vasta área de documentação possui tutoriais detalhados escritos e em vídeo para todos os seus produtos, mas se você ainda não tiver certeza sobre algo, poderá abrir um tíquete de suporte para obter ajuda.

Pensamentos finais

Espero que todos tenham gostado desta visão detalhada do Divi Builder.

Este plugin do WordPress continua sendo uma das melhores soluções de criação de páginas de arrastar e soltar do mercado, alcançando um ótimo equilíbrio entre usabilidade, recursos e configurações avançadas. A inclusão de milhares de layouts profissionais de alta qualidade é a cereja do bolo.

Uma associação Elegant Themes continua a oferecer uma fantástica relação custo / benefício também. Portanto, aqueles que desejam usar o Divi Builder terão acesso a quatro temas e plugins mais avançados do WordPress.

Se você quiser ver o Divi Builder em ação, confira a área de visualização do Divi Builder e a página de demonstração Elegant Themes.

Obrigado por ler.

Kevin