Como construir com eficiência suas páginas com o divi 5

Reconstruído do zero, o Divi 5 possui desempenho rápido e introduz novos recursos, como variáveis ​​de design para estilo em todo o local, linhas aninhadas para profundidade de layout infinita e design baseado em predefinição para aumentar seu fluxo de trabalho. Com um construtor visual moderno e renovado, o Divi 5 permite criar sites profissionais com pouco esforço, começando do zero ou alavancando milhares de layouts pré-construídos.

Nesta postagem, destacaremos os recursos exclusivos e aprimoramentos da interface do usuário do Divi 5 e como eles o ajudarão a criar suas páginas com mais eficiência. Desde a criação de layouts responsivos até aproveitar recursos inovadores, como grupos de módulos e Divi AI, você verá como o Divi 5 transforma o design da web em uma experiência mais rápida, inteligente e criativa.

Uma nota antes de mergulharmos: o Divi 5 está pronto para ser usado em novos sites, mas ainda não recomendamos a conversão de sites existentes para o Divi 5.

Com isso dito, vamos mergulhar.

Entendendo a interface do usuário moderna do Divi 5

A interface do Divi 5 é uma revisão completa de seu antecessor, projetado para velocidade, flexibilidade e design de sem código intuitivo. O Visual Builder oferece edição de front-end em tempo real com um painel de configurações mais limpas, alternativas de design responsivo e uma interface de camadas aninhadas para navegação perfeita de seções, linhas, colunas e grupos de módulos.

Aprimorada por uma base mais rápida, o Divi 5 apresenta recursos exclusivos, como linhas aninhadas para profundidade de layout infinita, grupos de módulos para gerenciamento de módulos simplificados e variáveis ​​de design para um estilo consistente. Esses avanços tornam o Divi 5 acessível a iniciantes e poderosos para profissionais, transformando como os sites são construídos no WordPress.

Evolução do construtor visual

O Visual Builder do Divi 5 possui uma interface reprojetada com uma experiência simplificada que é poderosa e fácil de usar. Comparado ao Divi 4, o Divi 5 apresenta um painel de configurações mais limpas e mais intuitivas que reduz a desordem e organiza as opções logicamente, tornando os ajustes mais rapidamente.

Novas alternativas de design responsivo permitem alternar entre várias visualizações de desktop, tablet e celular, garantindo que os designs pareçam impecáveis ​​em todos os dispositivos. Esses aprimoramentos da interface do usuário tornam o Divi 5 acessível aos iniciantes, oferecendo a demanda dos profissionais de precisão.

Navegação intuitiva

Navegar layouts complexos é fácil com a interface das camadas do Divi 5. Essa interface organiza seções, linhas, colunas, módulos e novos grupos de módulos em uma estrutura clara e hierárquica. Ele permite que você perfure os elementos do seu design facilmente, seja ajustando um único módulo ou reestruturando uma seção inteira.

A interface arrastar e soltar simplifica as coisas, enquanto o modo Wireframe fornece uma visão de pássaros da estrutura da sua página. Ao combinar essas ferramentas, o Divi 5 torna a construção e a edição de layouts complexos intuitivos, economizando tempo e reduzindo a frustração.

Controles de design responsivos

O Divi 5 apresenta pontos de interrupção personalizáveis ​​para um controle preciso sobre como seus projetos se adaptam entre os dispositivos. Você pode escolher entre sete pontos de interrupção predefinidos ou definir valores personalizados para corresponder às resoluções específicas do dispositivo. Isso garante layouts perfeitos para pixels sem ajustes manuais de CSS.

Esse controle granular, combinado com unidades avançadas como Clamp () para escala de fluido, garante que seus projetos permaneçam consistentes e visualmente atraentes em todos os tamanhos de tela.

Construindo sua página com os recursos exclusivos do Divi 5

O Divi 5 apresenta ferramentas inovadoras que redefinirão como você usa o Divi. As linhas aninhadas permitem o ninho de linhas infinitas para layouts complexos, enquanto os grupos de módulos simplificam o estilo e o gerenciamento de vários módulos como uma única unidade. As variáveis ​​de design permitem a consistência em todo o local para cores, fontes e muito mais, e as unidades avançadas suportam funções dinâmicas CSS como Clamp () e Calc () para projetos responsivos. O design baseado em predefinição com predefinições de grupo de opções simplifica o estilo entre os elementos, e o Divi AI acelera a criação de conteúdo. Juntos, esses recursos capacitam os usuários a criar sites profissionais e responsivos com eficiência.

