Recursos exclusivos Divi 5 (até agora)

Estamos lançando novos recursos do Divi 5 em ritmo acelerado, e cada um foi projetado para melhorar o desempenho, simplificar o seu fluxo de trabalho e trazer poderosos recursos de design para as pontas dos dedos. Precisa de uma visão geral? Este post abordará os recursos exclusivos do Divi 5 que valem a pena conferir. E este é apenas o começo. Temos novos recursos interessantes, como o Flexbox e o Loop Builder, que será lançado em breve. Nossas atualizações abordam pontos problemáticos comuns que ouvimos de designers e desenvolvedores que usam o Divi diariamente.

O Divi 5 está pronto para ser usado em novos sites.

8 recursos exclusivos para o divi 5 (e como eles funcionam)

O Divi 5 apresenta atualizações inovadoras no design do site e usa uma variedade de ferramentas que reinventam e aceleram tarefas de design, tornando -as mais intuitivas. Os oito recursos a seguir demonstram o potencial de nosso recém-revisado Divi:

1. pontos de interrupção personalizáveis

Recurso lançado em 6 de fevereiro de 2025

O Divi 5 introduz melhoria flexibilidade no design responsivo com seu sistema personalizável de pontos de interrupção. A maioria dos construtores de páginas restringe os usuários a apenas três visualizações padrão, mas o Divi 5 permite até sete pontos de interrupção exclusivos, os quais podem ser definidos como valores de pixels personalizados.

Isso oferece aos usuários mais controle do que outros construtores populares, que geralmente se apegam aos tamanhos fixos dos dispositivos e oferecem opções de ajuste limitado. Enquanto muitas plataformas o forçam a projetar dentro de limites rígidos, o Divi 5 permite que você segmente as larguras exatas da tela, onde seu design precisa de atenção especial.

Além do trio padrão

A maioria dos construtores de sites se atende ao desktop, tablet e trio móvel, porque é direto. O Divi 5 reconheceu que isso não corresponde a como as pessoas realmente navegam na web hoje, em dezenas de tamanhos de tela diferentes.

Com o Divi 5, você pode definir pontos de interrupção para:

• Telefone (<767px)
• Telefone largo (<860px) - Perfeito para visualização móvel de paisagem
• Comprimido (<980px)
• Comprimido largo (<1024px) - captura comprimidos maiores e dispositivos semelhantes
• Desktop (> 981px)
• Widescreen (> 1280px)
• Ultra de largura (> 1440px)

Outros construtores de páginas do WordPress oferecem algum controle do ponto de interrupção, mas nenhum corresponde à precisão e facilidade de uso do Divi 5. O sistema permanece intuitivo, com os mesmos controles familiares de divi aplicados em todos os pontos de interrupção.

Manuseio do ponto de interrupção visual

O Divi 5 apresenta a escala de tela, um recurso que o diferencia da maioria dos outros construtores. Em vez de se limitar a alternar entre as visualizações de dispositivo fixo, você pode arrastar a borda da tela para ver seu layout em qualquer largura desejada.

Essa abordagem fornece feedback imediato e realista, quase como trabalhar diretamente em um navegador da web. Ao projetar para pontos de interrupção mais amplos do que sua janela atual, a tela se ajusta proporcionalmente, para que você ainda obtenha uma visão precisa do seu design, mesmo em telas menores.

A experiência permanece consistente à medida que você se move entre pontos de interrupção. Os controles se comportam da mesma maneira, e seu layout não muda inesperadamente. Essa confiabilidade reduz as suposições e a solução de problemas do design responsivo, o que pode ser uma dor de cabeça em outros construtores de páginas.

Saber mais

2. Predefinições de grupo de opções

Recurso lançado em 11 de março de 2025

Predefinições de grupo de opções é um dos novos recursos mais emocionantes do Divi 5, expandindo seus recursos de criar um sistema de design que funcione para você. Predefinições de grupo de opções são os blocos de construção do seu design. Enquanto os predefinições de elementos travam você a modelar um elemento específico, as predefinições do grupo de opções do Divi 5 funcionam em qualquer tipo de elemento.

