Elemento Fixo de Volta ao Topo

O que é o Sticky Back to Top?

O processo de Fixo Voltar ao topo O elemento é um botão flutuante projetado para melhorar a experiência de navegação em seu site. Quando os visitantes rolam a página até o final, este botão permite que eles para voltar ao topo com um único clique instantaneamente.

Este elemento é particularmente útil para páginas longas com conteúdo extenso, pois ajuda a reduzir o esforço do usuário e melhora o engajamento geral.

Como adicionar o elemento Voltar ao topo?

Siga os passos abaixo para arrastar e soltar um elemento fixo "voltar ao topo" na sua página usando o GemPages Editor v7:

• Faça login no seu Administrador do Shopify > Construtor GemPages app> PÁGINAS.
• Clique na página onde deseja adicionar o elemento fixo "voltar ao topo" para acessar o editor.
• Na barra lateral esquerda, procure esse elemento e arraste-o e solte-o na posição desejada na sua página.

• Localize o elemento para abrir suas configurações para maior personalização.

Configurar a guia Configurações

Sob o Configurações aba, você pode configurar a visibilidade do ícone como preferir:

Dimensões:

Largura e Altura: Defina as dimensões do botão para garantir que ele seja perceptível, mas não intrusivo.

Acolchoamento: Ajuste o espaçamento interno dentro do botão para melhor alinhamento de texto ou ícones.

Por exemplo, definimos a Largura = 100% (Completa) e a Altura = Automática. O botão Fixo Voltar ao Topo exibirá a tela inteira. 

Contexto

Defina uma cor ou imagem sólida/gradiente como plano de fundo.

• Cor: Digite o código de cor, escolha na lista “cores recentes”/“sugeridas para você” ou use o seletor de cores para definir a cor de fundo.

• Imagem: Carregue uma nova imagem ou escolha na biblioteca para definir como plano de fundo.

Shape

Personalize o formato usando:

• Fronteira: Selecione os estilos de borda (linha/traço/ponto) e altere a cor e a espessura da borda para alinhá-la ao design da sua marca.

• Canto: Ajuste o raio do canto para melhor visibilidade.

• Sombra: Aplique efeitos de sombra para dar profundidade.

ícone

Alterne a visibilidade do ícone. Você pode desativá-lo para usar apenas texto.

Se ligado:

• Escolha o ícone: Selecione um ícone da biblioteca que corresponda ao tema do seu site ou carregue um ícone personalizado (somente arquivo SVG).
• Posição: Decida se o botão aparece no esquerda or certo lado da tela.
• Espaçamento: Ajuste a distância entre o botão e as bordas da tela para um posicionamento preciso.

Texto

Se você incluir texto no botão, poderá estilizá-lo de acordo com sua marca:

• Estilos: Selecione entre estilos de título para destaque.
• fonte: Escolha uma família de fontes que combine com a tipografia da sua loja.
• Dimensões:: Ajuste o tamanho do texto para visibilidade.
• Negrito/Itálico/Sublinhado: Adicione ênfase a esses estilos de texto.
• Peso da fonte: Controle a espessura do texto.
• Altura da linha: Ajuste o espaçamento entre linhas para texto com várias linhas.
• Espaçamento entre Letras: Ajuste o espaço entre caracteres individuais para facilitar a leitura.
• Transformam: Formatar texto para maiúsculas, minúsculas, ou capitalizar cada palavra.

Efeito

Personalize a aparência do botão em estados de foco:

• Cor de fundo: Escolha cores distintas para cada estado para melhorar o feedback visual.
• Imagem: O fundo do botão muda para uma imagem ao passar o mouse.
• Cor do texto: Defina uma cor de texto legível que complemente o fundo.
• Fronteira: Defina a largura, o estilo e a cor da borda para contornar o botão.
• Corner: Ajuste o arredondamento dos cantos dos botões para um visual moderno ou clássico.
• Shadow: Adicione um efeito de sombra para criar profundidade e fazer o botão se destacar.

de vidrio

Como este é um botão de retorno ao topo, a ação após o clique é definida como Vá para Soutien por padrão. Portanto, você pode ignorar isso de vidrio seção.

Alinhar

Se a largura do botão = Ajustar conteúdo (Automático), escolha como o botão será alinhado:

• Esquerdo: Alinhe o botão à borda esquerda.
• Centralização de: Centralize o botão dentro do botão.
• Certo: Alinhe o botão com a borda direita.

Configurar a guia Avançado

Para uma personalização mais avançada, navegue até a guia Avançado e siga as instruções em Este artigo.