Como alterar rapidamente os estilos de pacote de layout com find e substituir

Atualizar o design de um pacote de layout completo parece simples até você perceber que você precisa alterar os mesmos estilos em cinco ou seis páginas diferentes. Como esses estilos são aplicados como valores estáticos, mesmo uma pequena atualização, como alterar a fonte ou ajustar o preenchimento da seção, torna-se demorado quando é feito página por página.

Mas e se você pudesse atualizar todos esses estilos repetidos em apenas alguns cliques? É exatamente isso que encontra e substituição no Divi 5. Esteja você trocando fontes, substituindo as cores ou ajustando o espaçamento, esse recurso ajuda a fazer alterações em todo o layout instantaneamente. Mostraremos como usá -lo para limpar e restabelecer um pacote de layout inteiro.

O que é encontrar e substituir no divi 5

Encontre e substituir é um recurso no Divi 5 que permite atualizar rapidamente valores repetidos de estilo em seu layout. Seja uma fonte, um código de cores, preenchimento ou mesmo um efeito de sombra, agora você pode alterar esse valor uma vez e aplicá -lo em vários elementos.

Então, como isso realmente funciona? Começa com qualquer módulo no Visual Builder. Passe o mouse sobre um campo de estilo, como a cor do texto ou o tamanho da fonte, e você verá um ícone de três pontos. Clique nele (ou clique com o botão direito do mouse no campo) e selecione Find & Substituir .

Isso abre um painel onde você define qual valor substituir, qual deve ser o novo valor e onde aplicar a alteração. Você pode mantê-lo focado apenas nesse módulo, expandi-lo para toda a seção ou ir em toda a página.

Depois de experimentar esse fluxo de trabalho, você entenderá por que é uma ferramenta tão útil. Em vez de procurar dezenas de módulos para alterar a mesma cor ou fonte, você faz uma atualização direcionada e o vê ondulando em todo o seu layout em segundos. Mas, para realmente desbloquear o potencial do Find e Substituir, você precisa ver como ele funciona com variáveis de design, o que muda tudo.

Como encontrar e substituir ajuda a atualizar os estilos de layout mais rápido

Passamos por dois cenários: primeiro, uma operação básica de localização e substituição, depois a mesma tarefa usando variáveis de design (esta é a arma secreta).

Usando Localizar e substituir no Divi 5

O processo é direto: acioná -lo de qualquer campo de estilo, escolha o que substituir e aplique a alteração em vários módulos. Vamos passar por isso com um exemplo real.

Digamos que você deseja aumentar o tamanho da fonte de todos os títulos da sua página. Comece clicando em qualquer módulo de cabeçalho dentro do Visual Builder. Vá para Configurações> Design> TEXTO DE CABEÇA> TEXTO DE TEXTO H1 Tamanho da fonte. Clique com o botão direito do mouse ou passe para encontrar a opção Localizar e substituir, entre outros.

Isso abre o painel de localização e substituição por muitas opções:

• (1) Elemento de origem: isso define a configuração que você está segmentando, como tamanho de texto, cor ou preenchimento. É selecionado automaticamente com base em onde você abriu o painel.
• (2) Encontre o valor: o valor atual usado no seu layout. Isso pode ser um tamanho de fonte como 30px, um código de cores como #000000 ou qualquer outra configuração de design. Isso é adicionado automaticamente.
• (3) Substitua o valor: o novo valor que você deseja aplicar. O Divi procura o valor correspondente e o substitui por este.
• (4) Encontre e substitua no local: Escolha onde a alteração deve ser aplicada. Você pode limitá -lo a um único módulo, sua seção ou a página inteira.
• (5) Encontre e substitua no tipo de elemento: decida quais módulos a alteração deve afetar. Você pode aplicá -lo a todos os módulos ou apenas tipos específicos, como botões, texto ou desbotamento.
• (6) Substitua apenas os campos idênticos: Ligue para atualizar apenas campos que correspondem exatamente ao valor de localização. Isso ajuda a evitar mudanças acidentais em elementos não relacionados.

Por exemplo, estamos substituindo o tamanho da fonte de 30px para um grampo de fluido (20px, 4VW, 50px). Selecionamos a página inteira e todos os elementos, pois queremos atualizar todos os títulos na página.

