Como aplicar uma cor de texto em gradiente à sua cópia usando apenas as opções integradas do Divi

Não importa o tipo de site que você está criando, destacar a cópia e o conteúdo continua sendo uma das principais prioridades. Com as opções integradas do Divi, há várias maneiras de chegar lá. Uma das possibilidades que você tem é aplicar uma cor de texto gradiente à sua cópia. Essa é uma ótima abordagem para adicionar cor ao seu site, especialmente se você estiver mantendo o resto do site limpo e minimalista. Ajuda a equilibrar os espaços em branco e dá ao seu site uma lufada de ar fresco.

Neste tutorial, vamos mostrar como dar ao seu texto uma cor gradiente usando apenas as opções integradas do Divi.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada no resultado em diferentes tamanhos de tela. Mostraremos como fazer isso funcionar usando uma paleta de cores claras e escuras. Depois de obter a abordagem, você pode criar todos os tipos de designs com texto gradiente.

Abordagem

1. Compreendendo os modos de mistura Divi

Os modos de mesclagem funcionam exatamente da maneira como você está acostumado com eles no software de edição de imagem. Eles são baseados em estruturas de camadas. Concretamente, isso significa que um modo de mesclagem em Divi seguirá uma certa hierarquia:

• Um modo de mesclagem aplicado a um módulo mesclará o módulo + coluna abaixo dele
• Um modo de mesclagem aplicado a uma coluna mesclará a coluna + linha abaixo dela
• Um modo de mesclagem aplicado a uma linha mesclará a linha + seção abaixo dela

Para este tutorial, é necessário entender que um modo de mesclagem aplicado a um módulo se mesclará com a coluna abaixo dele. Ao dar à coluna um fundo gradiente e ao módulo em questão um modo de mesclagem, podemos conseguir um texto de cor gradiente.

2. Escolha entre uma paleta de cores totalmente escuras ou claras

Para fazer isso funcionar, você terá que usar uma paleta de cores totalmente escura ou clara. Os modos de mesclagem que estamos usando, clarear e escurecer, só fornecerão o resultado desejado quando você estiver usando uma cor totalmente preta ou branca. Ao usar outras cores, o efeito que aplicamos ficará visível.

3. Removendo toda a largura da medianiz entre colunas e módulos

Conforme mencionado na primeira parte da abordagem, usaremos fundos gradientes de coluna. Para garantir que esse fundo gradiente não apareça em nenhum lugar que não queremos, vamos remover toda a largura da calha. Fazendo isso, teremos certeza de que não há margem personalizada padrão sendo aplicada entre os módulos. Para compensar o espaço que perdemos, adicionaremos manualmente o preenchimento personalizado.

4. Usando preenchimento em vez de alterar a largura de um elemento

E para ajustar a largura de um elemento de design, usaremos o preenchimento personalizado à esquerda e à direita. Mudar a largura nas configurações de dimensionamento mudaria a largura de todo o módulo e permitiria que o fundo do gradiente da coluna apareça no lado esquerdo e direito, o que é algo que não queremos.

Vamos começar a criar!

Inscreva-se no nosso canal no Youtube

Adicionar nova seção

Cor de fundo

Vamos começar! Adicione uma seção regular a uma página nova ou existente e dê a ela a cor de fundo correta (dependendo se você deseja recriar o layout claro ou escuro).

• Cor de fundo: #ffffff (layout claro), # 000000 (layout escuro)

Espaçamento

Continue adicionando algum preenchimento personalizado à seção.

• Preenchimento superior: 215px
• Preenchimento inferior: 215px

Adicionar linha # 1

Estrutura da Coluna

Em seguida, adicione uma nova linha usando a seguinte estrutura de coluna:

Fundo Gradiente da Coluna 2

Adicione um fundo gradiente à segunda coluna da linha. É aqui que colocaremos o título Módulo de texto na próxima parte do tutorial.

• Cor 1: # c700ff
• Cor 2: # 32f1ff
• Direção do gradiente da coluna 2: 150deg
• Posição inicial da coluna 2: 20%
• Posição final da coluna 2: 60%

Dimensionamento

Altere também as configurações de dimensionamento.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

E modifique as configurações de espaçamento.

• Margem superior: 50px
• Margem inferior: 50px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo

Agora vá em frente e adicione um Módulo de Texto à segunda coluna da linha que você adicionou.

Cor de fundo

Dê ao seu módulo o fundo correto, dependendo do tipo de layout que você deseja recriar.

• Cor de fundo: #ffffff (layout claro), # 000000 (layout escuro)

Configurações de texto de título

Altere as configurações de texto do título a seguir.

• Alinhamento de Texto do Título 2: Centro
• Cor do texto do cabeçalho 2: # 000000 (layout claro), #ffffff (layout escuro)
• Tamanho do texto do título 2: 67 px (desktop), 50 px (tablet), 40 px (telefone)
• Cabeçalho 2 espaçamento entre letras: -2 px

Espaçamento

E adicione um pouco de preenchimento inferior. Lembre-se de que estamos usando preenchimento inferior em vez de margem para garantir que o fundo gradiente da coluna não apareça.

• Preenchimento inferior: 50 px

Modo de mistura

Para fazer com que o fundo gradiente da coluna se aplique ao módulo adicionado, aplique um modo de mesclagem nas configurações de filtros.

• Modo de mesclagem: clarear (layout claro), escurecer (layout escuro)

Adicionar Módulo Divisor à Linha

Visibilidade

