Como criar um CTA “expansível”, como temas elegantes

Publicados: 2017-05-14

Elegant Themes recentemente mudou o design de seu site para incluir alguns recursos que valem a pena imitar. Em posts anteriores, escrevi sobre como implementar o design do blog Elegant Theme e duplicar o menu principal. Mas, neste post, vou mostrar a vocês como duplicar o call to action (CTA) do Elegant Themes. Este CTA está localizado na parte inferior, próximo ao rodapé do site Elegant Themes. O que é especial sobre este CTA é a funcionalidade adicionada que aciona a animação assim que o usuário rola até o elemento.

Hoje, vou mostrar como duplicar não só o estilo deste CTA, mas também a funcionalidade de animação. Isso é feito usando o Módulo de Código da Divi com algum CSS personalizado e algumas linhas de JavaScript. No entanto, você pode estender facilmente a mesma funcionalidade animada em qualquer um dos módulos do Divi.

Vamos começar.

Implementando o Design com Divi

Construindo a frase de chamariz usando o módulo de código

Usando o Visual Builder, adicione uma nova seção regular com uma coluna de linha de largura total.

Em seguida, adicione o Módulo de Código à sua linha.

Em Configurações gerais de código, adicione o seguinte html à seção de conteúdo. 

<div class="cta-info">

<h3>401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web</h3>

<p>We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!</p>

<a href="ENTER URL HERE" id="sign">Sign Up Today</a>

</div>

Este html servirá como conteúdo para o seu CTA. Você notará que o título principal do CTA está envolvido em uma tag h3. O subtítulo está envolvido em uma tag p padrão. E o link (que em breve será o botão) tem um CSS ID chamado “sinal”.

Além disso, um div com a classe “cta-info” envolve o conteúdo. Isso é importante para fins de estilo mais tarde.

Salvar alterações

Agora precisamos adicionar um novo CSS ID à sua nova seção. Clique no ícone de configurações da seção para abrir as configurações da seção.

Na guia CSS em Section Settings, adicione o CSS ID “cta-section” e salve as alterações.

Em seguida, precisamos adicionar um ID CSS à sua linha. Clique no ícone de configurações da linha.

Na guia CSS, atualize as configurações de linha com um novo ID CSS chamado “cta-row”.

Salvar alterações

É tudo o que precisamos para o layout do CTA. Com nosso conteúdo implementado e nossos IDs CSS, estamos prontos para adicionar alguns CSS personalizados.

Adicionando o CSS personalizado

Vá para Divi → Personalizador de temas → CSS adicional (ou você pode atualizar o arquivo style.css do tema filho diretamente). Dentro da caixa de código, adicione o seguinte CSS: 

/* Animated Call To Action */

/*** style CTA section and row when waypoint is not triggered ***/
#cta-section {
    padding: 0 80px;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
}
#cta-row {
    margin: 80px auto 0 auto;
    padding: 80px 0;
    max-width: 100%;
    background-color: #6c17dc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0px 10px 50px #939fa9;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;

}
/*** Style CTA section and row once waypoint toggles animate-cta class ***/
#cta-section.animate-cta {
    padding: 46px 0 66px 0;
    overflow: hidden;
}
.animate-cta #cta-row {
    margin: 0 auto 0 auto;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    background-color: #4843d2;
    width: inherit;
}
/*** style button ***/

#sign {
    display: inline-block;
    width: 246px;   
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    background-color: #f92c8b;
    padding: 20px 40px;
    margin-top: 30px;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -webkit-transition: all .8s ease;
    box-shadow: 0px 5px 20px #231f92;
    -moz-box-shadow: 0px 5px 20px #231f92;
    -webkit-box-shadow: 0px 10px 50px #231f92;
}
#sign:hover {
    background-color: #2cc2e6;
    box-shadow: 0px 20px 80px #1b1867;
    -moz-box-shadow: 0px 20px 80px #1b1867;
    -webkit-box-shadow: 0px 20px 80px #1b1867;
}

/*** style content within the code module ***/

.cta-info{
    color: #fff;
    text-align: center;
    margin: 0 auto !important;
    max-width: 1080px;
    padding: 50px;
}
.cta-info h3 {
    color: #fff;
    font-size: 35px;
    line-height: 1.3em;
}

Agora o seu CTA está começando a ter uma aparência adequada. Tudo o que resta fazer é adicionar um pequeno script para dar ao CTA aquele efeito de animação atraente, uma vez que o CTA fica visível na janela de visualização do seu navegador durante a rolagem.

Adicionando o script de waypoint para animar o CTA ao rolar para o elemento

Uma das maneiras mais fáceis de acionar uma função ao rolar para um elemento em sua página é usando a biblioteca JavaScript chamada Waypoints. Como o Divi já vem com os Waypoints instalados (yay!), Tudo o que precisamos fazer é incluir um script que utilize a biblioteca.

Vá para Divi → Opções de Tema → Integração e cole o seguinte script na seção “Adicionar código ao cabeçalho do seu blog”.

<script>
jQuery(document).ready(function(){
	jQuery('#cta-section').waypoint(function() {
		jQuery('#cta-section').toggleClass('animate-cta');
	}, {offset: '80%'});
});
</script>

Este script está adicionando uma função que irá alternar uma classe chamada “animate-cta” quando você rolar para a seção CTA (com o código CSS “cta-section”). Observe a parte do código que designa o deslocamento como 80%. Isso significa que a função será acionada quando a parte superior da seção CTA estiver a 80% da parte superior da janela do navegador. Se você quiser atrasar o acionamento da função quando o CTA atinge o meio da página, pode alterar o valor de deslocamento para algo como 50%. No entanto, se o seu CTA vai ficar na parte inferior da página, você deve manter um valor próximo a 80% - 90%. Isso ocorre porque seu CTA pode nunca chegar ao meio da janela do navegador durante a rolagem e, portanto, não será acionado.

É isso!

Agora vamos dar uma olhada no projeto concluído.

Adicionando a funcionalidade CTA a outros módulos

Se você deseja adicionar esta funcionalidade CTA a outros módulos dentro do Divi Builder, isso é bastante fácil de fazer. Aqui estão as etapas para você começar:

  1. Crie uma seção padrão com uma linha de largura total (coluna única).
  2. Em Section Settings, em CSS, adicione o ID CSS “cta-section”.
  3. Em Row Settings, em CSS, adicione o ID CSS “cta-row” E adicione a classe CSS da coluna “cta-column”.
  4. Insira o seguinte CSS personalizado:
    5.  .cta-column.et_pb_column:last-child {
 margin: 0 auto;
 margin-right: auto !important;
 max-width: 1080px;
 float: none;
}
  5. Adicione qualquer módulo que desejar à linha (ou seja, Módulo de chamada para ação) e estilize-o de acordo. Você pode querer adicionar planos de fundo transparentes ao seu módulo para que não ultrapasse a cor do plano de fundo da seção do seu CTA.

Observação importante: você não pode adicionar mais de um CTA com esta função por página.

Pensamentos finais

Duplicar o CTA do Elegant Theme é um recurso útil para adicionar a qualquer projeto futuro. Ele chama a atenção do leitor sem ser muito arrogante. Usar o Módulo de Código oferece aos desenvolvedores mais flexibilidade para adicionar html personalizado ao CTA. E a funcionalidade de animação do waypoint não se limita ao Módulo de Código. Você também pode adicionar os IDs CSS necessários a qualquer seção, linha e coluna para criar CTAs com qualquer módulo usando o Divi Builder.

Estou ansioso para ouvir de você nos comentários abaixo.

Saúde!