Abaixo, detalhamos como usar essas ferramentas para criar uma página da web.

1. Variáveis ​​de design para estilo eficiente

As variáveis ​​de design são configurações globais que podem ser usadas para cores, fontes, números, imagens, texto e links que podem ser aplicados em todo o site. Você pode definir variáveis ​​clicando no ícone de variáveis ​​globais no Visual Builder.

O benefício do uso de variáveis ​​de design é que você pode atualizá -las uma vez para atualizar todas as instâncias dessa variável, garantindo consistência e economizando tempo. Por exemplo, se você estabelecer valores numéricos para atribuir cálculos de CLAMP () aos títulos, estabelece uma hierarquia global para texto em todo o seu site. Se você precisar fazer uma alteração rápida, qualquer módulo de título ou texto com essas variáveis ​​aplicadas será atualizado em seu site, permitindo que você faça alterações rápidas de design que preenchem em todas as instâncias.

Como usar variáveis ​​de design

Para maximizar o potencial das variáveis ​​de design, incorpore -as no início do seu processo de design. O estabelecimento de variáveis ​​no início cria uma estrutura consistente, liberando você para se concentrar na criatividade, em vez de tarefas repetitivas. Comece clicando no ícone do Variable Manager no Visual Builder.

Quando a caixa de diálogo aparecer, você pode adicionar variáveis ​​para criar a base do seu design. Por exemplo, você pode usar variáveis ​​de número para estabelecer tipografia responsiva.

Variáveis ​​de números também podem ser usadas para espaçamento. Por exemplo, você pode estabelecer um espaçamento padrão para todas as colunas e linhas em seu site. Usando uma fórmula calc (), como Calc (80% - 60px), estabelece a largura de um elemento de design como 80% do contêiner, adicionando 30px de preenchimento a ambos os lados. Selecione Calc no menu suspenso para aplicar a fórmula.

Digite a fórmula calc () no campo de valor . Clique no botão Salvar variáveis ​​para adicioná -lo ao gerenciador de variáveis.

Depois que suas variáveis ​​são salvas, o Divi facilita a aplicação de todo o seu design. Para usar o espaçamento, clique em uma linha, coluna ou módulo, navegue até a guia Design e procure o campo de largura.

Por fim, clique no ícone de conteúdo dinâmico Inserir para selecionar a variável de espaçamento global.

Como observado anteriormente, a aplicação de uma variável de design garante consistência em seu site. A atualização de suas propriedades no Variable Manager sincroniza instantaneamente todas as instâncias, economizando horas de ajustes manuais.

Dicas para usar variáveis ​​de design

• Organize suas variáveis, pensativa: Nome as variáveis ​​descritivamente para facilitar a identificação em projetos complexos.
• ALAVAGEM PRESETAS: Combine variáveis ​​de design com as predefinições globais da Divi para criar modelos de estilo reutilizáveis ​​para módulos, reduzindo o tempo de configuração para novas páginas.
• Responsabilidade do teste: Visualize projetos orientados a variáveis ​​entre dispositivos no construtor visual para garantir que todas as variáveis ​​tenham o desempenho esperado.

2. Design baseado em predefinição com predefinições de grupo de opções

O sistema de design baseado em predefinição da Divi 5 revoluciona o estilo com duas ferramentas poderosas: predefinições de elementos e predefinições de grupo de opções. Esses recursos permitem salvar e reutilizar configurações, garantindo consistência e simplificando o fluxo de trabalho do projeto.

Predefinições divi 5 elementos

As predefinições de elementos permitem salvar a configuração de um módulo - incluindo texto, cores, tipografia, espaçamento e pairar - para reutilizar em seu site. Por exemplo, você pode criar um módulo de botão com uma fonte específica, fundo gradiente e uma animação pairar. Uma vez salvo como um elemento predefinido, você pode aplicá -lo a qualquer botão do seu site com um único clique, mantendo um estilo idêntico. Se você atualizar a predefinição, como alterar o plano de fundo para uma cor sólida, todas as instâncias desse botão são atualizadas automaticamente, eliminando edições repetitivas e garantindo uma aparência unificada.

