Como criar um banner flutuante no Divi (sem plugin)

Publicados: 2024-10-08

Banners flutuantes chamam efetivamente a atenção do usuário e apresentam mensagens importantes ou importantes sem atrapalhar a experiência geral do usuário. Quando combinados com um gatilho de rolagem, esses banners aparecem dinamicamente à medida que os visitantes navegam pela página, aumentando o envolvimento do usuário ao oferecer informações oportunas no momento certo.

Este artigo irá guiá-lo na criação de um banner flutuante visualmente atraente e eficaz no Divi, sem a ajuda de plug-ins adicionais de terceiros. Desde personalizar sua aparência até acionar sua exibição com base no comportamento de rolagem, você pode cronometrar estrategicamente a aparência de banners flutuantes durante a rolagem. Ao mesmo tempo, você também pode promover ofertas, anúncios ou frases de chamariz de maneira eficaz e tranquila.

Como criar o banner flutuante no Divi com base no comportamento de rolagem (sem plug-in)

Etapa 1: criar ou editar um modelo de corpo personalizado

No painel do WordPress, navegue até Divi -> Theme Builder . Na página Theme Builder, crie um novo modelo de corpo ou edite um existente clicando no botão Adicionar corpo global ou personalizado ou selecionando o modelo que deseja modificar.

Neste exemplo, exibiremos o banner flutuante em um único modelo de postagem, então selecionamos nosso modelo Todas as postagens para editá-lo.

Adicionar uma nova seção

Depois de entrar no editor de modelos de corpo personalizado, crie uma nova seção para sua página. Para fazer com que o elemento do banner flutuante pareça proporcional e não muito grande em sua página, definimos o tamanho da seção para 25% de largura.

Etapa 2: adicione o conteúdo do banner flutuante

Adicionar um módulo

A seguir, adicionaremos o conteúdo do banner flutuante. Clique no botão “ + ” dentro da seção para adicionar um novo módulo. Em seguida, selecione qualquer módulo que deseja que apareça como conteúdo de banner flutuante, como Texto, Botão, módulo Call to Action, etc. Para este exemplo, selecionamos o módulo Call to Action .

Personalize o módulo

Depois de adicionar o módulo que deseja usar como meio de exibir o conteúdo do banner flutuante, a próxima coisa que faremos é ajustar e estilizar o módulo. Você pode personalizar o módulo de acordo com sua preferência, para este exemplo (módulo Call to Action), aplicamos algumas alterações, como substituir o título e o corpo do texto, adicionar um botão e URL do link, alterar a cor do fundo do módulo, adicionar margem, adicionando raio de borda, etc.

  • Adicione a classe CSS

Em seguida, adicione uma classe CSS personalizada chamada “ floating-banner-content ” na guia avançada do módulo.

Depois de terminar de criar o conteúdo do banner flutuante, não se esqueça de salvar todas as alterações.

Etapa 3: adicione o CSS personalizado e o snippet de JavaScript

A seguir, adicionaremos o snippet CSS e JavaScript personalizado às opções do tema Divi.

Adicione o CSS personalizado

Vá para as opções de tema Divi e selecione CSS personalizado (painel do WordPress -> Divi -> Opções de tema Divi -> Geral -> CSS personalizado ). Em seguida, copie o trecho CSS abaixo e cole-o no campo disponível. 

 Tela @media somente e (largura mínima: 768px) { .floating-banner-content {
  posição: fixa;
  superior: 130px;
  esquerda: 80%;
  transformar: traduzirX(-50%);
  sombra da caixa: 0 2px 4px rgba(0, 0, 0, 0,2);
  índice z: 9999;
  opacidade: 0;
  visibilidade: oculta;
  transição: opacidade 0,3s de atenuação, visibilidade 0,3s de atenuação;
}
}

Tela @media somente e (largura mínima: 768px) { .floating-banner-content.active {
  opacidade: 1;
  visibilidade: visível;
}
}

Adicione o código JavaScript

Na página Divi Them Options, navegue até a guia Integração . Em seguida, cole o snippet JavaScript abaixo no campo Adicionar código ao <head> do seu blog . 

 <roteiro>
jQuery(documento).ready(função($) {
    var banner = $('.floating-banner-content');

    $(janela).scroll(function() {
        var scrollTop = $(this).scrollTop();
        if (scrollTop >= 400) {
            banner.addClass('ativo');
        } outro {
            banner.removeClass('ativo');
        }
    });
});
</script>

Depois que os snippets CSS e JavaScript personalizados forem adicionados, aplique as alterações clicando no botão Salvar alterações .

Para ver o resultado, você pode visualizar uma de suas postagens ou páginas (dependendo de onde você coloca o elemento do banner flutuante).

O que o código CSS e JavaScript fizeram?

Análise do código CSS

  • @media only screen and ( min-width: 768px ) :
    • Esta consulta de mídia visa especificamente dispositivos com largura de tela mínima de 768 pixels (ou seja, tablets e maiores). Ele garante que o banner flutuante seja adaptado aos dispositivos que podem exibi-lo confortavelmente.
  • .floating-banner-content :
    • Este seletor tem como alvo elementos com a classe “conteúdo do banner flutuante”, que é aplicada ao módulo que contém o conteúdo do banner.
  • Estilos para .floating-banner-content :
    • position: fixed; : Ele permanecerá no lugar mesmo quando o usuário rolar a página.
    • top: 130px; : define a posição superior do banner para 130 pixels da parte superior da janela de visualização.
    • left: 80%; : posiciona o banner a 80% da largura da janela de visualização a partir da borda esquerda.
    • transform: translateX(-50%); : Centraliza o banner horizontalmente, deslocando-o 50% para a esquerda.
    • box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); : adiciona uma sombra sutil ao banner para maior profundidade.
    • z-index: 9999; : garante que o banner apareça sobre outros elementos da página.
    • opacity: 0; : inicialmente oculta o banner definindo sua opacidade como 0.
    • visibility: hidden; : oculta o conteúdo do banner até que ele fique visível.
    • transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; : aplica um efeito de transição suave quando a opacidade e a visibilidade do banner mudam.
  • .floating-banner-content.active :
    • Este seletor tem como alvo elementos com a classe “ floating-banner-content ” que também possui a classe “ active ”. Esta classe é adicionada ao banner quando deveria estar visível.
  • Estilos para o elemento .floating-banner-content.active :
    • opacity: 1; : Torna o banner visível definindo sua opacidade como 1.
    • visibility: visible; : Exibe o conteúdo do banner.

Resumo do código JavaScript

Este código JavaScript controla efetivamente a visibilidade do banner flutuante com base na posição de rolagem do usuário.

O banner fica visível quando o usuário rola para baixo além de um determinado limite ( 400 pixels neste caso).

Quando o usuário rola de volta acima do limite, o banner desaparece. Esse comportamento fornece uma experiência de usuário dinâmica e envolvente.

O resultado final

Neste artigo, descobrimos como criar um banner flutuante dinâmico e envolvente no Divi sem plug-ins adicionais. Seguindo o guia passo a passo, você aprendeu como criar um banner visualmente atraente, personalizar sua aparência e controlar sua visibilidade com base no comportamento de rolagem.

O banner flutuante permite que você entregue mensagens importantes, destaque as principais ofertas ou aprimore a experiência geral do usuário do seu site. Com um pouco de criatividade e personalização, você pode criar um banner flutuante que se integra perfeitamente ao design do seu site e cativa os visitantes.