Como usar fundos gradientes como máscaras de imagem de fundo com Divi

Se você está familiarizado com softwares de edição de imagens, como o Photoshop, provavelmente também está familiarizado com máscaras. As máscaras ajudam a reunir duas camadas e criar um resultado único. Com Divi, você pode ser criativo e criar seus próprios tipos de máscaras dentro de suas páginas usando fundos gradientes em combinação com imagens de fundo. Neste tutorial, mostraremos passo a passo como criar 8 máscaras de fundo diferentes para qualquer tipo de design no qual você está trabalhando. Este tutorial o ajudará a fazer ajustes rápidos de design em suas páginas sem ter que tocar em nenhum software de edição de imagem.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Vamos começar a criar!

Inscreva-se no nosso canal no Youtube

Adicionar nova seção

Espaçamento

Adicione uma nova seção à sua página, abra as configurações da seção e adicione alguns preenchimentos personalizados na parte superior e inferior.

• Enchimento superior: 150px
• Preenchimento inferior: 150 px

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Adicione o Módulo Blurb ao nº 1

Adicionar conteúdo

É hora de começar a adicionar módulos! Precisaremos de 8 módulos do Blurb no total. Vamos começar com o primeiro, fazer as alterações gerais e cloná-lo 7 vezes depois, antes de fazer alterações exclusivas em cada módulo do Blurb. Adicione um novo Módulo Blurb à primeira coluna e adicione algum conteúdo de sua escolha.

Configurações de texto

Vá para a guia de design e altere as configurações de texto a seguir.

• Orientação do Texto: Centro
• Cor do Texto: Escuro

Configurações de texto do título

Abra as configurações de texto do título também e mude as coisas.

• Fonte do título: Antic Didone
• Tamanho do texto do título: 23px
• Altura da linha de título: 1,5em

Sombra da caixa

Por último, adicione também uma sombra de caixa sutil ao Módulo do Blurb.

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

Clone o módulo do Blurb 7 vezes e coloque 4 duplicatas na segunda coluna

Depois de fazer todas as alterações gerais, você pode clonar o Módulo Blurb 7 vezes. Coloque quatro duplicatas na segunda coluna da linha e deixe três na primeira.

Modifique o módulo nº 1 do Blurb

Fundo Gradiente

Agora podemos começar a adicionar configurações exclusivas a cada um dos módulos do Blurb. Abra o primeiro módulo do Blurb na coluna 1 e adicione um fundo gradiente a ele.

• Cor 1: rgba (255,255,255,0)
• Cor 2: #ffffff
• Tipo de gradiente: radial
• Direção radial: inferior
• Posição inicial: 45%
• Posição final: 45%
• Colocar gradiente acima da imagem de fundo: Sim

Imagem de fundo

Depois de adicionar o fundo gradiente, você também pode adicionar a imagem de fundo e combiná-la com as seguintes configurações de fundo:

• Posição da imagem de fundo: Centro superior
• Repetição da imagem de fundo: sem repetição

Espaçamento

Por último, mas não menos importante, adicione algum preenchimento personalizado para que tudo se encaixe no lugar.

• Enchimento superior: 100px
• Preenchimento inferior: 350 px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Modifique o Módulo 2 do Blurb

Fundo Gradiente

Vamos passar para o próximo módulo do Blurb (o primeiro módulo na segunda coluna) e adicionar um fundo gradiente.

• Cor 1: rgba (255,255,255,0)
• Cor 2: #ffffff
• Tipo de gradiente: radial
• Direção radial: canto superior direito
• Posição inicial: 45%
• Posição final: 45%
• Colocar gradiente acima da imagem de fundo: Sim

Imagem de fundo

Continue adicionando uma imagem de fundo combinada com as configurações de fundo abaixo.

• Posição da imagem de fundo: canto superior direito
• Repetição da imagem de fundo: sem repetição

Espaçamento

E finalize o design adicionando valores de preenchimento personalizados nas configurações de espaçamento.

• Enchimento superior: 350 px
• Preenchimento inferior: 100px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 200 px (desktop e tablet), 50 px (telefone)

Modificar Módulo # 3 do Blurb

Fundo Gradiente

Para o terceiro módulo do Blurb (o segundo módulo do Blurb na primeira coluna). Abra as configurações e adicione um fundo gradiente.

• Cor 1: rgba (255,255,255,0)
• Cor 2: #ffffff
• Tipo de gradiente: radial
• Direção radial: canto superior esquerdo
• Posição inicial: 45%
• Posição final: 45%
• Colocar gradiente acima da imagem de fundo: Sim

Imagem de fundo

Continue adicionando uma imagem de plano de fundo a seguir.

• Posição da imagem de fundo: canto superior esquerdo
• Repetição da imagem de fundo: sem repetição

Espaçamento

E adicione um pouco de preenchimento personalizado ao módulo para que ele tome sua forma.