Predefinições de grupo de opções divi 5

Por outro lado, as predefinições de grupo de opções se concentram em grupos de estilo reutilizável, como tipografia, bordas ou sombras, que podem ser aplicadas a diferentes elementos para projetos coesos. Por exemplo, você pode criar um grupo de opções predefinido para uma borda preta de 1px com um raio de 5px e usá -lo em botões, imagens e linhas.

Se você mais tarde ajustar a predefinição a uma borda de 2px, todos os elementos vinculados atualizam instantaneamente, economizando tempo e mantendo a consistência. Essa abordagem modular permite misturar e combinar grupos de estilo entre os elementos, oferecendo flexibilidade sem sacrificar o controle.

Como usar predefinições de maneira eficaz

As predefinições de elementos já estão presentes ao iniciar um site de partida ou layout pré -fabricado. No entanto, ao criar um site do zero, você precisará criá -los primeiro. A criação dessas predefinições permite que você acelere o processo de design, estilizando instantaneamente módulos semelhantes em todo o seu site.

Criando um elemento predefinido

Para criar uma predefinição de elemento, estilize um módulo com as configurações desejadas. Em seguida, clique no menu predefinido no canto superior direito das configurações do módulo.

Clique em New Preset a partir dos estilos atuais para criar uma nova predefinição.

Dê um nome à predefinição, escolha se deve atribuí -lo como padrão e salve -o. Se você o escolher como predefinição padrão, todos os acordos adicionados ao seu site serão denominados de forma idêntica, facilitando a criação de suas páginas da web mais rapidamente e com mais eficiência.

Crie um grupo de opções predefinido

O processo de criação de uma predefinição do grupo de opções é um pouco diferente. Em vez de aplicar uma predefinição a um módulo, você pode atribuir predefinições a aspectos de um módulo que pode ser transportado para outros tipos de módulos, colunas, linhas ou seções mesmo. As predefinições de grupo de opções são ótimas para bordas de estilo, adicionando controles de transformação, filtros, sombras de caixa e muito mais, permitindo que você mantenha elementos menores consistentes por toda parte.

Por exemplo, você deseja criar um estilo de fronteira para imagens e colunas. Selecione um módulo de imagem, navegue até a guia Design e passasse sobre as configurações de borda até aparecer o ícone de predefinição de um grupo .

Em seguida, clique em Adicionar nova predefinição .

Estilize a fronteira, nomeie -o e salve a predefinição.

Dicas para usar as predefinições baseadas em design do Divi 5

A combinação de predefinições de elementos e predefinições de grupo de opções permite criar um sistema de design escalável. Aqui estão algumas dicas para usá -las efetivamente para construir uma página da web com o Divi 5:

• Use -os para eficiência: crie predefinições de elementos ou predefinições de grupo de opções para acelerar a construção de páginas, especialmente para sites grandes. Este método salva você de modelar repetidamente um módulo, linha ou seção. Você cria estilos na frente e os aplica sempre que necessário.
• Estabeleça consistência do projeto: as predefinições garantem estilo uniforme entre os elementos, reforçando sua identidade de marca e polimento profissional.
• Editar predefinições quando seu site exigir alterações de design: as predefinições permitem atualizar estilos globais sem editar manualmente elementos individuais, tornando -os ideais para iterações de design ou revisões de clientes.
• Use -os para escalabilidade: você pode combinar predefinições com variáveis ​​de design para criar uma estrutura robusta para sites que geralmente exigem atualizações. Precisa adicionar uma página no caminho? As predefinições permitem que você faça isso mais rápido e com mais eficiência.

3. Linhas aninhadas para layouts flexíveis

As linhas aninhadas no Divi 5 substituem as seções especializadas da Divi 4 por um sistema mais flexível e infinitamente acidentável. Ao contrário das linhas tradicionais, as linhas aninhadas podem ser colocadas em colunas, permitindo que você empilhe linhas, módulos ou linhas aninhadas adicionais em praticamente qualquer configuração.

