Como adicionar uma frase de chamariz deslizante que pode ser fechada a qualquer canto de seu modelo de página na Divi

Ter uma frase de chamariz deslizante em seu site é uma das maneiras menos intrusivas de chamar a atenção dos visitantes. Na maioria das vezes, eles simplesmente ignorarão o CTA ou o fecharão para continuar navegando na página, mas às vezes você os conquistará. Uma frase de chamariz deslizante funcionará muito bem para promover praticamente qualquer coisa em uma página de destino.

Neste tutorial, vamos projetar uma frase de chamariz que pode ser fechada e pode ser adicionada a qualquer canto de uma página usando o Divi Theme Builder. Uma vez feito isso, você terá a capacidade de promover seus produtos e ofertas especiais em qualquer lugar da página sem ter que usar um plugin.

Vamos começar!

Espiada

Aqui está uma rápida olhada nos quatro CTAs de slide que adicionaremos a todos os quatro cantos do modelo de página. Claro, você não precisará ter todos os quatro implantados ao mesmo tempo. Observe como cada um pode ser fechado clicando no ícone “x” e, em seguida, você pode escolher alternar a abertura do CTA novamente clicando no ícone “mais”.

Baixe o modelo de página da Divi de call-to-action Slide-In GRATUITAMENTE

Para colocar suas mãos no Modelo de Página deste tutorial, primeiro você precisa baixá-lo 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!

Para importar o layout para sua página, simplesmente extraia o arquivo zip e adicione um dos arquivos json no Divi Theme Builder usando a opção Theme Builder Portability.

Vamos para o tutorial, vamos?

O que você precisa para começar

Para começar, você precisará instalar e ativar o Divi Theme. Certifique-se de que possui a versão mais recente do Divi.

Você também precisará de pelo menos uma página criada com o Divi Builder para fins de teste a fim de atribuir o novo modelo a essa página para mostrar o resultado.

Depois disso, você está pronto para ir.

Criação de uma frase de chamariz deslizante que pode ser fechada para cada canto do seu modelo de página no Divi

Criação de um novo modelo

No painel do WordPress, navegue até Divi> Theme Builder. Em seguida, clique na caixa “Adicionar novo modelo” para criar um novo modelo.

Atribua o modelo à (s) página (s) em que deseja que a barra promocional seja exibida.

No novo modelo, clique na área “Adicionar Corpo Personalizado” e selecione “Construir Corpo Personalizado”.

Em seguida, selecione a opção “Build From Scratch”.

Criação da seção de conteúdo de postagem

A seção de conteúdo da postagem é uma parte necessária de qualquer modelo de página para exibir o conteúdo real da página ou postagem criada em Divi ou WordPress. Adicionaremos isso ao nosso modelo antes de criar nossa primeira frase de chamariz deslizante.

Adicionar linha de uma coluna

Para começar, adicione uma linha de uma coluna à seção regular.

Adicionar módulo de conteúdo de postagem

Em seguida, adicione um módulo de conteúdo de postagem à linha.

Configurações de linha

Depois disso, atualize as configurações de linha da seguinte maneira:

• Largura: 100%
• Largura máxima: 100%
• Preenchimento: 0 px superior, 0 px inferior

Criação da frase de chamariz deslizante superior esquerdo

Agora que nosso módulo de conteúdo de postagem está instalado, estamos prontos para começar a adicionar nossa primeira chamada à ação deslizante no canto superior esquerdo do modelo de página.

Adicionar Seção

Cada nova chamada à ação será criada com uma nova seção inteira. Isso permitirá que você adicione qualquer layout ou módulo necessário para projetar a frase de chamariz.

Adicione uma nova seção regular ao layout do modelo.

Adicionar linha de uma coluna

Em seguida, atribua à seção uma linha de uma coluna.

Configurações da seção

Arraste (ou mova) a seção acima da seção de conteúdo da postagem e atualize as configurações da seção da seguinte maneira:

• Cor do gradiente de fundo à esquerda:
• Cor certa do gradiente de fundo:
• Mostrar gradiente acima da imagem: SIM
• Imagem de fundo: [inserir imagem]
• Largura: 320px
• Margem: 320px restante
• Preenchimento: 0 px superior, 0 px inferior
• Estilo de animação: slide
• Direção da animação: direita
• Atraso de animação: 2.000 ms

