OpenByt - A sua melhor fonte de conhecimento gratuito sobre WordPress

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

tomsqum

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."
  1. Selecione “Single Page” from the dropdown menu as the template type. Name it something like “Botão Deslocar para o topo“.
  1. Clique "Criar modelo" para abrir o editor do Elementor.
  1. Saia da biblioteca: Click the “X” at the top-right corner to close the template library.

Adicione e personalize o botão:

  1. Arraste o botão "Botão" da barra lateral para o modelo.
  1. Altere o texto do botão para "Deslocar para o topo" ou utilize um ícone de seta para cima.
  1. Aceda à galeria de ícones e selecione a seta para cima ícone.
  1. Selecione um botão diferente tipo para apagar o texto.
  1. 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 element’s borders.
  1. 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.
  1. Escolha um esquema de cores contrastantes
    • Use colors that contrast with your website’s background. For example, if your background is light, opt for a bold color like blue, orange, or green.
    • Para a cor do ícone, certifique-se de que é branco ou outra cor que se destaque do fundo do botão.
  1. 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.
  1. 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.

https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-18-14-19-07.mp4

Fixe o botão no sítio:

  1. Na secção "Avançado", no separador "Posicionamento,"Escolha "Fixo."
  1. 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.
  1. Clique "Publicar". Set the display conditions to “Todas as páginas.” This will ensure the button is displayed on every page, providing a consistent user experience.

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.
  1. Selecione o elemento superior:
    • Choose an element near the top of the page where you want users to be directed when they click the “Scroll to Top” button. This is typically the cabeçalho secção, um títuloou o primeira secção da página.
    • Clique no elemento para o selecionar.
  1. Aceda ao separador Avançadas:
    • Com o elemento superior selecionado, navegue até ao Avançado no painel Elementor, à esquerda.
  2. 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).
  1. 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:

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).
  1. Continue a ler para ver os resultados.
https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-18-16-08-50.mp4

Conclusão

Adding a “Scroll to Top” button in Elementor is a straightforward way to improve user experience on longer pages by allowing easy navigation back to the top. By creating a global button template, you ensure a consistent appearance across your entire site. The process includes designing the button, setting custom styles like rounded corners and shadow effects, and optionally adding animations like a pulse effect for added visibility.

Once the button is designed, you can fix it in place using the “Fixed” positioning and ensure it appears on all pages through display conditions. Additionally, by setting a CSS ID at the top of each page (such as “top”) and linking the button to this anchor (#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.

Sair da versão móvel