Clique no botão Localizar e substituir e observe o que acontece. Todos os títulos com tamanho de fonte de 30px agora têm um valor de pinça de fluido ().

Os outros títulos permaneceram inalterados porque o Divi apenas atualiza valores que correspondem exatamente ao seu escopo selecionado. Nenhuma edição manual necessária, e nem mesmo mudanças acidentais em elementos não relacionados. Essa precisão o torna perfeito para limpar os estilos padrão nos pacotes de layout.

Aprenda tudo sobre a descoberta dos divi e substitua

Usando variáveis de design no encontro e substitua

Encontre e substituir se torna ainda mais poderoso quando emparelhado com variáveis de design. Em vez de substituir um valor estático por outro valor estático, você pode substituí -lo por uma variável salva do gerenciador de variáveis. Isso cria um sistema de design consistente que é fácil de atualizar posteriormente.

Vamos continuar com o mesmo exemplo, atualizando todos os tamanhos das fontes. Mas desta vez, em vez de substituir 30px por um valor de grampo direto, substituiremos -o por uma variável denominada tamanho da fonte H3.

Primeiro, crie a variável. Abra o gerente variável da barra lateral esquerda e vá para a coluna numérica . Nomeie sua variável, atribua um valor e salve.

Isso disponibiliza a variável em todos os campos de tamanho da fonte. Agora vem a mágica: você pode usá -lo diretamente no painel Localizar e substituir para atribuir a variável salva a todos os tamanhos das fontes de título de uma só vez.

Abra o painel Localizar e substituir como antes. No campo Substituir Valor , passe o mouse sobre a entrada e clique no ícone Variable Manager . Selecione sua variável salva, tamanho da fonte H3 e continue com as mesmas configurações.

Clique em Localizar e substituir para aplicar a alteração. Todos os títulos que usam 30px agora referenciarão a variável de tamanho da fonte H3 em vez de um número fixo.

Aqui é onde fica interessante. Precisa ajustar esse tamanho de fonte mais tarde? Vá para o gerenciador de variáveis , abra a variável do tamanho da fonte H3 e altere o valor. Atualize o grampo para o grampo (24px, 5VW, 60px) e cada cabeçalho usando essas atualizações variáveis automaticamente.

Não há necessidade de repetir e substituir. Com uma atualização, seu layout ajusta em todos os lugares que a variável é usada.

Essa combinação de variáveis de localização e substituição e design torna a atualização de pacotes de layout inteiros tão eficientes e seguiremos esse processo neste tutorial. Você definirá suas variáveis de design uma vez e use o Find e o Substituir para alternar de valores estáticos para variáveis salvas em todas as páginas. Depois disso, a atualização se torna fácil.

Aprenda tudo sobre as variáveis de design da divi

Pronto para colocar isso em prática? Você precisará do Divi 5 para usar as variáveis de localização e substituição e design. O construtor foi completamente reconstruído para um desempenho mais rápido e fluxos de trabalho mais inteligentes.

Como substituir os estilos em um pacote de layout

Agora que você sabe como encontrar e substituir funciona e como combiná -lo com variáveis de design, vamos colocá -lo em ação em um pacote de layout real. Para o nosso exemplo, importaremos o sistema de gerenciamento de aprendizagem, que inclui várias páginas como casa, sobre contato, pouso de curso e preços.

Cada página usa as mesmas fontes, cores e espaçamento, mas todos os valores estáticos. No tutorial abaixo, atualizamos -os em todas as páginas, transformá -las em variáveis e conectaremos tudo a um sistema de design central.

1. Audite os estilos de design do seu layout

Antes de começar a substituir qualquer coisa, reserve alguns minutos para revisar seu pacote de layout. Abra cada página e liste rapidamente todos os estilos de design que repetem, como tamanhos de fonte, cores dos botões, espaçamento de texto, estofamento de seção e estilos de borda. Aqui está o que encontrei depois de revisar o layout do LMS:

