Adicione botões adesivos e um botão “Voltar ao topo” ao seu site do Website Builder

Quer melhorar a navegação do seu website? Experimente adicionar botões Sticky.

Os botões adesivos são botões que permanecem fixos em uma posição visível na tela enquanto os usuários navegam pelo seu site. Ao contrário dos botões padrão que ficam fora de visão enquanto você navega para baixo em uma página, os botões adesivos "adhereçam" a um local específico, garantindo que ações críticas, como "E-mail para nós", "Reserve" ou "Contate-nos", permaneçam acessíveis a qualquer momento.

No Website Builder, você pode ativar facilmente os botões Sticky. Basta ir para as configurações do seu modelo, ativar os botões e publicar seu site. Os botões e suas ações associadas ficarão visíveis no lado direito da tela em seu site publicado.

Você também pode adicionar um prático botão "Voltar ao topo" que leva os visitantes instantaneamente para o topo da página - não importa o quão longe eles roulassem para baixo.

Neste artigo, você encontrará instruções passo a passo sobre como adicionar esses botões ao seu site.


Passo 1 - Adicione seus dados de contato nas configurações do seu site

Antes de adicionar os botões ao seu site, certifique-se de que adicionou todos os seus principais detalhes de contato às configurações do seu site. Os botões recuperarão as informações necessárias daí, portanto, se quiser usar seus principais detalhes de contato e uma parte da informação estiver faltando, o botão correspondente não funcionará corretamente.

  1. Vá para o menu com as duas linhas horizontais no canto superior direito do editor.
  2. Clique em definições no menu suspenso.
  3. Se você quiser usar todos os botões, insira seu número de telefone, endereço de e-mail e localização (endereço). Se quiser conectar-se a uma página de reservas, mas ainda não adicionou uma, precisará ativá-la usando o bloco Reservas no menu à esquerda.
  4. Clique em Concluído.
A captura de tela mostra o editor do Website Builder. Uma seta vermelha aponta para o menu desmontado no canto superior direito e outra seta vermelha aponta para a opção 'Settings', que também tem uma linha vermelha abaixo dela.

Passo 2 - Vá para as configurações do modelo em seu Website Builder

  1. Vá para as definições de modelos no canto inferior direito do editor.
  2. Clique em Coloque os botões no menu flutuante que aparece.
A captura de tela mostra o editor do Website Builder. Um círculo vermelho com o número '1' aponta para o botão 'Definições de modelo' e um círculo vermelho com o número '2' marca a guia 'Todas as teclas' no menu aberto de Definições de modelo.

Passo 3 - Habilitar botões adesivos

  1. Deslize o botão Mostrar botões adesivos para ativar os botões.
  2. Todos os botões com as informações anexadas serão exibidos por padrão. Se você quiser excluir um botão do seu site, clique no ícone de três pontos e selecione Ocultar. O botão também não será exibido se você não adicionou informações sobre ele nas configurações do seu site.
  3. Para alterar o texto do botão, clique no ícone de três pontos e selecione Editar. Em seguida, você verá um campo de texto onde poderá editar o texto do botão.
  4. Se você quiser usar informações diferentes para um botão, como um número de telefone personalizado em vez de o que está nas configurações do seu site, você também pode adicionar isso. Clique no ícone de três pontos ao lado de um botão e selecione Editar. Em seguida, escolha a opção Personalizada na janela seguinte e insira as informações desejadas.
  5. Os botões serão exibidos verticamente no lado direito do seu site. Se quiser alterar a ordem em que aparecem, pode arrastar e soltar os botões no menu flutuante.

Uma vez adicionados, os botões não vão aparecer no editor. No entanto, pode vê-los em ação na visualização.

Ecrã mostrando o menu 'Coloque botões'. Uma lupa aumenta no menu aberto de três pontos, mostrando as opções 'Editar' e 'Ocultar'.

Passo 4 - Ajuste o aspeto dos seus botões pegajosos (opcional)

Você também pode alterar a posição e o estilo de seus botões Sticky.

  1. Clique na guia A aparência no menu flutuante.
  2. Selecione a posição dos botões (centro direito, canto superior direito).
  3. Selecione o estilo dos botões. As opções aqui vão variar dependendo se está ou não a utilizar um tema de cores no seu website.
  4. Deslize o botão, Incluir texto se quiser que o texto do botão seja exibido como parte do ícone quando os visitantes passam o mouse sobre um botão.
A captura de tela mostra o menu 'Aparência' aberto. Uma seta vermelha aponta para 'Posição' e outra aponta para 'Estilo'.

Passo 5 - Habilite o botão Voltar ao topo

Você pode ativar o botão Voltar ao topo no mesmo lugar que os botões Cole.

  1. Vá para as definições de modelos no canto inferior direito do editor.
  2. Selecione Voltar para o topo no menu flutuante.
  3. Deslize o botão Adicionar Back to top alternativo ativado.
  4. Escolha o estilo que você deseja usar para o botão.
  5. Vá para o botão Pré-visualização para ver o botão em ação. Se você rolar para baixo um pouco, ele aparecerá no canto inferior direito como um botão redondo com uma seta para cima dentro.

Não é possível adicionar texto do botão ou alterar a posição do botão Voltar ao topo.

A captura de tela mostra o menu 'Definições de modelo' aberto. 'Voltar para cima' é sublinhado em vermelho e uma seta vermelha também aponta para ele.

Passo 6 - Salve e publique

Guarde e publique o seu website para que os botões apareçam no seu website ativo.

Ecrã mostrando o site no modo de pré-visualização. Uma seta vermelha aponta para os botões Cole na direita.

Artigos Relacionados:

Este artigo foi útil?

Não tá conseguindo achar o que procura?

Iniciar uma conversa

É o jeito mais rápido de entrar em contato, todos os dias do ano.