Você pode criar estilos reutilizáveis ​​para propriedades de design específicas, como tipografia, bordas, sombras ou fundos, e misturar esses estilos em diferentes elementos. Por exemplo, você pode criar uma predefinição para o seu estilo de cabeçalho, outro para estilo de botão e um terceiro para sombras de caixa.

Uma vez configurado, você pode aplicar esses estilos a qualquer elemento compatível com um clique, independentemente de ser um módulo de texto, sinopse, chamada à ação ou até contêineres, como seções e linhas.

Por que isso importa para o seu fluxo de trabalho

Isso economiza tempo quando você precisa atualizar seu design. Digamos que você decida alterar o raio da borda nos elementos em todo o site. Em vez de caçar cada botão, imagem e seção, você simplesmente edita a predefinição da borda uma vez e todos os elementos usando as atualizações predefinidas automaticamente.

A capacidade de trabalhar em diferentes tipos de elementos torna as predefinições do grupo de opções do Divi 5 realmente úteis. O mesmo estilo de borda pode ser aplicado a um módulo, coluna, linha ou seção. Essa compatibilidade de elementos cruzados economiza horas de trabalho repetitivo de estilo.

Essa flexibilidade vai um passo adiante. As predefinições do grupo de opções da Divi se estendem além das opções básicas de estilo. Eles também cobrem recursos baseados em scripts, como displays condicionais, vídeos em segundo plano HTML e efeitos de rolagem. Isso oferece controle consistente sobre o estilo estático e os comportamentos interativos em todo o seu site.

Saber mais

3. Unidades avançadas

Recurso lançado em 19 de março de 2025

O Divi 5 melhorou o manuseio das unidades CSS, facilitando muito o design responsivo.

Agora, você pode acessar toda a gama de unidades CSS necessárias para o design da web de hoje diretamente dentro do construtor. Isso significa que você pode usar pixels (PX), porcentagens (%), EMS (EM), EMS (REM), unidades de viewport (VW, VH, VMIN, VMAX) e escolhas ainda mais avançadas como largura de caracteres (CH) ou unidades fracionárias (FR) para grades.

Isso pode parecer uma atualização menor no início, mas na verdade oferece muito mais flexibilidade para criar layouts responsivos.

Por que diferentes unidades são importantes

Quando você constrói sites que deseja ter uma boa aparência em telefones, tablets e desktops, o uso de apenas pixels pode criar dores de cabeça. Um elemento largo de 300px parece bom na área de trabalho, mas pode quebrar seu layout no celular.

Com unidades avançadas, como a Viewport, você pode definir o mesmo elemento para 80VW (80% da largura da viewport) e ele será dimensionado perfeitamente em todos os dispositivos. Ou use unidades REM para manter o texto proporcional ao tamanho da fonte base, facilitando muito os ajustes de acessibilidade.

Agora, combine unidades com funções CSS como Calc (), Min (), Max () e Clamp () e veja a verdadeira mágica acontecer. O Divi 5 suporta tudo isso, permitindo que você crie layouts verdadeiramente fluidos que se adaptem a qualquer tamanho de tela.

Por exemplo, você pode definir uma altura de seção para calcular (80VH - 60px) para que ele ocupe a maior parte da tela enquanto deixa espaço para um cabeçalho. Ou use grampo (16px, 4VW, 22px) para o texto que cresce com a tela, mas permanece dentro dos limites legíveis.

A flexibilidade do grampo ()

A função Clamp () merece atenção especial porque resolve muitos problemas de design responsivos. Ele permite definir tamanhos mínimos, preferidos e máximos de uma só vez, fazendo com que o grampo () funcione um recurso favorito de muitos web designers.

Você pode querer títulos que cresçam com o tamanho da tela, mas permaneçam legíveis. Em um módulo de título, você pode definir o tamanho do texto para fixar (36px, 5VW, 72px). O título não será menor que 36px ou maior que 72px, mas entre esses tamanhos, ele será escalado a 5% da largura da viewport.