Para criar uma linha aninhada, basta adicionar uma a uma coluna - ou sob um módulo dentro de uma coluna - através do Visual Builder e preencher -a com módulos ou outras linhas aninhadas.

Esse recurso permite criar layouts complexos e em camadas. Por exemplo, em uma seção Sobre, você pode colocar uma linha aninhada de 3 colunas em um módulo de texto para adicionar botões para orientar os usuários a diferentes páginas.

Os próximos controles Flexbox no Divi 5 aprimorarão as opções de posicionamento, oferecendo alinhamento e espaçamento precisos para projetos complexos, como tabelas de preços, portfólios ou seções de conteúdo de várias camadas.

Como usar linhas aninhadas

Para aproveitar o poder das linhas aninhadas, siga estas etapas no Visual Builder:

Comece inserindo uma linha padrão no layout da sua página. Isso servirá como fundamento. Em seguida, clique na guia Nova linha para revelar as opções de coluna para sua nova linha aninhada.

Em seguida, escolha o módulo para a primeira coluna. Para este exemplo, uma imagem.

Na segunda coluna, adicione outra imagem. Você pode criar predefinições de grupo de opções para bordas, sombras e transformar efeitos a partir daí.

Você pode adicionar linhas aninhadas à outra coluna ou embaixo da primeira. As possibilidades são infinitas.

Você pode criar layouts avançados com vários níveis de profundidade. Por exemplo, você pode fazer uma tabela de preços com uma linha aninhada para apresentar dois botões lado a lado, um recurso que não possui versões anteriores do Divi. Existem várias maneiras de usar linhas aninhadas , tornando -as um recurso versátil ao criar uma página da web com o Divi. Eles são perfeitos para construir seções de heróis, páginas da equipe, cabeçalhos, rodapés e muito mais.

Dicas para usar linhas aninhadas

• Planeje seu layout primeiro: Antes de adicionar linhas aninhadas, esboçando o esboço da estrutura da sua página para determinar onde agregá-las fornece valor, como para seções de heróis de várias camadas, tabelas de preços ou grades de equipe.
• Use para designs modulares: Crie linhas aninhadas para componentes reutilizáveis, como uma linha com uma imagem e texto para depoimentos, depois duplique ou salve -os para um estilo consistente em todo o seu site.
• Combine com grupos de módulos: combine linhas aninhadas com grupos de módulos para organizar layouts complexos.
• Utilize os pontos de interrupção responsivos da Divi: teste linhas aninhadas nos sete pontos de interrupção do Divi 5 usando alternância responsiva para garantir que os elementos aninhados se alinhem adequadamente em todos os dispositivos.

4. Grupos de módulos para conteúdo organizado

Os grupos de módulos atuam como contêineres no Divi 5, que permitem agrupar vários módulos dentro de uma coluna. Você pode estilizar, movê -los ou duplicar como uma única unidade. Eles podem simplificar seu fluxo de trabalho, especialmente para designs complexos, e preparar o cenário para o próximo suporte do Flexbox, desbloqueando opções de posicionamento ainda mais precisas.

A partir daí, você pode adicionar módulos de design e linhas aninhadas ou aplicar predefinições de grupo de opções ao grupo para criar layouts com estilo que você pode duplicar ou salvar facilmente na biblioteca Divi ou na nuvem Divi.

Como usar grupos de módulos

Para criar um grupo de módulos, adicione uma nova linha e selecione uma estrutura de coluna. Selecione o módulo de grupo nas opções disponíveis do Divi 5.

Dentro do grupo de módulos, você pode adicionar módulos, como texto, imagens, botões ou até linhas aninhadas. Por exemplo, você pode criar um grupo contendo um título, texto, uma imagem e um botão para uma seção de chamada à ação.

Uma vez estilizado, você pode salvar ou duplicar o grupo de módulos clicando no menu Ellipsis no canto superior direito do grupo.

Os grupos de módulos podem criar seções de membros da equipe, seções de chamada para ação, cabeçalhos de página interior e muito mais. Mais importante, porém, os grupos de módulos se tornarão extremamente úteis quando recursos como Flexbox e Loop Builder forem lançados.

