Como substituir as fontes pelas variáveis de design de fontes do Divi 5

As atualizações de fontes podem ser uma dor de cabeça. Mude uma fonte de título e, de repente, você está rastreando todos os pontos. Perdem um título ou dois, e seu design parece imediatamente desligado. Atualizar manualmente as fontes convida a inconsistência.

O Divi 5 resolve isso com variáveis e predefinições de fonte. Em vez de perseguir todas as instâncias, você pode definir suas fontes uma vez e deixar o sistema lidar com o resto. A tipografia permanece limpa e unificada, não importa quantos módulos você use. Dê uma olhada em como isso pode ser simples.

Por que as fontes estáticas podem criar problemas

As configurações de fonte estática criam uma rede de complicações que pioram com o tempo. Quando você adiciona fontes diretamente a cada elemento, você espalha as opções de tipografia em centenas de lugares diferentes.

Você constrói um site usando o Playfair Display para títulos e poppins para o texto do corpo. Alguns meses depois, você deseja mudar para uma pilha de fontes mais moderna. Agora, você caça em todos os módulos, todas as predefinidas, todas as configurações personalizadas para descobrir onde vivem essas fontes. Solta até mesmo um cabeçalho enterrado profundamente em uma seção de depoimento, e seu design pode parecer quebrado.

Quando você atualiza manualmente as fontes uma a uma, você pode acidentalmente usar tamanhos ou pesos diferentes. Você atualiza a maioria dos títulos para 32px, mas perde alguns que ficam em 28px. Seu design outrora coesivo agora parece desequilibrado.

Esse método disperso transforma a fonte simples em grandes projetos. O que deve levar minutos de alongamentos em horas de caça e atualização tediosas. Você gasta mais tempo gerenciando a tipografia do que realmente projetando com ela.

O que você deve usar: Variáveis de design e predefinições do Divi 5

As variáveis de design armazenam suas configurações de design, que você pode reutilizar em qualquer lugar. Defina uma fonte uma vez, salve -a como uma variável de design e use -a em seu site. Altere a variável posteriormente e todos os elementos que o utilizam atualizam automaticamente.

O Divi oferece seis tipos de variáveis: números, texto, imagens, links, cores e fontes. Duas variáveis de fonte padrão estão prontas para uso: uma para títulos e outra para texto corporal. O Variable Manager está na barra lateral esquerda no ícone do banco de dados.

Essas variáveis funcionam em campos que não os suportam, como campos numéricos, campos de fonte e configurações de espaçamento. Clique no ícone variável ao lado de qualquer campo suportado para ver suas opções.

Que opções o grupo predefinições fazem

As predefinições de grupo de opções salvam grupos de estilo específicos, como tipografia, bordas ou espaçamento, não módulos inteiros. Por exemplo, você pode criar uma predefinição apenas para liderar fontes e tamanhos.

Quando você aplica uma predefinição do grupo de opções, isso muda apenas essa área de estilo. O restante do seu módulo permanece o mesmo. Você pode combinar predefinições diferentes em um elemento sem problemas. Misture as variáveis de design com predefinições de grupo de opções para obter mais flexibilidade. Crie predefinições que usam suas variáveis. Quando você atualiza uma variável, todas as predefinições também a atualizam.

Guia passo a passo para criar um sistema de fonte dinâmico com Divi 5

A configuração das variáveis de fonte leva cerca de vinte minutos. Quando eles funcionam, as mudanças de fonte acontecem instantaneamente em todo o seu site. Veja como chegar lá:

1. Crie variáveis de fonte para o seu novo sistema

Abra o Variable Manager clicando no ícone do banco de dados na barra lateral esquerda. Vá para a guia Fontes. Você verá duas variáveis padrão: uma para títulos e outra para texto corporal.

