Como alterar o conteúdo ao passar o mouse para criar CTAs exclusivos em Divi (3 maneiras)
Publicados: 2019-09-04As opções de foco integradas do Divi facilitam a alteração do conteúdo de qualquer módulo durante o foco. Podemos alterar imagens de fundo, cores e até mesmo texto ao pairar. Isso abre a porta para formas criativas de chamar a atenção dos usuários e impulsionar as chamadas para a ação para melhores conversões.
Hoje, mostraremos como alterar o conteúdo ao passar o mouse no Divi para algumas frases de chamariz exclusivas. Mostraremos maneiras inteligentes de alterar o texto do botão (e ícones) ao passar o mouse. Mostraremos como alterar elegantemente o título e o texto do botão em um módulo de call to action ao passar o mouse. E, até mesmo lançaremos algum CSS personalizado para adicionar alguns efeitos de transição exclusivos também (como alternar e virar um ícone de botão).
Confira!
Espiada
Aqui está uma rápida olhada nos três designs que iremos criar hoje.
Nº 1: Como alterar o conteúdo ao passar o mouse para os botões
# 2 Como alterar planos de fundo e conteúdo do corpo em módulos de texto
# 3 Como alterar o conteúdo ao pairar sobre vários elementos com o módulo de apelo à ação
Baixe o Layout GRATUITAMENTE
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!
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á fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme instalado (ou o Divi Builder Plugin se não estiver usando o Divi Theme).
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Carregue o layout predefinido da Landing Page do Cake Maker na página. Estaremos usando este layout para nossos projetos. Você pode carregar o layout selecionando “Choose a Premade Layout” quando solicitado na implantação do Divi Builder. Ou você pode selecionar o ícone de adição “Carregar da Biblioteca” no menu de configurações do Divi Builder. Para mais informações sobre como carregar o layout predefinido em sua página, assista ao nosso vídeo.
Depois disso, você está pronto para começar a projetar no Divi.
Nº 1: Como alterar o conteúdo ao passar o mouse para os botões
Depois de ter o layout predefinido da página de destino do Cake Maker carregado em sua página, encontre o botão principal CTA no topo do cabeçalho da página e abra as configurações de design do módulo de botão.
Alterar o texto do botão ao passar o mouse
Na guia de conteúdo, atualize o texto do botão da seguinte maneira:
Texto do botão: “Compre agora”
Em seguida, implante a opção de foco para o texto do botão e insira o texto do botão de substituição na guia de foco da seguinte forma:
Texto do botão (pairar): “Vamos lá”
O texto sob o texto do botão instantâneo substituirá o texto do botão padrão ao passar o mouse sobre o botão.
Largura do botão
No entanto, o botão é inline-block então a largura do botão / link mudará de acordo com a quantidade de conteúdo (letras ou espaços) que o botão contém. Isso não funciona bem para este efeito de foco porque, com texto de substituição menor, o botão ficará menor em largura e criará saltos ou falhas ao passar o mouse sobre a borda do botão. Para corrigir isso, precisamos aplicar uma largura definida ao botão. Isso é fácil com um único trecho de CSS. Adicione o seguinte CSS ao elemento principal do módulo de botão.
width: 200px;
Aqui está o resultado.
Alterações adicionais e efeitos de flutuação
Além de alterar o conteúdo ao passar o mouse, também podemos incrementar nosso botão com diferentes combinações de efeito de foco.
Neste momento, o ícone do botão é uma seta para a direita implantada ao passar o mouse. Isso funciona muito bem com o texto do botão de foco “Vamos lá”.
Inverter o ícone do botão ao pairar
Mas você também pode adicionar um bom efeito flip hover para o ícone do botão. Para fazer isso, primeiro faça com que o ícone apareça sempre (não apenas ao passar o mouse), atualizando o seguinte:
Mostrar apenas o ícone ao passar o mouse para o botão: NÃO
Em seguida, adicione uma classe CSS ao módulo de botão da seguinte maneira:
Classe CSS: ícone do botão giratório
Em seguida, abra as configurações da página e adicione o seguinte CSS personalizado.
.flip-button-icon:after {
transition: transform 500ms;
}
.flip-button-icon:hover:after {
transform: rotateX(360deg);
}
Aqui está o resultado.
Alterar o ícone do botão ao pairar
Você também pode alterar completamente o ícone do botão ao pairar. Tudo o que você realmente precisa é de um pequeno trecho de CSS para substituir o conteúdo de: after pseudo elemento onde o ícone reside.
Antes de adicionar o css, primeiro vamos escolher um ícone de botão diferente para mostrar inicialmente, então podemos alterá-lo para a seta para a direita com CSS.
Atualize o ícone do botão com o ícone do carrinho, pois nosso CTA é “Mostrar agora”.
Em seguida, vá para a guia avançada e atualize a propriedade de transformação CSS atual com uma rotação de 180 graus em vez de 360 graus. E adicione um novo Unicode para o conteúdo que exibe a seta para a esquerda (“\ 23”).
O novo snippet terá a seguinte aparência:
.flip-button-icon:hover:after {
transform: rotateY(180deg);
content: "\23";
}
Como também giraremos o ícone 180 graus, será exibida uma seta para a direita em substituição ao ícone do carrinho ao passar o mouse sobre o botão.
Resultado final
Esse é o resultado final.
# 2 Como alterar planos de fundo e conteúdo do corpo em módulos de texto
Para este próximo design, desça o layout da página até a seção “Meus serviços”. Lá, abra as configurações de linha para a linha superior com os dois módulos de texto.
Atualizar configurações de coluna
Nas configurações de linha, abra as configurações da Coluna 1 e adicione uma imagem de plano de fundo ao passar o mouse para a coluna.
Isso substituirá o fundo branco que está lá por padrão.
Além disso, adicione um gradiente acima da imagem de plano de fundo ao pairar também.
Cor do gradiente de fundo à esquerda: rgba (255,255,255,0)
Cor direita do gradiente de fundo: rgba (46,41,142,0,75)
Posição inicial: 30%
Colocar gradiente acima da imagem de fundo: SIM
Isso fornecerá uma boa sobreposição que tornará o texto de substituição ao passar o mouse mais legível.
Depois disso, retire o preenchimento personalizado da coluna, restaurando-o para a configuração padrão.
Personalize o Módulo de Texto na Coluna 1
Depois que a coluna for atualizada, salve as configurações e abra as configurações do módulo de texto para o módulo de texto na coluna 1. Em seguida, atualize o conteúdo do corpo do módulo de texto ao passar o mouse com o seguinte:
<h3>Custom Cakes</h3> <a href="#">Order Now</a>
Esta é uma boa maneira de adicionar uma frase de chamariz com um link ao passar o mouse.
Em seguida, atualize o plano de fundo da seguinte forma:
Cor de fundo: #ffffff;
Cor de fundo (pairar): rgba (255,255,255,0);
Isso adiciona um bom elemento de transição para revelar a imagem de fundo na coluna gradualmente.
Em seguida, atualize as seguintes configurações de design:
Altura: 260px
Preenchimento: 30 px superior, 30 px à esquerda, 30 px à direita
Preenchimento (pairar): 90px superior
Isso criará um bom efeito de transição que traz o texto para baixo gradualmente ao passar o mouse sobre o módulo de texto.
Em seguida, atualize as cores do texto para branco da seguinte maneira:
Cor do texto do link: #ffffff
Cor do texto do título 3 (pairar): #ffffff
Para desacelerar a transição dos efeitos de foco, atualize a duração da transição da seguinte forma:
Duração da transição: 500ms
Resultado final
Agora confira o resultado final.
# 3 Como alterar o conteúdo ao pairar sobre vários elementos com o módulo de apelo à ação
Para este próximo design, vamos usar um módulo de call to action que altera vários elementos de conteúdo ao passar o mouse. Para fazer isso, desça a página até a seção Coleções populares.
Adicionar novo módulo de apelo à ação
Em seguida, adicione um novo módulo de apelo à ação sob o botão "compre agora" na linha superior da seção de especialidades.
Atualizar CTA com alteração de conteúdo ao passar o mouse
Em seguida, atualize o conteúdo da frase de chamariz da seguinte maneira:
Título: “Oferta Especial”
Título (foco): “10% de desconto”
Texto do botão: “Compre agora”
Texto do botão (passar o mouse): “Get Deal”
Corpo: “Cupcakes personalizados”
URL do link do botão: #
Salve a configuração por enquanto.
Copiar e colar estilos de botão de layout
Vamos começar a projetar o botão do nosso CTA. Para fazer isso, abra as configurações de botão para o módulo de botão acima do módulo CTA que veio com o layout predefinido. Em seguida, clique no ícone de ponto triplo no grupo de opções de botão e selecione “copiar estilos de botão”.
Em seguida, abra o menu de outras opções no módulo de call to action que estamos projetando e selecione “Colar Estilos de Botão”.
Em seguida, abra as configurações do módulo de call-to-action e atualize o preenchimento do botão:
Preenchimento do botão: 15 px superior, 15 px inferior, 40 px à esquerda, 40 px à direita 
Atualizar estilos de texto
Depois disso, atualize o design do título e do corpo do texto.
Título Título Nível: H4
Fonte do título: Pacífico
Tamanho do texto do título: 9vw
Altura da linha do título: 1,3em
Fonte do corpo: Open Sans
Peso da fonte do corpo: negrito
Tamanho do corpo do texto: 18 px
Espaçamento entre letras do corpo: 1px
Configurações finais
Em seguida, atualize o preenchimento.
Preenchimento: 0 px à esquerda, 0 px à direita
Em seguida, dê ao módulo uma classe CSS personalizada.
Classe CSS: fade-cta-title
Aumente a largura total do botão cta adicionando o seguinte CSS personalizado à caixa de entrada CSS do botão Promo.
E atualize a duração da transição.
Duração da transição: 800ms
Finalmente, atualize a cor de fundo para que seja transparente por padrão e mude de cor ao passar o mouse.
Cor de fundo: nenhuma (excluir)
Cor de fundo (pairar): rgba (247,78,72,0,86)
Em seguida, exclua os dois módulos na linha acima do módulo Call to Action para que ele substitua o cta original do layout.
Resultado até agora
Aqui está o resultado até agora. Observe como o texto do título e o texto do botão mudam ao passar o mouse sobre o módulo de call to action.
Suavizando a mudança de conteúdo com animação
Se quisermos suavizar a transição do grande título no CTA, podemos adicionar uma animação simples com CSS. Como já adicionamos a classe CSS ao módulo, tudo o que precisamos fazer é abrir o modal de configurações da página e adicionar o seguinte CSS personalizado:
.fade-cta-title:hover .et_pb_module_header {
animation-name: fadeinout;
animation-duration: 800ms;
}
@keyframes fadeinout {
from {opacity: 0;}
to {opacity: 1;}
}
Resultado final
Agora vamos conferir o resultado final.
E aqui está no celular.
Pensamentos finais
Neste tutorial, mostramos 3 exemplos de como alterar efetivamente o conteúdo ao pairar no Divi. As opções de foco integradas para conteúdo realmente tornam esse processo fácil. E com alguns trechos de CSS você pode adicionar algumas transições exclusivas para destacar o design. Esperançosamente, isso permitirá que você aumente as frases de chamariz em seu próprio site para obter mais conversões e engajamento.
Quer mais? Temos uma tonelada de ótimas postagens que ajudarão a levar seus CTAs para o próximo nível.
Estou ansioso para ouvir de você nos comentários.
Saúde!