Como usar o Divi Gradient Builder para misturar várias cores de gradiente sem esforço

O novo Gradient Builder da Divi é uma ferramenta poderosa que cria qualquer tipo de fundo gradiente que você desejar. É fácil de usar e você pode adicionar várias cores para criar gradientes interessantes e únicos. No entanto, adicionar mais cores pode exigir mais reflexão no processo de design. Neste post, veremos como usar o Divi Gradient Builder para misturar várias cores de gradiente sem esforço para ajudá-lo a começar a criar seus próprios gradientes multicoloridos.

Visualização de várias cores de gradiente

Primeiro, vamos dar uma olhada no que vamos construir neste tutorial. Criaremos quatro gradientes diferentes usando o mesmo layout.

Resultados do primeiro exemplo

Resultados do segundo exemplo

Resultados do Terceiro Exemplo

Resultados do Quarto Exemplo

Práticas recomendadas para combinar várias cores de gradiente

Como todos os princípios de design, há algumas coisas a serem lembradas ao combinar várias cores de gradiente. Aqui estão algumas coisas a serem lembradas ao combinar várias cores de gradiente para obter a melhor aparência para o seu site.

Foco em famílias de cores

Permaneça dentro da mesma família de cores enquanto usa diferentes tons da mesma cor. Isso mantém um contraste mais baixo entre as cores de fundo, o que evita que o fundo se torne muito perturbador. Usaremos essa técnica para nosso primeiro exemplo.

Experimente cores atenuadas

Experimente vários tons de cores atenuadas com o mesmo nível. Isso lhe dá mais cor, mantendo o contraste entre eles baixo. Os pastéis são um bom exemplo disso. Isso dá ao seu plano de fundo vários tons de cor sem distrair do primeiro plano. Usaremos esse método em nosso segundo exemplo.

Priorize a Legibilidade

Sempre priorize a legibilidade em seu design. Ao criar cores e padrões com seus gradientes, certifique-se de que seu conteúdo esteja sempre legível. Uma maneira de fazer isso é empurrar o gradiente para um lado da tela. Isso permite que você crie um gradiente que se destaque sem atrapalhar o conteúdo. Usaremos este método para nosso terceiro exemplo.

Use gradientes de interseção e mesclados

Combine gradientes de interseção com gradientes combinados para criar linhas duras e tons suaves. Isso pode criar padrões interessantes sem atrapalhar seu conteúdo. Experimente diferentes direções e pontos de parada de gradiente para ver o que funciona melhor para seu layout. Use essas configurações para criar círculos, linhas duras e muito mais. Também usaremos esse método para nosso terceiro exemplo.

Use diferentes tipos de gradiente

Experimente diferentes tipos de gradientes para obter resultados exclusivos. Por exemplo, cônico é um ótimo tipo de gradiente para criar uma aparência única com diferentes cores de gradiente. Usaremos cônico em nosso quarto exemplo.

Não use muitas cores

Não use mais cores apenas para ter mais cores. Duas a três cores geralmente são ideais, mas você pode usar mais se tiver cuidado. Ao usar ainda mais cores, mantenha-as o mais semelhantes possível para que se tornem sombras em vez de contrastes gritantes.

Não escolha cores aleatoriamente

Use cores que funcionem bem com seu conteúdo e site. Isso não apenas mantém seu conteúdo legível, mas também parece que pertence ao site.

Lembre-se de UX

Sempre considere a experiência do usuário. Verifique o gradiente com conteúdo sobre ele para ver como ele funciona. Peça a vários usuários que analisem o conteúdo e o gradiente para garantir que funcione bem para eles.

Teste seus gradientes

Experimente vários tipos e cores de gradientes com testes a/b para ver o que obtém os melhores resultados.

Exemplos de várias cores de gradiente

Agora, vamos ver alguns exemplos do Gradient Builder. Para esses exemplos, ajustei o herói da página Sobre do pacote de layout de piso gratuito que está disponível no Divi. Dei-lhe uma nova cor de fundo, #6294d1, e uma nova cor de botão, #c1fff4.

• Cor de fundo: #6294d1
• Cor do botão: #c1fff4

Como criar várias cores de gradiente com o Divi Gradient Builder

Primeiro, vamos ver como fazer os ajustes no Divi Gradient Builder. Adicionaremos o gradiente ao plano de fundo de uma seção. Para começar, clique no ícone de configurações da seção .

Em seguida, role para baixo até Background . Selecione a guia Background Gradient e clique em Add Background Gradient .

O gradiente começa com duas cores. Selecione os gradientes na barra Gradient Stops para alterar suas cores e arraste-os para uma nova posição inicial. Adicione quantos gradientes desejar. Você pode adicionar mais, excluí-los, editá-los, etc.

Ajuste o Tipo , Direção , Repetir , Unidade e se deseja ou não sobre a imagem de fundo para obter o design desejado.

Para obter uma visão geral detalhada do Divi Gradient Builder, consulte o artigo Introducing The Advanced Gradient Builder For Divi.

Múltiplas Cores de Gradiente Exemplo Um

Para nosso primeiro exemplo, criaremos quatro paradas de gradiente. Abra a guia Background Gradient e selecione o primeiro gradiente . Deixe a Posição do gradiente em 0% e altere a Cor do gradiente para #6294d1.

