O que é o botão "deslocar para o topo"?

O botão "voltar ao topo" é um elemento comum da interface do utilizador num sítio Web ou aplicação. Os utilizadores podem regressar rapidamente ao topo de uma página Web ou conteúdo clicando simplesmente no botão, sem terem de se deslocar manualmente.

Como proprietário de um sítio Web, pretende proporcionar aos seus visitantes a melhor experiência de utilizador possível. Uma forma de o conseguir é adicionar um botão "voltar ao topo" ao seu sítio Web. As páginas longas podem ser demasiado pesadas para os utilizadores, e deslocar-se para cima para regressar pode ser demorado, especialmente em dispositivos móveis. Ao adicionar um botão de voltar ao topo, pode fornecer aos utilizadores uma forma conveniente e eficiente de navegar no seu sítio Web.

Porque é que preciso de um botão "deslocar para o topo"?

A adição de um botão de voltar ao topo não só melhora a experiência do utilizador, como também pode ter impacto no envolvimento do sítio Web. É mais provável que os visitantes permaneçam no seu sítio durante mais tempo se puderem navegar facilmente no seu sítio. Isto aumenta as visualizações de páginas, reduz as taxas de rejeição e melhora as conversões. Adicionar um botão de voltar ao topo é também uma excelente forma de melhorar a experiência geral do utilizador (UX) do seu sítio Web. Mostra que foi dedicado tempo a considerar as necessidades do utilizador e a fornecer uma solução para tornar a sua experiência de navegação mais agradável.

Preparar para criar um botão "scroll to top" no Elementor

Antes de começar a criar o botão de deslocação para trás para o topo, há algumas coisas que tem de fazer para o preparar:

1. Um sítio Web WordPress::

O Elementor é um plugin que funciona com o WordPress e, se ainda não tiver um sítio Web, terá de utilizar o Criar WordPressUm.

2. Instalar e ativar o Elementor::

O Elementor é um construtor de sítios Web que cria páginas personalizadas utilizando uma interface de arrastar e largar, facilitando a criação de sítios Web de aspeto profissional sem quaisquer conhecimentos de programação.

3. Familiaridade com o Elementor::

Se é novo no Elementor, é uma boa ideia passar algum tempo a explorar a interface e a familiarizar-se com as diferentes funcionalidades.tutoriaisPode ajudá-lo a começar.

4. conceito de design::

Esclareça o aspeto que pretende dar ao botão de retrocesso para o topo. Existem muitos estilos e designs diferentes por onde escolher, pelo que é importante ter uma ideia clara do que se pretende antes de começar a criar o botão.

Passos para criar um botão "Scroll to top" no Elementor

Passo 1: Selecionar os Widgets Elementor certos

A escolha do widget correto é fundamental para criar um botão de deslocação de volta ao topo no Elementor. O Elementor fornece várias opções de widget que podem ser utilizadas para criar um botão de volta ao topo:

1. Widget de botãoEste é o widget mais comum utilizado para criar botões de voltar ao topo. Pode alterar o tamanho, a forma e a cor do botão e adicionar texto. O widget de botão tem uma opção para ativar a funcionalidade de deslocação para o topo, que leva automaticamente o utilizador para o topo da página quando clica no botão.
2. Widget de íconesWidget de ícones: Este widget é perfeito para aqueles que querem um design minimalista. Utilizando o widget de ícones, pode escolher entre uma variedade de ícones e personalizar o seu tamanho, cor e posição. No entanto, este widget não tem uma funcionalidade integrada de deslocação para cima, pelo que será necessário adicionar código personalizado para o fazer funcionar.

Passo 2: Conceber o botão "Percorrer até ao topo

O design do botão é crucial, pois determina se o visitante vai reparar nele e utilizá-lo:

1. Escolher o ícone corretoUm ícone simples de seta para cima é uma escolha comum, mas podem ser utilizados outros ícones. Certifique-se de que o ícone é suficientemente grande para ser visível, mas não tão grande que ocupe demasiado espaço na página.
2. Escolher a cor certaCor do botão: A cor do botão deve contrastar com o fundo do sítio Web. As cores vivas, como o vermelho ou o laranja, são boas opções, mas também podem ser utilizadas cores que correspondam ao esquema de cores do sítio Web.
3. Escolher o tamanho corretoTamanho do botão: O botão deve ser suficientemente grande para ser visível, mas não tão grande que ocupe demasiado espaço na página. Um tamanho de cerca de 50 píxeis x 50 píxeis é um bom ponto de partida, mas pode ser ajustado conforme necessário.
4. Conceção e apresentaçãoO design e a disposição dos botões devem corresponder ao design geral do seu sítio Web. Se o seu sítio tiver um aspeto moderno, utilize botões com um design elegante; se o seu sítio tiver um aspeto mais tradicional, utilize botões com um design mais clássico.

Etapa 3: Fixar o botão na parte inferior

Depois de criar o botão Back to Top no Elementor, é altura de o configurar no seu sítio:

1. Clique no separador Avançadas do widget.
2. No separador Avançadas, selecione a opção Posição e defina-a como Fixa.
3. Ajustar a posição do ícone para o local pretendido, por exemplo, canto inferior esquerdo ou direito.

Passo 4: Adicionar a funcionalidade Percorrer até ao topo ao botão

Agora que o botão foi criado, é altura de adicionar a funcionalidade de deslocação de volta ao topo:

1. Adiciona o ID CSS "scroll-to-top" ao elemento no topo da página.
2. Adicionar as opções de ligação dos widgets de ícones #scroll-to-top.

Como ativar a deslocação suave na secção de saltos

Para proporcionar uma melhor experiência ao utilizador, é possível ativar a deslocação suave:

1. Adicione o seguinte código CSS ao CSS personalizado do tema:

html {
    comportamento de deslocação: suave;
}

Isto dará um efeito de deslocação mais suave em todas as secções de salto.

Resumo:

O botão "scroll back to top" é uma ferramenta importante para melhorar a experiência do utilizador no seu sítio Web. Ao criar este botão no Elementor, os utilizadores podem regressar rapidamente ao topo da página, especialmente em páginas longas ou dispositivos móveis. Este artigo explica em pormenor como selecionar o widget certo, conceber e estruturar o botão no Elementor e fixá-lo na parte inferior da página. Ao mesmo tempo, a experiência de navegação do utilizador pode ser melhorada adicionando uma funcionalidade de deslocamento suave.