Como criar colunas sobrepostas com as opções de coluna e transformação de Divi

Em uma das últimas atualizações do Divi, adicionamos alguns controles incríveis às colunas do construtor. Agora é mais fácil do que nunca criar sobreposições de colunas. Neste tutorial, mostraremos como criar uma seção de depoimento com três colunas sobrepostas usando a coluna Divi e as configurações de transformação.

Para este projeto, usaremos três cores, um laranja rico # ff8300, um amarelo quente # ffd400 e um gradiente de azul destacado # 0c99c1. Você pode aplicar esse design de coluna sobreposta a um projeto de site em nenhum momento.

Vamos começar.

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

1. Crie uma nova seção regular + linha de três colunas

A primeira coisa que você precisa fazer é criar uma seção regular com uma linha de três colunas.

Ajuste o espaçamento da seção

Aumente o preenchimento superior e inferior da seção.

• Preenchimento superior: 4vw
• Preenchimento inferior: 16vw

Ajuste o tamanho e o espaçamento da linha

Abra as configurações de linha e altere as configurações de dimensionamento de acordo:

• Use uma largura de medianiz personalizada: Sim
• Largura da calha: 1
• Largura: 100%
• Largura máxima: 100%

Depois disso, modifique as configurações de espaçamento:

• Preenchimento inferior: 0 px
• Preenchimento esquerdo: 11vw
• Preenchimento direito: 8vw

Adicionar fundo gradiente

Adicione um fundo gradiente a seguir:

• Estilo de fundo: gradiente
• Primeira cor: branco #ffffff
• Segunda cor: laranja # ff8300
• Tipo de gradiente: Linear
• Direção do gradiente: 180 graus
• Posição inicial: 35%
• Posição final: 35%

2. Colunas de estilo

Antes de adicionar módulos às colunas, vamos alterar o estilo, espaçamento e configurações de transformação de cada coluna individualmente.

Coluna 1

As primeiras etapas do estilo da coluna são os cantos arredondados e a sombra da caixa:

• Borda: 20 px em todos os cantos arredondados
• Sombra da caixa: primeira opção de sombra da caixa
• Posição vertical da sombra da caixa: 0 px
• Força do desfoque de sombra da caixa: 80 px
• Cor da sombra: rgba (0,0,0,0.3)
• Posição da sombra da caixa: externa

* Antes de adicionar qualquer configuração de transformação, copiaremos e colaremos esses estilos de item nas colunas dois e três.

Abra as configurações da coluna 1 novamente e vá para a guia de design. Usaremos as configurações de transformação para fazer a primeira coluna se sobrepor à segunda. Caso você tenha esquecido, o eixo x é horizontal e o eixo y é vertical.

• Transform Translate:
  • Desktop: eixo x = 3vw. eixo y = 14,2vw
  • Tablet e telefone: eixo x = -14vw. eixo y = 16vw
• Visibilidade: Índice Z 10

Coluna 2

Vamos para a segunda coluna! Vá para a sombra da caixa (que você adicionou em uma das etapas anteriores) e aumente a força do desfoque da sombra da caixa.

• Força do desfoque de sombra da caixa: 50 px

Continue adicionando alguns valores de espaçamento personalizados à coluna 2.

• Enchimento superior:
  • Desktop = 3vw
  • Tablet + Telefone = 5vw
• Preenchimento inferior:
  • Desktop = 5vw
  • Tablet + Telefone = 7vw
• Preenchimento esquerdo:
  • Desktop = 2vw
  • Tablet + Telefone = 4vw
• Preenchimento direito:
  • Desktop = 2vw
  • Tablet + Telefone = 4vw

É hora de transformar a segunda coluna! A segunda coluna permanece em seu lugar para a área de trabalho, mas temos que aplicar algumas configurações de transformação personalizadas em telas menores. Vá em frente e ajuste a guia transformar traduzir. Além disso, aumentaremos o índice Z para 9.

• Transform Translate:
  • Tablet e telefone: eixo x = 9vw. eixo y = 13vw
• Visibilidade: Índice Z 9

Coluna 3

Vamos para a terceira coluna! Aumente a intensidade do desfoque da sombra da caixa da sombra da caixa já existente.

• Força do desfoque de sombra da caixa: 50 px

Abra as configurações de plano de fundo a seguir e adicione um plano de fundo gradiente azul.

• Fundo: Gradiente
• Gradient Color One: # 0c99c1
• Gradient Color Two: rgba (5,0,78,0,72)
• Tipo de gradiente: Linear
• Direção do gradiente: 220 graus
• Posição inicial: 0%
• Posição final: 100%

Agora, vamos adicionar o espaçamento.

• Enchimento superior:
  • Desktop = 3vw
  • Tablet + telefone = 10vw
• Preenchimento inferior:
  • Desktop = 3vw
  • Tablet + Telefone = 7vw
