Apresentando variáveis ​​de design para divi 5

Estou animado para introduzir variáveis ​​de design para o Divi 5, um novo recurso que melhorará significativamente o fluxo de trabalho de design da Divi e dará aos usuários da Divi uma vantagem séria em relação a outros construtores.

Você pode definir variáveis ​​para qualquer coisa, como cores, fontes, números, imagens e texto e conectá -las a elementos e predefinições divi. Quando você atualiza uma variável, o design e a mudança de conteúdo do seu site.

A sinergia entre variáveis ​​e o novo sistema de design baseado em predefinição da Divi é fantástico. Deixe -me mostrar como funciona.

Confira o vídeo a seguir para ver o novo recurso em ação.

Divi vai "global" com gerenciamento de variáveis

Graças ao sistema de cores globais da Divi, você já pode estar familiarizado com o conceito de uma variável de design. Uma cor global é um tipo de variável de design. Com esta atualização, no entanto, estamos apresentando tudo global! Além disso, o gerenciamento de suas configurações globais é mais fácil do que nunca, graças a um novo gerenciador de variáveis.

Criando novas variáveis

O ícone Variáveis ​​na barra lateral esquerda abrirá o gerenciador de variáveis ​​do seu site. Adicione uma nova variável, dê um nome e valor e você pode conectar essa variável em configurações relevantes em qualquer página. Atualmente, o Divi suporta seis tipos de variáveis ​​que cobrem todos os campos de entrada nativos da Divi:

• Cores : as cores são essenciais para todos os sites; A maioria dos sites usa apenas três a quatro cores primárias. Definir variáveis ​​de cores e usá -las através do seu site significa que você pode ajustar a paleta de cores de todo o site em segundos.
• Fontes : A era de trabalhar com fontes estáticas acabou. Além disso, você não está mais limitado às configurações globais de fontes no personalizador de temas. Você pode definir as fontes do seu site como variáveis ​​e gerenciá -las em um só lugar.
• Números : você pode usar variáveis ​​de número para projetar o sistema de dimensionamento do seu site. Por exemplo, você pode usar um tamanho padrão do radiato de fronteira em todos os elementos. Transformar isso em uma variável permitirá que você ajuste o tamanho dos cantos arredondados, editando uma única variável. Outros usos cotidianos incluem a definição de tamanhos de texto e alturas de linha do seu site, larguras e espaçamento de contêineres, e tudo mais.
• Imagens : você usa a mesma imagem em várias páginas? Por exemplo, você pode ter uma imagem de fundo padrão que serve como um motivo familiar de marca. Se você transformar isso em uma variável, é fácil atualizar sua marca no caminho.
• Texto : as variáveis ​​não se limitam ao design; Você também pode definir variáveis ​​de texto. Por exemplo, se você transformar o número de telefone da sua empresa e o endereço em variáveis ​​de texto, não precisará caçar todos os lugares em que você usou essas variáveis ​​quando os detalhes da empresa mudarem.
• URLS : Também jogamos variáveis ​​de URL, porque por que não? Você pode ter seu link principal de chamada à ação em diferentes páginas durante diferentes épocas do ano (alterando -o durante uma venda, por exemplo). Em vez de atualizar esse URL em todos os lugares, atualize a variável única.

Usando variáveis ​​em elementos e predefinições

Clique no ícone Variáveis ​​acima das configurações para escolher entre uma lista de variáveis ​​relevantes e conteúdo dinâmico do seu site.

O sistema de conteúdo variável e dinâmico da Divi foi estendido a todos os campos, onde anteriormente estava disponível apenas nos campos de conteúdo. Isso significa que você pode atribuir variáveis ​​e conteúdo dinâmico a campos numéricos, campos de fonte, etc.

Exemplos de variáveis ​​de design

As variáveis ​​de design são instrumentais e rapidamente se tornarão um componente central do fluxo de trabalho do Divi Design. Mas se o conceito não clicou, deixe -me dar alguns exemplos.

Exemplo um: Gerenciar fontes globais

Como você pode usar variáveis ​​de design para melhorar seu fluxo de trabalho? Primeiro, vamos considerar variáveis ​​de fonte.