Dicas para usar grupos de módulos

• Grupos de módulos de plano estrategicamente: use grupos de módulos para componentes reutilizáveis, como CTAs, depoimentos, membros da equipe ou cartões de produto. Eles ajudam a otimizar o processo de construção e a manter a organização.
• Combine grupos de módulos com predefinições: aplique predefinições de grupos de opções a grupos de módulos para um estilo consistente, como sombras ou bordas uniformes, em vários grupos.
• Use Divi Cloud: Salvar grupos de módulos usados ​​com frequência para dividir a nuvem para acesso rápido entre projetos, especialmente para clientes com necessidades de design semelhantes.

Usando grupos de módulos, você pode criar designs modulares e organizados que são fáceis de gerenciar e escalar, tornando -os ideais para criar páginas da web simples ou mais complexas.

5. Unidades avançadas para design dinâmico

O recurso de unidades avançadas do Divi 5 suporta uma faixa mais ampla de unidades CSS (PX, VW, REM, %, etc.) e funções como Calc (), Clamp (), Min () e Max () em um único campo de entrada, permitindo projetos dinâmicos e responsivos. Por exemplo, você pode definir a largura de uma seção como calc (100% - 40px) ou grampo (20px, 3VW, 40px) para tipografia de fluido que escala com base no tamanho da viewport.

As unidades avançadas também podem ser usadas como variáveis ​​de design para definir regras globais e manter os projetos consistentes em todo o seu site.

Como usar unidades avançadas

Existem algumas maneiras de usar unidades avançadas, mas a maneira mais eficaz é combiná -las com variáveis ​​de design para consistência do projeto. No entanto, pode haver casos em que você deseja atribuí -los no nível do módulo.

Um bom exemplo é com o texto. Claro, você pode definir as fórmulas Clamp () no Variable Manager para controlar o tamanho em todo o site, mas e se você quiser tornar um cabeçalho mais impactante adicionando espaço para fazê -lo se destacar melhor? É aí que entra unidades avançadas.

Para demonstrar, clique para adicionar um módulo de título à sua página da web. Na guia Design, navegue até o campo de dimensionamento.

Ao lado do campo de largura, clique no ícone - para revelar as opções de unidade avançada.

No menu suspenso, selecione VW (Largura do Viewport) e digite 50 . Isso dirá a direção para ocupar 50% da largura da viewport. A viewport é a área visível da janela do navegador da web. Portanto, independentemente da largura da janela do navegador, sempre será metade da largura da janela do navegador.

Ao visualizar como a manchete ficará em outros tamanhos de tela, você notará que o título permanece a mesma largura, independentemente.

Dicas para usar unidades avançadas

• Inicie simples: comece com unidades básicas como PX ou % para projetos diretos e experimente a Clamp (), Calc (), VH ou VW para obter efeitos responsivos.
• Use CLAMP para tipografia: aplique clamp () aos tamanhos ou espaçamento da fonte para criar projetos de fluido e acessíveis que se adaptem a qualquer tamanho de tela sem pontos de interrupção manual.
• Combine com variáveis ​​de design: armazenar unidades usadas frequentemente para títulos e texto corporal como variáveis ​​de design para manter a consistência e simplificar as atualizações.

As unidades avançadas fornecem a precisão dos CSs personalizados na interface sem código do Divi, facilitando a criação de páginas dinâmicas e profissionais dinâmicas que se adaptam perfeitamente a qualquer dispositivo.

6. Integração Divi AI

A Divi AI aprimora o processo de design, gerando texto, imagens, código ou seções e layouts inteiros com base em avisos de linguagem natural. Funciona dentro do Visual Builder no Divi 5, facilitando a ajuda de obter um pouco de design ou redação de redação quando necessário.

Por exemplo, você pode usar um rápido como "Criar uma seção moderna de heróis com uma manchete, botão e imagem de fundo". A Divi AI produzirá um layout totalmente com estilo, que você pode refinar manualmente para combinar com sua visão.

Com o Divi AI, você pode acelerar o processo de design, superar o bloqueio do escritor ou obter um pouco de empurrão criativo quando necessário.

Como usar o divi ai

