O que é o Visual Builder?

O Divi Builder funciona de duas formas: o padrão “Back-end Builder” e o front-end “Visual Builder”. Ambas as interfaces permitem que você construa exatamente os mesmos tipos de sites com os mesmos elementos de conteúdo e configurações de design. A única diferença é a interface. O Back-end Builder existe dentro do painel do WordPress e pode ser acessado juntamente com todas as outras configurações padrão do WordPress. Ele fica dentro da interface do usuário do WordPress e substitui o editor de postagem padrão do WordPress. Ele é ótimo para fazer mudanças rápidas enquanto você está dentro do painel, mas também é confinado pelo painel e é renderizado como uma representação baseada em bloco do seu site. Este tutorial será focado apenas no construtor visual.

O novo Visual Builder, por outro lado, permite que você construa suas páginas no front-end do seu site! É uma experiência incrível e permite um design muito mais rápido. Quando você adiciona conteúdo ou ajusta as configurações de design dentro do visual builder, suas alterações aparecem instantaneamente. Você pode clicar na página e começar a digitar. Você pode destacar o texto e ajustar sua fonte e estilo. Você pode adicionar novos conteúdos, construir sua página e ver tudo acontecer bem diante de seus olhos.

Como habilitar o Visual Builder

Enquanto você estiver logado no painel do WordPress, você pode navegar em qualquer página no front-end do seu site e clicar no botão ” Habilitar Visual Builder ” na barra de administração WordPress para iniciar o visual builder.

Se você estiver editando sua página no back-end, você pode mudar para o visual builder clicando no botão “Habilitar Visual Builder” que fica na parte superior da interface back-end doDivi Builder (você deve ativar o Divi Builder antes para o botão do visual builder aparecer).

O básico do Visual Builder

O potencial do Divi está no Visual Builder, um construtor de páginas em Drag and Drop que permite construir quase qualquer tipo de site combinando e organizando elementos de conteúdo.

O construtor usa três blocos principais de construção: Seções, Linhas e Módulos. Usar esses três em sintonia permite que você crie uma variedade incontável de layouts de página. As seções são os maiores blocos de construção, e organizam grupos de linhas. As linhas ficam dentro das seções e são usadas para abrigar módulos. Os módulos são colocados dentro das linhas. Esta é a estrutura de cada site da Divi.

Seções

Seções são os maiores e mais básicos blocos de construção usados na construção de layouts com o Divi. Estes são usados para criar grandes grupos de conteúdo, e eles são a primeira coisa que você adiciona à sua página. Existem três tipos de seções: Regular, Specialty e Full Width. As seções regulares são compostas por linhas de colunas, enquanto as seções full width são compostas por módulos de largura total que expandem por toda a tela. Seções specialty permitem layouts mais avançados da barra lateral. Para obter mais informações sobre o uso de seções, veja nossos tutoriais aprofundados de seções no Divi.

Linhas

As linhas ficam dentro das seções e você pode colocar qualquer número de linhas dentro de uma seção. Existem vários tipos diferentes de colunas para escolher. Depois de definir uma estrutura de coluna para sua linha, você pode colocar módulos em uma coluna desejada. Não há limite para o número de módulos que você pode colocar dentro de uma coluna. Para obter mais informações sobre o uso de linhas, vá para o tutorial aprofundado sobre linhas.

Módulos

Módulos são os elementos de conteúdo que compõem seu site. Todos os módulos que a Divi possui podem caber em qualquer largura de coluna e todos eles são totalmente responsivos.

Hora de construir sua primeira página

Os três blocos básicos de construção (Seções, Linhas e Módulos) são usados para construir sua página.

Adicionando sua primeira seção

Antes de adicionar qualquer coisa à sua página, primeiro você precisará adicionar uma seção. As seções podem ser adicionadas clicando no botão azul (+). Quando você passar o cursor sobre uma seção que já existe na página, um botão azul (+) aparecerá abaixo dele. Quando clicado, uma nova seção será adicionada abaixo da seção que você está atualmente com o cursor.

Se você estiver iniciando uma página nova, então sua primeira seção será adicionada automaticamente.

Adicionando sua primeira linha

Depois de adicionar sua primeira seção, você pode começar a adicionar linhas de colunas dentro dela. Uma seção pode abrigar qualquer número de linhas, e você pode misturar e combinar linhas de diferentes tipos de colunas para criar uma variedade de layouts.

Para adicionar uma linha, clique no botão verde (+) dentro de qualquer seção vazia ou clique no botão verde (+) que aparece ao passar o cursor sobre qualquer linha atual para adicionar uma nova linha abaixo dela. Depois de clicar no botão verde (+) uma lista de tipos de colunas será apresentada. Escolha a coluna desejada e, em seguida, você está pronto para adicionar o primeiro módulo.

Adicionando seu primeiro módulo

