Usando imagens transparentes para criar lindas sobreposições de colunas CTA com Divi

Quanto mais atraente for um CTA, maiores serão as chances de uma melhor taxa de conversão. Há muitas maneiras de projetar seus CTAs, mas neste artigo, mostraremos como criar belos designs de colunas de CTA com imagens semitransparentes e sobreposições de colunas. Você pode encontrar as imagens semitransparentes na pasta de download abaixo, mas fique à vontade para usar outras imagens. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá.

Previews

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 da coluna CTA GRATUITAMENTE

Para colocar as mãos no layout de coluna do CTA gratuito, 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!

Inscreva-se no nosso canal no Youtube

Vamos começar a recriar!

Adicionar nova seção

Fundo

Comece criando uma nova página ou adicionando uma nova seção regular a uma página existente. Em seguida, vá para as configurações da seção e adicione um fundo gradiente.

• Fundo: Gradiente
• Cor gradiente de fundo um: cinza muito claro #efefef
• Cor gradiente de fundo dois: branco #ffffff
• Tipo de gradiente: radial
• Direção Radial: Centro
• Posição inicial: 52%
• Posição final: 50%

Espaçamento

Vá para a guia de design e ajuste o preenchimento nas configurações de espaçamento.

• Preenchimento superior e inferior
  • Desktop: 0vw
• Padding Inferior
  • Tablet + telefone: 70vw

Adicionar nova linha

Estrutura da Coluna

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

Dimensionamento

Em seguida, ajuste a largura e a largura máxima da linha.

• Largura: 100%
• Largura máxima 100%

Adicionar Módulo de Texto

Adicionar H2 e conteúdo de texto

É hora de adicionar módulos! Primeiro, adicione um módulo de texto e insira algum conteúdo H2 e de parágrafo de sua escolha.

Texto

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

• Fonte do texto: Open Sans
• Alinhamento de Texto: Centro
• Cor do Texto: Verde # 5bba1b
• Tamanho do texto:
  • Desktop: 1.2vw
  • Tablet: 2.8vw
  • Telefone: 3,6vw
• Espaçamento entre letras do texto: 0,2vw
• Altura da linha de texto: 1.8em

Texto do Título 2

Depois de definir o estilo do texto do parágrafo, defina o estilo do texto H2 também.

• Título: H2
• Peso da fonte H2: Doppio One
• Alinhamento de texto H2: Centro
• H2 Cor do texto: cinza muito escuro # 3d3d3d
• Tamanho do texto H2:
  • Desktop: 4.4vw
  • Tablet: 5,9vw
  • Telefone: 6.9vw

Espaçamento

E adicione um pouco de preenchimento superior.

• Enchimento superior: 212 px

Adicionar Módulo Divisor

Visibilidade

Abaixo do módulo de texto, adicione um módulo divisor e defina a visibilidade para 'Sim'.

• Visibilidade: Sim

Linha

Altere a cor do divisor a seguir.

• Cor da linha: cinza escuro # 545454

Dimensionamento

Agora, ajuste o tamanho do divisor para que pareça menor.

• Peso do divisor: 4px
• Largura: 9%
• Alinhamento do Módulo: Centro

Espaçamento

Adicione alguma margem superior negativa também.

• Margem superior:
  • Desktop: -40px
  • Tablet + telefone: -15px

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha com três colunas de tamanhos iguais. Esta será a base do design da coluna CTA.

Fundo

Antes de adicionar qualquer módulo, adicione um gradiente ao plano de fundo para as configurações de linha.

• Fundo: Gradiente
• Gradiente de cor de fundo um: branco #ffffff
• Gradiente Dois da Cor do Fundo: Transparente
• Tipo de gradiente: radial
• Centro de direção radial
• Posição inicial: 42%
• Posição final: 50%

Dimensionamento

Agora, ajuste o tamanho da linha.

• Largura: 100%
• Largura máxima: 100%

Espaçamento

Vá para as configurações de espaçamento a seguir e adicione alguns valores de preenchimento personalizados.

• Preenchimento superior: 22vw
• Preenchimento inferior: 10vw
• Preenchimento esquerdo e direito: 10vw

Configurações da coluna 1

Fundo

Continue abrindo as configurações da coluna 1 e adicione um fundo gradiente.

• Fundo: Gradiente
• Cor gradiente de fundo um: azul # 2a4eed
• Cor gradiente de fundo dois: azul claro # 91f5f7
• Tipo de gradiente: Linear
• Direção do gradiente: 38 graus
• Posição inicial: 23%