• Configure suas fontes principais: clique na variável de título. Escolha sua família de fontes e peso e salve -o. Faça o mesmo com o texto do corpo, mas escolha algo limpo e fácil de ler.
• Adicione mais fontes, se necessário: alguns designs precisam de fontes extras para cotações, depoimentos ou texto especial. Clique em "Adicionar nova variável" e dê um nome claro.
• Preencha todos os detalhes: cada variável contém sua família de fontes, peso, estilo e outras configurações. Use pesos em negrito para manchetes, pesos regulares para texto corporal e itálico quando você deseja adicionar ênfase.
• Mantenha seus nomes simples: em vez de confundir rótulos, chame -os de "Fontra da CITAÇÃO" ou "FONTE DESPECT".
• Lembre -se de salvar: suas alterações não grudam até que você pressione o botão Salvar.

A maioria dos sites só precisa de fontes e fontes corporais. Adicione apenas variáveis extras para necessidades especiais de design, não pequenos ajustes de texto. Menos variáveis facilitam a criação de novos conteúdos.

2. Adicione variáveis de número para tamanhos de fonte

Alterne para a guia Números no Variable Manager. Aqui, você cria variáveis de tamanho que funcionam com suas fontes. Pense nisso como sua escala de tipografia.

Comece com os tamanhos do cabeçalho. Crie variáveis chamadas H1, H2, H3 e assim por diante. Defina cada um como um tamanho diferente que faz sentido para o seu design. Você pode usar valores regulares de pixels como 32px ou unidades responsivas como Clamp () para tamanhos que se adaptam a outras telas.

O texto corporal também precisa de sua variável de tamanho. Chame de algo como "tamanho do corpo" e defina -o como um tamanho confortável de leitura, geralmente em torno de 16 px a 18px.

Você também pode criar variáveis para necessidades especiais de texto. Talvez você queira uma variável de "texto pequeno" para legendas ou uma variável de "texto grande" para depoimentos. Nomeie -os claramente para que você se lembre do que eles são mais tarde.

Essas variáveis de números funcionam em qualquer lugar que você precisa de dimensionamento consistente. Use -os para alturas de linha, espaçamento ou qualquer medição que apareça várias vezes em seu site. Quando você atualiza uma variável numérica, tudo o que ela é alterado automaticamente.

A maioria dos sites só precisa de fontes e fontes corporais. Adicione apenas variáveis extras para necessidades especiais de design, não pequenos ajustes de texto. Menos variáveis facilitam a criação de novos conteúdos.

3. Use Localizar e substituir para trocar fontes estáticas

Clique com o botão direito do mouse em qualquer campo de fonte nas configurações do seu módulo para ver a opção Localizar e substituir. Isso abre um painel em que o Divi carrega suas configurações de fonte atual automaticamente. Agora você pode trocar essa fonte estática com uma de suas variáveis de design.

O campo de elemento de origem mostra qual módulo você iniciou. Você pode alterar isso para escolher qualquer outro elemento na sua página como ponto de partida.

O valor de localização exibe qualquer fonte que você deseja substituir. Em vez de escolher outra fonte estática, defina o valor de substituição em uma das variáveis de design da fonte.

Encontre e substitua as obras para tamanhos de fonte também. Clique com o botão direito do mouse em qualquer campo de tamanho da fonte para acessar o mesmo painel de substituição. Isso permite trocar tamanhos no nível do elemento, como 24px com suas variáveis de números.

Procure módulos de texto em que você defina manualmente tamanhos de fonte. Essas configurações de tamanho disperso criam os mesmos problemas que as fontes estáticas. Quando você deseja ajustar sua escala de tipografia, você acaba caçando todos os módulos para encontrar cada tamanho. Substitua esses tamanhos estáticos pelo seu H1, H2, tamanho do corpo ou outras variáveis de número.

Defina seus limites de substituição

Encontre e substitua os controles de localização onde as mudanças acontecem. Escolha “Página inteira” para atualizar fontes em todo o seu layout. Escolha “Elemento atual e crianças” para limitar as alterações nessa seção específica e qualquer coisa aninhada dentro dele.

Você também pode atingir contêineres pais ou áreas de página específicas.

Encontre e substitua o tipo de elemento ajuda a se concentrar em módulos específicos. Selecione “Todos os elementos” para uma troca completa de fonte ou escolha “Módulos” para pular recipientes e elementos estruturais. Você pode ficar ainda mais específico, direcionando -se apenas a determinados tipos de módulos.

