Como criar um CTA atraente em Divi com alguns efeitos de foco simples
Publicados: 2019-07-19Interações sutis e efeitos de foco podem ser úteis para criar um CTA (call to action) atraente. O truque é usar efeitos que tornem seu CTA mais atraente e intuitivo, para que os usuários tenham maior probabilidade de agir. E como o objetivo final da maioria dos CTAs é clicar em um link ou botão, é importante otimizar seu CTA de uma forma que traga esses itens clicáveis para o primeiro plano.
Neste tutorial, vou mostrar como usar Divi para otimizar a visibilidade de CTAs usando vários efeitos de foco. Mostrarei como adicionar fundos de divisores de seção ao passar o mouse para preparar seus CTAs para melhor contraste e legibilidade. E vou mostrar como ampliar e mover o CTA para o centro da página ao passar o mouse para que se torne o foco principal. Esses efeitos de foco serão úteis para destacar qualquer call to action e, com sorte, melhorar a experiência do usuário.
Vamos começar.
Espiada
Aqui está uma olhada nos atraentes efeitos de foco do CTA que construiremos neste tutorial.
Baixe GRATUITAMENTE o layout de efeitos atraentes do CTA Hover
Para colocar suas mãos nos designs deste tutorial, 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.
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.
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
Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará do seguinte:
- O Divi Theme instalado e ativo
- Uma nova página criada para construir do zero no front end (construtor visual)
- Uma imagem de plano de fundo a ser usada na construção do design. Usarei um do Pacote de Layout do Veterinário para este tutorial.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Implementando os efeitos atraentes do CTA Hover no Divi
Para este exemplo de design, começaremos com um módulo de apelo à ação alinhado à esquerda ou à direita. Em seguida, vamos trazer o módulo para o centro da página e dimensioná-lo (ou ampliá-lo) ao passar o mouse sobre a linha. Para fazer a frase de chamariz se destacar ainda mais no estado de flutuação da linha, vamos colocá-la em um estágio adicionando divisores de seção que fecharão atrás do módulo para melhor contraste.
Veja como fazer.
Criando a Seção e Linha
Primeiro, crie uma seção regular com uma linha de uma coluna.
Antes de adicionar um módulo, abra as configurações da seção e atualize o seguinte:
Adicione uma imagem de fundo com o ponto focal da imagem à direita para que permaneça visível ao adicionar nosso módulo à esquerda.
- Largura máxima: 1080px
- Alinhamento da seção: centro
Isso cuida da seção por enquanto. Vamos circular de volta para as configurações da seção mais tarde para adicionar os efeitos de foco do divisor de seção.
Em seguida, abra as configurações de linha e atualize o seguinte:
- largura: 100%
- largura máxima: 100%
- Preenchimento: 5% superior, 5% inferior, 35% direito
O preenchimento direito é a chave para este design porque empurra o conteúdo para a esquerda. Voltaremos mais tarde para adicionar nossas opções de foco para mover o conteúdo da linha de volta ao centro mais tarde.
Adicionando o Módulo de Chamada para Ação
Agora estamos prontos para construir o Módulo de Chamada para Ação, que será o foco principal de nosso CTA atraente.
Vá em frente e adicione um módulo de apelo à ação à linha de uma coluna.
Em seguida, atualize as configurações do módulo de apelo à ação da seguinte forma:
Contente
- Título: Desconto na primeira visita
- Botão: marcar uma consulta
- URL do link do botão: #
Projeto
- Cor de fundo: #ffffff
- Cor do Texto: Escuro
- Fonte do título: Nunito
- Peso da fonte do título: negrito
- Tamanho do texto do título: 36px
- Cor do texto do botão: #ffffff
- Cor de fundo do botão: # 154c87
- Largura da borda do botão: 0 px
- Largura máxima: 500px
- Alinhamento do Módulo: centro
- Cantos redondos: 10 px
Uma característica principal deste design é a largura máxima de 500px. Isso garantirá que a largura do módulo não seja alterada sempre que ajustarmos o preenchimento correto da linha ao passar o mouse posteriormente.
- Sombra da caixa: veja a imagem
- Posição vertical da sombra da caixa: 30 px
- Força do desfoque de sombra da caixa: 100 px
- Força de propagação da sombra da caixa: -30px
Dimensionando e centralizando a frase de chamariz ao passar o mouse sobre a linha
Agora estamos prontos para começar a adicionar nossos atraentes efeitos de foco de CTA. Neste ponto, queremos realizar duas coisas ao passar o mouse sobre a linha. Primeiro, queremos mover o CTA para o centro. E então queremos aumentar a escala do módulo (torná-lo maior) para torná-lo ainda mais visível.
Para fazer isso, abra as configurações de linha e atualize o seguinte:
- Preenchimento (pairar): 0% à direita
Em seguida, ajuste o preenchimento para a tela do celular:
- Preenchimento (tablet): 0% certo
- Preenchimento (telefone): 5% esquerdo, 5% direito
Para ampliar a CTA, adicione a seguinte propriedade transform à linha ao passar o mouse:
- Escala de transformação (pairar): 110%
Mesmo que a propriedade de escala de transformação esteja sendo aplicada à linha, isso também se aplica indiretamente a todos os elementos filho dentro da linha, incluindo o módulo. Portanto, o módulo será dimensionado para 110% ao passar o mouse sobre a linha.
Encenando o CTA ao passar o mouse com divisores de seção
Finalmente, estamos prontos para adicionar divisores de seção para preparar o cta ao passar o mouse sobre a seção / linha. A chave aqui é garantir que a seção e a linha tenham a mesma altura e largura, de modo que o usuário passe o mouse sobre a seção e a linha simultaneamente, sem lacunas. Portanto, precisamos remover qualquer preenchimento de seção. Em seguida, precisamos criar um divisor de seção superior e inferior que aumenta em altura ao pairar sobre a seção.
Aqui está o que fazer.
Abra as configurações da seção e atualize o seguinte:
Preenchimento: 0 px superior, 0 px inferior
- Estilo do divisor superior (desktop): veja a captura de tela
- Estilo de divisão superior (tablet e telefone): nenhum
- Cor do divisor superior: rgba (21,76,135,0,61)
- Altura do divisor superior (padrão): 0%
- Altura do divisor superior (pairar): 120%
- Virar divisor superior: horizontal
- Estilo do divisor inferior (desktop): veja a captura de tela
- Estilo do divisor inferior (tablet e telefone): nenhum
- Cor do divisor inferior: rgba (21,76,135,0,61)
- Altura do divisor inferior (padrão): 0%
- Altura do divisor inferior (pairar): 120%
- Virar divisor inferior: horizontal
Para garantir que as divisórias não sejam exibidas fora da seção, atualize a opção de estouro vertical e horizontal para oculto.
- Excesso horizontal: oculto
- Estouro vertical: oculto
Agora vamos conferir o resultado final.
Resultado final
E aqui está o design no tablet e no telefone.
Mudando a posição do CTA
Se quiser alterar a posição inicial do Módulo de Chamada para Ação antes do estado de foco, você pode atualizar facilmente o espaçamento de linha.
Do lado direito
Digamos que você queira que o módulo comece à direita antes de passar o mouse. Basta atualizar as configurações de linha da seguinte forma:
- Preenchimento: 35% esquerdo
- Preenchimento (pairar): 0% à esquerda
Você vai querer atualizar a imagem para ter um ponto focal esquerdo. Depois disso, aqui está o resultado.
Do fundo
Ou, se desejar, você pode ter o pop-up CTA na parte inferior da linha. Para fazer isso, você precisará adicionar uma altura fixa à seção e, em seguida, abaixar o módulo com algum acolchoamento superior.
Abra as configurações de seção e dê à seção uma altura máxima e defina o estouro como oculto.
- Altura máxima (desktop): 415 px
- Excesso horizontal: oculto
- Estouro vertical: oculto
Em seguida, abra as configurações de linha e atualize o preenchimento para empurrar o módulo parcialmente para fora da vista abaixo da seção. Em seguida, retire o acolchoamento superior ao pairar para trazê-lo de volta.
- Preenchimento (desktop): 25% superior, 5% inferior
- Preenchimento (pairar): 5% superior
Aqui está o resultado ...
Pensamentos finais
Divi torna divertido e fácil adicionar todos os tipos de efeitos de foco aos designs de sua página da web. Os melhores efeitos de pairar são aqueles que são intencionais e realmente melhoram a experiência do usuário. Os poucos efeitos de foco simples abordados nesta postagem devem ajudar a criar alguns CTAs atraentes que tenham uma ótima aparência, melhorem a experiência do usuário e, com sorte, levem a mais conversões.
Para obter mais ideias, verifique nossa postagem sobre 3 maneiras de usar opções de foco para enfatizar CTAs na Divi e nossa postagem sobre como criar CTAs de slides.
Estou ansioso para ouvir de você nos comentários.
Saúde!