Elemento de trilha de navegação

O que é o elemento Breadcrumb no GemPages?

A breadcrumb é um elemento de navegação que ajuda os usuários a entender sua localização atual dentro de um site ou aplicativo. Ele normalmente aparece como uma trilha de links clicáveis ​​no topo de uma página da web ou interface, mostrando a hierarquia de páginas ou seções pelas quais o usuário navegou para chegar à página atual.

Ao trabalhar com páginas de subcategorias No Shopify (por exemplo, "Sapatos Masculinos" em "Sapatos"), as trilhas de navegação se tornam ainda mais importantes. Elas permitem que os clientes retornem rapidamente à coleção principal ou naveguem entre subcategorias irmãs sem precisar navegar manualmente pelos menus.

Usar trilhas de navegação para páginas de subcategorias também ajuda os mecanismos de busca a entender melhor a estrutura do site, o que pode melhorar o SEO ao sinalizar claramente a relação entre as categorias principais e suas subcategorias.

Como adicionar e configurar o elemento Breadcrumb?

Iremos rever todas as configurações do elemento Breadcrumb em Editor GemPages versão 7 na seção abaixo.

Passo 1: Acesse Painel GemPages > Preferencias > Configurações da loja. Debaixo de Outros ajustes seção, ative “Inclua o identificador da coleção no caminho da URL para produtos acessados ​​de uma coleção."

Passo 2: Volte para da PÁGINAS seção e localize sua página de destino para abrir o editor. 

Passo 3: Na barra lateral esquerda, digite Breadcrumb na barra de pesquisa e arraste e solte o elemento no topo da página.

Configurar a guia Configurações

O processo de Configurações A guia do elemento Breadcrumb ajuda você a ajustar a aparência, o layout e o comportamento interativo da trilha de navegação.

Ícone Separador

Personalize o separador entre os itens de navegação (por exemplo, /, >, →):

• ícone: Escolha um ícone ou personagem. Você também pode enviar seu próprio ícone .SVG.
• Cor: Selecione a cor do ícone via HEX ou seletor de cores.
• Dimensões:: Ajuste o tamanho do ícone usando os botões +/–.

Estilo de Texto

Estilize o texto de navegação com controles tipográficos completos:

Espaçamento, tamanho e plano de fundo dos itens

Gap = Vão: Ajuste o espaçamento horizontal entre os itens de navegação arrastando o controle deslizante ou inserindo um valor específico manualmente.

Acolchoamento: Ajuste o espaçamento interno do contêiner de migalhas de pão (superior, direito, inferior, esquerdo) para criar espaço ou alinhar o elemento com seu layout.

Cor de fundo: Defina uma cor de fundo para a barra de navegação usando o seletor de cores ou inserindo um código HEX para controle preciso.

Shape

Você pode dar ao recipiente de migalhas de pão uma aparência diferenciada:

• Fronteira: Defina cor, espessura e estilo do traço.
• Canto: Defina border-radius para arredondar cantos (por exemplo, 8px).
• Sombra: Adicione sombras sutis ou ousadas e modifique o tipo, a direção, a cor, a distância, o desfoque e o tamanho.

Efeito

• Flutuar: Habilite estilos de foco quando os usuários interagirem com links de navegação.
• Ativo: Destaque o item de trilha de navegação atual (ativo) de forma diferente dos demais.

Opções de exibição

Ocultar página ativa:

• Sim: Ocultar a página atual (último item de trilha de navegação, por exemplo, Happy Dog Snack).
• Não: Mostrar a trilha de navegação completa.

Alinhar

Este parâmetro permite que você determine como o elemento é posicionado na sua página. Você tem três opções: alinhado à esquerda, centralizado e alinhado à 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.

Você também pode encontrar dicas mais úteis e tutoriais em vídeo em Academia GemPages.

Perguntas Frequentes

1. Como os breadcrumbs ajudam nas páginas de subcategorias?

As trilhas de navegação mostram claramente a hierarquia das categorias principais para as subcategorias, melhorando a navegação do usuário e o SEO. Isso ajuda os clientes a saber exatamente onde estão e navegar facilmente entre as seções.

2. Posso personalizar os breadcrumbs de forma diferente para páginas de subcategoria?

Sim. Você pode aplicar diferentes estilos, separadores ou cores de fundo para trilhas de navegação em páginas de subcategorias para destacá-las.

3. O que acontece se minha página de subcategoria não aparecer na trilha de navegação?

Isso pode acontecer se a URL do produto não incluir o identificador da coleção/subcategoria. Certifique-se de que a configuração do Shopify "Incluir o identificador da coleção no caminho da URL" esteja habilitada.

4. Os breadcrumbs melhoram o SEO para páginas de subcategorias?

Sim. Eles ajudam os mecanismos de busca a entender a relação entre suas categorias principais e subcategorias, o que pode melhorar a indexação e a estrutura de links internos.