A maioria dos sites usa duas a três fontes. Você provavelmente passou um tempo configurando o corpo desejado e as fontes de texto em vários elementos e predefinições.

Mas e se você quiser mudar as coisas? Mesmo se você projetou seu site de maneira ideal com predefinições, pode ser demorado voltar e alterar as fontes. Você pode nem se lembrar de todos os lugares em que usou uma fonte específica.

É aí que entra as variáveis ​​de fonte.

Eu construí o site no vídeo acima usando três variáveis ​​de fonte: uma fonte de título, uma fonte corporal e uma fonte de destaque.

É fácil adicionar a variável de fonte de título a elementos como a predefinição padrão do Blurb. Como nunca usei valores de fonte estática, mas conectados às minhas variáveis, as fontes no meu site são totalmente dinâmicas.

Alterar a fonte do título do meu site é tão fácil quanto atualizar a variável de fonte do título.

Exemplo dois: Gerenciar tamanhos globais

Você pode fazer a mesma coisa com tamanhos de texto.

Para o site no vídeo abaixo, defini uma série de oito tamanhos de texto para vários níveis de título e estilos de texto corporal. Quando atualizo minha predefinição padrão e atribuo a variável de tamanho de texto de título médio, todos os títulos dos meus títulos de Blurb herdam o valor dessa variável.

Como baseio os tamanhos de texto do meu site inteiro em variáveis, posso gerenciar os tamanhos de texto do meu site inteiramente do Variable Manager.

Exemplo três: globalize todo o seu site

No vídeo acima, você pode ver um site alavancando todo o poder das variáveis. Todas as cores são variáveis, assim como as fontes, tamanhos de texto, tamanhos de radio de borda e valores espaçados nos elementos do meu contêiner.

Não apenas isso, mas também transformei o conteúdo compartilhado em variáveis. O nome da minha empresa, o número de telefone e o endereço são variáveis ​​de conteúdo.

Até a imagem em segundo plano, um motivo familiar de marca em todo o site, é uma variável de imagem que posso mudar facilmente.

Tente divi 5 hoje

As variáveis ​​de design para o Divi 5 estão disponíveis hoje e é um dos muitos recursos que chegam ao Divi este ano.

Você pode acompanhar à medida que avançamos no lançamento final do Divi 5 e além, com atualizações a cada duas semanas. Dependendo de suas prioridades, você pode usar o Divi 5 agora para criar novos sites ou esperar até adicionar mais recursos, o que funciona melhor para você.

Conforme descrito no cronograma de lançamento multifásico original do Divi 5, o Divi 5 Public Alpha é como "Divi 5 Lite". Está faltando alguns recursos e pode não ser adequado para sites existentes, mas está pronto para ser usado em novos sites, se você preferir a experiência do Divi 4.

Queremos que você experimente e, se você gosta, use -o; Quando todo mundo adora, vamos tornar -o oficial.

Espreita furtiva: linhas aninhadas

Estamos construindo recursos rapidamente . Toda vez que terminamos um novo recurso, começamos um novo. Sempre que iniciamos um novo recurso, eu dado a você uma prévia.

Caso você tenha perdido, consulte o recurso Sneak Peek da semana passada, onde mostrei linhas aninhadas. Linhas dentro das linhas! É uma idéia simples, mas um primeiro passo essencial para criar um sistema de layout mais flexível para o Divi 5.

Assista a este vídeo para todos os detalhes.

Mais atualizações do Divi 5 estão a caminho

2025 é o ano do Divi 5 . O trabalho tedioso está para trás. Construímos a fundação super-rápida e agora é hora de o Divi voltar.

Obrigado por assistir e antes de você ir, tenho um favor a perguntar. Se você estiver aqui para o retorno do Divi, comente neste vídeo; Vou ler todos os comentários. Eu adoraria ver este vídeo chegar a duzentos comentários , então verifique a contagem de comentários e dê -nos uma mão, se puder. É uma ótima maneira de alimentar o algoritmo e, mais importante, gostamos de conversar com você.

Não se esqueça de nos seguir no YouTube e assinar o boletim informativo Divi para que você nunca perca uma atualização. Vejo você em breve para outro anúncio do Divi 5, que eu prometo que estará ao virar da esquina.