• Preenchimento esquerdo:
  • Desktop = 1.5vw
  • Tablet + telefone = 10vw
• Preenchimento direito:
  • Desktop = 1.5vw
  • Tablet + telefone = 10vw

Por último, mas não menos importante, faremos com que a terceira coluna se sobreponha à segunda, alterando as configurações de conversão de transformação.

• Transform Translate:
  • Desktop: eixo x = -10vw. eixo y = 14,2vw
  • Tablet: eixo x = -14vw. eixo y = 9vw
  • Telefone: eixo x = -14vw. eixo y = 11vw
• Visibilidade: Índice Z 9

Aqui está uma prévia de nossas colunas antes de adicionar os módulos.

3. Adicionar módulos às colunas e estilizá-los

Agora, vamos adicionar os módulos a cada coluna!

Coluna 1

Na coluna um, inseriremos um módulo de imagem e um módulo de texto. Adicione o módulo de imagem primeiro.

1. Adicione o módulo de imagem

Insira uma foto do seu cliente e estilize-a da seguinte maneira:

• Alinhamento: Esquerda
• Forçar largura total: Sim

Adicione uma borda inferior à imagem também.

• Cor da borda inferior: amarelo # ffd400
• Largura da borda inferior: 9 px
• Estilo de borda: sólido

2. Adicione o Módulo de Texto

Adicione um novo módulo de texto logo abaixo do módulo de imagem e insira o nome e a posição do cliente.

• Nome: Título 4
• Posição: Parágrafo

Depois de adicionar o conteúdo, definiremos as configurações de texto:

• Fonte do texto: Nunito Sans
• Peso da fonte do texto: regular
• Alinhamento de Texto: Centro
• Cor do Texto: Preto # 000000
• Tamanho do texto:
  • Desktop = 0.8vw
  • Tablet = 1.8vw
  • Telefone = 2.8vw

Passe para as configurações de texto do título e aplique as seguintes alterações:

• Texto do Título: H4
• Fonte do título 4: Poppins
• Cabeçalho 4 Peso da fonte: negrito
• Título 4 Cor do texto: Preto # 000000
• Tamanho do texto do título 4:
  • Desktop = 1vw
  • Tablet = 3vw
  • Telefone = 4vw

Também alteraremos as configurações de espaçamento:

• Margem superior:
  • Desktop = 1.5vw
  • Tablet = 3vw
  • Telefone = 7vw
• Margem inferior:
  • Desktop = 1.5vw
  • Tablet = 3vw
  • Telefone = 7vw

Sua coluna deve ficar assim depois de concluir os dois módulos:

Coluna 2

Na coluna 2, precisamos de um texto, uma sinopse e um módulo divisor. O primeiro módulo de texto é aquele que se parece com um banner em ângulo no canto superior direito da coluna. Usaremos as opções de transformação para obter esse efeito.

1. Adicione o módulo de texto.

Adicione um novo módulo de texto e adicione a palavra 'Testemunho' à caixa de conteúdo.

Adicione um fundo amarelo ao módulo.

• Cor de fundo: amarelo # ffd400

Vá para a guia de design e altere as configurações de texto e espaçamento de acordo:

• Fonte do texto: Poppins
• Peso da fonte do texto: negrito
• Alinhamento de Texto: Centro
• Cor do Texto: Branco #ffffff
• Tamanho do texto: 23px
• Margem direita: -50px
• Margem esquerda: -50px
• Enchimento superior: 15px
• Preenchimento inferior: 15 px

Por último, mas não menos importante, ajustaremos as configurações de transformação da seguinte maneira:

• Transform Translate:
  • Desktop = 17vw no eixo x
  • Tablet = 24vw no eixo x, 1vw no eixo y
  • Telefone = 20vw no eixo x, 1vw no eixo y
• Transformar Rotação: 32 graus no primeiro eixo

2. Adicione o módulo Blurb.

Depois de concluir o primeiro módulo, é hora de adicionar um módulo de sinopse.

O módulo blurb é onde o depoimento do cliente é exibido. Primeiro, clique no ícone + para adicionar um módulo e selecione sinopse.

Depois, insira o conteúdo, selecione um ícone e estilize o ícone da seguinte maneira:

• Use o ícone: Sim, uma estrela
• Cor do ícone: amarelo # ffd400
• Posicionamento do ícone: Esquerda
• Usar tamanho da fonte do ícone: Sim, 48 px

Continue definindo o estilo do texto do título em um nível H4

• Texto do Título: H4
• Fonte do título: Poppins
• Peso da fonte do título: negrito
• Cor da fonte do título: preto #ffffff

• Tamanho do texto do título:
  • Desktop = 1.2vw
  • Tablet = 2.3vw
  • Telefone = 3,3vw
• Altura da linha de título:
  • Desktop = 2vw
  • Tablet = 3.4vw
  • Telefone = 4.6vw

Defina as configurações do corpo do texto de acordo:

