Transformando as cores da marca do seu cliente em um sistema de cores Divi 5

As cores da marca geralmente começam com os códigos sextavados sendo aplicados em títulos, botões e fundos. É simples o suficiente inicialmente, mas à medida que o layout cresce, você geralmente precisa de variações de cores mais claras, pausas ou sotaques complementares. Gerenciar isso manualmente pode ficar bagunçado.

O novo sistema de cores no Divi 5 facilita, permitindo que você defina uma paleta uma vez e construa tons conectados a partir da sua paleta de cores inicial. Cada cor permanece em sincronia, mesmo quando o design evolui. Neste guia, você aprenderá como criar um sistema de cores flexível e escalável que mantém tudo consistente em todo o site do seu cliente.

Entendendo o sistema de cores do Divi 5

Se você trabalhou com as cores globais no Divi 4, já sabe o quão útil é definir uma cor uma vez e aplicá -la em seu site. O Divi 5 se baseia nessa mesma idéia, mas desta vez transforma a cor em um sistema completo que escala com você.

Inscreva -se no nosso canal do YouTube

Aqui estão as três principais atualizações:

Começa com variáveis de design. Você define sua paleta de marca dentro da guia Cores no Variable Manager, e esses valores se tornam sua base. Uma vez definido, eles estão prontos para uso em qualquer módulo ou seção. E quando a marca evolui para baixo, você só precisa atualizar as variáveis em um só lugar. Tudo ligado a eles se ajusta por conta própria.

A segunda atualização é o filtro de cores HSL. Os controles deslizantes permitem que você ajuste a matiz, a saturação e a leveza, oferecendo mais controle ao trabalhar com tom e contraste.

Se o seu verde primário parecer muito duro para um plano de fundo, você poderá amolecê -lo um pouco, ajustar o brilho e salvar essa versão como sua variável. Esta será uma nova cor, mas ainda está ligada à cor original.

Isso também abre espaço para pensar nos relacionamentos, em vez de valores isolados. Você pode vincular variáveis para que uma sempre permaneça uma certa distância de outra, como mais escuro, mais leve, um pouco mais quente ou mais moderado. Eles são chamados de cores relativas, que é a terceira melhoria.

Uma cor pairar, por exemplo, pode ser definida como 20% mais escura que a primária. Se a cor primária mudar, o estado do mouse mantém seu relacionamento sem precisar de ajustes manuais.

Este sistema de três partes cria um sistema de cores de trabalho flexível e fundamentado. Você não está apenas aplicando cores um módulo de cada vez; Você está construindo uma paleta que pode mudar conforme necessário, mantendo seu design consistente e limpo.

Aprenda tudo sobre o novo sistema de cores da Divi

Se você confia nos códigos hexadecimais até agora, esse é o ponto em que esse fluxo de trabalho começa a parecer limitado. E essa é a sua sugestão para mudar para um sistema de cores pronto para o futuro.

Transformando as cores da marca do seu cliente em um sistema de cores Divi 5

Agora que você sabe como funciona o sistema de cores da Divi 5, vamos percorrer como se parece em um projeto real. Para este exemplo, importamos o layout da página inicial da realidade aumentada da biblioteca Divi.

Vamos construir um cenário. Suponha que um cliente queira adicionar uma cor complementar para equilibrar o verde em negrito usado em todo o site. Em vez de adicioná -lo manualmente em alguns pontos, vamos aproveitar isso como uma chance de mudar o layout para o sistema de cores do Divi 5, para que não tenhamos que fazer mudanças manuais no futuro se solicitadas novamente.

Se você olhar através do layout, notará que o mesmo verde aparece em vários lugares, como títulos, botões e elementos de destaque. Cada um usa um código hexadeconista fixo. Nosso objetivo é substituir aqueles por variáveis de cores e construir uma paleta que possa se adaptar às mudanças posteriormente.

Normalmente, atualizar um layout como esse significaria editar cada módulo manualmente. Mas nas próximas etapas, usaremos variáveis de cores, filtros HSL e lógica de cores conectadas para construir algo mais estável. Você pode seguir o mesmo layout ou usar seu projeto como base.

1. Salve a cor principal do seu cliente como uma variável de design

Se o seu cliente compartilhou um novo código hexadecimal ou você está com uma cor da marca existente, a primeira etapa é adicioná -lo ao gerenciador de variáveis de design. Essa se torna sua cor base e será a base para as variações de cores que você constrói em torno dela.

Adicionando uma cor primária

Para começar, abra o gerente variável e mude para a guia Colors .

