Ir para o conteúdo principal

Usando imagens transparentes para criar excelentes sobreposições de colunas do CTA com o Divi

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Quanto mais atraente for o CTA, maior a probabilidade de a taxa de conversão ser melhor. Existem várias maneiras de criar seus CTAs, mas neste artigo mostraremos como criar belos modelos 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á fazer o download do arquivo JSON gratuitamente!

Vamos.

previews

Antes de mergulhar no tutorial, vamos dar uma olhada rápida no resultado em 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

Vá 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 o conteúdo e os parágrafos de H2 de sua escolha.

texto

Vá para a guia 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

Sob o 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. Essa será a base do 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.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

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

espaçamento

Em seguida, acesse 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, ajustaremos os parâmetros 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

Vá 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 faça upload de 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.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

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

Transforme a escada em um hover

Adicionamos um efeito de foco sutil à imagem usando a opção de transformação de escala nos parâmetros de transformação.

  • Transformar escala ao passar o mouse: 120% nos dois eixos.

Z-Index

Para garantir que a imagem apareça na parte superior da coluna, aumente o valor do índice z na guia Avançado.

  • Índice Z: 1

Duplique e arraste os módulos de imagem

Agora, clone o módulo de imagem duas vezes e coloque as duplicatas nas duas colunas restantes. Esse 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

Sob a imagem da coluna 1, adicione um módulo de texto e insira o conteúdo H3 de sua escolha.

Título 3 Texto

Vá para a guia 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 para baixo dos módulos de imagem nas colunas 2 e 3.
  • Alterar 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 conteúdo de 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

Forme o botão e crie uma sobreposição inferior adicionando valores personalizados de margem e 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

botão espaçamento

Caixa de sombra

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

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

  • 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

Botão 2 Texto e cor do ícone

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

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

Botão 3 Texto e cor do ícone

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 excelente design de coluna CTA. Usamos as configurações de estouro da coluna Divi para que as imagens e os botões se sobreponham perfeitamente. Tente usar esse design em seu próximo projeto Divi e conte-nos como ele funciona na seção de comentários!

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
1 ações
ação1
chilrear
Enregistrer