Os módulos podem ser adicionados dentro das linhas, e cada linha pode conter quantos módulos você quiser. Os módulos são os elementos de conteúdo da sua página, e a Divi tem mais de 40 elementos diferentes que você pode usar para construir. Você pode usar módulos básicos como Texto, Imagens e Botões, ou módulos mais avançados como Slider, Galerias de Portfólio e Lojas eCommerce. Temos tutoriais individuais para cada módulo Divi, então se você quiser saber mais sobre os tipos de módulos que a Divi fornece, certifique-se de voltar para a página de documentação e navegar através da seção “Módulos”.

Para adicionar um módulo, clique no botão cinza (+) que existe dentro de qualquer coluna vazia ou clique no botão cinza (+) que existe ao passar o cursor sobre um módulo na página para adicionar um novo módulo abaixo dele. Uma vez clicado no botão, uma lista de módulos vai aparecer. Escolha o módulo desejado e ele será adicionado à sua página e o painel de configurações para o módulo aparecerá. Usando este painel de configurações, você pode começar a configurar seu módulo.

Configuração e personalização de seções, linhas e módulo

Cada seção, linha e módulo podem ser personalizados de várias maneiras. Você pode acessar o painel de configurações de um elemento clicando no ícone de engrenagem que existe ao passar o cursor sobre qualquer elemento na página.

Isso vai abrir o painel de configurações para o elemento especificado. Cada painel de configurações é dividido em três guias: Conteúdo, Design e Avançado. Cada guia foi projetada para tornar o acesso e o ajuste da grande variedade de configurações da Divi de forma rápida e fácil. A guia Conteúdo, é claro, é onde você pode adicionar conteúdo, como imagens, vídeo, links e labels de administração. A guia Design é onde colocamos todas as configurações de design incorporadas para cada elemento. Dependendo do que você está editando, você pode controlar uma grande variedade de configurações de design com um clique; incluindo: tipografia, espaçamento (preenchimento/margem), estilos de botões e muito mais. Para dar uma olhada aprofundada na guia Design, dê uma olhada no nosso tutorial de configurações de design. Finalmente, se você quiser ainda mais controle, você pode ir até a guia Advanced, onde você pode aplicar CSS personalizado, ajustar a visibilidade com base no dispositivo e (dependendo de qual elemento você está editando) fazer um ajuste ainda melhor.

Salvar sua página e acessar configurações de página

Para acessar as configurações gerais da página, clique em “…” em roxo na parte inferior da tela. Isso expandirá a barra de configurações e fornecerá várias opções. Você pode abrir as configurações da página clicando no ícone de engrenagem. Aqui você pode ajustar coisas como cor de fundo da página e cor de texto. Você também encontrará os botões Salvar e Publicar, bem como visualização responsivas em toggle.

Inicie seu design com layouts pré-prontos

Uma ótima maneira de iniciar sua nova página é começar as coisas com um layout pré-pronto. A Divi envia mais de 100 layouts pré-prontos que cobrem uma variedade de tipos de páginas comuns, como “Sobre nós”, “Contato”, “Blog”, “Portfólio”, etc. Você pode carregá-los e depois trocar o conteúdo de demonstração pelo seu próprio. Sua nova página estará pronta antes que você perceba! Para saber mais sobre o uso de layouts pré-prontos, não deixe de dar uma olhada em nosso tutorial aprofundado de layouts pré-prontos.

Como salvar seus layouts na biblioteca

Além de usar os layouts pré-prontos que vêm com o Divi, você também pode salvar suas próprias criações na Biblioteca Divi. Quando um design é salvo como um Layout Divi na Biblioteca Divi, ele pode ser carregado em novas páginas. Quanto mais designs favoritos você adicionar na sua biblioteca, mais rápido você poderá criar novos sites. Para uma olhada aprofundada na Biblioteca Divi, não deixe de conferir nosso tutorial dedicado da Biblioteca Divi.

Para salvar um item na biblioteca, clique no ícone da biblioteca que existe ao passar o cursor sobre qualquer elemento e dentro da barra de configurações da página. Uma vez que um item tenha sido adicionado à biblioteca, ele aparecerá na guia “Adicionar da biblioteca” ao adicionar novos layouts, seções, linhas e módulos Divi.

Agora que você já sabe como pescar, está na hora de pegar mais peixes!

Então, agora você adicionou suas primeiras seções, linhas e módulos à sua página. Você ajustou suas configurações e começou a construir e personalizar seu design. Você já tem o básico, mas há muito mais para aprender. Temos dezenas e dezenas de tutoriais que cobrem todos os aspectos da Divi. Eu encorajo você a voltar para a página principal e ler cada um. Quando terminar, será um mestre Divi!

Como expandir o potencial do Divi com mais módulos, temas infantis e layouts

Um dos maiores ativos da Divi é sua apaixonada comunidade de designers e desenvolvedores. Na Elegant Themes, os criadores do Divi vêm construindo e compartilhando recursos incríveis da Divi, como os módulos Divi personalizados, temas filhos Divi e Layouts Divi pré-construídos. O uso de layouts e temas-filho são ótimas maneiras de iniciar novos sites, e os Módulos Divi mostram o verdadeiro potencial da Divi ao dar mais blocos de construção.

Artigo Original por Elegant Themes.