Como aplicar paletas de cores ao seu site Divi

Existem poucas coisas piores na Internet do que um site sem graça. Claro, alguns sites optam pelo visual brutalista ou minimalista de propósito (olhando para você no Craigslist), mas mesmo esses não são insossos . Ter uma paleta de cor sólida é uma maneira infalível para tornar seu site destacam-se as massas bege, essas eshops monocromáticos sem inspiração que de imprensa mais de imprensa im. Felizmente, a Divi oferece uma combinação de nosso sistema Magic Color e o recurso Global Colors. Você pode aplicar paletas de cores ao seu site Divi com facilidade. Os resultados são obrigados a impressionar seus visitantes.

Dicas gerais sobre paletas de cores

Independentemente de quão fácil seja adicionar uma paleta de cores ao seu site Divi, é fundamental que você use o tipo certo de paleta para o seu setor e marca. Se você já tem cores de marca, essas são a escolha óbvia. Além de se aprofundar na teoria das cores (o que é muito interessante, a propósito), temos algumas dicas que podem ajudá-lo a descobrir por onde começar com o seu nova paleta de cores.

1. Escolha um site com cores escuras ou claras

Na paleta de cores que usará, sem dúvida, você terá cores claras e escuras. O contraste é obrigatório em uma paleta de cores para que o conteúdo escrito não se perca.

Agora, isso nos leva imediatamente à primeira pergunta que você deve se fazer quando quiser aplicar uma paleta de cores ao seu site; você quer criar um site de cores escuras ou claras? Só porque você escolheu uma, não significa que não possa combiná-las, mas fazer uma escolha ajuda a escolher sua paleta de cores com mais facilidade.

2. Escolha da cor

Em teoria, você mesmo pode determinar quantas cores deseja que sua paleta de cores tenha. Não há uma maneira padrão de aplicar ou determinar paletas de cores. No entanto, para criar um bom equilíbrio de cores com Divi, recomendamos o uso de cinco cores.

Para ajudá-lo a aplicar as paletas de cores com cinco cores ao seu site, escolhemos um tipo de método que aplicaremos consistentemente ao mesmo layout ao mostrar as diferentes paletas de cores. Mas antes de mergulharmos nisso, vamos dar uma olhada nos diferentes tipos de cores que você precisa ter em sua paleta de cores se quiser seguir nosso método.

Cores de fundo

Certifique-se de que as cores de fundo que você escolher combinam entre si. Você usará essas cores de fundo próximas umas das outras e para obter belos resultados; eles devem ter uma certa harmonia.

Cor da fonte

A próxima coisa que você precisa escolher é a cor da fonte. Logicamente, a cor da fonte depende das cores de fundo que você escolher. Se você escolheu cores de fundo claras, certifique-se de que a cor da fonte seja escura e vice-versa.

Hyperlink e cor de CTA

A cor do hiperlink que você escolhe é uma das cores que dão vida ao seu site. Certifique-se de que essa cor se destaque das outras cores em sua paleta, pois você a usará para as frases de chamariz que incluir em seu site.

Cor para os toques finais

Por último, mas não menos importante, você pode escolher outra cor pronta para o uso que traga cor ao seu site. Embora essa cor não seja tão importante quanto a cor do hiperlink, ela o ajudará a completar o equilíbrio de cores em seu site.

3. Certifique-se de que há contraste suficiente

Como mencionado antes, é essencial fornecer contraste entre algumas das cores em sua paleta de cores. Se você estiver usando uma paleta de cores para um site, esse contraste o ajudará principalmente a tornar legível o conteúdo escrito que você compartilha. Porque, se o seu conteúdo não é fácil de ler, qual é o propósito dele afinal?

4. Encontre o equilíbrio correto do uso da cor

Existem diferentes maneiras de determinar a freqüência com que deseja usar uma determinada cor em sua paleta de cores. É necessário criar um bom equilíbrio de cores se você não quiser que eles se sintam oprimidos pelas cores que você está usando em seu site.

Certifique-se de usar as cores mais neutras em sua paleta de cores na maior parte do tempo e use as outras cores para acentuar o conteúdo que você está fornecendo.

Como adicionar uma paleta de cores ao seu site Divi

Com tudo isso em mente, é hora de mergulhar no Divi e aplicar a nova paleta de cores do seu site!

A paleta Divi padrão

