Comparando os tipos de gradiente no Divi's Gradient Builder

Os tipos de gradiente fazem parte do novo Divi Gradient Builder. Os novos tipos de gradiente Divi permitem adicionar diferentes formas e cores aos seus planos de fundo. Neste post, vamos comparar esses tipos de gradientes e mostrar como usá-los para criar planos de fundo exclusivos!

Vamos começar.

Quais são os tipos de gradiente Divi?

O novo Gradient Builder da Divi adiciona vários novos recursos de gradiente que incluem tipos de gradiente. Existem quatro tipos de gradientes para escolher:

• Linear
• Circular
• Elíptico
• cônico

Cada um dos tipos exibe o gradiente de forma diferente. Eles são usados ​​para moldar o gradiente a ser exibido como um padrão de cor linear, em um círculo, uma elipse ou um cone. Veremos isso em detalhes em nossos exemplos.

Os tipos de gradiente também são afetados por outros controles, como a posição, se repete ou não, a unidade de medida da barra deslizante de gradiente e a colocação do gradiente acima do plano de fundo.

Cada ajuste pode ter um impacto pequeno ou grande no gradiente. O gradiente pode ser sutil ou pode se destacar. Pequenas ou grandes mudanças podem ser feitas com um único ajuste.

Com isso em mente, vejamos alguns exemplos de gradientes usando cada um dos tipos de gradientes. Mostraremos três exemplos de cada tipo de gradiente. O primeiro será um tipo padrão de gradiente que você veria na web. Os próximos dois serão um pouco mais experimentais, apenas para ver o que pode ser feito com os tipos de gradiente.

Exemplos de tipos de gradiente

Para os exemplos de tipo de gradiente, estou usando a seção hero da página de destino do pacote de layout de cama e café da manhã gratuito que está disponível no Divi. Esta seção já tem um gradiente, mas vamos substituí-lo e fazer algumas experiências. Podemos excluir o gradiente de fundo original ou modificá-lo. Os resultados são os mesmos. Para simplificar, vou modificá-lo.

Eu personalizei o texto do título, mudando-o de preto para branco.

Tipo de gradiente linear

Gradientes lineares exibem o gradiente como se estivessem espalhados pela página.

Primeiro Exemplo de Gradiente Linear

Aqui está um olhar para o nosso primeiro exemplo. Ele exibe uma cor mais clara à esquerda da tela e uma cor mais escura à direita, com uma transição suave entre elas.

Para criar este exemplo, adicione duas cores. O primeiro é rgba(92,158,82,0,76) na posição 0%. O segundo é rgba(0,10,4,0,76) na posição de 97%.

• Cor 1: rgba(92,158,82,0,76) (na posição 0%)
• Cor 2: rgba(0,10,4,0,76) (na posição de 97%)

Em seguida, altere o Tipo de gradiente para Linear e defina a Direção para 131 graus. Não repita . Defina a Unidade para Porcentagem. Coloque o gradiente acima da imagem de fundo.

• Tipo de gradiente: linear
• Direção: 131 graus
• Repetir: Não
• Unidade: Porcentagem
• Colocar gradiente acima da imagem de fundo: sim

Exemplo de segundo gradiente linear

Aqui está uma olhada no segundo exemplo de gradiente linear. Funciona como o primeiro, mas tem uma parada dura à esquerda onde um tom mais escuro toma conta.

Para criar este, adicione três Gradient Stops. O primeiro é rgba(18,76,41,0,76) na posição de 13%. O segundo é rgba(92,158,82,0,76) na posição de 13%. A cor 3 é rgba(18,76,41,0,76) na posição de 34%.

• Cor 1: rgba(18,76,41,0,76) (na posição 13%)
• Cor 2: rgba(92,158,82,0,76) (na posição de 13%)
• Cor 3: rgba(18,76,41,0,76) (na posição de 34%)

Em seguida, defina o Tipo de gradiente para Linear e defina a Direção para 90 graus. Não repita . Altere a Unidade para Porcentagem. Coloque-o acima da imagem de fundo.

• Tipo de gradiente: linear
• Direção: 90 graus
• Repetir: Não
• Unidade: Porcentagem
• Colocar gradiente acima da imagem de fundo: sim

Terceiro Exemplo de Gradiente Linear

Nosso terceiro exemplo coloca uma linha de cor clara diagonalmente no canto superior direito, tocando uma linha de cor mais escura.

Este tem três cores. A cor 1 é rgba(92,158,82,0,76) na posição de 13%. A cor 2 é rgba(92,158,82,0,76) na posição de 23%. A terceira cor é rgba(18,76,41,0,76) na posição de 32%.

• Cor 1: rgba(92,158,82,0,76) (na posição de 13%)
• Cor 2: rgba(92,158,82,0,76) (na posição de 23%)
• Cor 3: rgba(18,76,41,0,76) (na posição de 32%)