• Enchimento superior: 350 px
• Preenchimento inferior: 100px
• Preenchimento esquerdo: 200 px (desktop e tablet), 50 px (telefone)
• Preenchimento direito: 50 px

Modificar Módulo # 4 do Blurb

Fundo Gradiente

Vamos para o segundo módulo na segunda coluna! Abra as configurações do Módulo Blurb e adicione um fundo gradiente.

• Cor 1: rgba (255,255,255,0)
• Cor 2: #ffffff
• Tipo de gradiente: radial
• Direção Radial: Topo
• Posição inicial: 45%
• Posição final: 45%
• Colocar gradiente acima da imagem de fundo: Sim

Imagem de fundo

Continue adicionando uma imagem de plano de fundo a seguir.

• Posição da imagem de fundo: Centro superior
• Repetição da imagem de fundo: sem repetição

Espaçamento

E finalize o design adicionando valores de preenchimento personalizados nas configurações de espaçamento.

• Enchimento superior: 350 px
• Preenchimento inferior: 100px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Modificar Módulo # 5 do Blurb

Fundo Gradiente

Passe para o próximo módulo, que é o terceiro módulo da primeira coluna. Abra o módulo e adicione um fundo gradiente.

• Cor 1: rgba (255,255,255,0)
• Cor 2: #ffffff
• Tipo de gradiente: radial
• Direção Radial: Esquerda
• Posição inicial: 35%
• Posição final: 35%
• Colocar gradiente acima da imagem de fundo: Sim

Imagem de fundo

Continue adicionando uma imagem de plano de fundo em combinação com as seguintes configurações de plano de fundo:

• Posição da imagem de fundo: canto superior esquerdo
• Repetição da imagem de fundo: sem repetição

Espaçamento

E adicione alguns valores de preenchimento personalizados nas configurações de espaçamento também.

• Enchimento superior: 100px
• Preenchimento inferior: 100px
• Preenchimento esquerdo: 240px (desktop e tablet), 150px (telefone)
• Preenchimento direito: 50 px (desktop e tablet), 20 px (telefone)

Modifique o Módulo # 6 do Blurb

Fundo Gradiente

Vamos para o terceiro módulo na segunda coluna! Abra as configurações e adicione um fundo gradiente.

• Cor 1: rgba (255,255,255,0)
• Cor 2: #ffffff
• Tipo de gradiente: Linear
• Direção do gradiente: 140 graus
• Posição inicial: 60%
• Posição final: 60%
• Colocar gradiente acima da imagem de fundo: Sim

Imagem de fundo

Adicione uma imagem de fundo com as configurações de fundo correspondentes a seguir.

• Posição da imagem de fundo: Centro superior
• Repetição da imagem de fundo: sem repetição

Espaçamento

E conclua o design usando alguns valores de preenchimento personalizados nas configurações de espaçamento.

• Enchimento superior: 100px
• Preenchimento inferior: 350 px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 200 px (Desktop e Tablet), 50 px (Tablet)

Modificar Módulo # 7 do Blurb

Fundo Gradiente

O próximo Módulo Blurb na coluna 1 usa o seguinte fundo gradiente:

• Cor 1: rgba (255,255,255,0)
• Cor 2: #ffffff
• Tipo de gradiente: Linear
• Direção do gradiente: 220deg
• Posição inicial: 60%
• Posição final: 60%
• Colocar gradiente acima da imagem de fundo: Sim

Imagem de fundo

Adicione uma imagem de fundo também.

• Posição da imagem de fundo: Centro superior
• Repetição da imagem de fundo: sem repetição

Espaçamento

E adicione os valores de preenchimento personalizados necessários nas configurações de espaçamento.

• Enchimento superior: 100px
• Preenchimento inferior: 350 px
• Preenchimento esquerdo: 200 px (desktop e tablet), 50 px (telefone)
• Preenchimento direito: 50 px

Modificar Módulo # 8 do Blurb

Fundo Gradiente

Vamos para o último módulo do Blurb! Abra as configurações e adicione um fundo gradiente.

• Cor 1: rgba (255,255,255,0)
• Cor 2: #ffffff
• Tipo de gradiente: radial
• Direção radial: direita
• Posição inicial: 35%
• Posição final: 35%
• Colocar gradiente acima da imagem de fundo: Sim

Imagem de fundo

Faça upload da imagem de plano de fundo a seguir.

• Posição da imagem de fundo: canto superior esquerdo
• Repetição da imagem de fundo: sem repetição

Espaçamento

E termine o design e o tutorial adicionando algum preenchimento personalizado às configurações de espaçamento do módulo.

• Enchimento superior: 100px
• Preenchimento inferior: 100px
• Preenchimento esquerdo: 50 px (desktop e tablet), 20 px (telefone)
• Preenchimento direito: 240 px (desktop e tablet), 170 px (telefone)

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Pensamentos finais

Neste tutorial, mostramos como ser criativo com as opções integradas do Divi. Mais especificamente, usamos fundos radiais e imagens de fundo para criar máscaras de fundo. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!