• Tamanhos de fonte: 30px é usado para todos os títulos H3 e 48px para H2s em várias páginas
• Fontes: Poppins é usado de forma consistente para todos os títulos
• Botão primário: a cor do fundo é #4449E0 com texto em branco
• Preenchimento: a maioria das seções usa 60px superior e inferior
• Ícones de Blurb: O tamanho do ícone é definido como 24px
• Fronteiras Blurb: Nenhuma borda é aplicada aos módulos Blurb
• Seção Antecedentes: A cor verde #47BE68 aparece na seção de rodapé de quase todas as páginas

Todos esses são inseridos manualmente como valores estáticos dentro de cada módulo. Por exemplo, o módulo Blurb usa #4449E0 para a cor do ícone e uma largura de 24px.

Depois de identificar estilos repetidos como esses, você saberá exatamente o que converter em variáveis de design.

Esta etapa de auditoria cria a base para tudo o que se segue. Ajuda você a criar uma abordagem sistemática que mantenha seu layout consistente e sustentável.

2. Salve suas variáveis de design

Depois de auditar seu layout e observar os estilos de repetição, a próxima etapa é criar variáveis de design dos seus valores preferidos. Isso permite que você transforme estilos codificados em tokens reutilizáveis, facilitando a atualização do seu layout mais tarde. Depois de salvarmos todos os nossos valores, substituiremos os atuais pelos nossos.

Criando uma variável de cor

No exemplo anteriormente, descobri que os ícones do Blurb usam a cor nº 4449E0, mas quero alternar isso para a cor da marca principal, #6C012A. Para fazer isso, criarei uma variável de cores.

Vá para o gerente variável da barra lateral esquerda e abra a coluna de cores .

Role para baixo e clique na opção + Adicionar colorido global . Nomeie sua variável e insira um valor. Clique em Salvar variáveis e está feito.

Criando uma variável numérica

Em seguida, quero adicionar uma borda de 2px em torno de bordas, então precisarei de uma variável numérica . O processo é semelhante, mas em uma coluna diferente. Vá para a coluna numérica . Clique em + Adicione o número global, nomeie sua variável, atribua um valor e salve.

Criando uma variável de fonte

Eu também quero mudar todas as fontes de título para Askhar, minha fonte de marca. Isso requer uma variável de fonte . Navegue até a coluna da fonte , crie uma nova variável, atribua um nome, escolha uma fonte e salve.

Está feito. Essa fonte agora será selecionável em todos os campos de texto de título durante todo o layout.

Siga o mesmo processo para o restante de suas descobertas de auditoria, como estofamento de seção, outros tamanhos de cabeçalho ou cores adicionais da marca. Cada estilo repetido do seu layout pode (e deve) se tornar uma variável.

Dessa forma, você não precisa se lembrar de códigos hexadecimais, nomes de fontes ou valores específicos. Eles moram no seu gerente variável e o seguem em módulos e páginas. E o melhor de tudo é que você pode usar e substituir para aplicá-los em todo o layout, o que faremos a seguir.

3. Use Localizar e substituir para aplicar variáveis

Aqui está a parte mais interessante que estamos esperando. Com nossas variáveis salvas, alterar os estilos de todo esse layout é rápido e fácil. Vamos ver como.

Mudando as cores dos ícones

Primeiro, vamos alterar a cor dos ícones para a nossa variável de cor da marca primária salva. Navegue até as configurações da sinopse> Design> Image & Icon. Agora, passe o mouse sobre a opção de cor do ícone e clique nos três pontos. Escolha encontrar e substituir .

No painel Localizar e substituir, tudo o que você precisa fazer é passar o mouse para localizar o ícone do Variable Manager e selecionar sua variável.

E assim, todos os ícones têm uma nova cor. Eu também poderia ter feito isso de outra maneira, atribuindo a cor da minha marca como um valor estático em vez de salvar uma variável de design, mas adicionamos uma etapa extra para simplificar atualizações futuras.

Como? Imagine que você modificou todas as suas páginas de layout, mas deseja mudar a cor da sua marca. Não há necessidade de se sentir sobrecarregado em revisitar todas as páginas ou fazê -lo módulo por módulo. Como você já salvou uma variável de design de cores da marca, você só precisa alterar o valor para atualizá-lo em todo o site.

Mudando todos os títulos da fonte

