Como adicionar setas de botão de canto animadas pelo cursor ao seu projeto com Divi

A maneira como você apresenta seu CTA dentro de uma página que você cria pode ter um grande impacto em como seus visitantes agem. Você pode fazer isso da maneira mais usada, usando o formato de botão com cópia no meio, mas também pode ser criativo. No tutorial de hoje, mostraremos uma maneira criativa de incluir uma chamada à ação em seu design Divi. Vamos incluir setas de botão de canto animadas em foco para ser exato. Depois que uma seta é posicionada, a direção da seta muda junto com o estilo. Você também poderá baixar o arquivo JSON deste design 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 GRATUITAMENTE

Para colocar as mãos no layout 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!

Vamos começar a recriar!

Adicionar nova seção de especialidade

Adicione uma nova seção de especialidade à página em que está trabalhando. Selecione a seguinte estrutura de coluna para ele:

Fundo Gradiente

Abra as configurações da seção e aplique o seguinte fundo gradiente:

• Cor 1: # fff8f5
• Cor 2: # f9f3ef
• Tipo de gradiente: radial
• Direção Radial: Esquerda Inferior
• Posição inicial: 40%
• Posição final: 40%

Dimensionamento

Vá para a guia de design da seção e altere as configurações de dimensionamento da seguinte forma:

• Equalize Alturas de Coluna: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura interna: 90%
• Largura máxima interna: 1580 px

Espaçamento

Em seguida, vá para as configurações de espaçamento e adicione algum preenchimento correto à coluna 1.

• Coluna 1 acolchoamento direito: 6%

Adicione o Módulo de Texto # 1 à Coluna 1

Adicionar conteúdo H2

É hora de adicionar módulos, começando com um Módulo de texto na coluna 1. Adicione algum conteúdo H2 de sua escolha.

Configurações de texto H2

Defina as configurações de texto H2 do módulo da seguinte maneira:

• Fonte do título 2: Kumbh Sans
• Peso da fonte do cabeçalho 2: negrito
• Cor do texto do título 2: # 08665c
• Tamanho do texto do título 2:
  • Desktop: 75px
  • Tablet: 60px
  • Telefone: 45px

Espaçamento

Adicione alguma margem superior e inferior a seguir.

• Margem superior: 50px
• Margem inferior: 50px

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

Adicionar conteúdo de descrição

Adicione outro Módulo de Texto abaixo do anterior com algum conteúdo descritivo de sua escolha.

Configurações de texto

Altere as configurações de texto do módulo da seguinte forma:

• Fonte do texto: Kumbh Sans
• Cor do texto: # 08665c
• Tamanho do texto: 16px
• Altura da linha de texto: 1.8em

Espaçamento

Adicione alguma margem inferior também em tamanhos de tela menores.

• Margem inferior:
  • Área de Trabalho: /
  • Tablet e telefone: 50px

Adicione a linha # 1 à coluna 2

Estrutura da Coluna

Para a segunda coluna da seção. Lá, adicione uma primeira linha usando a seguinte estrutura de coluna

Dimensionamento

Sem adicionar módulos ainda, abra as configurações de linha e altere as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 2

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Configurações da coluna 1

Cor de fundo

Em seguida, abra as configurações da coluna 1 e aplique uma cor de fundo de sua escolha.

• Cor de fundo: #cccccc

Espaçamento

Passe para as configurações de espaçamento da coluna e use os seguintes valores responsivos:

• Enchimento superior:
  • Desktop: 100px
  • Tablet e telefone: 70px
• Preenchimento esquerdo:
  • Desktop e tablet: 8%
  • Telefone: 10%
• Preenchimento direito:
  • Desktop e tablet: 8%
  • Telefone: 10%

Fronteira

Adicione alguns cantos arredondados às configurações de borda também.

• Todos os cantos: 10px

Visibilidade

Conclua as configurações de coluna definindo os transbordamentos para visíveis na guia avançada.

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

Adicione o Módulo de Texto # 1 à Coluna 1

Adicionar conteúdo

É hora de adicionar Módulos, começando com um primeiro Módulo de Texto na coluna 1. Adicione algum conteúdo de sua escolha.

Configurações de texto

Altere as configurações de texto do módulo:

• Fonte do texto: Kumbh Sans
• Peso da fonte do texto: leve
• Cor do texto: # 08665c
• Tamanho do texto: 30px
• Altura da linha de texto: 1em

Espaçamento

Aplique alguma margem inferior também.

• Margem inferior: 15px

Adicionar Módulo Divisor à Coluna 1

Visibilidade

Em seguida, adicione um Módulo Divisor. Certifique-se de que a opção “Mostrar divisor” esteja habilitada.

• Mostrar divisor: Sim

Linha

Vá para a guia de design do módulo e altere a cor da linha.

• Cor da linha: # fff8f5

Dimensionamento

Modifique também as configurações de dimensionamento.

• Peso do divisor: 2px
• Altura: 2px

Espaçamento

Adicione alguma margem inferior também.

• Margem inferior: 50px

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

