Como criar e aplicar um botão "Scroll to Top" no Elementor sem plug-ins

A "Desloque-se para o topo" é um excelente complemento para qualquer página longa. Oferece aos utilizadores uma forma rápida de regressar ao topo, tornando a navegação mais acessível e fácil de utilizar. Este guia irá guiá-lo na criação de um botão "Scroll to Top" no Elementor, não necessita de pluginse aplicá-lo em todo o seu sítio Web para manter o aspeto e a sensação consistentes.

Configure um modelo de botão global no Elementor

Comece por criar um novo modelo:

1. No painel de controlo do WordPress, aceda a "Modelos" > "Adicionar novo."

2. Selecione "Página única" no menu pendente como o tipo de modelo. Dê-lhe um nome como "Botão Deslocar para o topo“.

3. Clique "Criar modelo" para abrir o editor do Elementor.

4. Saia da biblioteca: Clique no botão "X" no canto superior direito para fechar a biblioteca de modelos.

Adicione e personalize o botão:

1. Arraste o botão "Botão" da barra lateral para o modelo.

2. Altere o texto do botão para "Deslocar para o topo" ou utilize um ícone de seta para cima.

3. Aceda à galeria de ícones e selecione a seta para cima ícone.

4. Selecione um botão diferente tipo para apagar o texto.

5. Aceda a "Estilo" e defina a cor de fundo, o tipo de letra e o raio do contorno para que corresponda ao estilo do seu sítio. Um botão redondo com uma cor contrastante funciona bem para o manter visível.

Alterar o estilo do botão

1. Utilize cantos arredondados
   • Aceda ao Estilo no Elementor.
   • Defina o Raio de fronteira para 10% para criar um botão perfeitamente redondo.
   • Modifique o Acolchoamento para ajustar o espaçamento dentro de um elemento. Isto define o espaço interior entre o conteúdo e o limites do elemento.

2. Adicionar um efeito de sombra
   • No Caixa de sombra (normalmente encontradas em Estilo > Rebordo), adicione uma sombra subtil para criar profundidade. Utilize definições como:
   • Desfoque: 10px
   • Espalhar: 0px
   • Cor: Escolha um cinzento claro ou um preto transparente para dar uma sombra suave.

3. Escolha um esquema de cores contrastantes
   • Utilize cores que contrastem com o fundo do seu sítio Web. Por exemplo, se o seu fundo for claro, opte por uma cor ousada como azul, laranja ou verde.
   • Para a cor do ícone, certifique-se de que é branco ou outra cor que se destaque do fundo do botão.

4. Adicione um efeito Hover
   • No Pairar definições no Estilo tab, pode fazê-lo:
     • Altere o cor de fundo ao passar o rato para um tom mais claro ou mais escuro da cor do botão.
     • Animação de pairar permite-lhe controlar a velocidade das animações e transições.

5. Adicione uma animação de impulsos (opcional)
   • No Avançado vá para o separador CSS personalizado (disponível em Elementor Pro) e adicione uma animação de impulsos:
   • Substituir 1TP5SeuBotãoID com o ID do seu botão. Isto fará com que o botão cresça e encolha subtilmente, chamando a atenção para ele.

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } #yourButtonID { animação: pulse 2s infinito; }

Este código adiciona um efeito de animação pulsante para um botão específico. O botão aumenta ligeiramente de tamanho e regressa ao seu tamanho original ao longo de 2 segundos, repetindo-se continuamente. Este efeito chama a atenção para o botão, tornando-o mais visível para os utilizadores.

Fixe o botão no sítio:

1. Na secção "Avançado", no separador "Posicionamento,"Escolha "Fixo."

2. Coloque o botão no canto inferior direito com um 20px Margem de ambos os lados para que se mantenha à medida que os utilizadores se deslocam.

3. Clique "Publicar“. Defina as condições de visualização para "Todas as páginas." Isto irá garantir que o botão é apresentado em todas as páginas, proporcionando uma experiência de utilizador consistente.

Adicione uma âncora na parte superior da página

1. Abra a página no Elementor:
   • Aceda ao seu painel de controlo do WordPress, navegue até Páginas ou Postose selecione a página que pretende editar.
   • Clique em Edite com o Elementor para abrir a página no editor do Elementor.

2. Selecione o elemento superior:
   • Escolha um elemento perto do topo da página para onde pretende que os utilizadores sejam direcionados quando clicarem no botão "Deslocar para o topo". Normalmente, este é o cabeçalho secção, um títuloou o primeira secção da página.
   • Clique no elemento para o selecionar.

3. Aceda ao separador Avançadas:
   • Com o elemento superior selecionado, navegue até ao Avançado no painel Elementor, à esquerda.
4. Defina o ID CSS:
   • Encontre o ID CSS no campo Avançado tab.
   • Introduza a palavra topo (ou qualquer outra palavra simples que prefira, como iniciar).

5. Guardar as suas alterações:
   • Depois de ter definido a ID CSS, clique em Atualização para guardar as alterações na página.

Nota importante:

• Certifique-se de que a ID CSS que introduziu corresponde à do botão "Deslocar para o topo". ligação. Por exemplo, se definir o ID CSS como topoo link do botão deve ser #top.

Adicione uma âncora para o botão:

1. Abra qualquer página no Elementor e clique no elemento superior (como um título ou uma secção).
2. Defina a ligação do botão. No ecrã Ligação campo, introduza #top (certifique-se de que inclui o # símbolo).

3. Continue a ler para ver os resultados.

Conclusão

Adicionar um botão "Scroll to Top" no Elementor é uma forma simples de melhorar a experiência do utilizador em páginas mais longas, permitindo uma navegação fácil de volta ao topo. Ao criar um modelo de botão global, garante um aspeto consistente em todo o seu sítio. O processo inclui a conceção do botão, a definição de estilos personalizados como cantos arredondados e efeitos de sombra e, opcionalmente, a adição de animações como um efeito de pulsação para maior visibilidade.

Uma vez concebido o botão, pode fixá-lo no local utilizando o posicionamento "Fixo" e garantir que aparece em todas as páginas através das condições de visualização. Além disso, ao definir uma ID CSS na parte superior de cada página (como "top") e ao ligar o botão a esta âncora (#top), os utilizadores podem voltar rapidamente ao topo da página ao clicar no botão.

Perguntas mais frequentes

1. Porque é que devo adicionar um botão "Percorrer até ao topo"?

Este botão evita que os utilizadores percorram constantemente a página, especialmente em páginas longas. Oferece-lhe uma forma rápida de voltar ao topo e torna o sítio mais fácil de navegar.

2. Posso adicionar mais efeitos de animação ao botão?

Claro! Os efeitos de movimento do Elementor permitem-lhe adicionar animações como saltar ou deslizar para tornar o botão mais apelativo.

3. Existem plugins que possam fazer isto?

Sim, vários plug-ins oferecem botões "Rolar para o topo". Mas adicioná-los através de código personalizado ajuda a manter o seu site mais rápido, evitando a necessidade de plug-ins adicionais.