Como substituir os estilos estáticos pelas variáveis de design do Divi 5

Se você já aprimorou as cores, preenchimento ou fontes de um módulo de cada vez, provavelmente percebeu o quão lento, propenso a erros e mudanças manuais podem ser.

O Divi 5 apresenta uma maneira mais inteligente de lidar com isso. Com variáveis de design e encontrar e substituir, você pode atualizar estilos estáticos em todo o layout e criar um sistema de design reutilizável em minutos. Vamos ver como.

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

O que são "estilos estáticos"?

Quando você importa um layout Divi ou usa uma seção pré-projetada, tudo, como fontes, cores, espaçamento e fronteiras, já vem definido. Se um layout não estiver usando predefinições, você notará que esses valores são aplicados em um nível de elemento.

Um título pode ter seu tamanho de fonte digitado manualmente, um botão pode usar um código de cores específico e o preenchimento ou espaçamento podem usar números fixos. Esses valores aplicados diretamente são chamados estilos estáticos.

E embora pareçam inofensivos no começo, eles podem se tornar um problema rapidamente quando você deseja fazer alterações. O problema com os estilos estáticos é que eles levam mais tempo para gerenciar. Se você deseja alterar a cor de todos os seus botões ou ajustar o espaçamento entre seções, você deve editar cada um manualmente. Isso é lento e frustrante.

Agora, imagine que você está atualizando uma marca completa do site manualmente ou trabalhando em um layout complexo cheio de estilos repetidos. Muitos designers compartilharam o quão frustrante esse processo pode ser. Mas, durante anos, não havia uma maneira confiável de corrigi -lo. É por isso que construímos uma solução mais inteligente no Divi 5.

Como o divi 5 facilita a substituição de estilos estáticos

Um de nossos objetivos com o Divi 5 é tornar seu fluxo de trabalho de design mais rápido e menos repetitivo. Para ajudar com isso, adicionamos dois recursos poderosos: variáveis de design , que permitem centralizar seus estilos e encontrar e substituir , o que permite atualizá -las instantaneamente em seu layout. Vamos entendê -los em detalhes.

Variáveis de design permitem definir seus estilos globais

Com o Divi 5, você pode finalmente criar sua própria estrutura de design visualmente e usá -la para modificar os estilos de sua marca rapidamente.

Em vez de aplicar manualmente a mesma cor, fonte ou espaçamento em todos os módulos, o Divi 5 agora permite salvar esses valores como variáveis de design. Esses são valores reutilizáveis que você pode referenciar em todo o site para tornar seu design mais consistente e fácil de manter.

Dentro do Visual Builder, o Variable Manager permite criar e organizar variáveis em seis tipos diferentes: cores, fontes, números (como espaçamento ou tamanhos), texto, imagens e links.

Você pode salvar cada variável com um nome claro, como o preenchimento da seção, portanto, encontrar e reutilizá -lo é mais fácil. Ao contrário de escrever variáveis CSS manualmente, a interface da Divi permite gerenciar esses valores visualmente sem tocar o código.

A aplicação dessas variáveis salvas também é mais fácil. Ao personalizar um módulo, vá para Configurações, localize o ícone do Variable Manager e escolha sua variável na lista.

Você verá a verdadeira vantagem na hora de fazer alterações. Digamos que você queira mudar o preenchimento em todos os lugares. Em vez de editar dezenas de módulos, você apenas atualiza os valores uma vez no Variable Manager e atualiza em todo o seu site.

Observe os valores que mudam em tempo real nos campos de configuração aplicados? Esse é o poder de um sistema de design global.

E isso também não se limita a estilos de design. Para gerenciar o conteúdo repetido de maneira eficaz, você também pode salvar texto, imagens e links, como um endereço, email ou slogan da empresa, como uma variável de conteúdo. Não há mais necessidade de copiar-se, basta inseri-lo como conteúdo dinâmico e permanecerá consistente em seu site.

Aprenda tudo sobre variáveis de design

Encontre e substitua permite que você mude de estilos estáticos para globais

O recurso de localização e substituição do Divi 5 permite atualizar rapidamente os valores de estilo em seu layout sem editar cada módulo individualmente. Ele foi projetado para ajudá -lo a alterar valores estáticos, como cores, fontes, espaçamento ou qualquer outra configuração que se repete entre seções de um único ponto de partida com apenas alguns cliques.

Para usá-lo, clique com o botão direito do mouse em qualquer campo de estilo dentro do Visual Builder ou pairando e clique nos três pontos. Você verá a opção Localizar e substituir no menu suspenso.

Isso abre um novo painel de localização e substituição . Aqui, você pode fazer as alterações desejadas e aplicá -las a granel.