Adicionar conteúdo H3

Adicione outro Módulo de Texto à coluna 1. Use algum conteúdo H3 de sua escolha.

Configurações de texto H3

Vá para a guia de design do módulo e altere as configurações de texto H3 da seguinte forma:

• Fonte do título 3: Kumbh Sans
• Peso da fonte do cabeçalho 3: negrito
• Cor do texto do título 3: # 08665c
• Tamanho do texto do título 3:
  • Desktop: 48px
  • Tablet: 38px
  • Telefone: 32px

Espaçamento

Use alguma margem inferior também.

• Margem inferior: 15px

Adicione o Módulo de Texto # 3 à Coluna 1

Adicionar conteúdo

Adicione o último Módulo de Texto à coluna 1 com algum conteúdo de descrição de sua escolha.

Configurações de texto

Altere as configurações de texto de acordo:

• Fonte do texto: Kumbh Sans
• Cor do texto: # 08665c
• Tamanho do texto: 16px
• Altura da linha de texto: 1.8em

Espaçamento

Inclua também alguma margem inferior.

• Margem inferior:
  • Desktop: 200px
  • Tablet e telefone: 150px

Adicionar Módulo Blurb à Coluna 1

Deixe as caixas de conteúdo vazias

Vamos para o último módulo que precisamos nesta coluna, que é um Módulo Blurb. Deixe as caixas de conteúdo vazias.

Ícone padrão

Selecione o ícone de seta a seguir.

Hover Icon

Altere o ícone ao pairar.

Adicionar Link

Use um link para este módulo também.

Hover Background Color

Em seguida, adicione uma cor de fundo flutuante.

• Hover Background Color: # 08665c

Configurações de ícone padrão

Navegue até a guia de design e altere as configurações do ícone da seguinte maneira:

• Cor do ícone: #ffffff
• Posicionamento de imagem / ícone: topo
• Alinhamento de imagem / ícone: direita
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 80px

Configurações do ícone de pairar

Modifique o tamanho da fonte do ícone ao pairar.

• Hover Icon Font Size: 40px

Dimensionamento

Em seguida, adicione um pouco de largura às configurações de dimensionamento.

• Largura: 80px

Espaçamento de pairar

Modifique o preenchimento superior e direito ao passar o mouse.

• Preenchimento Hover Top: 25 px
• Preenchimento Hover Right: 10 px

Fronteira

Inclua também alguns cantos arredondados nas configurações de borda.

• Todos os cantos: 5px

Escala Hover

Em seguida, use a opção de escala de transformação ao pairar.

• Pairar ambos: 130%

Elemento principal e CSS da imagem do Blurb

Em seguida, navegue até a guia avançada e use a seguinte linha de código CSS para o elemento principal:

cursor: pointer;

Use esta linha para a caixa de CSS do Blurb Image:

margin-bottom: 0px;

Posição

Conclua as configurações do módulo reposicionando-o nas configurações de posição:

• Posição: Absoluta
• Localização: Inferior Direito

Reutilizar coluna 1

Remover Coluna 2

Depois de preencher a primeira coluna, você pode reutilizá-la na segunda. Para fazer isso, remova a segunda coluna primeiro.

Clonar coluna 1

Então, clone o primeiro.

Alterar a cor de fundo da coluna 2

Claro, você precisará fazer algumas alterações na coluna duplicada, começando com a cor de fundo.

• Cor de fundo da coluna 2: # f0c7b1

Adicionar Transform Traduzir para a coluna 2

Estamos adicionando um valor de conversão de transformação em tamanhos de tela menores também.

• Direito:
  • Área de Trabalho: /
  • Tablet e telefone: 50px

Alterar conteúdo duplicado

Certifique-se de alterar todo o conteúdo duplicado.

Alterar link do módulo do Blurb

Complete a coluna duplicada alterando o link dentro do Módulo Blurb.

Reutilizar linha

Depois de concluir a primeira linha e suas colunas, você pode clonar a linha inteira.

Remover Coluna 2

Exclua a segunda coluna dentro das configurações de linha.

Alterar a cor de fundo da coluna

Em seguida, altere a cor de fundo da coluna restante.

• Cor de fundo da coluna: # dfe7f2

Adicionar Margem Superior à Linha

Volte para as configurações gerais de linha e adicione alguma margem superior responsiva.

• Margem superior:
  • Desktop: 50px
  • Tablet e telefone: 100px

Alterar conteúdo duplicado

Em seguida, altere todo o conteúdo duplicado na coluna.

Alterar link do módulo do Blurb

Conclua o tutorial alterando o link dentro do Módulo Blurb. É isso!

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

Pensamentos finais

Nesta postagem, mostramos como ser criativo com seus CTAs. Mais especificamente, mostramos como adicionar setas de botão de canto animadas em foco. Essa abordagem ajuda a manter uma aparência limpa ao projetar uma seção com vários CTAs. Ele adiciona um nível extra de interação também. Você conseguiu baixar o arquivo JSON gratuitamente. Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo!

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.