Em seguida, pule para a guia avançada e adicione a seguinte classe CSS e índice Z:

• Classe CSS: slide-in-cta
• Índice Z: 999

E adicione o seguinte snippet CSS personalizado ao elemento principal:

position: fixed;
top: 80px;
left: -320px;

A classe CSS é necessária para que possamos direcionar a seção com código posteriormente. O CSS personalizado posicionará a seção no canto superior esquerdo do modelo de página em uma posição fixa (ou fixa). A posição “esquerda: -320px” deve mover toda a seção (que tem 320px de largura) para fora da janela do navegador. Mas temos a margem esquerda de 320 pixels para trazê-lo de volta à vista. A razão pela qual isso é construído dessa forma é para que possamos alternar o valor da margem entre ligado e desligado ao clicar no ícone “x”. Isso fará com que o CTA deslize para dentro e para fora de vista.

Configurações de linha

Agora vamos atualizar as configurações de linha da seguinte maneira:

• Usar largura de calha personalizada: SIM
• Largura da calha: 1
• Largura: 100%
• Preenchimento: 0 px superior, 0 px inferior

Adicionar módulo de apelo à ação

Dentro da linha, adicione um Módulo de Chamada para Ação.

Configurações de frase de chamariz

Em seguida, atualize as configurações de call-to-action.

Contente

