Como tornar qualquer elemento da página Divi aderente

Saber como deixar qualquer elemento da página Divi fixo (ou fixo) é uma daquelas habilidades úteis que os web designers podem usar de várias maneiras. Se você não estiver familiarizado com o termo “aderente”, ele simplesmente se refere a um elemento em uma página da web que permanece “fixo” conforme o usuário rola a página para baixo. Um exemplo popular de elemento fixo é um menu de navegação fixo. Divi tem uma funcionalidade de navegação fixa (ou fixa) disponível por padrão. Portanto, quando o usuário rola a página para baixo, uma versão fixa do menu permanece presa na parte superior da página enquanto o usuário rola. Mas os elementos fixos podem ser usados ​​para quase tudo e é uma ótima maneira de chamar a atenção para a frase de chamariz desejada em qualquer página.

Neste tutorial, vou mostrar a você uma maneira fácil de tornar qualquer elemento em sua página fixo usando o plugin chamado Menu Fixo (ou Qualquer Coisa!) Na Rolagem. Bastam alguns minutos para definir as configurações do plugin. Em seguida, tudo o que você precisa fazer é adicionar um ID CSS personalizado ao seu elemento. É tão fácil.

Vamos entrar nisso!

O que você precisa para este tutorial

Para este tutorial, você precisará do seguinte:

• Divi Theme
• O Menu Fixo (ou qualquer coisa!) No plug-in de rolagem
• Layout da página do blog do contador (disponível no Divi Builder)

Como tornar qualquer elemento da página Divi aderente

Inscreva-se no nosso canal no Youtube

Definição das configurações do plugin

Depois de ter o menu aderente (ou qualquer coisa!) No plug-in Scroll instalado e ativado no seu tema Divi, vá até o painel do WordPress e navegue até Configurações> Menu fixo (ou qualquer coisa!).

Na guia Configurações básicas, atualize as opções da seguinte maneira:

Primeiro, você precisará adicionar um identificador exclusivo para seu elemento aderente. Pode ser um CSS ID ou classe. Em seguida, adicionaremos esse identificador ao nosso elemento em Divi mais tarde. Para facilitar a lembrança, irei adicionar o ID CSS “#sticky”.

Elemento Sticky: #sticky

Em seguida, você precisa adicionar o valor do pixel para o espaço entre o topo da página e o elemento aderente. Visto que a barra de navegação fixa do Divi tem 54px de altura por padrão, queremos adicionar pelo menos 54px para esta opção para que nosso elemento fixo não se sobreponha ao nav fixo.

Espaço entre o topo da página e o elemento aderente: 54 pixels

Também é uma boa ideia desativar o elemento aderente no celular. Para fazer isso, precisamos configurar o plugin para não colar o elemento quando a tela for menor que 980px.

Não grude o elemento quando a tela for menor que: 980 pixels

Salve suas configurações e vá até a guia Configurações avançadas e atualize o seguinte:

Para a opção de índice z, queremos ter certeza de que nosso elemento está empilhado em cima de todos os outros elementos na página, especialmente se planejamos que nosso elemento se sobreponha a outros elementos na rolagem. Para garantir que isso aconteça, defina o z-index para 99998.

Índice Z: 99998

Para dar uma ideia de como os elementos são ordenados em Divi, as seções têm um índice z de 2, as colunas têm um índice z de 9 e a barra de cabeçalho / navegação tem um índice z de 99999. Basicamente, nós somos querer que nosso elemento aderente seja 1 número menor que o índice z para a navegação do cabeçalho. Isso garantirá que o elemento aderente fique acima de tudo na página, exceto do nav. Isso será útil sempre que você desejar interromper seu elemento e empurrá-lo para cima na página, para que o elemento aderente não fique no topo da navegação enquanto você rola (parece bagunçado e quebrado).

Em seguida, podemos adicionar um identificador de elemento “push up”. Você pode pensar nisso como uma rolha para nosso elemento pegajoso. Geralmente é um elemento de rodapé. Basicamente, isso identifica o elemento que interromperá o elemento aderente ao rolar para baixo na página, permitindo que o elemento aderente seja empurrado para cima com o resto da página. Para este exemplo, irei definir o identificador com o ID CSS “#stop”.

Elemento push-up: #stop

Salvar configurações.

Agora estamos equipados com o poder de que precisamos para fazer um elemento pegajoso!

Tornando um elemento de página Divi fixo

Para mostrar a você como tornar um elemento Divi aderente, vou usar a página de blog do contador do Divi do pacote de layout do contador. Para começar, crie uma nova página, dê um título à sua página e implante o Visual Builder. Em seguida, selecione a opção “Choose a Premade Layout”. No pop-up de carregamento da biblioteca, selecione o pacote de layout do contador e escolha a página Blog.

