Existem vários benefícios em usar o Elementor como seu construtor de páginas. O Elementor fornece uma infinidade de possibilidades de modificação para a maioria dos aspectos menores do seu site WordPress para torná-lo mais atraente. Uma vantagem é que você pode revelar e ocultar o elemento rolando para baixo e para cima.
Ao rolar, você pode revelar ou ocultar certos itens, como - botão voltar ao topo, botão de chamada para ação flutuante etc. você rola para cima.
Visualização do projeto
Aqui está como será o design.
Use Elementor para mostrar um elemento ao rolar para baixo e ocultá-lo ao rolar para cima
Antes de continuarmos, gostaríamos de ter certeza de que você já possui o Elementor Pro, pois precisaremos de duas ferramentas acessíveis apenas no Elementor Pro: Theme Builder e CSS personalizado.
Create Amazing Websites
Com o melhor criador de páginas gratuito Elementor
Comece agoraOk, vamos começar!
Entre no editor Elementor e, em seguida, arraste & e solte o widget Button do painel do widget na área da tela. Como vamos alterar a posição, você pode colocar o widget em qualquer lugar da sua página. O widget Button é colocado na parte inferior da página neste exemplo.
Fizemos as seguintes alterações no painel de configurações:
Vá para a guia de conteúdo e faça as seguintes alterações.
- Texto: Remova o texto
- Alinhamento: Direito
- Ícone: selecione o ícone de seta na biblioteca de ícones
Agora vá para a guia Estilo e faça as alterações.
- Posição Fixa: Altura - 1, Largura -1
- Cor de fundo: #FFFFFF30
Em seguida, navegue até a guia Avançado e configure as coisas de acordo.
- Posição: Fixo
- Orientação Horizontal: Direita
- Deslocamento: 50 PX
- Orientação Vertical: Inferior
- Deslocamento: 50 PX
Então aqui estão as mudanças que fizemos até agora.
Tornar o botão clicável virá a seguir. Retorne à guia Conteúdo do painel Configurações e comece preenchendo o campo Link para vincular o botão ao topo da página. Para começar, navegue até a seção superior e selecione a opção Editar seção. Vá para a guia Avançado, selecione CSS ID, insira qualquer nome de id e copie-o. Depois de copiar o nome do ID CSS, retorne ao botão Editar -> guia Conteúdo e cole-o no campo Link.
Portanto, não importa onde você esteja neste site, clicar no botão leva você ao topo.
Escondendo e revelando o botão Voltar ao topo
A função do botão funciona corretamente, conforme evidenciado pelo GIF acima. No entanto, quando você chegar ao topo da página, ainda poderá ver o botão Voltar ao topo. Como resultado, não parece ser uma situação positiva. Portanto, seria benéfico se você ocultasse o botão quando estiver na parte superior e aparecesse depois de rolar para baixo algumas alturas. Ok, vamos começar!
JavaScript
Para que a ação aconteça, você deve fornecer alguns trechos de JavaScript. Mas não se preocupe; já escrevemos o código JavaScript para você; basta copiar e colar.
Adicione uma nova seção clicando no botão de adição (botão +), selecionando o widget HTML no painel de widgets e arrastando-o e soltando-o na área de tela. Neste exemplo, adicionamos o widget HTML de cima para a parte superior.
Agora adicione o seguinte código à caixa.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var offset = 400
$(window).on('load scroll', function(){
if( $(window).scrollTop() > offset ){
$('body').addClass('show')
}else{
$('body').removeClass('show')
}
})
</script>Apresentaremos um resumo rápido do código JavaScript acima. Quando você rola 400 pixels para baixo, o corpo de um nome de classe é adicionado e exibido, e quando você retorna ao topo da sua página, o nome da classe show é retirado.
CSS customizado
Retorne às configurações do widget Button após terminar de colar o snippet JavaScript no campo HTML. Abra a caixa CSS personalizado na guia Avançado e cole o seguinte trecho de CSS:
selector{
opacity: 0;
transition: all 0.3s ease-in-out;
}
body.show selector{
opacity: 1;
}
O botão Voltar ao topo agora está perfeitamente oculto e revelado. Não se esqueça de salvar suas alterações clicando no botão ATUALIZAR ou PUBLICAR.
Ocultar e revelar o botão de chamada à ação
Definir Z-Index e criar um pop-up são as duas abordagens para fazer um botão de chamada para ação flutuante no Elementor. Neste exemplo, usaremos a primeira abordagem, Z-Index.
Criar o botão de chamada para ação
Navegue até o seu editor Elementor e atualize o material existente (páginas, postagens, modelos) ou crie novos. Neste exemplo, faremos alterações em nossa página atual. Crie uma nova seção com uma única coluna primeiro. Arraste o widget Button do painel do widget para a área da tela. Depois disso, modifique o botão Texto e o Link. Neste exemplo, usaremos o botão como um gatilho para direcionar os usuários à página de ingressos para shows da Taylor Swift.
Fazendo o botão de chamada para ação ocultando & revelando
Como visto no GIF acima, o botão de chamada para ação flutuante ainda está visível na parte superior da página. Ao rolar para baixo algumas alturas, você pode fazer com que o botão flutuante de chamada para ação desapareça quando estiver na parte superior e terminar. Você pode fazer a mesma coisa ocultando e mostrando o botão Voltar ao topo acima.
Observação: para ocultar e expor o botão Voltar ao início e o botão Chamada à ação flutuante na mesma página, basta colocar o snippet CSS na seção CSS personalizado.
Quando terminar sua página, não se esqueça de clicar no botão ATUALIZAR ou PUBLICAR para salvar seu trabalho.
Palavras finais
Este artigo demonstra como revelar um elemento no Elementor rolando para baixo e ocultando-o rolando para cima. Sinta-se à vontade para experimentar o widget Button, experimentar todas as opções de personalização e se divertir tornando seu site WordPress mais interessante. Se você se sentir ajudado por este tutorial, talvez esteja interessado em verificar outros tutoriais do elementor também. Além disso, sinta-se à vontade para compartilhar com seus amigos.