• Título: [insira o texto de escolha]
• Botão: [insira o texto de escolha]
• Corpo: [insira o texto de escolha]
• URL do link do botão: [insira o url real ou #]

Em seguida, remova a cor de fundo padrão para revelar o fundo da seção que adicionamos anteriormente.

Configurações de design (texto, botão e preenchimento)

Na guia de design, atualize o seguinte:

• Fonte do título: Lato
• Peso da fonte do título: pesado
• Altura da linha do título: 1,3em
• Fonte do corpo: Lato
• Peso da fonte do corpo: negrito
• Use estilos personalizados para botão: SIM
• Tamanho do texto do botão: 15px
• Largura da borda do botão: 0 px
• Espaçamento entre letras dos botões: 1px
• Fonte do botão: Lato
• Peso da fonte do botão: pesado
• Estilo da fonte do botão: TT
• Preenchimento do botão: 12px superior, 12px inferior, 32px à esquerda, 32px à direita
• preenchimento: 40px superior, 40px inferior, 40px à esquerda, 40px à direita

Adicionar ícone Abrir e Fechar com um Módulo Blurb

Após a conclusão da frase de chamariz, precisamos criar o botão do ícone usado para abrir e fechar a frase de chamariz deslizante. Para criar isso, adicione um módulo de sinopse abaixo do módulo de call to action.

Configurações do Blurb

Atualize as seguintes configurações de design.

Contente

• excluir título padrão e texto do corpo
• Ícone de uso: SIM
• Ícone: mais (veja a captura de tela)

Projeto

• Cor do ícone: # 000000
• Use o tamanho da fonte do ícone: SIM
• Tamanho da fonte do ícone: 40px
• Largura: 40px
• Altura: 40px
• Cantos arredondados: 50%
• Transformar e girar eixo Z: 135deg

Configurações avançadas

Na guia avançada, adicione a seguinte classe CSS:

• Classe CSS: slide-in_target

Em seguida, adicione este CSS personalizado ao elemento principal.

position: absolute;
bottom: 0px;
right: -40px;

Adicione o seguinte CSS personalizado à imagem do Blurb.

margin-bottom: 0px;

Resultado

Aqui está o resultado até agora.

Lembre-se de que ainda precisamos adicionar algum código para adicionar a funcionalidade de fechar e abrir ao clicar no ícone “x”. Adicionaremos o código depois de criar uma chamada à ação em cada um dos quatro cantos do modelo.

Criação da frase de chamariz deslizante superior direita

Com o primeiro apelo à ação slide-in criado, podemos acelerar o processo de criação dos restantes CTAs duplicando a secção já construída. A seguir, criaremos uma frase de chamariz deslizante para o canto superior direito.

Seção duplicada

Implante o modo de visualização wireframe e, em seguida, duplique a seção CTA superior esquerda.

Atualizar as configurações da seção

Em seguida, atualize as novas configurações de seção da seguinte forma:

• margem: 320px à direita
• direção da animação: esquerda

Em seguida, atualize o CSS personalizado no elemento principal, substituindo “esquerda” por “direita”. Aqui está o trecho completo:

position: fixed;
top: 80px;
right: -320px;

Atualizar as configurações do módulo Blurb

Em seguida, abra as configurações do módulo blurb e atualize o snippet CSS personalizado no elemento principal, substituindo “right” por “left”. Aqui está o trecho completo:

position: absolute;
bottom: 0px;
left: -40px;

Resultado

Agora você verá uma frase de chamariz deslizante no canto superior direito do modelo de página.

Criando a frase de chamariz deslizante inferior esquerda

Seção duplicada

Para criar uma frase de chamariz deslizante no canto inferior esquerdo do modelo de página, duplique a seção de CTA superior esquerda na parte superior do layout da página. Identifique a seção duplicada como “CTA inferior esquerda” e mova-a para baixo da seção de conteúdo da postagem.

Atualizar as configurações da seção

Em seguida, abra as configurações da seção, atualize o CSS do elemento principal substituindo “top: 80px” por “bottom: 0px”. Aqui está o snippet final:

position: fixed;
bottom: 0px;
left: -320px;

Atualizar as configurações do módulo Blurb

Em seguida, atualize o CSS do elemento principal do Módulo Blurb substituindo “bottom: 0px” por “top: 0px”. Aqui está o snippet final:

position: absolute;
top: 0px;
right: -40px;

Resultado

Agora verifique a frase de chamariz deslizante inferior esquerda na página ao vivo.

Criando a frase de chamariz deslizante inferior direita

Seção duplicada

Para criar a frase de chamariz deslizante inferior direita, duplique a seção CTA superior direita e mova a seção duplicada abaixo da seção de conteúdo da postagem.

Atualizar as configurações da seção

Abra as configurações da seção e atualize o CSS do elemento principal substituindo “top: 80px;” com “inferior: 0px;”. Aqui está o snippet final:

position: absolute;
bottom: 0px;
right: -320px;

Atualizar as configurações do módulo Blurb

Em seguida, abra as configurações do módulo blurb e atualize o CSS do elemento principal substituindo “bottom: 0px;” com “top: 0px;”. Aqui está o snippet final:

position: absolute;
top: 0px;
right: -40px;

Resultado

Agora confira a frase de chamariz deslizante inferior direita na página ao vivo.

Adicionando os trechos de código jQuery e CSS personalizados usando um módulo de código

Para a etapa final, precisamos adicionar alguns jQuery e CSS personalizados para que possamos obter a funcionalidade de abrir e fechar para cada um dos CTAs slide-in.

Adicionar Módulo de Código

Adicione um módulo de código a uma das seções do layout.

Colar Código

Em seguida, abra as configurações de código e cole o código a seguir na caixa de código.

<style>
  .slide-in-cta, .slide-in_target, .slide-in-toggle-active {
    transition: all 400ms ease-in-out;
  } 
  .slide-in-toggle-active {
    margin: 0px 0px 0px 0px !important;
  }
   .slide-in-toggle-active .slide-in_target  {
    transform: none !important;
    background: rgba(0,0,0,0.2);
  }  
  .slide-in_target {
    cursor: pointer;
  }
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.slide-in_target').click(function(){
      $(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); 
    });    
  });
})( jQuery );   
</script>

Pensamentos finais

Com Divi, criar uma frase de chamariz deslizante não é nada difícil. E como você pode usar o criador de temas para adicionar uma chamada à ação a um modelo de página, terá mais controle sobre quais páginas exibirão esses CTAs. Sinta-se à vontade para aumentar o atraso da animação para a seção de CTA para que o usuário veja a animação de slide de CTA um pouco mais tarde (ou mais cedo) após o carregamento da página. Você também pode usar leads Divi e habilitar o teste de divisão para melhorar as conversões dos CTAs e descobrir qual canto terá a melhor conversão.

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

Saúde!