Como criar um sistema de cores com divi 5

As opções de cores aleatórias raramente levam a um design coeso. Se você está construindo sites profissionalmente, precisará de um sistema intencional. Você pode criar um sistema de cores real dentro do Divi 5 usando variáveis ​​de gerenciamento de cores e design. Essas são as cores que você define diretamente no editor visual, podem acessar em qualquer campo de cores e vem com muitas outras conveniências (que mostraremos abaixo).

Esta postagem mostrará como configurar um sistema de cores flexível e escalável no Divi 5.

O que é um sistema de cores?

Um sistema de cores é basicamente uma paleta de cores pré-planejada usada de forma consistente em seu site. Ajuda tudo a parecer intencionalmente com estilo, e não aleatoriamente. Para um bom sistema, você geralmente precisa:

• Cor primária : cor principal da marca.
• Cor secundária : suporta e contrasta com o primário.
• Cor do texto : claro e legível para títulos e parágrafos.
• Accesso : outras cores para alertas, avisos e outras coisas importantes (opcionais).
• Cores de fundo : normalmente neutros ou tons sutis.

A regra de 60-30-10 se aplica à cor em web design. Geralmente, as cores neutras (como os fundos da seção e o espaço negativo) seriam usados ​​para 60%do design, uma cor primária por 30%e cores secundárias/acentuadas para os 10%restantes.

Como escolher as cores do site

As cores da marca e as cores usadas no seu site não são decisões a serem tomadas de ânimo leve. Criar uma paleta de cores proposital depende da habilidade do seu designer, psicologia de cores, indústria e diferenciação da marca. Mas depois de ter suas cores base e ativos da marca (como variações de logotipo), você pode começar a criar um sistema de design.

Você pode realizar algumas tarefas rápidas para se preparar para a criação do seu site se tiver recursos de design limitados. Primeiro, faça uma leitura superficial da psicologia de cores. Procure quais valores da marca você deseja transmitir (confiança, juventude, inovação etc.) e tente combinar cores com base nesses valores. Em seguida, observe algumas marcas reconhecíveis com a família que você acha que se encaixam nos valores da sua marca. Que cores eles usam? Como eles os usam em seu site, comerciais e postagens sociais?

Os valores da sua empresa podem até ser determinados pelo tipo de trabalho que você faz. Locksmiths e encanadores devem ser confiáveis, então o azul é uma ótima maneira de transmitir isso. Planejadores financeiros e paisagistas lidam com crescimento e sustentabilidade (em seus respectivos campos), então o verde é uma boa âncora lá. Agricultores de flores, centros de assistência à infância e restaurantes podem se apoiar em vermelhos e amarelos para conectar energia e vitalidade às suas marcas. Depois de ter uma ideia geral, use algo como Coolors para criar uma paleta simples.

Construindo seu sistema de cores no divi 5

O Divi 5 vem com o Gerenciador de variáveis ​​de design, que é a maneira mais fácil de lidar com cores globais. Nele, você tem quatro cores globais pré -atribuídas para trabalhar fora da caixa. Eles são:

1. Cor primária
2. Cor secundária
3. Cabeçando a cor do texto
4. Cor do texto corporal

Etapa 1: Defina suas cores base como variáveis

Na barra lateral esquerda da Divi, abra o gerenciador de variáveis ​​de design. Encontre a seção Cores e você verá esses quatro padrões diferentes.

Esses quatro rótulos não podem ser excluídos, mas você pode escolher qual cor definir cada um. Além desses quatro, você pode adicionar quantas cores quiser clicando no botão Adicionar colorido global . Vá em frente e digite os valores hexadecimais das cores do gerador de cores.

Essas variáveis ​​instantaneamente ficam disponíveis em todos os lugares do Visual Builder da Divi, o que é super útil. Mas certifique -se de salvá -los!

Etapa 2: Crie tons e tonalidades com cores HSL

Usando os filtros HSL da Divi, podemos criar tonalidades (versões mais leves de nossas cores) e tons (versões mais sombrias de nossas cores). Para este projeto, faremos apenas variações para as cores primário e secundário. Você pode usar um gerador de paleta de cores para criar essas variações de cores.

O primeiro passo aqui é criar outra cor global. No entanto, em vez de colar um valor hexadecimal, selecione uma cor existente para criar variações (tons e tonalidades).

Agora, precisamos aplicar um filtro a essa cor base para criar uma variação. Clique no chip de cores e selecione “Filter Color” ou clique na amostra de cores para sua nova variável de cor relativa.

Faça isso para cada uma das suas variações de cores. Certifique -se de dar a suas variações de cores nomes reconhecíveis e salvar.

Por exemplo, como a cor primária é bastante escura, podemos adicionar alguns tons mais leves e alguns tons mais escuros. Isso deve me dar muitas opções quando aplicarmos meu sistema de cores a um design de página.

Repita as etapas acima para as cores secundárias e/ou de destaque. Ao criar essas variações, sempre selecione uma cor base e aplique filtros em cima dela. Dessa forma, se você mudar sua cor primária, essas variações seguirão o exemplo.