Isso cria transições suaves entre os tamanhos das tela sem pontos de interrupção. O texto que é grande demais em tablets ou muito pequeno em monitores grandes não será um problema. Sua tipografia respira com o layout.

Também entendemos que diferentes elementos de design precisam de unidades diferentes, e é por isso que as unidades avançadas do Divi 5 apresentam funciona malabilizar, não apenas com a tipografia, mas margens, preenchimento e outros valores de espaçamento:

• Para o texto, as unidades REM mantêm tudo em proporção. Se você definir o texto do seu corpo como 1Rem e os títulos para 2.5Rem, alterar o tamanho da fonte base atualiza tudo proporcionalmente.
• Para layouts, você pode tentar misturar unidades fixas e fluidas. Uma barra lateral pode funcionar melhor a 300px, enquanto o conteúdo principal pode usar calc (100% - 350px) para preencher o espaço restante.
• Para espaçamento, as unidades EM criam preenchimento que escala com o tamanho do texto. Isso mantém suas proporções de design consistentes, mesmo quando os tamanhos de texto mudam.

Também toca bem com outros recursos discutidos

O que é particularmente bom é que você não precisa escrever CSS personalizados para usar essas unidades. Eles são incorporados na interface visual. Você pode experimentar valores diferentes e ver os resultados instantaneamente, tornando a curva de aprendizado muito mais gentil do que codificar essas soluções manualmente.

Essas unidades são integradas a outros recursos do Divi 5. Você pode armazenar seu valor, usando qualquer unidade que preferir, como variáveis ​​de design e, em seguida, aplicá-las em todo o local por meio de predefinições de grupo de opções. Isso cria uma reação em cadeia de bom design que flui em todo o site. Por exemplo:

• Crie uma variável numérica como o tamanho do cabeçalho: grampo (26px, 5VW, 82px); para seus títulos H1. Aplique esta variável à predefinição de texto do seu título. Seus títulos agora escalam suavemente entre 26px no celular e 82px na área de trabalho, com um cálculo fluido de 5VW entre esses tamanhos.
• Definindo uma variável numérica para prender (20px, 5VW, 80px) e, em seguida, usá -la como margens, você tem espaçamento apertado em espaço móvel e generoso respiratório na área de trabalho, com uma transição suave entre.
• Defina um espaçamento base usando uma unidade de espaço variável: 20px e use-a com calc () nas predefinições de layout. Por exemplo, aplique calc (var (–space-unidade) * 2) para lacunas maiores e calc (var (–space-unidade) / 2) para espaços mais apertados. Quando você atualiza o valor base, todo o espaçamento derivado se ajusta proporcionalmente.

Isso apenas arranha a superfície. Ao misturar essas configurações, você pode criar sites que aproveitam a simplicidade e os recursos recém -descobertos da Divi.

Saber mais

4. Variáveis ​​de design

Recurso lançado em 3 de abril de 2025

A maioria dos construtores de sites tem maneiras de definir cores e fontes globais. O Divi 5 leva essa ideia e corre com ela. Você pode criar variáveis ​​não apenas para cores e fontes, mas também para números, imagens, texto simples e até links da Web.

Pense nisso: a maioria dos construtores permite definir uma cor primária que atualize em todos os lugares. Mas e se você quiser alterar seu número de telefone em várias páginas? Ou trocar uma imagem recorrente usada em todo o seu site? O Divi 5 lida com essas situações com facilidade.

Todas as suas variáveis ​​vivem em um painel simples na barra lateral do Visual Builder. É limpo, fácil de encontrar e coloca tudo em um local.

Uma combinação perfeita com predefinições

As variáveis ​​e predefinições de design (predefinições de grupo de opções e predefinições de elementos) trabalham juntas para fazer um design sustentável e escalável. Você pode criar predefinições que fazem referência às suas variáveis, criando um sistema de design flexível.