Em primeiro lugar, acesse o painel do WordPress e vá para Divi - Opções de tema . Na guia Geral , você verá uma entrada intitulada Paleta padrão dos seletores de cores . Isso permite que você selecione quaisquer 8 cores às quais deseja ter acesso rápido sempre que abrir as opções de cores no Divi builder. Por padrão, essas são cores vibrantes que muitas pessoas usam, mas não são uma paleta completa que deve ser usada em um único site.

Observe que isso não se aplica às cores ao seu site. Ele apenas os apresenta como opções rápidas no construtor.

Entre no Divi Builder

Independentemente de você definir ou não a paleta nas configurações Divi, você ainda terá a opção de aplicar várias cores aos elementos em seu site. Para fazer isso, vá para o Divi Builder e insira as configurações de qualquer módulo que deseja ajustar em sua nova paleta.

Abaixo da cor atualmente escolhida para qualquer elemento, você verá o ícone de reticências (três pontos) . Ao clicar nele, você abre a ferramenta Magic Color do Divi. O construtor leva em consideração suas cores usadas recentemente e as cores na própria página para fornecer a você uma série de paletas múltiplas compostas de cores complementares que devem funcionar muito bem juntas.

Definir cores como globais

Depois de decidir quais cores deseja usar, é hora de defini-las como globais. As cores globais podem ser definidas para mudar em toda a página, independentemente do módulo ou elemento . O que significa que se você quiser trocar 5 cores diferentes, não terá que fazer isso mais de 100 vezes, individualmente em instâncias dessa cor. Você vai fazer isso 5 vezes.

Para começar, vá para qualquer módulo com um seletor de cores. Abaixo dele, você verá um link chamado Global . Clique nele e a paleta geral desaparecerá. A partir daqui, você definirá as cores que deseja disponibilizar globalmente, clicando no ícone mais + .

Quando o novo seletor aparecer, clique na marca de seleção verde para adicionar a cor atual como uma opção global.

Não importa onde está o círculo branco. O valor hexadecimal é o que é adicionado às cores globais. Agora você verá a cor padrão adicionada ao lado do ícone de adição. E você pode ver que a cor foi aplicada ao site por causa do ícone da forma de gota na cor em vez do círculo normal.

Além disso, você pode clicar com o botão direito em uma cor escolhida e selecionar “Converter para global” para adicioná-la à lista.

Repita esse processo para cada cor na paleta escolhida para que, eventualmente, toda a sua paleta seja salva no link Global. Isso é muito importante enquanto você aplica a nova paleta a todos os elementos de uma página.

Aplicar Cores Globais

Em seguida, você deseja substituir todas as instâncias da mesma cor em sua página pode ser ajustada globalmente. O que você quer fazer é ir para o elemento com a cor que deseja alterar e clicar com o botão direito nele. Em seguida, você escolherá Localizar e substituir no menu de contexto. Não converta esta cor em global aqui . Isso faz parte da próxima etapa.

A próxima tela será onde você escolherá substituir essa cor pela cor global. Certifique-se de que, em Substituir por, clique em Global e escolha a cor global que deseja estender pela página. Certifique-se de marcar a caixa que diz “Substituir todos os valores encontrados em cada tipo de opção, não se limitando a [inserir o tipo de elemento atual].” Isso garantirá que, independentemente do que aconteça, essa cor será substituída.

Agora, você pode editar essa cor global específica e, quando o fizer, cada instância dela mudará. Observe que você não escolheu uma nova cor da paleta. Isso só vai trocar a cor atual. Você edita a cor para alterá-la em todos os lugares porque marcou cada instância dessa cor única como global.

Você pode editá-lo como um coletivo usando o seletor de cores. Basta clicar na gota para escolher uma nova.

Depois disso, basta repetir esse processo para cada cor em sua nova paleta. Apenas uma única mudança para cada cor em sua paleta. Não é uma troca de cada elemento particular de uma determinada cor.

Empacotando

Escolher e aplicar uma paleta de cores global ao seu site Divi nunca foi tão fácil. Você pode usar nosso recurso Magic Color para ajudá-lo a escolher uma paleta e, em seguida, pode defini-la como cores globais para o seu site. Depois de fazer isso, basta escolher a cor que deseja trocar e usar o recurso de localizar e substituir integrado do Divi para substituir essas cores na página. Com este fluxo de trabalho, você certamente economizará muito tempo ao redesenhar vários sites e alterar alguns de nossos pacotes de layout de brindes.

Aproveitar!

Imagem de destaque do artigo por ART.ICON / shutterstock.com