Quanto mais atraente for o CTA, melhores serão as chances de taxa de conversão. Há muitas maneiras de projetar seus CTAs, mas neste artigo, mostraremos como criar modelos de coluna de CTA incríveis com imagens semitransparentes e sobreposições de coluna. 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.
previews
Antes de mergulharmos no tutorial, vamos dar uma olhada rápida em como vemos os diferentes tamanhos de tela.
Vamos começar a recriar!
Adicione uma nova seção
contexto
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
- Gradiente gradiente de cor: cinza claro #efefef
- Cor de fundo dois: branco #ffffff
- Tipo de gradiente: Radial
- Direção radial: centro
- Posição inicial: 52%
- Posição final: 50%
espaçamento
Alterne para a guia Design e ajuste o preenchimento nas configurações de espaçamento.
- Estofamento superior e inferior
- Escritório: 0vw
- Estofamento em meias
- Tablet + telefone: 70vw
Adicione uma 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%
Adicione um módulo de texto
Adicione H2 e conteúdo textual
É hora de adicionar módulos! Primeiro, adicione um módulo de texto e insira alguns conteúdo H2 e parágrafos de sua escolha.
texto
Mude para a guia de design e estilize o texto da seguinte maneira:
- Texto da fonte: Open Sans
- Alinhamento do texto: centro
- Cor do texto: verde #5bba1b
- Tamanho do texto:
- Escritório: 1.2vw
- Tablet: 2.8vw
- Telefone: 3.6vw
- Espaçamento de letras de texto: 0.2vw
- Altura da linha de texto: 1.8em
Título 2 Texto
Depois de estilizar o texto do parágrafo, também estilize o texto H2.
- Seção: H2
- H2 Peso da fonte: Doppio One
- Alinhamento de texto H2: Center
- Cor do texto H2: #3d3d3d
- H2 Tamanho do texto:
- Escritório: 4.4vw
- Tablet: 5.9vw
- Telefone: 6.9vw
espaçamento
E adicione um pouco de preenchimento na parte superior.
- Top Padding: 212px
Adicione um módulo de divisão
visibilidade
No módulo de texto, adicione um módulo de divisão e defina a visibilidade como "Sim".
- Visibilidade: sim
Linha
Mude a cor do separador então.
- Cor da linha: cinza escuro #545454
dimensionamento
Agora, ajuste o tamanho do separador para que fique menor.
- Peso do separador: 4px
- Largura: 9%
- Alinhamento do módulo: centro
espaçamento
Adicione também uma margem superior negativa.
- Margem superior:
- Escritório: -40px
- Tablet + telefone: -15px
Adicione uma nova linha
Estrutura da coluna
Continue adicionando uma nova linha com três colunas de tamanho igual. Esta será a base para o design da coluna CTA.
contexto
Antes de adicionar módulos, adicione um gradiente ao fundo dos parâmetros da linha.
- Fundo: gradiente
- Gradiente de cor de fundo 1: branco #ffffff
- Cor de fundo gradiente dois: 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
Em seguida, vá para as configurações de espaçamento e adicione valores de preenchimento personalizados.
- estofamento superior: 22vw
- Estofamento inferior: 10vw
- Preenchimento esquerdo e direito: 10vw
Configurações da coluna 1
contexto
Continue abrindo a coluna 1 e adicionando um fundo gradiente.
- Fundo: gradiente
- Cor do plano de fundo gradiente: azul #2a4eed
- Cor de fundo gradiente dois: azul claro #91f5f7
- Tipo de gradiente: linear
- Direcção do Gradiente: 38deg
- Posição inicial: 23%
Fronteira
Em seguida, defina os cantos arredondados das colunas nas configurações de borda.
- Cantos arredondados: 2vw em todos os cantos
Caixa de sombra
Adicione uma sombra de caixa sutil também.
- Box Shadow: Segunda opção
- Sombra da caixa Posição horizontal: 6px
- Posição Vertical da Sombra da Caixa: -10px
- Força de desfoque de sombra de caixa: 50px
overflows
Verifique se os estouros da coluna também estão visíveis.
- Estouro horizontal e vertical: visível
Configurações da coluna 2
contexto
Vá para a segunda coluna e adicione o seguinte fundo gradiente:
- Fundo: gradiente
- Gradiente de fundo, cor um: #1ba038
- Gradiente de fundo de duas cores: #c6f727
- Tipo de gradiente: linear
- Direcção do Gradiente: 38deg
- Posição inicial: 23%
Fronteira
Adicione também um raio da borda à coluna.
- Cantos arredondados: 2vw nos quatro cantos
Caixa de sombra
Com uma sombra de caixa sutil.
- Box Shadow: Segunda opção
- Sombra da caixa Posição horizontal: 6px
- Posição Vertical da Sombra da Caixa: -10px
- Força de desfoque de sombra de caixa: 50px
transformador
Esta coluna é um pouco mais alta que as outras. Para criar esse efeito, vamos ajustar as configurações de conversão de transformação para a coluna 2.
- Traduzir transformador:
- Escritório: -8vw, eixo y
- Tablet + telefone: 30vw, eixo Y
overflows
Torne também visíveis os estouros desta coluna.
- Estouros horizontais e verticais: visíveis
Configurações da coluna 3
contexto
Vamos para a última e a última coluna! Adicione um fundo gradiente.
- Fundo: gradiente
- Cor de fundo gradiente um: #f0562c
- Gradiente de fundo de duas cores: #f1a526
- Tipo de gradiente: linear
- Direcção do Gradiente: 38deg
- Posição inicial: 23%
Fronteira
Alterne para a guia Design e adicione um raio de borda a cada canto.
- Cantos arredondados: 2vw em todos os cantos.
Caixa de sombra
Adicione uma sombra de caixa também.
- Box Shadow: Segunda opção
- Sombra da caixa Posição horizontal: 6px
- Posição Vertical da Sombra da Caixa: -10px
- Força de desfoque de sombra de caixa: 50px
transformador
Em tamanhos de tela menores, precisaremos reposicionar a coluna usando valores de conversão de transformação personalizados.
- Traduzir transformador:
- Tablet + telefone: 60vw
overflows
Por fim, ajuste as configurações de estouro.
- Estouros horizontais e verticais: visíveis
Adicionar módulos de imagem
Importar uma imagem semi-transparente de recorte
Depois de definir todos os parâmetros da 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 artigo.
dimensionamento
Faça o módulo com largura total.
- Mudar para o modo de largura total: Sim
espaçamento
Em seguida, adicione margem personalizada e preencha os valores.
- Margem superior:
- Escritório: -11vw
- Tablet + telefone: -24vw
- Preenchimento esquerdo e direito:
- Escritório: 5vw
- Tablet + telefone: 20vw
Transforme a escada em um flutuador
Adicionamos um efeito sutil de foco à imagem usando a opção de escala de transformação nas configurações de transformação.
- Transformar escala ao passar o mouse: 120% nos dois eixos.
Z-Index
Para garantir que a imagem apareça no topo da coluna, aumente o valor do índice z na guia Avançado.
- Í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 no modo com fio.
- Comece duplicando o módulo de imagem duas vezes
- Em seguida, arraste os novos módulos de imagem para as colunas 2 e 3.
- Baixe 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 alguns conteúdo H3 de sua escolha.
Título 3 Texto
Mude para a guia de design e aplique um estilo às configurações de texto H3.
- Título do texto: H3
- Fonte H3: Doppio One
- Peso da fonte: H3
- Alinhamento H3: center
- H3 Text Color: Branco #ffffff
- H3 Tamanho do texto:
- Escritório: 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.
- Comece duplicando os módulos de texto duas vezes.
- Em seguida, arraste-os sob os módulos de imagem nas colunas 2 e 3.
- Mudar o conteúdo em cada novo módulo de texto
Adicionar módulos de texto
Adicionar conteúdo
Sob o módulo de título, adicione um novo módulo de texto. Adicione o conteúdo do parágrafo na área de conteúdo.
texto
Agora, estilize o texto da seguinte maneira.
- Texto da fonte: Open Sans
- Cor do texto: branco #ffffff
- Tamanho do texto:
- Escritório: 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:
- Escritório: 5vw
- Tablet + telefone: 10vw
- Preenchimento esquerdo e direito
- Escritório: 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.
- Comece duplicando os módulos de texto duas vezes
- Em seguida, coloque as duplicatas nas colunas 2 e 3
- Alterar o conteúdo de cada duplicado
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 uma cópia de sua escolha.
Adicionar um link
Insira um link nas opções de link do módulo.
alignement
Agora alinhe o módulo de botão.
- Alinhamento: centro
Estilos de botão
Em seguida, chame o botão da seguinte maneira.
- Tamanho do texto do botão:
- Escritório: 1vw
- Tablet: 2vw
- Telefone: 3vw
- Cor do texto do botão: azul brilhante #2a4eed
- Cor do plano de fundo do botão: Branco #ffffff
- Raio da borda do botão: 50vw
- Fonte do botão: Double One
- Peso da fonte: negrito
- A cor dos botões: Azul brilhante #2a4eed
espaçamento
Modele o botão e crie uma sobreposição na parte inferior, adicionando margens personalizadas e valores de preenchimento nas configurações de espaçamento.
- Margem inferior:
- Escritório: -1.7vw
- Tablet: -4vw
- Telefone: -6vw
- Estofos superior e inferior:
- Escritório: 1vw
- Tablet + telefone: 3vw
- Preenchimento esquerdo e direito
- Escritório: 4vw
- Tablet + telefone: 10vw
Caixa de sombra
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: 0px
- Posição vertical da sombra da caixa: 2px
- Força de desfoque de sombra de caixa: 50px
Duplicar e arrastar módulos de botão
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 e cor do ícone do botão 2
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 e cor do ícone do botão 3
Faça o mesmo com o botão na última coluna e pronto!
- Cor do texto dos botões: Laranja #f0562c
- Cor do ícone: # f0562c
Para terminar
Neste artigo, mostramos como usar imagens semitransparentes para criar um design de coluna CTA impressionante. Usamos configurações de estouro de coluna Divi para que as imagens e os botões se sobreponham perfeitamente. Tente usar este design em seu próximo projeto Divi e deixe-nos saber como foi na seção de comentários!