O painel já pode incluir valores padrão para texto primário, secundário, título e corporal. No campo de cores primárias, insira o código hexadecimal para a cor principal da marca e clique em Salvar variáveis.

Adicionando uma cor secundária

Em seguida, criaremos uma versão relativa dessa cor secundária usando o primário como base. Dessa forma, quaisquer alterações futuras na cor base serão transportadas automaticamente.

Neste exemplo, como estamos adicionando uma cor complementar para equilibrar o verde existente, atribuímos isso como a cor secundária. O fundo do layout é preto, então esse emparelhamento se destaca claramente.

Se você está trabalhando apenas com uma cor por enquanto, fique à vontade para deixar o slot secundário definido como preto.

Clique na amostra de cor secundária para abrir a janela de cores. Todos os seus valores salvos serão listados em cores globais, com a cor primária listada primeiro.

Selecione. Isso traz a cor base como seu ponto de partida.

Agora, clique na amostra novamente para reabrir a janela e abra o suspensão dos filtros de cores . Isso revela os controles deslizantes HSL, onde você pode ajustar a matiz, a saturação e a leveza.

Use esses controles deslizantes para moldar a nova cor. Depois de ficar feliz com isso, salve. E assim, você tem uma cor secundária conectada à primária.

Se você quiser manter a cor secundária preta, mas ainda o vincular ao primário, gire os controles deslizantes de leveza e saturação até -100.

Para criar uma sombra mais escura, deixe a matiz e a saturação está e reduza apenas a leveza.

Neste ponto, você pode experimentar livremente. Ajuste os valores até que o tom pareça certo para o seu design. Se a nova cor se mistura suavemente com a paleta da marca ou se destaca como um contraste, ela permanecerá ligada à primária e evoluirá com ela.

2. Construa cores de suporte usando ajustes HSL

Com as cores primárias e secundárias, o próximo passo é expandir a paleta. Essas cores de suporte dão sua sala de design para respirar. Eles adicionam flexibilidade, contraste sutil e ritmo visual ao longo do layout.

Para criar essas variações, abra o painel HSL e ajuste os controles deslizantes:

• Crie tons mais claros para seções ou origens que precisam de contraste sem atrair atenção.
• Use tons um pouco mais escuros para botões, estados pairar ou manchetes em negrito que precisam se destacar.
• Mude o tom ou a saturação levemente para formar cores de destaque. Essa cor é ótima para divisores, ícones ou outros pequenos destaques visuais.

Mostraremos como fazê -lo uma vez e você pode seguir a mesma abordagem para definir todas as novas cores que deseja. Digamos que queremos fazer uma versão pairar da cor secundária. Vamos criar uma nova variável de cores , dar um nome claro, ajustar os controles deslizantes para acertar o tom e salvá -lo.

Agora que a variável é salva, podemos aplicá -la ao estado de pairar de um botão, como qualquer outra cor.

Ao adicionar cores de suporte, tente pensar nelas como expressões tonais da marca, variações que refletem diferentes níveis de ênfase, contraste ou humor. Por exemplo, os tons suaves funcionam bem para os antecedentes, os em negrito chamam a atenção para as chamadas para a ação e os tons suaves são úteis para sobreposições ou texto secundário.

Você pode criar tecnicamente todos esses códigos hexadecimianos manualmente. E se você está construindo apenas um site de uma página, isso pode estar bem. Mas no momento em que seu cliente deseja alterar uma cor central, todo atalho começa a mostrar seus limites. O que queremos dizer é que você não rastrearia quantos lugares você usou uma sombra de fundo em um site. Nesse cenário, a criação dessas variações como variáveis conectadas leva um pouco mais de tempo, mas uma vez que elas estão no lugar, elas manterão seu design consistente, não importa com que frequência as coisas mudem.

3. Substitua as cores estáticas existentes por variáveis

Com suas novas variáveis de cores salvas, é hora de substituir os valores hexadecimais codificados usados ao longo do layout. É aqui que a mudança de estática para dinâmica começa a fazer uma diferença real, não apenas em consistência, mas na facilidade de manter o design ao longo do tempo.

Comece digitalizando o layout para quaisquer elementos ainda usando valores de cores fixos. Isso pode incluir botões, títulos, fundos, ícones ou divisores de seção. Em qualquer lugar, a cor da marca foi aplicada manualmente agora é uma oportunidade de conectá -la ao seu novo sistema.

Para fazer isso, o Divi oferece duas opções: estender atributos e encontrar e substituir. Ambos permitem atualizar vários elementos rapidamente, mas cada um brilha em uma situação ligeiramente diferente.