Para aproveitar ao máximo o Divi AI ao criar uma página da Web no Divi 5, você pode usá-lo para ajudá-lo a escrever cópias na marca, criar imagens, adicionar alguns CSs aos módulos existentes ou até gerar seções. A Divi AI pode ajudá -lo a criar lindas páginas da web que ressoam com seus visitantes.

Para usar o Divi AI em um módulo de texto existente, passe o mouse sobre a área de texto e clique no ícone Divi AI na guia Conteúdo.

Uma caixa de diálogo com várias opções será exibida. Você pode escrever e substituir o conteúdo existente, alongar, reduzir ou simplificá -lo, consertar ortografia e gramática, traduzi -lo ou até alterar o tom.

Depois de escolher uma opção, o Divi AI alterará a cópia com base no conteúdo existente. Depois de terminar, você pode usar o texto, tentar novamente, melhorá -lo com IA ou refinar o resultado com algumas palavras orientadoras.

Dicas para usar o divi ai

• Seja específico com seus avisos: inclua detalhes como tom, cores ou preferências de layout ao usar o Divi AI para criar imagens ou seções. O mesmo vale para texto e código. Quanto mais específico, melhor a saída.
• Itreate conforme necessário: se a saída inicial não for ideal, refine seu prompt ou gere várias variações para encontrar o melhor ajuste.
• Use -o para inspiração: uma das melhores maneiras de usar o Divi AI é criar idéias, como gerar conceitos ou slogans de layout, mesmo que você planeje personalizar sua página da web.

Melhores práticas para criar páginas da web com Divi 5

A adoção de uma abordagem estratégica para as características do Divi 5 é essencial para maximizar seu potencial. Comece planejando seu sistema de design antecipadamente. Defina variáveis ​​de design do núcleo, como cores primárias e secundárias, links relevantes, configurações de tipografia e fontes.

Ao criar sua página, estabeleça predefinições de grupo de opções para estilos reutilizáveis, como efeitos, sombras ou tipografia do mouse de botão, que aceleram seu fluxo de trabalho e mantêm uma estética coesa em todo o seu site.

Testar cedo e muitas vezes também é crucial para resultados positivos. Use os pontos de interrupção responsivos do Divi 5 para visualizar unidades avançadas para garantir que elas fiquem bem em todos os dispositivos. As alternativas responsivas do Divi 5 oferecem sete pontos de interrupção para explorar, dando a você uma idéia melhor de como seu design aparecerá em telas de tamanho diferente.

Combine predefinições de elementos com predefinições de grupo de opções para equilibrar flexibilidade e consistência. Use predefinições de elementos para módulos específicos, como um módulo CTA com estilo. Por outro lado, para manter a uniformidade, aplique predefinições de grupo de opções para propriedades compartilhadas, como estilos de fronteira ou sombras. Quando são necessárias atualizações, você pode ajustar esses grupos predefinidos para alterações globais, em vez de editar elementos individuais manualmente.

Por fim, mantenha seus projetos simples para manter o desempenho e a usabilidade. Evite linhas de nidificação excessiva ou confiar em fórmulas de calc () complexas, a menos que seja necessário, pois elas podem complicar a edição. Da mesma forma, crie grupos de módulos para projetos essenciais que você planeja reutilizar em seu site.

Construa páginas da web mais inteligentes com divi 5

O Divi 5 redefine o WordPress Web Design, permitindo que você construa facilmente páginas da Web impressionantes e responsivas. Seu construtor visual moderno, controles intuitivos, características inovadoras e Divi AI simplificar o processo, garantindo resultados profissionais com um esforço mínimo. Independentemente do seu nível de habilidade, essas ferramentas tornam a construção de sites eficazes e dinâmicos mais rápidos, inteligentes e criativos.

Pronto para explorar o potencial do Divi 5? Faça o download do lançamento do Divi 5 Alpha hoje e experimente seus recursos mais recentes para dar vida à sua visão. O Divi 5 se adapta a novos sites, mas ainda não é recomendado para converter os existentes.

Adoraríamos ouvir seus pensamentos! Compartilhe seus comentários comentando abaixo. Melhor ainda, poste sobre sua experiência Divi 5 nas mídias sociais para ajudar a espalhar a palavra.