Fronteira

Dê à coluna cantos arredondados nas configurações de borda a seguir.

• Cantos arredondados: 2vw em todos os cantos

Sombra da caixa

Adicione uma sombra de caixa sutil também.

• Sombra da caixa: segunda opção
• Posição horizontal da sombra da caixa: 6px
• Posição vertical da sombra da caixa: -10 px
• Força do desfoque de sombra da caixa: 50 px

Transbordamentos

Certifique-se de que os estouros da coluna também estejam visíveis.

• Excesso horizontal e vertical: visível

Configurações da coluna 2

Fundo

Passe para a segunda coluna e adicione o seguinte fundo gradiente:

• Fundo: Gradiente
• Cor gradiente de fundo um: # 1ba038
• Cor do gradiente de fundo dois: # c6f727
• Tipo de gradiente: Linear
• Direção do gradiente: 38 graus
• Posição inicial: 23%

Fronteira

Adicione algum raio de borda à coluna também.

• Cantos arredondados: 2vw todos os quatro cantos

Sombra da caixa

Junto com uma sombra de caixa sutil.

• Sombra da caixa: segunda opção
• Posição horizontal da sombra da caixa: 6px
• Posição vertical da sombra da caixa: -10 px
• Força do desfoque de sombra da caixa: 50 px

Transformar

Esta coluna fica um pouco mais alta do que as outras. Para criar esse efeito, ajustaremos as configurações de conversão de transformação para a coluna 2.

• Transform Translate:
  • Desktop: -8vw, eixo y
  • Tablet + telefone: 30vw, eixo y

Transbordamentos

Torne os transbordamentos dessa coluna visíveis também.

• Estouros horizontais e verticais: visíveis

Configurações da coluna 3

Fundo

Vamos para a próxima e última coluna! Adicione um fundo gradiente.

• Fundo: Gradiente
• Cor gradiente de fundo um: # f0562c
• Cor do gradiente de fundo dois: # f1a526
• Tipo de gradiente: Linear
• Direção do gradiente: 38 graus
• Posição inicial: 23%

Fronteira

Vá para a guia de design e adicione um raio de borda a cada canto.

• Cantos arredondados: 2vw em todos os cantos.

Sombra da caixa

Adicione uma sombra de caixa também.

• Sombra da caixa: segunda opção
• Posição horizontal da sombra da caixa: 6px
• Posição vertical da sombra da caixa: -10 px
• Força do desfoque de sombra da caixa: 50 px

Transformar

Em tamanhos de tela menores, precisaremos reposicionar a coluna usando valores de conversão de transformação personalizados.

• Transform Translate:
  • Tablet + telefone: 60vw

Transbordamentos

Finalmente, ajuste as configurações de estouro.

• Estouros horizontais e verticais: visíveis

Adicionar Módulos de Imagem

Faça upload de uma imagem recortada e semitransparente

Depois de concluir todas as configurações de coluna, é hora de adicionar módulos. Adicione um Módulo de imagem à coluna 1 e carregue uma imagem semitransparente de sua escolha. Você pode encontrar as imagens que usamos na pasta compactada que você baixou no início deste post.

Dimensionamento

Faça o módulo de largura total.

• Forçar largura total: Sim

Espaçamento

Adicione algumas margens personalizadas e valores de preenchimento a seguir.

• Margem superior:
  • Desktop: -11vw
  • Tablet + telefone: -24vw
• Preenchimento esquerdo e direito:
  • Desktop: 5vw
  • Tablet + telefone: 20vw

Transformar escala ao passar o mouse

Estamos adicionando um efeito sutil de foco à imagem usando a opção de escala de transformação nas configurações de transformação.

• Escala de transformação ao pairar: 120% em ambos os eixos.

Z-Index

Para garantir que a imagem apareça no topo da coluna, aumentaremos o valor do índice z na guia avançada.

• Índice Z: 1

Duplicar e arrastar módulos de imagem

Agora, clone o módulo de imagem duas vezes e coloque as duplicatas nas duas colunas restantes. Este processo é mais fácil na visualização de wireframe.

• Primeiro, duplique o módulo de imagem duas vezes
• Em seguida, arraste os novos módulos de imagem para as colunas 2 e 3
• Faça upload de imagens diferentes

Adicionar Módulos de Texto

Adicionar conteúdo H3

Abaixo da imagem na coluna 1, adicione um módulo de texto e insira algum conteúdo H3 de sua escolha.