• (1.) Elemento de origem: a configuração que você está segmentando (por exemplo, texto, cor ou espaçamento). Abra o menu suspenso e você notará que na verdade são a hierarquia de camadas.
• (2.) Encontre o valor: o valor exato que você deseja substituir, como uma fonte ou código de cores específico.
• (3.) Substitua o valor: o novo valor ou variável que você deseja aplicar.
• (4.) Encontre e substitua no local: Escolha onde aplicar a alteração. Este módulo, a seção ou a página inteira.
• (5.) Encontre e substitua no tipo de elemento: decida se a alteração deve se aplicar a todos os elementos ou apenas tipos específicos de módulos.
• (6.) Substitua apenas os campos idênticos: Quando ativados, as substituições ocorrem apenas se a configuração e o valor corresponderem exatamente.

Aqui está como funciona. Digamos que você queira alterar a fonte do cabeçalho usada em toda a página. Em vez de ir ao módulo por módulo, usaremos o painel Localizar e substituir.

Quando você o abre das configurações de um título, o elemento de origem é selecionado automaticamente, para que você nem sempre precise escolhê-lo manualmente.

(Você também pode clicar em diferentes elementos e as opções do painel se ajustam automaticamente.)

No valor de localização, insira o valor a ser substituído. Para o nosso exemplo, é Medula One, a fonte aplicada atual. No valor de substituição , escolha o novo valor que você deseja aplicar. Vamos selecionar Aclonica.

Em seguida, selecione se deseja atualizar todas as instâncias em toda a página ou apenas na coluna, linha ou seção no local de localização e substituição. Mantenha a localização e substituição no tipo de elemento como todos os elementos, pois queremos atingir todos os módulos de cabeçalho.

E é isso. Basta pressionar Localizar e substituir e, em segundos, 20 instâncias de cabeçalho são atualizadas. Observe que o texto do corpo e as fontes de botão permanecem intocados? Isso porque eles usam valores diferentes. E é assim que o sistema é preciso.

O Divi aplica apenas alterações onde encontra uma correspondência exata. Isso significa que você pode limpar os estilos estáticos com confiança, sem estragar os designs que não precisam mudar. Mas como as variáveis de design se encaixam aqui?

Eles são como a cereja no bolo. Você também pode usar variáveis de design no campo Substituir valor . Passe o mouse, clique no ícone do Variable Manager e insira uma variável salva.

Isso vincula seus estilos a um sistema globalmente reutilizável que é muito mais fácil e mais eficiente de atualizar. É exatamente assim que substituiremos todos os nossos valores estáticos por variáveis de design para à prova de futuro nosso site para obter atualizações mais fáceis.

Aprenda tudo sobre encontrar e substituir

Ambos os recursos (e muitos mais) estão disponíveis no Divi 5. O construtor foi reimaginado para oferecer desempenho mais rápido, fluxos de trabalho mais inteligentes e mais controle. Honestamente, ler sobre eles é emocionante, mas você notará a mudança real quando experimentar esses recursos.

Como substituir estilos estáticos por variáveis salvas

Agora que você sabe quais ferramentas usaremos, é hora de vê -las em ação.

Para orientá -lo no processo, eu importei o layout da página de destino da loja de tortas como exemplo. Os detalhes do design deste layout, como fontes, cores e espaçamento, foram aplicados como estilos estáticos. A maneira tradicional exige que você personalize o módulo por módulo. Mas neste tutorial, substituí -los passo a passo usando o fluxo de trabalho que acabamos de abordar.

Mas antes de mergulhar, reserve um momento para digitalizar seu layout em busca de padrões. Procure estilos repetidos, como a mesma cor usada entre os botões, tamanhos de fontes semelhantes nos títulos, espaçamento consistente entre seções ou configurações de borda idênticas. Esses valores repetidos são seus melhores candidatos a variáveis de design, especialmente se você é provável que as alterarem mais tarde.

1. Salve suas variáveis de design

Depois de analisar o layout da loja de tortas, identifiquei alguns valores que aparecem consistentemente em toda a página e gostariam de atualizá -los com meus estilos preferidos. Estes incluem:

• Largura da borda da linha
• Preenchimento de botões
• Texto do cabeçalho
• Texto corporal
• Cor do texto corporal

No momento, eles são aplicados como estilos estáticos. Portanto, em vez de repetir as mesmas configurações manualmente, as convertirei em variáveis de design. Isso me dá uma estrutura simples e reutilizável para atualizar os estilos de página com apenas alguns cliques.

Vamos começar com a largura da fronteira nas linhas. Para criar e salvar uma variável, abra o gerenciador de variáveis e escolha o tipo. Para a largura da borda de uma linha, escolherei a variável de número . Em seguida, nomeie sua variável e atribua -lhe um valor. Clique em Salvar variáveis.

