Usando as novas configurações de filtro de coluna da Divi para criar efeitos de mesclagem impressionantes

As novas configurações de filtro de coluna da Divi podem ser usadas de muitas maneiras criativas. Nesta postagem, mostraremos como misturar uma imagem de plano de fundo da linha principal com o conteúdo da coluna. Adicionaremos diferentes gradientes de cor aos módulos e um modo de mesclagem de "tela" de coluna para criar um efeito impressionante. Esperamos que este design inspire você a usar modos de mesclagem de coluna em seu próximo projeto Divi. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá!

Antevisão

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

Área de Trabalho

Móvel

Baixe o Layout dos Modos de Combinação de Colunas GRATUITAMENTE

Para colocar as mãos no layout de modos de combinação de coluna grátis, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Vamos começar a recriar!

Inscreva-se no nosso canal no Youtube

Adicionar nova seção com linha de 3 colunas

Comece o design adicionando uma nova seção com uma linha de três colunas.

Espaçamento de seção

Abra as configurações da seção e ajuste o espaçamento.

• Margem esquerda e direita: 3vw
• Preenchimento superior e inferior: 84 px

Configurações de linha

Fundo

Antes de adicionar qualquer módulo, vamos modificar as configurações de linha. Comece adicionando uma cor de fundo.

• Cor de fundo: cinza médio # c4c4c4

Em seguida, carregue uma imagem de fundo e misture a cor de fundo com a imagem usando um modo de mesclagem.

• Mistura de imagem de fundo: multiplique

Dimensionamento

Ajuste as configurações de dimensionamento da próxima linha.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize a altura da coluna: Sim
• Largura: 100%
• Largura máxima: 100%

Espaçamento

Remova o preenchimento de linha padrão também.

• Preenchimento superior e inferior: 0 px

Sombra da caixa

Continue adicionando uma sombra de caixa simples à linha.

• Sombra da caixa: primeira opção

Visibilidade

Ajuste o índice Z na guia de visibilidade.

• Índice Z: 1

Coluna de Estilo 1

Insira as configurações da primeira coluna.

Filtros

Aplique um modo de mesclagem de tela à coluna na guia de filtros.

• Modo de mistura: tela

Escala de Transformação Hover

Entre no grupo de opções de transformação e modifique as configurações de escala de transformação de foco.

• Escala de transformação: 105% nos eixos xey

Visibilidade

Acesse a guia de visibilidade da coluna e ajuste as configurações de estouro.

• Excesso horizontal: visível
• Estouro vertical: visível

Transições

Vá para a guia de transições e ajuste a duração da transição para criar uma transição suave.

• Duração da transição: 500 ms

Adicionar Módulo de Texto à Coluna 1

Cada coluna contém três módulos de texto. Adicione um primeiro módulo de texto à coluna 1 com algum conteúdo H2 de sua escolha e ajuste as configurações como segue.

Fundo

Estilize o plano de fundo com um gradiente de cor.

• Fundo: Gradiente
• Gradient Color One: # 5498ff
• Gradient Color Two: # 16fff3
• Direção do gradiente: 235 graus
• Posição inicial: 37%

Espaçamento

Adicione alguns valores de espaçamento personalizados a seguir.

• Preenchimento superior e inferior: 6vw
• Preenchimento esquerdo e direito: 3vw

Texto do Título

Insira as configurações de texto do título e defina o estilo das configurações de texto H2 de acordo:

• Peso da fonte do cabeçalho 2: ultra negrito
• Estilo da fonte do título 2: TT
• Título 2 Cor do texto: Preto #oooooo
• Tamanho do texto do título 2:
  • Desktop: 5vw
  • Tablet: 11vw
  • Telefone: 13vw
• Altura da linha do título 2:
  • Desktop: 4.3vw
  • Tablet: 9vw
  • Telefone: 10.5vw

Filtros

Passe para as configurações de filtros e adicione um modo de mesclagem de tela.

• Modo de mistura: tela

Adicione o 2º Módulo de Texto à Coluna 1

Continue adicionando o segundo módulo de texto à coluna 1 com algum conteúdo de parágrafo de sua escolha.

Defina o estilo do módulo de texto da seguinte maneira:

Fundo

Adicione uma cor de fundo branca.

• Cor de fundo: branco #fffffff

Texto