• Gradiente Paradas Posição do Primeiro Ponto: 0%
• Cor: #6294d1

Em seguida, adicione uma nova parada de cor clicando na barra Gradient Stop. Mova sua posição de gradiente para 29% e altere sua cor para #b5bfd1,

• Gradiente pára a posição do segundo ponto: 29%
• Cor: #b5bfd1

Em seguida, adicione o terceiro Gradient Stop e mova sua posição para 84%. Altere sua cor para #8eacd1.

• Gradiente Stops Posição do Terceiro Ponto: 84%
• Cor: #8eacd1

Por último, mude a cor do quarto Gradient Stop para #b5bfd1. Vamos deixar esta Posição de Gradiente em 100%.

• Gradiente Stops Posição do Quarto Ponto: 100%
• Cor: #b5bfd1

Em seguida, ajustaremos as configurações do gradiente. Altere a direção para 225 graus. Deixe o restante das configurações em seus padrões. Vou incluir essas configurações aqui para que você possa vê-las. Agora você pode fechar as configurações do módulo e salvar seu trabalho.

• Tipo: Linear
• Direção: 225 graus
• Repetir Gradiente: Não
• Unidade de gradiente: porcentagem
• Colocar gradiente acima da imagem de fundo: não

Exemplo Dois de Várias Cores de Gradiente

Para nosso segundo exemplo, criaremos três paradas de gradiente. Abra as configurações de gradiente de fundo e altere a cor da primeira parada de gradiente para #bffffc. Deixe sua posição em 0%.

• Posição de parada do primeiro gradiente: 0%
• Cor: #bffffc

Adicione uma nova parada de gradiente e mova sua posição para 42%. Mude sua cor para #bbc7f9.

• Posição de parada do segundo gradiente: 42%
• Cor: #bbc7f9

Em seguida, altere a Cor da terceira parada de gradiente para #adbdd1. Vamos deixar sua Posição Gradiente em 100%.

• Posição de parada do terceiro gradiente: 100%
• Cor: #adbdd1

Em seguida, altere o Tipo de gradiente para Circular. Deixe o restante das configurações em seus padrões. Isso cria um ponto quente no centro da seção. Feche suas configurações e salve seu trabalho.

• Tipo de gradiente: Circular

Várias Cores de Gradiente Exemplo Três

Para nosso terceiro exemplo, usaremos três paradas de gradiente para construir nosso gradiente. Mova a Posição do primeiro gradiente para 15% e altere sua Cor para #afc3ed.

• Posição de parada do primeiro gradiente: 15%
• Cor: #afc3ed

Em seguida, mova a segunda parada de gradiente para 33% e altere sua cor para #adbdd1.

• Posição de parada do segundo gradiente: 33%
• Cor: #bffffc

Em seguida, mova a terceira parada de gradiente para 33%, diretamente acima da segunda parada de gradiente e altere sua Cor para #adbdd1. Parece que você tem dois gradientes na barra Gradient Stop.

• Posição de parada do terceiro gradiente: 33%
• Cor: #adbdd1

Este terá um arco interessante que criaremos com as configurações. Altere o Gradient Type para Circular e a Gradient Position para Right. Feche as configurações e salve seu trabalho.

• Tipo: Circular
• Posição à direita

Várias Cores de Gradiente Exemplo Quatro

Nosso quarto exemplo inclui cinco paradas de gradiente. Para a primeira parada de gradiente , altere a Cor para #878ebc. Deixe este em 0% para a Posição.

• Posição de parada do primeiro gradiente: 0%
• Cor: #878ebc

Adicione a segunda parada de gradiente em uma posição de 22%. Mude sua cor para #a0c1d6.

• Posição de parada do segundo gradiente: 22%
• Cor: #a0c1d6

Em seguida, adicione a terceira parada de gradiente em uma posição de 48%. Mude sua cor para #bffffc.

• Posição de parada do terceiro gradiente: 48%
• Cor: #bffffc

Para nossa quarta parada de gradiente , coloque-a na posição 73% e altere sua cor para #d3d8ff.

• Posição de parada do quarto gradiente: 73%
• Cor: #d3d8ff

Para a quinta parada de gradiente , mova-a para a Posição 77% e altere a Cor para #c6dfff.

• Posição de parada do quinto gradiente: 77%
• Cor: #c6dff

Por fim, altere o Tipo de gradiente para Cônico e altere a Direção do gradiente para 233 graus. Feche as configurações e salve seu trabalho.

• Tipo: Cônico
• Direção: 233 graus

Resultados de várias cores de gradiente

Resultados do primeiro exemplo

Resultados do segundo exemplo

Resultados do Terceiro Exemplo

Resultados do Quarto Exemplo

Considerações finais sobre várias cores de gradiente

Essa é a nossa visão de como usar o Divi Gradient Builder para misturar várias cores de gradiente sem esforço. O Gradient Builder é divertido de se jogar. Você pode adicionar quantas cores quiser, mas precisará seguir alguns princípios de design simples para que fiquem bem juntos. Esses exemplos mostram como é fácil usar de três a cinco cores para criar seu gradiente e fazê-las funcionar bem com o design do seu site.

Nós queremos ouvir de você. Você usou esses métodos para criar várias cores de gradiente com o novo Gradient Builder da Divi? Deixe-nos saber sobre sua experiência nos comentários.