Defina o Tipo de gradiente para Linear em uma direção de 209 graus. Não repita e defina a Unidade para Porcentagem. Coloque o gradiente acima da imagem de fundo.

• Tipo de gradiente: linear
• Direção: 209 graus
• Repetir: Não
• Unidade: Porcentagem
• Colocar gradiente acima da imagem de fundo: sim

Tipo de gradiente circular

O tipo de gradiente circular cria um círculo com as cores.

Primeiro Exemplo de Gradiente Circular

Nosso primeiro exemplo de gradiente circular coloca uma cor clara no centro e uma cor mais escura nas bordas.

Este tem 2 cores. O primeiro é rgba(92,158,82,0,76) na posição 0%. O segundo é rgba(0,10,4,0,76) na posição de 62%.

• Cor 1: rgba(92,158,82,0,76) (na posição 0%)
• Cor 2: rgba(0,10,4,0,76) (na posição 62%)

Defina o Tipo de gradiente como Circular. Centralize a direção . Não repita , altere a Unidade para Porcentagem e coloque-a acima da imagem de fundo.

• Tipo de gradiente: Circular
• Direção: Centro
• Repetir: Não
• Unidade: Porcentagem
• Colocar gradiente acima da imagem de fundo: sim

Exemplo de segundo gradiente circular

Este gradiente coloca uma borda circular clara no centro da tela.

Tem quatro cores. Duas cores são empilhadas. O primeiro é rgba(18,76,41,0,76) na posição de 13%. O segundo é rgba(92,158,82,0,76) na posição de 33%. A cor 3 é rgba(92,158,82,0,76) na posição de 51%. A cor 4 é rgba(18,76,41,0,76). É colocado na posição de 51%, acima da Cor 3.

• Cor 1: rgba(18,76,41,0,76) (na posição 13%)
• Cor 2: rgba(92,158,82,0,76) (na posição de 33%)
• Cor 3: rgba(92,158,82,0,76) (na posição de 51%)
• Cor 4: rgba(18,76,41,0,76) (na posição 51%)

Defina o tipo de gradiente para circular e coloque a direção no canto superior esquerdo. Não repita , altere a Unidade para Porcentagem e coloque-a acima da imagem de fundo.

• Tipo de gradiente: Circular
• Direção: Superior Esquerdo
• Repetir: Não
• Unidade: Porcentagem
• Colocar gradiente acima da imagem de fundo: sim

Terceiro Exemplo de Gradiente Circular

Este exemplo coloca vários círculos claros dentro da cor mais escura, começando no meio do círculo.

Este também empilha duas cores em uma determinada ordem para obter esse design. A primeira cor é rgba(18,76,41,0,76) na posição de 13%. A cor 2 é rgba(18,76,41,0,76) na posição de 44%. A terceira cor se acumula em cima da segunda cor. É rgba(92,158,82,0,76) na posição de 44%. A cor 4 é rgba(92,158,82,0,76) na posição de 51%.

• Cor 1: rgba(18,76,41,0,76) (na posição 13%)
• Cor 2: rgba(18,76,41,0,76) (na posição 44%)
• Cor 3: rgba(92,158,82,0,76) (na posição de 44%)
• Cor 4: rgba(92,158,82,0,76) (na posição de 51%)

Altere o Tipo de gradiente para Circular. Coloque a direção na parte inferior. Tenha este para repetir . Defina a Unidade para Porcentagem e coloque o gradiente acima da imagem de fundo.

• Tipo de gradiente: Circular
• Direção: Inferior
• Repetir: Sim
• Unidade: Porcentagem
• Colocar gradiente acima da imagem de fundo: sim

Tipo de gradiente elíptico

Gradientes elípticos colocam as cores em forma de elipse.

Primeiro Exemplo de Gradiente Elíptico

Nosso primeiro exemplo elíptico coloca uma elipse com uma cor clara no centro da tela com uma cor mais escura ao redor.

Este tem duas cores. O primeiro é rgba(92,158,82,0,76) na posição 0%. O segundo é rgba(0,10,4,0,76) na posição de 50%.

• Cor 1: rgba(92,158,82,0,76) (na posição 0%)
• Cor 2: rgba(0,10,4,0,76) (na posição de 50%)

Altere o Tipo de gradiente para Elíptico. Defina a Direção para Centro. Faça com que este não se repita , defina a Unidade para Porcentagem e coloque-a acima da imagem de fundo.

• Tipo de gradiente: elíptico
• Direção: Centro
• Repetir: Não
• Unidade: Porcentagem
• Colocar gradiente acima da imagem de fundo: sim

Exemplo de segundo gradiente elíptico

Nosso segundo exemplo coloca muitas linhas circulares finas em todo o gradiente.

Tem duas cores. O primeiro é rgba(92,158,82,0,76) na posição 34pt. O segundo é rgba(0,10,4,0.76) na posição 39pt.