Texto do Título 3

Vá para a guia de design e defina o estilo das configurações de texto H3.

• Texto do Título: H3
• Fonte H3: Doppio One
• Peso da fonte H3: negrito
• Alinhamento H3: Centro
• H3 Cor do Texto: Branco #ffffff
• Tamanho do texto H3:
  • Desktop: 1.8vw
  • Tablet: 5vw
  • Telefone: 6vw

Duplicar e arrastar módulos de texto

Clone o módulo de texto duas vezes e coloque as duplicatas nas duas colunas restantes.

• Primeiro, duplique os módulos de texto duas vezes
• Em seguida, arraste-os abaixo dos módulos de imagem nas colunas 2 e 3
• Altere o conteúdo em cada novo módulo de texto

Adicionar Módulos de Texto

Adicionar conteúdo

Abaixo do módulo de título, adicione um novo módulo de texto. Adicione algum conteúdo de parágrafo à caixa de conteúdo.

Texto

Agora, estilize o texto da seguinte maneira.

• Fonte do texto: Open Sans
• Cor do Texto: Branco #ffffff
• Tamanho do texto:
  • Desktop: 0,6vw
  • Tablet: 2vw
  • Telefone: 2.8vw
• Altura da linha de texto: 2.2em

Espaçamento

Para centralizar o texto, ajuste o espaçamento do módulo da seguinte maneira.

• Margem inferior:
  • Desktop: 5vw
  • Tablet + telefone: 10vw
• Preenchimento esquerdo e direito
  • Desktop: 5vw
  • Tablet + telefone: 14vw

Duplicar e arrastar módulos de texto

Clone o módulo de texto duas vezes e arraste as duplicatas para as duas colunas restantes.

• Primeiro, duplique os módulos de texto duas vezes
• Em seguida, coloque as duplicatas nas colunas 2 e 3
• Altere o conteúdo em cada duplicata

Adicionar Módulos de Botão

Adicionar conteúdo

Vamos para o último módulo! Adicione um módulo de botão à coluna 1 com alguma cópia de sua escolha.

Adicionar Link

Insira um link nas opções de link do módulo.

Alinhamento

Agora, alinhe o módulo do botão.

• Alinhamento: Centro

Estilos de botão

Em seguida, defina o estilo do botão da seguinte maneira.

• Tamanho do texto do botão:
  • Desktop: 1vw
  • Tablet: 2vw
  • Telefone: 3vw
• Cor do texto do botão: Azul brilhante # 2a4eed
• Cor de fundo do botão: branco #ffffff
• Raio da borda do botão: 50vw
• Fonte do botão: Doppio One
• Peso da fonte do botão: negrito
• Cor do ícone do botão: Azul brilhante # 2a4eed

Espaçamento

Modele o botão e crie uma sobreposição inferior adicionando alguns valores de margem e preenchimento personalizados nas configurações de espaçamento.

• Margem inferior:
  • Desktop: -1.5vw
  • Tablet: -4vw
  • Telefone: -6vw
• Preenchimento superior e inferior:
  • Desktop: 1vw
  • Tablet + Telefone: 3vw
• Preenchimento esquerdo e direito
  • Desktop: 4vw
  • Tablet + telefone: 10vw

Sombra da caixa

Por último, mas não menos importante, adicione uma sombra de caixa sutil ao botão.

• Sombra da caixa: primeira opção
• Posição horizontal da sombra da caixa: 0 px
• Posição vertical da sombra da caixa: 2 px
• Força do desfoque de sombra da caixa: 50 px

Duplicar e arrastar módulos de botão

Assim como nos módulos anteriores, clone o botão duas vezes e coloque as duplicatas nas duas colunas restantes da linha.

• Clone o módulo de botão duas vezes
• Coloque as duplicatas nas colunas 2 e 3

Texto do botão 2 e cor do ícone

Altere o botão e a cor do ícone do módulo de botão na coluna 2.

• Cor do texto do botão: verde # 1ba038
• Cor do ícone: # 1ba038

Texto do botão 3 e cor do ícone

Faça o mesmo com o botão da última coluna e pronto!

• Cor do texto do botão: laranja # f0562c
• Cor do ícone: # f0562c

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

Nesta postagem, mostramos como usar imagens semitransparentes para criar um belo design de coluna CTA. Usamos as configurações de estouro da coluna Divi para fazer com que as imagens e os botões se sobreponham perfeitamente. Tente usar este design em seu próximo projeto Divi e diga-nos como foi na seção de comentários!