• Use os atributos estendidos quando você já aplicou a variável correta a um elemento e deseja corresponder ao resto.
• Use Localizar e substituir quando deseja trocar um valor hexadecimal específico onde ele aparecer, mesmo que seja aplicado em diferentes elementos.

Vamos começar com atributos de extensão.

Usando atributos de extensão

Neste exemplo, queremos atribuir a nova cor secundária a todos os H2s no layout. Começaremos aplicando -o a apenas um deles.

Depois que isso estiver pronto, clique com o botão direito do mouse no elemento e selecionaremos atributos de extensão. No painel que aparece, definiremos o escopo para a página inteira e o tipo de elemento para texto.

Com um clique, cada H2 da página adota a mesma cor secundária, que permanecerá sincronizada porque está ligada à sua cor primária se essa cor base mudar.

Usando encontrar e substituir

Agora, vamos tentar encontrar e substituir, o que funciona especialmente bem quando você deseja trocar um valor de cor específico no site.

Nesse caso, queremos atualizar a cor do texto do corpo. Para fazer isso, iremos para configurações> Design> Cor do corpo , clique com o botão direito do mouse e escolha Find & Substituir. Em seguida , passaremos o mouse sobre o campo Valor de substituição e selecionaremos nossa nova variável.

É tudo o que é preciso. Todas as instâncias dessa cor antiga agora são atualizadas com sua nova variável.

Não há método único que você deve seguir aqui. Extender atributos é a maneira mais rápida de transportar essa alteração em elementos semelhantes se você já atualizou um módulo manualmente. Se você ainda está trabalhando com códigos hexadecimais estáticos e deseja alterá -los a granel, o encontro e substituição o ajudará a se mover rapidamente.

Escolha qualquer abordagem que facilite a limpeza. Quando isso estiver pronto, você verá o verdadeiro benefício desse sistema: como seu design responde quando você altera apenas uma cor.

Testando seu novo esquema de cores

Tudo o que você fez foi sobre a criação. Agora é quando toda a configuração começa a mostrar seu valor.

Com o seu sistema no lugar, tente alterar a cor primária. Todo o layout responderá em segundos - antecedentes, botões, efeitos de pairar e quaisquer outros elementos conectados serão atualizados instantaneamente.

As atualizações futuras também são mais fáceis do que nunca. Suponha que seu cliente queira mudar de neon verde para um amarelo mais quente, o que significa atualizar o site inteiro, cada página e cada módulo manualmente.

Parece doloroso, mas não para você. Você acabou de atualizar a cor principal e o restante do site segue.

Ou talvez seja a Black Friday e eles pediram um esquema de cores vermelho-dourado-preto. Você atualiza o tom primário para um tom de ouro e depois ajusta o secundário em um vermelho mais profundo. O layout se adapta instantaneamente, até o último detalhe.

Em alguns casos, a cor da marca pode permanecer a mesma, mas o secundário precisa de uma atualização. Isso é apenas uma questão de ajustar os controles deslizantes da HSL. Não há necessidade de tocar em cada botão ou plano de fundo individualmente.

Muito do trabalho de cores é manter o equilíbrio. Você mantém variações alinhadas mesmo quando a cor central muda. Este sistema fornece uma maneira de controlar o tom, o contraste e a ênfase em seu design, sem precisar refazer suas etapas.

E lembre -se, o que fizemos aqui é apenas uma página. Como as variáveis de design são globais, essa configuração se estende a todo o seu site, incluindo cabeçalhos, rodapés, postagens de blog, páginas de destino e qualquer outra coisa conectada à sua paleta.

Isso significa que todas as atualizações futuras, seja uma campanha sazonal, atualização de marca ou nova direção de cor, começa em um único local. Você atualiza algumas variáveis e vê tudo corresponde ao seu novo esquema de cores.

Divi faz do seu fluxo de trabalho de cor à prova de futuro

Não é difícil escolher um tom de azul. O que é difícil é manter esse azul consistente em dezenas de módulos, layouts, páginas e campanhas e atualizá -lo mais tarde, sem quebrar algo no processo.

Divi 5 simplifica isso completamente. Com ferramentas como o novo sistema de cores, filtros HSL e variáveis de design, você pode gerenciar toda a sua identidade visual de um lugar. Saber que todas as cores, em todos os layout, permanecerão consistentes e fáceis de atualizar é o que o Divi 5 promessa.

E esse é apenas um dos muitos que fizemos nos últimos meses, incluindo o Loop Builder, o Flexbox Layout e uma interface completamente reimaginada para designers da web modernos. Se você ainda não os explorou, agora é o momento perfeito.