Aplicando suas cores em designs com divi

Suas variáveis ​​existem agora. Hora de usá -los. Começaremos com uma página em branco e trabalharemos sequencialmente em um layout bem projetado.

Etapa 1. Crie um quadro de arame da sua página

Você pode começar a partir de um quadro de arame em vez de uma página em branco, o que pode ajudá -lo a entender melhor o seu sistema de cores. Depois de entender a estrutura e o fluxo geral de uma página, você pode começar a fazer suas escolhas de design. Você também pode usar um dos muitos pacotes de layout pré -fabricados da Divi ou sites iniciantes. Não importa se eles já têm cores definidas; Podemos alterá -los facilmente.

Para este exemplo, optamos por modificar o pacote de layout de consultoria e usar o layout da página inicial. Se você fizer algo semelhante, poderá importar as predefinições. No entanto, você deseja editar as cores nessas predefinições. Por uma questão de simplicidade, modificaremos os estilos diretamente no nível do módulo/elemento.

Etapa 2. Tipografia e cor

Por padrão, o Divi usa o seu cabeçalho global e as cores do texto do corpo, tornando seu texto limpo e legível. Você sempre pode substituir essas opções de cores predeterminadas, alterando a cor do texto em módulos ou predefinições, mas não precisa fazer isso com muita frequência.

Observe como a cor do cabeçalho não é definida no módulo. A Divi atribui automaticamente a cor global aos títulos e texto do corpo para você. Obviamente, você pode substituí -lo selecionando uma cor diferente.

Você pode personalizar a cor que os links os tornam mais perceptíveis e atraem cliques.

Pode haver outros módulos (além dos módulos de título e texto) com o texto que você deseja estilizar. Módulos como o formulário de contato, o cronômetro de contagem regressiva e o módulo do blog podem exigir que as cores sejam aplicadas exclusivamente.

Etapa 3. Botões de estilo

Os botões da Divi são simples por padrão e assumem sua cor primária. Mas você não é forçado a essa decisão se quiser algo diferente. Abra o painel de configurações do módulo, navegue até a guia Design e selecione o botão . Em Configurações do botão, ative “Use estilos personalizados para o botão”. Defina seu plano de fundo para sua cor global de escolha e o texto do botão como uma cor legível, como o branco.

Se você tiver dois botões lado a lado ou vários botões na página, poderá criar uma predefinição de botão separada para um estilo de botão secundário usando sua cor secundária ou outro sotaque.

Crie estados pairar com tonalidades e/ou tons

Os estados em que os pausas acrescentam interação e um senso de propósito. Use suas tonalidades e tons anteriores com os estilos de pairar. É óbvio implementar nos botões, mas também pode ser usado sutilmente em outros lugares.

Clique no ícone do cursor ao lado da opção de cor de fundo para ativar os estados pairar. Defina sua cor de fundo pairar. Quando os usuários passam pelo botão, ele responde visualmente, orientando a interação naturalmente.

Etapa 4. Criando seções com predefinições de cores e gradientes

As seções no Divi têm antecedentes transparentes por padrão. Isso significa que, se não forem confusos, eles geralmente aparecem como branco. Você pode adicionar alguma intriga, criando variações de cores neutras com base no tom de uma de suas cores principais.

Essa cor de fundo é próxima de preto, mas compartilha o mesmo tom de base que a cor principal para dar -lhe coesão sutil 'no tema'.

Você também pode experimentar gradientes usando suas variantes de cores. O truque aqui não é usar muitas combinações de cores. Você deseja um design coesivo e disciplinado com base em pares de cores e hierarquia.

Um lembrete está em ordem neste momento. Você deseja salvar a maioria desses pares de cores e decisões em predefinições (grupo de opções ou predefinições de elementos). Depois de criar e implementar suas variáveis ​​de design em seu design por meio de predefinições, você pode usar seu sistema de design para criar páginas subsequentes muito mais rápidas. Isso também garante que você trabalhe com padrões de design consistentes em todo o site.

E se você determinar mais tarde que uma cor está ligeiramente desligada, poderá ajustar os valores HSL da cor base e todas as instâncias dessa cor (e todas as cores relativamente criadas com base nessa cor) mudarão para você.

Embrulhar seu sistema de cores Divi 5

Um sistema de cores atencioso é uma das vitórias mais fáceis no web design, e o Divi 5 oferece as ferramentas para fazê -lo funcionar para você. Com apenas algumas etapas, você pode:

• Defina as cores da sua marca principal como variáveis ​​de design reutilizáveis
• Estenda -os em tons e tonalidades úteis com filtros HSL
• Aplique -os de forma consistente em texto, botões, formulários e seções
• Salve suas escolhas como predefinições para que cada nova página siga as mesmas regras

A recompensa é maior que a estética. Um sistema de cores sólidas cria clareza, direciona os visitantes para a ação e faz com que sua marca se sinta coesa em todos os cantos do seu site. E como tudo no Divi é orientado a variável, um ajuste para uma cor base pode se agravar instantaneamente por um site inteiro. Isso significa menos ajuste e mais confiança de que seu design se manterá unido à medida que você escala.