Se você chegou até aqui, já passou pela preparação inicial do WordPress e do Divi, reuniu os ativos da sua marca, o sitemap e o conteúdo para o site de coworking que vamos construir juntos. Agora é hora de abrir a porta do verdadeiro motor criativo: o Divi 5 Builder. A nova interface foi redesenhada para oferecer mais velocidade, organização e flexibilidade. Neste guia, vamos explorar cada canto desse ambiente, desde os painéis laterais até os recursos de edição em tempo real, para que você se sinta em casa e possa construir páginas impressionantes com fluidez.
Muita gente se sente perdida ao abrir um construtor visual pela primeira vez. Menus escondidos, opções demais, nomes diferentes. Com o Divi 5, a Elegant Themes simplificou a experiência sem perder a potência. Você vai aprender a navegar entre seções, linhas e módulos, usar o sistema de camadas, configurar o Theme Builder e ainda descobrir atalhos que vão acelerar seu fluxo de trabalho. Prepare-se para transformar a maneira como você cria sites.
1. Visão Geral da Interface do Divi 5
Ao ativar o builder, você é recebido por um layout limpo e moderno. A principal mudança está na barra lateral esquerda – ela agora funciona como um painel de controle completo, com abas para adicionar elementos, gerenciar camadas, alterar configurações globais e acessar o histórico de ações. À direita, a visualização da página ocupa quase toda a tela, com bordas sutis indicando seções e linhas.
Elementos da tela inicial
- Barra superior: contém o botão de salvar/voltar, o seletor de visualização (desktop, tablet, celular) e opções de desfazer/refazer.
- Painel esquerdo: dividido em abas – Adicionar, Camadas, Conteúdo, Design, Configurações e Histórico.
- Área de edição: arraste e solte diretamente sobre o conteúdo existente.
2. Navegando por Seções, Linhas e Módulos
O coração do Divi 5 continua sendo a hierarquia de três níveis: Seções (contêineres maiores, geralmente com fundo), Linhas (divisões horizontais que organizam o conteúdo em colunas) e Módulos (elementos prontos como texto, imagem, botão). A grande novidade é o novo sistema de encaixe inteligente: ao arrastar um módulo, a interface mostra visualmente onde ele será inserido, com animações suaves.
Para adicionar uma seção, clique no botão azul “+” que aparece quando você passa o mouse sobre uma área vazia. Para linhas, o mesmo botão surge dentro de seções vazias. Você pode escolher entre layouts de colunas predefinidos (1 coluna, 2 colunas, etc.) ou criar um grid personalizado.
“A hierarquia visual do Divi 5 é tão intuitiva que você consegue estruturar uma página inteira sem olhar para o painel lateral – tudo com arrastar e soltar.”
3. O Novo Sistema de Camadas e o Modo de Edição
O painel de Camadas é um dos destaques do Divi 5. Ele lista toda a estrutura da página em forma de árvore, mostrando seções, linhas e módulos aninhados. Você pode clicar em qualquer item para selecioná-lo instantaneamente, reordenar arrastando, ou clicar com o botão direito para acessar opções como duplicar, copiar estilos e excluir.
No modo de edição, cada módulo ganha um ícone de engrenagem que abre suas configurações avançadas. As abas de Conteúdo, Design e Avançado estão mais organizadas, com campos agrupados por função. Por exemplo, as opções de tipografia agora estão todas em uma seção colapsável, e o mesmo vale para cores, espaçamentos e bordas.
Dica de ouro: copiando estilos
Clique com o botão direito sobre um módulo com o design desejado, escolha “Copiar Estilos”, e depois clique com o botão direito no destino para “Colar Estilos”. Você pode aplicar a formatação visual de um módulo em diversos outros rapidamente.
4. Personalizando com o Theme Builder e Condições
O Theme Builder do Divi 5 evoluiu: agora você pode criar templates para páginas, posts, arquivos, produtos (se usar WooCommerce) e até mesmo para tipos de post personalizados. A interface de condições foi aprimorada com filtros mais flexíveis, permitindo definir regras como “mostrar este cabeçalho apenas em páginas de categoria ‘coworking’ e apenas para usuários logados”.
Para acessar, vá ao menu Divi > Theme Builder. Lá você encontrará um quadro visual onde pode ativar templates, duplicá-los ou definir globais (como um cabeçalho único para todo o site).
5. Fluxo de Trabalho Eficiente: Atalhos e Predefinições
O Divi 5 traz uma série de atalhos de teclado que agilizam tarefas repetitivas. Além do já mencionado Ctrl+E para pesquisa, você pode usar Ctrl+D para duplicar o elemento selecionado, Shift+clicar em um módulo para abrir rapidamente suas configurações, e Ctrl+Z para desfazer.
Outra funcionalidade poderosa são as Predefinições Globais. Crie um estilo de botão, uma cor de destaque ou um espaçamento padrão e salve como predefinição. Depois, em qualquer módulo, basta aplicar essa predefinição com um clique. Isso garante consistência visual em todo o site sem precisar reconfigurar manualmente.
| Atalho | Função |
|---|---|
| Ctrl+E | Pesquisa rápida de módulos/configurações |
| Ctrl+D | Duplicar seção/linha/módulo selecionado |
| Shift+Clique | Abrir configurações do módulo diretamente |
| Ctrl+Z | Desfazer última ação (vários níveis) |
Combine esses atalhos com a nova biblioteca de layouts do Divi 5, que permite salvar e reutilizar seções, linhas ou páginas inteiras. Você pode montar um banco de blocos visuais (headers, depoimentos, tabelas de preço) e usá-los em diferentes partes do site.
Conclusão: Sua Jornada com o Divi 5 Começa Agora
Exploramos os principais aspectos da interface do Divi 5: desde a navegação básica até o Theme Builder e os atalhos de produtividade. Agora você tem o mapa completo para usar o construtor visual com confiança. O próximo passo é colocar a mão na massa: abra um projeto de teste, experimente adicionar módulos, aplique estilos e veja como a performance do novo core acelera cada interação.
Lembre-se de que o Divi 5 foi projetado para escalar – seja para um site pessoal ou uma plataforma corporativa. Se você seguiu as preparações da Parte 1, seu ambiente está pronto. Caso ainda não tenha instalado o Divi 5, faça isso agora e comece a prática. O curso continuará com técnicas avançadas de design responsivo e integração com plugins. Até lá!