• Fonte do corpo do texto: Nunito Sans
• Peso do corpo do texto: semi negrito
• Cor do corpo do texto: Preto # 000000
• Tamanho do corpo do texto:
  • Desktop = 0.7vw
  • Tablet = 1.6vw
  • Telefone = 2,4vw
• Altura da linha corporal:
  • Desktop = 1.6vw
  • Tablet = 4vw
  • Telefone = 5vw

Queremos que a sinopse seja menos larga do que sua coluna. Para isso, ajustaremos a largura, as margens e os valores de preenchimento.

Primeiro, vamos ajustar a largura da sinopse:

• Largura do conteúdo: 100%
• Largura:
  • Desktop = 58,4%
  • Tablet + telefone = 90%

E então, as configurações de espaçamento:

• Margem superior: 3vw
• Margem inferior: 3vw
• Margem direita: -24vw
• Preenchimento esquerdo: 0px
• Preenchimento direito: 4px

3. Adicionar divisor

O último módulo de que precisamos nesta coluna é um módulo divisor. Aplique as seguintes alterações ao divisor:

• Veja Divisor: Sim
• Cor divisória: Preto #oooooo
• Peso do divisor: 1px

Estamos quase lá! Este é o nosso resultado até agora:

Coluna 3

Vamos para a terceira e última coluna! Estamos usando esta coluna para exibir uma frase de chamariz. Estamos usando três módulos; um módulo de texto, um módulo divisor e um módulo de botão.

1. Adicionar Módulo de Texto

A primeira coisa que adicionaremos a esta coluna é o módulo de texto.

Adicionaremos um título em H3 e um pouco de texto de parágrafo à caixa de conteúdo.

Vá em frente e defina o estilo das configurações de texto de acordo:

• Fonte do texto: Nunito Sans
• Peso da fonte do texto: regular
• Cor da fonte do texto: branco #ffffff
• Tamanho da fonte do texto:
  • Desktop = 0.8vw
  • Tablet = - 2vw
  • Telefone = 2.6vw
• Altura da linha de texto:
  • Desktop = 1.5vw
  • Tablet = 4vw
  • Telefone = 5vw

Conclua o módulo de texto definindo o estilo das configurações de texto do título.

• Texto do Título: H3
• Fonte do título 3: Poppins
• Peso da fonte do cabeçalho 3: negrito
• Título 3 Cor do texto: branco #ffffff
• Tamanho do texto do título 3:
  • Desktop = 1.1vw
  • Tablet = 3vw
  • Telefone = 4vw
• Altura da linha do título 3:
  • Desktop = 1.5vw
  • Tablet = 3vw
  • Telefone = 4.5vw

2. Adicionar Módulo Divisor

Continue adicionando um módulo divisor à coluna 3. Para estilizar o divisor, vamos copiar e colar os estilos de divisor daquele que você pode encontrar na coluna 2.

Abra as configurações do divisor e mude a cor de preto para branco. Adicione um pouco de preenchimento superior e inferior também.

• Cor da divisória: Branco #ffffff
• Top Padding: 40px
• Preenchimento inferior: 20 px

3. Adicionar Módulo de Botão

Vamos para o último módulo, que é um módulo de botão. Adicione alguma cópia de sua escolha.

Vá para a guia de design e estilize o botão da seguinte maneira:

• Usar estilo personalizado para botão: Sim
• Tamanho do texto do botão:
  • Desktop = 0.8vw
  • Tablet = 2,4vw
  • Telefone = 3vw
• Cor do texto do botão: branco #ffffff

• Cor de fundo do botão: gradiente
• Gradient Color One: Yellow # ffd400
• Gradient Color Two: Orange # ff8300
• Tipo de gradiente: Linear
• Direção do gradiente: 202deg.

• Largura da borda do botão: 0 px
• Espaçamento entre letras dos botões: 1px
• Fonte do botão: Nunito Sans
• Peso da fonte do botão: pesado
• Estilo da fonte do botão: TT

Para fazer com que o botão tenha uma boa aparência em todos os tamanhos de tela, ajustaremos o preenchimento do botão da seguinte maneira:

Área de Trabalho

• Enchimento superior: 1vw
• Preenchimento inferior: 1vw
• Preenchimento direito: 3vw
• Preenchimento esquerdo: 3vw

Tábua

• Preenchimento superior: 2vw
• Preenchimento inferior: 2vw
• Preenchimento direito: 6vw
• Preenchimento esquerdo: 6vw

Telefone

• Preenchimento superior: 3vw
• Preenchimento inferior: 3vw
• Preenchimento direito: 8vw
• Preenchimento esquerdo: 8vw

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

Empacotando

Esta construção de três colunas sobrepostas parece ótima como um testemunho, mas temos certeza de que você pode implementá-la para outras coisas incríveis. Esperamos que isso o inspire a usar as opções de transformação e sobreposição de coluna para projetos futuros. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!