Nota: Embora nossos guias mais populares tenham sido traduzidos para o português, alguns guias estão disponíveis apenas em inglês.
Navegação de estilo

A navegação do seu site é um conjunto de links que direcionam os visitantes para o conteúdo do seu site. Normalmente, a navegação é exibida no topo do seu site, embora alguns templates ofereçam a navegação no rodapé ou na barra lateral.

Todos os templates incluem opções de Estilos do Site para alterar a fonte, cor e tamanho dos links da sua navegação, e muitos templates oferecem opções adicionais. Este guia explica como personalizar sua navegação.

nav-links.png

Antes de começar

Encontre os ajustes de navegação do Estilo do Site

Toda família de templates tem seu próprio Estilo do Site, portanto, não há uma única regra para atualizar os links de navegação. Use essas dicas e veja as opções de estilo oferecidas pelo seu template:

  • Para abrir o Estilos do Site a partir do Menu Inicial, clique em Design e depois em Estilos do Site.
  • Role entre os ajustes à esquerda e busque por ajustes relacionados. Os ajustes geralmente incluem a palavra Navegação.
  • Você também pode pairar o cursor sobre links de navegação do seu site na visualização do site à direita. Quando caixas de destaque azuis aparecem ao redor delas, clique em qualquer link de navegação. Isso ajuda a filtrar ajustes que não afetam os links de navegação. Quando terminar, clique em Mostrar tudo para voltar à exibição principal.

Veja um exemplo de como isso aparece no template Thorne, parte da família Brine:

thorne_site_styles.gif

Altere a fonte e o tamanho

Para alterar a fonte dos seus menus de navegação, clique no ícone de v ao lado dos nomes de ajustes para abrir o menu suspenso. Veja na imagem abaixo (seu nome de ajuste pode ser outro). 

navigation_font_options.jpg

Daqui, você pode alterar:

  • Nomes de fontes
  • Estilo
  • Tamanho
  • Altura da Linha
  • Espaçamento entre as letras

Para mais ajuda, acesse Como alterar fontes

Alteração de cor

Para alterar as cores dos links, clique em um ajuste de cor. Escolha uma nova cor clicando em uma cor na parte superior do seletor, depois selecione uma sombra dentro do quadrado. Você também pode inserir um valor específico na caixa de texto. Para mais ajuda, acesse Como alterar cores.

Dica: em alguns templates, existem cores adicionais que podem ser exibidas quando um visitante paira sobre ou clica em um link

Alteração de posição

Em alguns templates, é possível alterar a posição dos links. Por exemplo, você pode movê-los do centro para a esquerda.

Em Estilos do Site, procure por ajustes chamados Posição de navegação, Alinhamento de navegação ou algo semelhante. Para ver quais posições estão disponíveis em seu template, acesse a tabela de Exibição de navegação por template abaixo.

Segue um exemplo de visualização nos Estilos do Site:

five_-_navigation_style_options.jpg

Dica: na família Brine, procure as seções Cabeçalho: Navegação PrimáriaCabeçalho: Navegação Secundária.

Alteração do espaçamento entre e ao redor de links

Para alterar o espaçamento ao redor de links de navegação, busque ajustes em Estilos do Site que ajustam o cabeçalho, banner ou navegação. Enquanto os ajustes variam de acordo com o template, ajustes de espaçamento de links normalmente incluem palavras como essas:

  • Padding (Espaçamento)
  • Espaçamento
  • Largura

Segue um exemplo dessas opções nos Estilos do Site:

avenue_sizes_and_values.jpg

Opções de ativo e de pairar

Em alguns templates, existem opções adicionais para links de navegação, dependendo se foram clicados (seu "estado" ou "fase"). Enquanto os ajustes variam de acordo com o template, procure estas palavras: 

  • Pairar - o link muda quando um visitante paira sobre ele.
  • Ativo - quando um visitante visita uma página em sua navegação, o link muda de estilo.
Dica: links de navegação externos não exibem estilos ativos, mesmo se conectarem a uma página em seu site.

Navegação móvel

Na maioria dos templates, menus de navegação ficam ocultados atrás de um ícone de menu quando visualizados em um dispositivo móvel. Isso facilita a usabilidade e mantém seu site navegável em dispositivos móveis.

Em muitos casos, a navegação móvel herda estilos do site desktop. Isso ajuda a manter a consistência de sua identidade visual. Alguns templates têm opções avançadas de estilos móveis que oferecem mais controle. Para ver as opções de estilos móveis do seu site, acesse o guia de Estrutura e estilo do seu template.

Para conhecer quais ajustes afetam sua navegação móvel, abra sua navegação na visualização de smartphone antes de abrir o Estilos do Site. Desta forma, você pode ver as mudanças enquanto são implementadas.

  1. Altere o Visualização por dispositivo para smartphone.
  2. Clique no link de navegação (geralmente um ☰) para exibir a navegação móvel.
  3. No Menu Inicial, clique em Design e depois em Estilos do Site. A navegação móvel permanecerá aberta.
Obs.: caso não esteja vendo a navegação no modo dispositivo móvel, certifique-se de que não definiu sua cor de fundo ou de cabeçalho para a mesma cor que do seu texto de navegação. Os links podem ser exibidos sobre esta cor no celular.

Navegação fixa

A navegação fixa ou "pegajosa" permanece na mesma posição na parte superior do navegador, enquanto você rola a página para baixo. A função é aceita em alguns templates.

Exibição de navegação por template

Veja como a Navegação Principal é exibida em cada template. Os templates são agrupados por família.

Obs.: a maioria dos dispositivos móveis ocultam a navegação do site atrás de um ícone de menu ou link. Dispositivos móveis maiores, como tablets, podem exibir os estilos desktop. Para saber mais, acesse Ícones do menu de navegação.

Template

Layout

Adirondack

Horizontal, superior ao centro

Avenue

Horizontal, superior esquerda/centro/direita

Família Aviator

Aubrey, Aviator

Vertical, superior esquerda (cartão de visita/offset); ou horizontal, superior ao centro (pôster)

Família Bedford

Anya, Bedford, Bryant, Hayden

Horizontal, superior direita

Família Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Horizontal, superior esquerda/centro/direita, pode ser ocultado

No painel de Páginas, chama-se Navegação Primária.

Família Farro

Farro, Haute

Horizontal, superior esquerda/centro/direita, pode ser ocultado

Five

Vertical, na barra lateral (Posição superior de navegação: Nenhuma); ou horizontal superior esquerda/centro/direita (acima do banner, abaixo do banner)

Flatiron

Horizontal, superior esquerda

Forte

Horizontal, superior direita

Galapagos

Horizontal, superior ao centro

Ishimoto

Horizontal, superior esquerda/centro/direita

Momentum

Horizontal, no rodapé

Família Montauk

Julia, Kent, Montauk, Om

Horizontal, superior esquerda/centro/direita

Native

Horizontal, superior ao centro

Família Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Horizontal, superior ao centro, pode ser dividido em torno do título do site.

Família Skye

Foundry, Indigo, Ready, Tudor, Skye

Vertical, dentro de uma sobreposição

Supply

Vertical, barra lateral à esquerda

Família Tremont

Camino, Carson, Henson, Tremont

Horizontal, superior direita/esquerda

Wells

Vertical, barra lateral à esquerda

Wexley

Horizontal, superior esquerda/centro/direita

Família York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Horizontal, superior esquerda/centro/direita, pode ser ocultado

 

Esse artigo foi útil?
Usuários que acharam isso útil: 51 de 236