Por exemplo, você pode criar uma variável de design para a sua fonte principal e depois usar essa variável na predefinição da tipografia. Se você decidir alterar sua fonte mais tarde, só precisará atualizar a variável uma vez, não a própria predefinição. Isso cria outra camada de controle que a maioria dos construtores simplesmente não oferece.

Essa abordagem de duas camadas oferece mais controle do que outros construtores. Você separa como é algo (variáveis) de onde aparece (predefinições).

Você pode usar variáveis ​​de números com funções CSS como Calc () e Clamp () para criar designs responsivos que se adaptam perfeitamente a diferentes tamanhos de tela. Defina uma variável para o ritmo de espaçamento do seu site e aplique -o em todo o layout para proporções consistentes que escalem lindamente.

Quando você muda uma variável, tudo o que o usa é atualizado imediatamente. Isso transforma o que pode ser horas de trabalho em alguns segundos de cliques.

Como isso ajuda na criação de um design sustentável

Vejamos alguns exemplos práticos de variáveis ​​de design em ação:

• Mantenha sua marca com a mesma aparência em todos os lugares: configure variáveis ​​para suas cores, fontes e espaçamento. Use -os em predefinições em todo o seu site para uma aparência consistente.
• Execute uma venda de férias: Crie variáveis ​​de imagem para gráficos de campanha e variáveis ​​de texto para cópia promocional. Quando a temporada terminar, atualize -os uma vez para atualizar todo o site.
• Estilos de borda: crie uma variável numérica para o raio de borda, como 10px, e aplique -o a todas as predefinições de botões, módulos de imagem e cartões. Se a sua direção de design mudar, uma atualização afetará os cantos arredondados em todo o site.
• Facilita as atualizações do cliente: ao criar sites para clientes que precisam fazer atualizações, o design das variáveis ​​brilhar. Configure variáveis ​​para o conteúdo que elas mudam com frequência, como informações de contato ou horário comercial. Eles podem atualizá -los sem tocar em configurações de design.

As variáveis ​​de design também funcionam com o construtor de temas da Divi. Isso significa que seus cabeçalhos, rodapés e modelos usam o mesmo pool variável que suas páginas. Ao contrário de outros sistemas que o travam em padrões rígidos, as variáveis ​​do Divi 5 mantêm as coisas flexíveis enquanto ajudam você a se manter organizado.

Saber mais

5. Linhas aninhadas

Recurso lançado em 17 de abril de 2025

O Divi 5 apresenta linhas aninhadas, o que oferece mais controle sobre os layouts. Essa adição permite colocar linhas dentro de colunas, criando layouts complexos que não eram possíveis em versões anteriores sem código personalizado.

Com linhas aninhadas, você pode criar layouts avançados de grade, blocos de conteúdo no estilo de revista e designs baseados em cartões com muito menos esforço. Precisa de uma seção com colunas que contêm seus próprios layouts de várias colunas? Agora você pode fazer certo no construtor.

Construção com profundidade

Adicionar uma linha aninhada funciona como adicionar qualquer módulo. Selecione uma seção, clique no botão Plus e escolha "Linha" nas suas opções. A partir daí, você pode adicionar uma linha para criar uma linha aninhada e preenchê -la com conteúdo.

Essa mudança aparentemente simples abre muitas possibilidades de design. Você pode criar widgets da barra lateral com suas próprias estruturas de coluna, criar exibições de produtos com galerias aninhadas ou desenhar tabelas de comparação de recursos com layouts complexos.

A melhor parte é o quão naturalmente ele se encaixa no seu fluxo de trabalho. Não há nada de novo para aprender. Você está apenas usando linhas em mais lugares. Se você sabe como construir com o Divi, já sabe usar linhas aninhadas.

Linhas aninhadas resolvem problemas reais para os construtores de sites. Deseja criar uma seção de serviços em que cada serviço tenha seu próprio layout de duas colunas? Anteriormente, você precisaria de CSS personalizados ou soluções alternativas complexas. Agora está construído diretamente.

