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

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

de, certifique-se de que o conteúdo está 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. Vamos usar este método para o terceiro exemplo.
Combine gradientes de intersecção com gradientes combinados para criar linhas duras e tons suaves. Isso pode criar padrões interessantes sem prejudicar seu conteúdo. Tente diferentes direções de gradiente e paradas para ver o que funciona melhor para sua aparência. Use essas configurações para criar círculos, linhas duras e muito mais. Também usaremos esse método para o terceiro exemplo. Experimente diferentes tipos de gradiente para obter resultados exclusivos. Por exemplo, cônico é um ótimo tipo de gradiente para criar uma aparência única com diferentes cores de gradiente. Vamos usar o cone no 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 tons em vez de contrastes fortes. Use cores que funcionem bem com seu conteúdo e site. Isso não só mantém seu conteúdo legível, mas também mostra que ele pertence ao site. Lembre-se de UX Considere sempre a experiência do usuário. Verifique o gradiente de conteúdo acima dele para ver o quão bem ele funciona. Peça a mais usuários que vejam o conteúdo e o gradiente para garantir que ele funcione bem para eles.
Teste vários tipos de gradientes e cores com testes a\/b para ver o que fica melhor r
e a cor da quarta parada gradiente para #b5bfd1. Vamos deixar esta Posição Gradiente a 100%.

Quarto ponto posição pára gradiente: 100% Cor: #b5bfd1

A seguir, vamos ajustar as configurações de gradiente. Mudar rota para 225 graus. Deixe o resto das configurações como padrão. Vou incluir essas configurações aqui para que você possa vê-las. Agora você pode fechar as configurações do plugin e salvar seu trabalho. Tipo: Linear Direção: 225 Graus Gradiente Repetição: Sem Gradiente Unidade: Percentagem Colocar gradiente acima da imagem de fundo: não

Exemplo dois Para o segundo exemplo, criamos três stops de gradiente. Abra as configurações Gradiente de fundo e altere a cor da primeira parada de gradiente para #bffffc. Deixe a sua posição em 0%. Posição de paragem do primeiro gradiente: 0% Cor: #bffffc

Adicione uma nova parada de gradiente e mova sua Posição para 42%. Muda a 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 a posição do Gradient a 100%. Terceira posição de paragem do gradiente: 100% Cor: #adbdd1

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

Exemplo três Para o terceiro exemplo, usamos três stops de gradiente para criar nosso gradiente. Mova a Posição do primeiro gradiente para 15% e mude sua cor para #afc3ed. Posição de paragem do primeiro gradiente: 15% Cor: #afc3ed

Em seguida, mova a segunda parada de gradiente para 33% e mude sua cor para #adbdd1. Posição de paragem do segundo gradiente: 33% Cor: #bffffc

Em seguida, mova a terceira parada de gradiente para 33%, diretamente acima da segunda parada de gradiente e mude sua cor para #adbdd1. Vai parecer
e como você tem dois gradientes na barra Gradiente Stop. Terceira posição de parada no gradiente: 33% Cor: #adbdd1

Ele terá um arco interessante que vamos criar com as configurações. Altere o tipo de gradiente para a posição circular e gradiente à direita. Feche suas configurações e salve seu trabalho. Tipo: circular Posição: direita

Exemplo quatro O quarto exemplo inclui cinco stops de gradiente. Para a primeira parada do gradiente, altere a cor para #878ebc. Deixe-o em 0% para Posição. Primeira posição de parada do gradiente: 0% Cor: #878ebc

Adicione a segunda parada de gradiente a uma posição de 22%. Mudar a cor para #a0c1d6. Posição de paragem do segundo gradiente: 22% Cor: #a0c1d6 Em seguida, adicione a terceira parada de gradiente a uma posição de 48%. Mudar a cor para #bffffc. Terceira posição de parada no gradiente: 48% Cor: #bffffc

Para a quarta parada no gradiente, coloque-o na posição de 73% e altere sua cor para #d3d8ff. Quarta posição de paragem do gradiente: 73% Cor: #d3d8ff

Para a quinta parada do gradiente, mova-o para Posição 77% e altere a cor para #c6dfff. Quinta posição de parada em gradiente: 77% Cor: #c6dfff

Finalmente, altere o tipo de gradiente para cônico e altere a direção do gradiente para 233 graus. Feche suas configurações e salve seu trabalho. Tipo: cônico Direção: 233 graus

Resultados com várias cores de gradiente Primeiro exemplo de resultados

Segundo exemplo de resultados

Terceiro exemplo de resultados

Quarto exemplo de resultados

Esta é a nossa maneira de usar o Divi Gradient Builder para misturar várias cores de gradiente sem esforço. O criador de gradientes é divertido de jogar. Você pode adicionar quantas cores quiser, mas você precisará seguir alguns princípios de design simples para torná-los bonitos juntos. Estes exemplos mostram como é fácil usar três a cinco com
lori para construir o seu gradiente enquanto fazê-los funcionar bem com o design do seu site. Queremos ouvir-te. Você já usou esses métodos para criar mais cores de gradiente com o novo Gradient Builder do Divi? Conte-nos sobre sua experiência nos comentários.

Leave a Reply

Your email address will not be published. Required fields are marked *