Como Ocultar e Revelar Sessões de Páginas Criadas com Elementor

Related Posts

Conheça A Forma Mais Barata de Ter o Elementor Pro – 100% Original

3 de fevereiro de 2025

Como Atualizar a Data do Rodapé Automaticamente no WordPress

3 de fevereiro de 2025

Tutorial: Como Ocultar e Revelar Sessões de Páginas Criadas com Elementor

Se você deseja ocultar sessões de uma página criada com o Elementor e revelar essas sessões após um tempo, basta usar o seguinte código. O código pode ser facilmente adicionado através do componente HTML do Elementor. Siga os passos abaixo para implementar essa funcionalidade no seu site.

Passos:

1. Abra a página no Elementor:
   • Vá para a página onde você deseja aplicar o efeito.
   • Abra o editor Elementor.
2. Adicione um Componente HTML:
   • No painel do Elementor, procure por “HTML” e arraste o componente “HTML” para fim da página.
3. Cole o Código:
   • Cole o seguinte código no componente HTML que você adicionou:

   <script>
   document.addEventListener('DOMContentLoaded', function () {
       let tempoNaPagina = 0;
       const tempoNecessario = 3; // Defina o tempo em segundos
   
       const intervalo = setInterval(() => {
           tempoNaPagina++;
   
           if (tempoNaPagina >= tempoNecessario) {
               clearInterval(intervalo);
               
               let escondidos = document.querySelectorAll(".esconder");
               for (let i = 0; i < escondidos.length; i++) {
                   escondidos[i].classList.add("revelado");
                   setTimeout(function () {
                       escondidos[i].style.opacity = "1";
                   }, 200);
               }
           }
       }, 1000);
   });
   </script>
   
   <style>
   .esconder {
       display: none;
       opacity: 0;
       transition: 1s;
   }
   
   .esconder.revelado {
       display: flex;
   }
   </style>
   

4. Personalize o Tempo:
   • Para alterar o tempo antes de revelar as seções, basta modificar o valor da variável tempoNecessario no código. O valor está em segundos.
   • Exemplo: Para alterar para 5 segundos, altere o código da seguinte forma:

     const tempoNecessario = 5; // Defina o tempo em segundos
     

5. Adicione a Classe “esconder” às Sessões:
   • Agora, para ocultar as seções que você deseja controlar, adicione a classe esconder às seções no Elementor. Para fazer isso:
     • Selecione a seção que deseja ocultar.
     • Vá até as configurações avançadas da seção e, em “Classe CSS”, adicione esconder.
6. Pronto!:
   • Após o tempo definido, as seções com a classe esconder serão reveladas com uma animação suave de opacidade.

Resumo:

Esse código vai ocultar as sessões até que o tempo configurado seja atingido, e, então, revelá-las com um efeito de transição. Basta ajustar o tempo e adicionar a classe esconder nas seções que você deseja controlar!