Quer guiar seus visitantes diretamente para uma parte específica da sua página, como detalhes do produto, perguntas frequentes ou um formulário de contato, com apenas um clique? É exatamente isso que você precisa. links de âncora são para.
Neste guia, você aprenderá como criar links de rolagem suave em GemPages Versão 7, usando botões, imagens ou elementos de texto para rolar para qualquer seção da sua página — sem necessidade de codificação.
O que é um link de âncora?
An link de âncora (também chamado de “link de rolagem”) permite que você envie visitantes para uma seção específica da mesma página — sem recarregar a página ou forçar os usuários a rolar manualmente.
O GemPages torna essa funcionalidade fácil de configurar, permitindo que você vincule qualquer elemento clicável (como um botão ou título) a um ID da seção na página.
Antes de começar: Obtenha o ID da seção
Para criar um link de âncora, primeiro você precisa do ID da seção do destino para o qual você deseja que os usuários rolem a tela.
Como encontrar o ID da seção:
- Passe o mouse sobre a seção que você deseja vincular no Editor.
- Clique com o botão direito do mouse na seção.
- Escolha “Classe de cópia” No menu suspenso.
- Você terá uma aula como .gp0XsMH_MS. Para convertê-lo em um ID, basta substituir o ponto (.) com uma hash (#).
Exemplo: .gp0XsMH_MS → #gp0XsMH_MS
Você usará esta ID de seção ao configurar o link.
Como criar links de âncora no GemPages
No GemPages, você pode criar links de âncora de duas maneiras simples:
- Utilizando um botão ou uma imagem: Você pode transformar um botão, imagem ou banner principal em um link clicável que leva os visitantes a uma seção específica na mesma página. Isso é ideal quando você deseja uma ação clara, como "Ver detalhes do produto", "Acessar as perguntas frequentes" ou "Fale conosco".
- Usando texto (texto âncora): Você também pode adicionar links de âncora diretamente ao texto dentro de títulos ou blocos de textoQuando os visitantes clicam no texto, a página rola até a seção desejada. Essa opção funciona bem para páginas longas, layouts com sumário ou links de navegação sutis.
Os passos para cada método são explicados abaixo:
Opção 1: Criar um link âncora usando um botão ou imagem
Siga estas etapas para criar um botão ou imagem em que os usuários possam clicar para rolar para baixo até uma parte específica da sua página. Estas instruções se aplicam ao elemento Button, mas também podem ser usadas para os elementos Hero Banner e Image.
Passo 1: Acesse Administração do Shopify > Aplicativos e selecione Construtor GemPages para acessar Painel GemPages. Navegue até a seção Páginas e escolha seu modelo preferido para acessar o Editor.
Passo 2: Arraste um Botão elemento na sua página.
Passo 3: Clique no elemento do botão para revelar a configuração na barra lateral esquerda. Ative o botão Link.
Passo 4: Selecionar Após clicar em ação: Escolha uma ação que será acionada quando o link for clicado:
- Abrir página: Abra outra página/URL.
- Vá para: Role até uma seção específica na página.
- Abrir pop-up: Abra um pop-up específico.
- Enviar email: Envie um e-mail para um endereço de e-mail específico.
- Fazer chamada telefônica: Realize uma chamada telefônica enquanto navega no celular ou tablet.
Neste caso, escolheremos Vá para.
Passo 5: Cole o ID da seção Você copiou anteriormente ou selecione um destino da lista.
Passo 6: Acertar o azul Economize botão. Em seguida, pressione Economize e Publicar para conferir o resultado na página ao vivo.
Agora, seu botão rola suavemente até a seção quando clicado.
Opção 2: Criar um link âncora usando texto (texto âncora)
Se preferir usar links de texto em vez de botões ou imagens, você pode criar links de âncora diretamente dentro dos elementos de texto.
Etapa 1: No Painel GemPages, abra seu modelo e digite o editor.
Etapa 2: No editor, arraste um elemento baseado em texto para sua página, por exemplo, um Elemento de título.
Etapa 3: Selecione o texto onde deseja adicionar um link de âncora, acionando o painel de texto embutido para personalização adicional.
Etapa 4: Clique no ícone da corrente para revelar uma URL personalizada campo.
Etapa 5: Cole o ID da seção do destino no campo e clique em Link para este URL.
Etapa 6: Economize e Publicar a página para verificar o resultado na sua página ativa.
Perguntas Frequentes
1. Posso criar um link de âncora diretamente para um elemento (por exemplo, um botão ou imagem)?
Atualmente, os links de âncora no GemPages funcionam apenas com seções or Linhas, não com elementos individuais.
Se quiser vincular diretamente a um elemento, coloque-o dentro de uma Linha. Em seguida, copie a classe da Linha (e converta-a em um ID) para usar como destino de rolagem.
2. Por que meu link de âncora não rola para o elemento correto?
Na maioria das vezes, isso ocorre porque o elemento não está dentro de uma Seção ou Linha. Certifique-se de que o elemento de destino esteja encapsulado dentro de uma Linha e use o ID da Seção dessa Linha para uma rolagem suave.
3. Posso usar links âncora para pop-ups ou URLs externas?
Não. Os links de âncora são projetados apenas para rolagem dentro da mesma página. Para ações como abrir um pop-up ou criar um link para uma página externa, você deve usar as respectivas opções no menu "Ação após o clique".
4. Posso fazer um botão rolar para o final da minha página?
Obrigado por seus comentários