Acesse a guia de design e ajuste o texto de acordo:

• Fonte do texto: Montserrat
• Alinhamento de Texto: Justificado
• Cor do Texto: Cinza Escuro # 333333
• Tamanho do texto:
  • Desktop: 0.8vw
  • Tablet: 2vw
  • Telefone: 2,5vw
• Espaçamento entre letras do texto: -0,04vw
• Altura da linha de texto:
  • Desktop: 2.7vw
  • Tablet: 5,5vw
  • Telefone: 6vw

Espaçamento

Ajuste as configurações de espaçamento também para criar um espaço vazio ao redor do texto.

• Margem superior e inferior: 0,5vw
• Preenchimento superior e inferior:
  • Desktop: 5vw
  • Tablet + telefone: 15vw
• Preenchimento esquerdo: 5vw
• Preenchimento direito:
  • Desktop: 5vw
  • Tablet + telefone: 25vw

Filtros

Por último, mas não menos importante, aplique um modo de mesclagem de tela na guia de filtros.

• Modo de mistura: tela

Adicionar 3º Módulo de Texto à Coluna 1

Para completar o design da coluna, adicione um terceiro módulo de texto com algumas cópias do CTA. Estamos usando todo este módulo como um botão.

Defina o estilo do módulo da seguinte maneira:

Adicionar Link

Adicione um link de sua escolha nas configurações de link. Assim que alguém clicar em qualquer lugar do módulo, será redirecionado para outro lugar.

Fundo

Estilize o gradiente de fundo para coincidir com o primeiro módulo de texto.

• Fundo: Gradiente
• Cor gradiente de fundo um: # 5498ff
• Cor do gradiente de fundo dois: # 16fff3
• Direção do gradiente: 235 graus

Texto

Insira a guia de design e estilize o texto da seguinte maneira:

• Fonte do texto: Montserrat
• Peso da fonte do texto: pesado
• Estilo da fonte do texto: sublinhado
• Cor do sublinhado do texto: branco #ffffff
• Cor do Texto: Preto # 000000
• Tamanho do texto:
  • Desktop: 1.5vw
  • Tablet: 3,3vw
  • Telefone: 4vw
• Altura da linha de texto: 1em

Espaçamento

Ajuste as configurações de espaçamento para que o texto se encaixe melhor no módulo.

• Preenchimento superior e inferior:
  • Desktop: 2vw
  • Tablet: 6vw
  • Telefone: 9vw
• Preenchimento esquerdo: 3vw

Duplicar a 1ª coluna duas vezes

Depois de preencher a primeira coluna, abra as configurações de linha e exclua a segunda e a terceira colunas. Em seguida, duplique a primeira coluna duas vezes. Claro, precisaremos fazer algumas mudanças nos módulos nas colunas 2 e 3.

Coluna 2 / Fundo do Módulo de Texto 1

• Cor gradiente de fundo um: # c870ff
• Cor do gradiente de fundo dois: # ff355a

Sombra de caixa da coluna 2 / módulo de texto 2

• Sombra da caixa: sexta opção
• Força do desfoque de sombra da caixa: 20 px
• Força de propagação da sombra da caixa: 17 px
• Cor da sombra da caixa: rgba (225,33,255,0,06)

Coluna 2 / Fundo do Módulo de Texto 3

Ajuste o gradiente de fundo do terceiro módulo de texto para corresponder ao primeiro módulo.

• Cor gradiente de fundo um: # c870ff
• Cor do gradiente de fundo dois: # ff355a

Coluna 3 / Fundo do Módulo de Texto 1

Vamos para a terceira coluna! Altere o fundo gradiente do módulo de texto 1 de acordo:

• Cor gradiente de fundo um: # ff4800
• Cor gradiente de fundo dois: # fc9a2a

Coluna 2 / Fundo do Módulo de Texto 3

• Cor gradiente um do fundo: # ff4800
• Cor gradiente de fundo dois: # fc9a2a

Antevisão

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

Área de Trabalho

Móvel

É um embrulho

Neste post, mostramos como criar um design de três colunas com um efeito de mesclagem impressionante usando as configurações de coluna do Divi. Combinamos configurações de módulo, coluna e linha para alcançar um resultado bonito que você pode usar em qualquer site que criar. Esperamos que este tutorial inspire você a criar seus próprios designs alternativos também. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!