Em seguida, vamos trocar todas as fontes para a fonte da minha marca. Acesse as configurações de qualquer título> Design> Texto do título. Passe o mouse sobre a fonte do título e o Open Find & Substituir . Na coluna Substituir Value , atribua sua variável de fonte de cabeçalho da marca .

Atualizando a largura da fronteira de todos os módulos Blurb

Para a atualização da largura da borda, usarei minha variável do módulo Blurb . O processo permanece consistente. Navegue até as configurações de borda de qualquer sinopse, abra e substitua, escolha sua variável e aplique.

Depois de alterar todos os valores estáticos com suas variáveis de design, você vinculará seus estilos de layout diretamente às variáveis. Isso significa que, se você quiser alterar a cor da marca, a tipografia de ajuste ou ajustar as larguras da borda, não precisará refazer as substituições. Basta atualizar a variável e todos os elementos vinculados se ajustarão instantaneamente.

Etapa de bônus: Criar e salvar predefinições (opcional)

Embora as variáveis de localização e substituição e design ofereçam uma base sólida, há uma etapa opcional que se baseia nesse sistema ainda mais. As predefinições permitem empacotar estilos completos e reutilizá -los em qualquer lugar com apenas um clique.

Depois de satisfeito com suas variáveis básicas, você pode dar um passo mais fundo e criar predefinições para um estilo mais granular. Isso não é necessário para o processo principal pelo qual acabamos de passar, mas vale a pena explorar se você deseja a máxima eficiência.

Digamos que você goste de adicionar um efeito de sombra a todos os seus embaçados, então você projetou o estilo de sombra perfeito para o seu módulo Blurb. Em vez de copiar manualmente esse estilo cada vez, você pode salvá -lo como predefinido.

Feito. Esta predefinição agora aparece no suspensão predefinido de cada módulo. Você pode aplicá -lo a outros módulos instantaneamente; Não há necessidade de refazer o espaçamento, bordas, sombras ou qualquer outro design de design.

O que torna as predefinições ainda mais poderosas é a flexibilidade deles. Você pode criar grupos predefinidos para diferentes combinações de configuração para melhor otimização do fluxo de trabalho e controle granular. Por exemplo, você pode ter um grupo predefinido para estilos de botões com variações como luz primária, contorno de luz primária e primária, cada um contendo diferentes combinações de fundos, fronteiras e espaçamento.

Dessa forma, você mantém a consistência enquanto tem opções para diferentes contextos. As predefinições são especialmente úteis quando seu layout tem mais de 10 módulos usando o mesmo estilo. Em vez de confiar na memória ou nas edições manuais, você padroniza tudo o mais adiantado.

Aprenda tudo sobre as predefinições de grupo de opções da Divi

Depois de aplicar todas as variáveis de design salvas, veja como as versões antes e depois parecem:

4. Aplique o mesmo processo a outras páginas

Depois que suas variáveis de design e predefinições forem configuradas, a atualização do restante do seu pacote de layout se torna muito mais rápida.

Pegue a página de destino do curso, por exemplo. Você verá os mesmos valores estáticos usados aqui, tabela de fontes, cores dos botões, bordas de sibra, cores de ícone e muito mais. Novamente, em vez de ajustar manualmente cada configuração, abra o módulo relevante, acione e substitua e atribua a variável de design correspondente.

Repita esse processo para cada estilo de repetição em todas as suas páginas. Quando terminar, todo o seu pacote de layout será conectado a variáveis e predefinições, tornando as edições futuras quase sem esforço.

Página de destino do curso atualizada usando as variáveis de localização e substituição e design da divi

Faça edições em todo o layout em segundos com encontro e substitua

Configurar variáveis de design e aprendizado de localização e substituição no Divi 5 podem levar algum tempo inicial. Mas depois de fazer isso para um pacote de layout, você nunca querer voltar para clicar manualmente em dezenas de módulos.

Transformamos um pacote de layout inteiro de valores estáticos dispersos em um sistema de design conectado. O que levou minutos com o Find & Substituir levaria horas fazendo isso da maneira antiga, módulo por módulo, página por página.

Não se trata apenas de economizar tempo neste projeto. Você está construindo um sistema de design que tornará todos os futuros projetos do Divi mais rápido e consistente.