Esta página apresenta um formulário de inscrição por e-mail na barra lateral direita de uma seção de especialidades. Em um esforço para chamar mais atenção para este formulário, podemos fazer com que ele se torne pegajoso quando o usuário rolar a página para baixo. Então, podemos fazer o elemento parar (ou empurrar para cima) sempre que atingir a próxima seção na página para que não se sobreponha.

Como deixar uma coluna fixa

Neste ponto, porém, precisamos decidir que elemento específico queremos tornar aderente. Poderíamos apenas deixar o módulo Opção de e-mail fixo, mas isso não contaria para o módulo Seguir de mídia social diretamente abaixo do formulário, que também queremos manter. E podemos dar a ambos os módulos o mesmo identificador, porque ambos ficariam pegajosos na mesma posição, causando sobreposição. A melhor maneira de fazer isso é tornar a coluna inteira (coluna 2) aderente.

Para tornar a coluna 2 fixa, abra as configurações de linha da linha que contém a coluna que desejamos atingir. Em seguida, na guia Avançado, adicione o ID CSS “aderente”. Isso corresponde ao identificador exclusivo do elemento aderente que adicionamos em nossas configurações de plug-in.

ID CSS: aderente

(NOTA: não coloque o símbolo hashtag (ou cerquilha) antes do ID aqui. Além disso, certifique-se de adicioná-lo ao ID CSS e não à classe CSS)

Salve as configurações e visualize a versão ao vivo da página. Se você rolar para baixo, notará que a coluna 2 (com ambos os módulos) ficará pegajosa quando se tornarem 54px do topo da janela e permanecerão nessa posição enquanto você continua a rolar.

Interrompendo o elemento aderente em uma seção

Como você pode ver, o elemento continua a permanecer fixo, de modo que se sobrepõe ao conteúdo das outras seções abaixo. Para impedir que isso aconteça, podemos usar nosso identificador “push up” (#stop) que adicionamos nas configurações do plugin.

Para interromper o elemento aderente na seção abaixo, precisamos abrir as configurações da seção e adicionar o código CSS “stop”.

ID CSS: parar

Agora vá visualizar a versão ao vivo da página. Observe como o elemento aderente para na seção que você identificou.

Muito legal, certo?

Como tornar um módulo aderente

Para tornar um único módulo aderente, você precisará fazer um ajuste em Divi para garantir que seu elemento tenha o Z-index correto para que fique sobre os outros elementos em toda a página durante a rolagem. Como mencionei anteriormente, Divi atribui um índice z de 2 a todas as seções. E o plug-in aplica o z-index de 99998 ao elemento aderente. Mas como um módulo não pode ser ordenado (ou indexado) acima de seu elemento pai (a seção), o módulo ainda ficará atrás de outros módulos na página. Para corrigir isso, precisamos ter certeza e dar à seção que contém nosso módulo fixo um índice z de 99998 manualmente.

Para ilustrar isso, vou usar o mesmo layout de página do blog do contador que usamos anteriormente. Antes de adicionarmos nosso CSS ID a um módulo, primeiro precisamos retirar o CSS ID (sticky) que definimos para a coluna 2. E, em seguida, retirar o CSS ID (stop) que definimos para a seção abaixo dele. Depois disso, abra as configurações do módulo Social Media Follow e adicione o CSS ID “sticky” ao módulo.

Se você visualizar a página ao vivo, notará que o elemento aderente fica oculto ao se sobrepor aos outros módulos nas seções abaixo conforme você rola.

Para corrigir isso, abra as configurações da seção para a seção que contém o elemento aderente do módulo de seguimento de mídia social. Em seguida, adicione o seguinte CSS personalizado ao elemento principal:

z-index: 99998;

Agora verifique a página ao vivo. Observe como os ícones de mídia social ficarão no topo da página (54px do topo), logo abaixo do navegador fixo e, em seguida, ficarão acima dos outros módulos conforme você rola.

Tornando uma seção fixa

Para tornar uma seção inteira aderente, você seguiria o mesmo processo de adicionar o ID CSS “aderente” à seção de sua escolha. Não há necessidade de atualizar o Z-index usando css personalizado, pois o plugin faz isso para você automaticamente.

Efeitos de pairar podem fazer com que elementos pegajosos façam falha

Se você tiver efeitos de foco ativos em toda a página ou no elemento aderente, poderá encontrar algumas falhas. Se isso acontecer, pode ser necessário desativar os efeitos de foco do elemento aderente.

Apenas um elemento aderente por página

O plug-in permite apenas um elemento aderente por página, portanto, se desejar adicionar vários elementos fixos, você precisará de uma solução mais avançada (ou outro plug-in que suporte isso).

Pensamentos finais

Espero que este artigo tenha sido útil para fornecer uma maneira simples e revigorante de tornar qualquer elemento da página Divi aderente. Use-o para criar submenus fixos, CTAs fixos, ofertas promocionais fixas e praticamente qualquer outra coisa que você possa imaginar. Divirta-se explorando as possibilidades!

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

Saúde!