O segundo e último módulo de que precisamos nesta linha é um Módulo divisor.

• Mostrar divisor: Sim

Cor de fundo

Altere a cor de fundo de acordo com o tipo de layout que você está recriando.

• Cor de fundo: #ffffff (layout claro), # 000000 (layout escuro)

Espaçamento

Para reduzir a largura do divisor, vamos adicionar algum preenchimento personalizado nos lados esquerdo e direito.

• Preenchimento esquerdo: 250 px
• Preenchimento direito: 250 px

Modo de mistura

Novamente, adicione um modo de mesclagem para mostrar o fundo do gradiente da coluna.

• Modo de mesclagem: clarear (layout claro), escurecer (layout escuro)

Adicionar linha # 2

Estrutura da Coluna

Para a próxima linha! Use a seguinte estrutura de coluna:

Fundo Gradiente da Coluna 1

Continue adicionando um fundo gradiente à primeira coluna.

• Cor 1: # c700ff
• Cor 2: # 32f1ff
• Tipo de gradiente da coluna 1: Linear
• Direção do gradiente da coluna 1: 105 graus
• Posição inicial da coluna 1: 20%
• Posição final da coluna 1: 50%

Fundo Gradiente da Coluna 2

Estamos usando um fundo gradiente para a segunda coluna também.

• Cor 1: # 32f1ff
• Cor 2: # c700ff
• Tipo de gradiente da coluna 2: Linear
• Direção do gradiente da coluna 2: 90 graus
• Posição inicial da coluna 2: 40%
• Posição final da coluna 2: 60%

Fundo Gradiente da Coluna 3

O mesmo vale para a terceira coluna.

• Cor 1: # c700ff
• Cor 2: # 32f1ff
• Tipo de gradiente da coluna 3: Linear
• Direção do gradiente da coluna 3: 85 graus
• Posição inicial da coluna 3: 20%
• Posição final da coluna 3: 50%

Dimensionamento

Altere as configurações de dimensionamento a seguir.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

E adicione algum preenchimento personalizado à esquerda e à direita.

• Preenchimento esquerdo: 100 px (desktop e tablet), 50 px (telefone)
• Preenchimento direito: 100 px (desktop e tablet), 50 px (telefone)

Adicionar Módulo Blurb à Coluna 1

Adicionar conteúdo

É hora de começar a adicionar módulos! Adicione um Módulo do Blurb à coluna 1 com um título de sua escolha. Posteriormente na postagem, usaremos um módulo separado para adicionar o conteúdo do corpo.

Escolha o ícone

Selecione um ícone de sua escolha.

Cor de fundo

E modifique a cor de fundo do Módulo Blurb.

• Cor de fundo: #ffffff (layout claro), # 000000 (layout escuro)

Configurações de ícone

Continue acessando as configurações de ícone e fazendo algumas alterações.

• Cor do ícone: # 000000 (layout claro), #ffffff (layout escuro)
• Posicionamento de imagem / ícone: topo
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 51px

Configurações de texto do título

Altere também as configurações do texto do título.

• Peso da fonte do título: negrito
• Alinhamento do Texto do Título: Centro
• Cor do texto do título: # 000000 (layout claro), #ffffff (layout escuro)
• Espaçamento entre letras de título: -1px
• Altura da linha de título: 1,2em

Espaçamento

Em seguida, vá para as configurações de espaçamento e adicione alguns valores de margem e preenchimento personalizados.

• Margem inferior: 5px
• Enchimento superior: 50 px
• Preenchimento inferior: 50 px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Modo de mistura

Por último, mas não menos importante, aplique o modo de mistura correto.

• Modo de mesclagem: clarear (layout claro), escurecer (layout escuro)

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

Estamos separando o título e o corpo do Módulo do Blurb em dois módulos para fazer o modo de mesclagem se aplicar apenas ao ícone e ao título. Vá em frente e adicione um Módulo de texto logo abaixo do Módulo Blurb contendo o conteúdo do corpo.

Cor de fundo

Em seguida, adicione uma cor de fundo.

• Cor de fundo: #ffffff (layout claro), # 0c0c0c (layout escuro)

Configurações de texto

E altere as configurações de texto.

• Espaçamento entre letras do texto: 0,5 px
• Altura da linha de texto: 2.3em
• Orientação do Texto: Justificar
• Cor do texto: escuro (layout claro), claro (layout escuro)

Espaçamento

Para dar ao módulo algum espaço para respirar, adicione alguns valores de preenchimento personalizados nas configurações de espaçamento.

• Enchimento superior: 100px
• Preenchimento inferior: 100px
• Preenchimento esquerdo: 70 px
• Preenchimento direito: 70 px

Sombra da caixa

E ainda por cima, adicione uma sombra de caixa sutil também.

• Força do desfoque de sombra da caixa: 56 px
• Força de propagação da sombra da caixa: -12px
• Cor da sombra: rgba (0,0,0,0.3)

Clone o módulo do Blurb e o módulo de texto duas vezes + coloque nas colunas restantes

Por último, mas não menos importante, clone os dois módulos que você pode encontrar na coluna 1 e coloque as duplicatas nas duas colunas restantes. Altere o conteúdo de acordo também.

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado final.

Pensamentos finais

Nesta postagem, mostramos como criar texto gradiente em seu site usando apenas as opções integradas do Divi. Para fazer este tutorial funcionar, e para ser capaz de praticar a abordagem em outros designs também, é necessário que você passe pela seção de abordagem deste post e entenda-a ao recriar o design. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!