Para sites pesados ​​de conteúdo, você pode criar layouts no estilo de revista com larguras de coluna mistas e áreas de conteúdo aninhadas. Cada artigo ou recurso pode ter sua própria estrutura de coluna, mantendo o layout da página.

Apenas o primeiro passo

Linhas aninhadas são apenas o começo da evolução do layout do Divi 5. A equipe está trabalhando em direção a um sistema completo de layout baseado em Flexbox para tornar o Divi ainda mais flexível.

As atualizações futuras introduzirão controles de layout adicionais, oferecendo ainda mais opções para criar designs complexos sem código personalizado. Essa abordagem metódica garante que cada novo recurso funcione perfeitamente antes de se mudar para o próximo.

Em vez de sair com recursos meio cozidos, a equipe de desenvolvimento da Divi está construindo uma base sólida para o futuro do design de layout. Cada etapa se baseia no último, criando um sistema que é à prova de futuro e fácil de usar.

Saber mais

6. Grupos de módulos

Recurso lançado em 1 de maio de 2025

A construção de sites geralmente significa criar os mesmos padrões de conteúdo repetidamente. Você projeta um cartão de membro da equipe perfeito e passa vinte minutos recriando -o para a próxima pessoa. Os grupos de módulos resolvem isso, permitindo que você empacote elementos relacionados em unidades reutilizáveis.

Aqui está o que muda: em vez de tratar cada peça separadamente, você trabalha com blocos completos. Uma placa de produto se torna uma coisa que você se move, não seis módulos diferentes que você deve selecionar individualmente. Quando você precisa ajustar o espaçamento entre cinquenta cartões de produtos, atualiza o modelo de grupo uma vez, em vez de editar cada cartão manualmente.

O benefício real aparece em sites maiores. Projetos de clientes com dezenas de membros da equipe, catálogos de produtos ou listagens de serviços tornam -se gerenciáveis. Você não está fazendo um trabalho repetitivo de montagem-está se concentrando no conteúdo e no ajuste fino.

Criando combinações de módulos personalizados

Os grupos de módulos abrem possibilidades que os módulos únicos geralmente não conseguem lidar. Crie um cartão de serviço onde você precisa de uma imagem de fundo, um ícone sobreposto, um título, uma descrição e dois botões de ação: "Saiba mais" e "Obtenha citação".

Com grupos de módulos, você coloca esses elementos exatamente como os deseja. Isso se torna útil para conteúdo que não se encaixa em modelos padrão.

Para tabelas de preços, você pode usar três linhas aninhadas em um grupo de módulos: um título na primeira linha, detalhes de preço no segundo e uma lista de recursos no terceiro. Isso fornece controle individual sobre fontes, cores e espaçamento que o módulo de tabela de preços embutido não oferece.

A mesma abordagem funciona para depoimentos usando os módulos de ícone, imagem, cabeçalho e texto dispostos dentro da estrutura do grupo. Você obtém mais flexibilidade de layout do que o módulo de depoimento padrão, mantendo tudo gerenciável como uma única unidade.

A principal vantagem é combinar o controle de layout da construção do zero com a conveniência de tratar vários elementos como uma peça.

Construindo bibliotecas de componentes reutilizáveis

Depois de criar grupos de módulos eficazes, salve -os como elementos globais. Isso cria uma biblioteca de componentes que cresce a cada projeto. Ao refinar o estilo, o seu layout de depoimento é atualizado em vinte páginas e a vitrine de seu produto permanece consistente enquanto você itera no design.

Em vez de começar do zero cada vez que você constrói uma página, você começa com layouts consistentes e os adapta a novas páginas e requisitos de layout.

Abrace a facilidade da integração do Divi Cloud. Com essa ferramenta, os componentes podem passar sem esforço do projeto para o projeto. Digamos que você desenvolva um conjunto robusto de grupos de módulos para um site específico do cliente; Agora você pode aproveitá -los como base para as próximas tarefas. Dessa forma, todo projeto obtém a vantagem das soluções anteriores, mas mantém sua estética distinta.