• Cor 1: rgba(92,158,82,0,76) (na posição 34pt)
• Cor 2: rgba(0,10,4,0,76) (na posição 39pt)

Altere o tipo de gradiente para elíptico e defina a direção para a esquerda. Tenha este para repetir . Altere a Unidade para Pontos. Coloque-o acima da imagem de fundo.

• Tipo de gradiente: elíptico
• Direção: Esquerda
• Repetir: Sim
• Unidade: Pontos
• Colocar gradiente acima da imagem de fundo: sim

Terceiro Exemplo de Gradiente Elíptico

Nosso terceiro exemplo coloca muitos semicírculos dentro do gradiente.

Este tem duas cores. O primeiro é rgba(32,68,35,0,73) na posição 34vmin. O segundo é rgba(0,10,4,0,76) na posição 39vmin.

• Cor 1: rgba(32,68,35,0,73) (na posição 34vmin)
• Cor 2: rgba(0,10,4,0,76) (na posição 39vmin)

Altere o tipo de gradiente para elíptico e defina a direção para o topo. Tenha este para repetir . Altere a Unidade para Mínimo da janela de visualização. Coloque-o acima da imagem de fundo.

• Tipo de gradiente: elíptico
• Direção: Superior
• Repetir: Sim
• Unidade: Mínimo da janela de visualização
• Colocar gradiente acima da imagem de fundo: sim

Tipo de gradiente cônico

O tipo de gradiente cônico exibe o gradiente em forma de cone como se o cone fosse visto de cima.

Primeiro Exemplo de Gradiente Cônico

Este exemplo coloca uma linha diagonal do centro do gradiente para a esquerda com uma cor clara de um lado e uma cor escura do outro.

Tem duas cores. O primeiro é rgba(92,158,82,0,76) na posição 0%. O segundo é rgba(0,10,4,0,76) na posição de 50%.

• Cor 1: rgba(92,158,82,0,76) (na posição 0%)
• Cor 2: rgba(0,10,4,0,76) (na posição de 50%)

Altere o Tipo de gradiente para Cônico. Defina a direção para 221 graus. Centralize a Posição e faça com que não se repita . Coloque o gradiente acima da imagem.

• Tipo de gradiente: cônico
• Direção: 221 graus
• Posição: Centro
• Repetir: Não
• Colocar gradiente acima da imagem de fundo: sim

Segundo Exemplo de Gradiente Cônico

Este exemplo é semelhante ao anterior, mas coloca a linha do centro para cima.

Este tem quatro cores. O primeiro é rgba(20,40,20,0,76) na posição de 7%. A cor 2 é rgba(30,73,25,0,68) na posição de 24%. A cor 3 é rgba(103,132,30,0,68) na posição de 65%. A quarta cor é rgba(38,86,26,0,68) na posição de 85%.

• Cor 1: rgba(20,40,20,0,76) (na posição 7%)
• Cor 2: rgba(30,73,25,0,68) (na posição 24%)
• Cor 3: rgba(103,132,30,0,68) (na posição de 65%)
• Cor 4: rgba(38,86,26,0,68) (na posição de 85%)

Defina o Tipo de gradiente para cônico e a Direção em 0 graus. Centralize a posição . Não repita e coloque-o acima da imagem.

• Tipo de gradiente: cônico
• Direção: 0 graus
• Posição: Centro
• Repetir: Não
• Colocar gradiente acima da imagem de fundo: sim

Terceiro Exemplo de Gradiente Cônico

Nosso último exemplo coloca uma sequência de linhas do centro superior do gradiente para fora em todas as direções.

Este tem duas cores. O primeiro é rgba(30,73,25,0.68) na posição de 5 graus. O segundo é rgba(20,40,20,0.76) na posição de 7 graus.

• Cor 1: rgba(30,73,25,0,68) (na posição de 5 graus)
• Cor 2: rgba(20,40,20,0,76) (na posição de 7 graus)

Defina o tipo de gradiente eth para cônico e a direção para 221 graus. Coloque a posição no topo. Faça esta repetição e coloque-a acima da imagem de fundo.

• Tipo de gradiente: cônico
• Direção: 221 graus
• Posição: Superior
• Repetir: Sim
• Colocar gradiente acima da imagem de fundo: sim

Pensamentos finais

Essa é a nossa visão de comparar os tipos de gradiente no Divi's Gradient Builder. Como você pode ver nestes exemplos, as configurações são simples, mas qualquer uma delas pode fazer uma grande diferença no design do gradiente. Para obter os melhores resultados, experimente os tipos de gradiente com diferentes direções e posições e ative ou desative a opção de repetição para ver o que você pode criar.

Nós queremos ouvir de você. Você usou os diferentes tipos de gradiente no Divi Gradient Builder? Deixe-nos saber sobre sua experiência nos comentários.