Uma vez salvo, essa variável está pronta para ser reutilizada com um clique. Ele aparecerá em qualquer lugar que a largura da borda possa ser definida. Seguirei o mesmo processo para o texto do cabeçalho, a fonte do corpo, a cor do texto e o preenchimento de botões. Essas variáveis salvas agora formam a base da linguagem de design do meu layout. Você faz o mesmo.

Dessa forma, se você decidir ajustar o espaçamento do botão ou alterar a fonte mais tarde, não precisará atualizar todos os módulos um por um. Basta atualizar a variável e o restante se atualizará.

2. Use Localizar e substituir para alternar estilos estáticos para variáveis

Com nossas variáveis de design prontas, a próxima etapa é substituir os valores estáticos no layout usando o encontro e a substituição. Vamos começar com o preenchimento de botões.

No momento, cada botão usa o preenchimento inserido manualmente: 6px para superior e inferior e 1px para a esquerda e a direita. Para trazer consistência e facilitar as atualizações, criei duas variáveis:

• Button-T = 12px para preenchimento superior e inferior.
• Button-L = 32px para preenchimento esquerdo e direito.

Para aplicá-las, abrirei as configurações de qualquer botão, irei para o design> Espaçamento> preenchimento , clique com o botão direito do mouse no valor do preenchimento e escolha Localizar e substituir nas opções.

No painel de localização e substituição, substituirei o valor estático existente pela variável salva do Variable Manager.

Depois de clicar em Localizar e substituir , todas as instâncias de cinco botões da página atualizam instantaneamente para usar os novos valores de preenchimento.

Você pode seguir as mesmas etapas para outros estilos estáticos que identificamos anteriormente. Use Localizar e substituir para trocar cada um com suas variáveis salvas e você acabará com um layout totalmente conectado ao seu sistema de design global.

3. Converta seus estilos preferidos em predefinições (opcional)

Esta etapa é opcional para o escopo deste artigo, mas é uma maneira poderosa de estender seu sistema de design.

Depois de substituir os estilos estáticos por variáveis, você pode salvar esses módulos como predefinições de grupo de opções. Por exemplo, depois de atribuir uma variável salva para a largura da borda a uma linha, salvei essa linha como predefinição de borda de linha.

O uso de variáveis dentro de predefinições significa quaisquer atualizações futuras para o seu sistema de design, como alterar o valor de uma variável, refletirá automaticamente em todos os módulos usando essa predefinição. Não há necessidade de reaplicar ou atualizar nada manualmente.

Portanto, não apenas atualizamos a página inteira com uma nova marca em apenas alguns cliques, mas também criamos um sistema flexível que torna futuras atualizações mais rápidas, mais fáceis e totalmente conectadas. Como isso funciona em um layout real? Hora de vê -lo em ação.

Atualizar os estilos de sua página é mais fácil do que nunca

A razão pela qual mudamos de estilos estáticos para as variáveis de design é simples: elas facilitam as atualizações. Com as variáveis de design no lugar, a edição do seu layout se torna incrivelmente simples.

Se você deseja alterar a fonte do seu site, não precisa editar cada módulo um por um. Basta abrir o Variable Manager, atualizar o valor da fonte que você salvou anteriormente e a alteração se aplica a todos os lugares em que a variável é usada.

As predefinições do seu grupo de opções também serão atualizadas automaticamente se elas usam variáveis de design. Isso mantém seus estilos conectados, para que você não precise repetir as mesmas edições em diferentes módulos ou páginas.

Quando personalizei o layout da loja de tortas mais cedo, não ajustei manualmente cada botão ou cabeçalho. Eu simplesmente editei minhas variáveis salvas. A fonte, o preenchimento e as cores que defini anteriormente aplicadas na página automaticamente. O layout seguiu o sistema que eu já construí.

Claro, ajustar o preenchimento ou a alteração de uma cor em um módulo não é difícil. Mas quando você está atualizando dezenas de estilos em um site inteiro, a diferença é enorme. Não é apenas mais rápido, é mais limpo, mais confiável e muito menos propenso a erros.

Esse é o valor real da mudança para variáveis: todo o seu design se torna mais fácil de gerenciar. E quando seu cliente pede uma rápida mudança de marca no próximo mês? Você terminará antes de terminar o café.

Facilitar as edições em massa com a localização e substituir

Você não precisa começar do zero toda vez que seu design mudar. Com o sistema da Divi 5, as atualizações parecem menos uma tarefa e mais como um simples passo à frente.

Este fluxo de trabalho não é apenas útil durante a configuração. É o que facilita as atualizações futuras. Se seu cliente pede uma nova fonte ou você deseja testar uma cor da marca diferente, você pode fazer a alteração uma vez e vê -la refletida em todos os lugares.

O Divi 5 foi projetado para apoiar como as pessoas reais projetam sites. E agora, seu sistema de design pode ser tão flexível quanto suas idéias.