Funciona perfeitamente com o sistema de design da Divi 5

Os grupos de módulos ficam muito interessantes quando você os usa com variáveis ​​de design e predefinições de grupo de opções. Digamos que você construa um grupo de depoimento: citação, nome do autor, empresa e foto.

Em vez de definir cores fixas, você faz referência às variáveis ​​de cores da sua marca. Para o estilo de cotação, você cria um grupo de opções predefinido para tipografia que inclua sua fonte, tamanho e altura de linha personalizados. Para o nome do autor, você aplica uma predefinição de grupo de opções de título diferente.

Agora salve esse grupo de módulos como um elemento global. Essas predefinições do grupo de opções conectam todos os depoimentos em todo o seu site ao seu sistema de design. Se o cliente quiser um cinza mais escuro, altere a variável uma vez e todos os módulos de grupo de depoimento serão atualizados. Se você precisar ajustar o estilo de cotação, edite a predefinição do grupo de opções de tipografia uma vez; Cada cotação de testemunho mudará instantaneamente.

Isso supera o gerenciamento de módulos individuais espalhados por toda parte. Seus grupos de módulos usam predefinições de grupo de opções para bordas, fundos e estilo de texto, portanto, a atualização de todos os fluxos predefinidos por todos os seus elementos agrupados automaticamente.

Saber mais

7. Gerente de atributos

Recurso lançado em 16 de maio de 2025

Você denominou um botão em um módulo de chamada à ação. As cores funcionam, e os efeitos do pau parecem bons. Agora você deseja esses mesmos estilos de botão em um formulário de contato, mas não quer a manchete ou o plano de fundo do CTA.

A cola de cópia regular não funcionará aqui: você conseguiria tudo ou nada. O Divi 5 permite copiar apenas as peças do botão graças ao seu recurso de gerenciamento de atributos. Clique com o botão direito do mouse no CTA, escolha o que copiar,

Em seguida, cole apenas esses estilos de botão no formulário de contato.

Escolha o que viaja

O Divi 5 divide todos os elementos em diferentes tipos de atributos. Você escolhe quais copiar:

• Todos os atributos - tudo é copiado
• Atributos de design - cores, espaçamento, predefinições, mas sem texto ou imagens
• Atributos de estilo - apenas suas alterações personalizadas
• Atributos de conteúdo - apenas texto e imagens
• Predefinições - apenas atribuições predefinidas

Digamos que você deseja o estilo de um botão, mas não seu texto. Atributos de design de cópia. Quer predefinição de fundo de uma seção, mas não seu preenchimento? Cópia apenas predefinições.

Trabalhos entre diferentes módulos

Você pode copiar atributos de um tipo de módulo e colá -los em um tipo diferente. Por exemplo, você pode copiar de um módulo de chamada em ação e colá -lo em um formulário de contato. O Divi 5 descobre quais configurações funcionam nos módulos e ignora o restante.

Isso ajuda ao criar locais que precisam do mesmo estilo em diferentes tipos de módulos. Você não precisa recriar as cores dos botões para cada formulário, depoimento ou outro módulo que usa botões.

Atalhos de nível de grupo

O sistema de atributos é mais profundo com o gerenciamento seletivo de grupos. Pule completamente os painéis de configurações. Clique com o botão direito do mouse e aplique grupos de atributos específicos diretamente no menu de contexto.

Você copiou um módulo com a predefinição perfeita do botão? Você pode colar exatamente esse botão predefinido para outros elementos através do menu seletivo. Não há caça de guias e mergulho.

A mesma precisão funciona para redefinição. Limpe todos os atributos de design, mantendo o conteúdo intacto. Ou redefinir apenas predefinições ao preservar as substituições de estilo personalizado.

Acelerar através de atalhos

Toda ação obtém atalhos de teclado que aparecem nos menus do contexto. Aprenda algumas combinações -chave e o estilo acelera. Os atalhos permanecem consistentes em todos os tipos de atributos, para que seus dedos aprendam os padrões rapidamente.