Evite substituições acidentais

A opção "Somente substituir campos idênticos" impede alterações indesejadas. Ative isso quando deseja substituir as fontes sem afetar outras configurações que podem compartilhar o mesmo valor.

Isso mantém o raio da borda a 10px, mesmo quando você está substituindo uma fonte que é chamada de "10px" ou algo semelhante.

Sem essa configuração, encontre e substitua o valor do seu valor alvo em todos os lugares. Com ele ativado, o sistema altera apenas os campos de fonte reais, deixando outras configurações de design sozinhas.

4. Trabalhe através do seu sistema de fontes

Você precisará de operações de localização e substituição separadas para diferentes pesos e estilos da fonte. Seu site pode usar a mesma família de fontes em pesos regulares e ousados. Lidar com cada variação individualmente, substituindo -as pelas variáveis de design apropriadas que você criou anteriormente.

Cada vez, o processo é o mesmo: clique com o botão direito do mouse no campo da fonte, defina seu valor de substituição como uma variável de design, escolha seu escopo e aplique as alterações. Repita isso para cada fonte estática que precisa ser atualizada.

5. Crie predefinições com suas variáveis

Acesse qualquer módulo de texto e navegue até a guia Design. Localize a tipografia e clique no ícone predefinido. Selecione sua variável de fonte do cabeçalho no menu suspenso. Aplique sua variável de número H1 para dimensionamento.

Configure os valores de altura da linha e espaçamento. Nomeie o “cabeçalho principal” predefinido e salve -o. Clique no ícone de estrela para definir isso como seu padrão. Novos módulos de texto adotarão automaticamente essas configurações. Todos os módulos existentes com a mesma tag de título e nenhum estilo também herdará essas configurações.

Você pode repetir esse processo para cada nível de cabeçalho. Cada predefinição mantém consistência enquanto serve diferentes propósitos.

Essas predefinições de tipografia funcionam com qualquer módulo que contenha campos de texto. Os módulos, conteúdo de acordeão, depoimentos e formulários de contato de Blurb aceitam as mesmas predefinições. Essa compatibilidade cruzada elimina tarefas repetitivas de estilo.

Predefinições de grupo de opções direcionam apenas categorias de estilo específico. Aplique um título predefinido ao texto do botão, mantendo as configurações de fundo e borda do botão intactas.

6. Estenda suas novas variáveis em todos os elementos

Clique com o botão direito do mouse em qualquer elemento usando suas novas variáveis. Selecione "Extend atributos" do menu. Configure o elemento de origem como seu módulo recentemente atualizado.

Defina o local como “Página inteira” para atualizações completas. Em tipos de atributos, escolha "Styles" para se concentrar apenas nos elementos de design.

Habilite “Somente substitua campos idênticos” para evitar alterações indesejadas no preenchimento, margens ou outros valores numéricos que podem corresponder aos tamanhos da fonte. Selecione "Todos os elementos" para atualizar módulos e contêineres ou escolha "Módulos" para direcionar os elementos de conteúdo especificamente.

Processar páginas complexas em seções menores, em vez de atualizações em todo o local. Selecione “Seção atual” para limitar as alterações em uma área por vez. Comece com a seção do cabeçalho. Aplique extensões variáveis, revise os resultados e prossiga para as principais áreas de conteúdo. Complete a seção do rodapé por último.

Essa abordagem metódica identifica os conflitos de formatação antecipada e controla o processo de atualização.

Divi 5 facilita a tipografia

Você costumava mudar do Playfair Display para algo moderno e atualizar a maioria dos títulos, mas perder esse depoimento na página três. Seu site parecia desigual por semanas.

As variáveis do Divi 5 otimizam a tipografia do seu site. Altere sua variável de cabeçalho do ícone do banco de dados na barra lateral e cada módulo de texto atualiza instantaneamente. Esse rodapé do formulário de contato está incluído.

Da próxima vez que você renomeará, você atualizará duas variáveis em vez de clicar em cinquenta módulos. A ferramenta de localização e substituição captura o que você normalmente sentiria falta. Sua tipografia permanece apertada e seus fins de semana ficam seus.