Isso vai além de economizar cliques. Ao criar canteiros com centenas de elementos, essas microeficiências se compõem a horas de tempo economizado. O trabalho manual repetitivo se torna ações rápidas e direcionadas.

Joga bem com seu sistema de design

O gerenciador de atributos se conecta diretamente ao ecossistema predefinido da Divi 5. Essas conexões do sistema viajam ao longo quando você copia um módulo usando predefinições de grupo de opções e variáveis ​​de design.

Os atributos de pasta que incluem predefinições, e esses novos elementos imediatamente se conectam ao seu sistema de estilo global. Atualize uma predefinição mais tarde e todo elemento copiado reflete a alteração automaticamente. Seu sistema de design permanece conectado à medida que você constrói e duplica rapidamente elementos.

Saber mais

8. Pesquisa e filtragem de configurações

Recurso lançado em 29 de maio de 2025

Construir sites significa ajustes de ajustes. Os módulos Divi embalam dezenas de opções em seus painéis, e caçando abas para esse campo de uma cor pode comer o seu dia. O Divi 5 traz de volta o recurso de pesquisa do Divi 4, mas faz com que funcione melhor.

Você recebe uma barra de pesquisa na parte superior de cada painel de configurações. Digite o que você precisa, e o Divi mostra apenas opções correspondentes. Procurando "fronteira"? Cada configuração relacionada à fronteira aparece enquanto todo o resto desaparece. Precisa ajustar o "preenchimento"? Todos os controles de espaçamento aparecem instantaneamente.

Isso elimina o clique e a rolagem que diminui seu trabalho. Em vez de abrir as abas e caçar grupos, você pode encontrar o que precisa em segundos.

Filtre pelo que você mudou

O tempo real é o filtro "modificado". Clique nele e veja apenas as configurações que você já ajustou. Isso ajuda quando você pega um pacote de layout ou site de partida e deseja ver o que foi personalizado.

Digamos que você importe um layout de negócios, mas deseja alterar as cores. Aperte o filtro modificado e localize todas as opções de cores personalizadas sem cavar todos os módulos. Você pode ver quais fontes foram alteradas, qual espaçamento foi ajustado e quais efeitos foram adicionados.

Isso também funciona muito bem para projetos de clientes. Quando alguém pergunta o que você personalizou no site, o filtro modificado mostra seu trabalho claramente.

Opções de filtragem inteligente

Além do filtro modificado, você fica classificando com os tipos de configuração. Ao atualizar sua paleta, o filtro "cores" mostra cada campo de cores de uma só vez. Quando as mudanças na tipografia são necessárias, os filtros "Famílias de fontes" e "pesos da fonte" revelam configurações de texto em todos os seus módulos.

O sistema sabe quais configurações mais importam. Cores e fontes recebem seus filtros porque são as mudanças mais comuns que as pessoas fazem. Os tamanhos são agrupados, pois os ajustes de espaçamento acontecem com frequência.

Esses filtros economizam cliques ao fazer alterações em todo o site. Em vez de abrir todos os módulos individualmente, você trabalha através de listas filtradas das configurações que você precisa modificar.

Saber mais

Como o Divi 5 se compara às opções populares

O mercado do construtor de sites está cheio de opções, mas o Divi 5 se destaca graças a alguns recursos genuinamente novos. Aqui está uma olhada no que torna o divi 5 diferente:

O que isso significa para seus projetos

A combinação de recursos do Divi 5 cria um sistema de design que outros construtores não conseguem corresponder. Somente as predefinições de grupo de opções e grupos de módulos colocam o Divi 5 à frente dos concorrentes.

Quando as variáveis ​​de design funcionam com predefinições e grupos de módulos, você obtém algo versátil. Variáveis ​​de referência dentro de predefinições, aplique -as a elementos agrupados e alterando os valores atualiza todos os elementos automaticamente em seu site. Adicione os próximos recursos do Flexbox e Loop Builder ao mix e você estará criando qualquer site sem a necessidade de codificação personalizada.

O que vem a seguir?

O Roteiro Divi 5 mostra atualizações contínuas que estarão em breve. Nossos desenvolvedores, divididos em sete equipes, trabalham em período integral em diferentes recursos, enviando atualizações pelo menos a cada duas semanas. Aqui está uma prévia do que você pode esperar nas próximas semanas:

Layouts do Flexbox

A maior mudança é o sistema completo de layout do Flexbox, que fica a poucas semanas da conclusão. Isso substituirá completamente como você cria layouts. Você receberá novos modelos de linha, centralização vertical automática, embalagem de conteúdo e distribuição de espaçamento por meio de controles visuais em vez de CSS personalizados.

Grupos de módulos acabaram de ser enviados como contêineres que agrupam módulos relacionados. Combinado com o FlexBox, você pode criar layouts de revistas, exibições de produtos com alturas correspondentes e alinhamentos complexos que anteriormente exigiam soluções alternativas. As seções especializadas desaparecem quando o Flexbox chegar.

Atualizações do construtor de loops e wooCommerce

Com base no sistema de layout do Flexbox e grupos de módulos, o Loop Builder permitirá que você repita qualquer coisa: módulos, grupos ou seções inteiras. Ao contrário de outros construtores que o bloquearão em modelos, você definirá o que se repete e o conectará ao conteúdo dinâmico. Loops aninhados também funcionarão. Por exemplo, categorias de blog que percorrerão as postagens, com cada postagem mostrando críticas em loop.

Os módulos WooCommerce serão reconstruídos do zero usando a arquitetura do Divi 5. Os módulos atuais funcionarão através da compatibilidade com versões anteriores, mas não interagem com predefinições ou variáveis. Os novos módulos de produtos serão concluídos em poucas semanas, colocando o suporte do WooCommerce no caminho certo para a beta.

Cores avançadas

Cores relativas com suporte de matiz, saturação e leveza (HSL) permite criar relacionamentos de cores matemáticas. Defina sua cor primária uma vez e, em seguida, gera variações automaticamente: “azul primário, mas 20% mais leve” ou tons complementares que atualizam quando você altera a base.

Beta e planejamento de migração

A beta começa quando os três objetivos estão concluídos: compatibilidade com versões anteriores para sites existentes, suporte completo ao módulo WooCommerce e correções contínuas de bugs com base no feedback alfa.

Se seguirmos o progresso atual, sugere uma versão beta em alguns meses. A equipe também está trabalhando no back -end para que os sites Divi 4 possam migrar sem a necessidade de alterações. Os módulos de terceiros do mercado Divi precisam de compatibilidade total.

Para novos projetos, o Divi 5 Alpha oferece capacidade suficiente para a maioria das construções. Somente as melhorias de desempenho justificam o interruptor. Os sites existentes se beneficiam de esperar a beta, a menos que novos recursos específicos sejam necessários.

Quando a versão beta chega, você obtém o conjunto de recursos completo, além de confiança de testes completos. O lançamento oficial segue logo depois, oferecendo uma base sólida para projetos futuros.

Pronto para experimentar o Divi 5? Veja como começar

Esses recursos exclusivos do Divi 5 funcionam juntos para criar algo diferente. Em vez de lutar contra o seu construtor por designs consistentes, você configura sistemas que se mantêm. Em vez de reconstruir os mesmos estilos repetidamente, você cria uma vez e reutiliza em todos os lugares - e este é apenas o começo!

Portanto, fique à frente da curva hoje, construindo um novo site usando o Divi 5. Ele está disponível para todos os membros da Divi gratuitamente. Basta ir para a área da sua conta e pegar uma cópia.

Depois que o WordPress estiver instalado, faça o upload do Divi 5, pois você carregaria um tema normal: Aparência> Temas> Adicionar novo tema de upload. Ative o tema, faça login com suas credenciais e construa! Sua primeira construção mostrará por que reconstruímos tudo do zero.

Lembre -se: use o Divi 5 apenas para novos sites agora. Não recomendamos migrar sites existentes durante a fase alfa.