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 como fica no template Thorne, parte da família Brine:

thorne_site_styles.gif

Altere a fonte e o tamanho

Para alterar a fonte do menu de navegação, clique no ícone v ao lado do nome dos ajustes para abrir o menu suspenso. Veja na imagem abaixo (o nome dos ajustes pode variar).

navigation_font_options.jpg

Daqui, você pode alterar:

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

Se precisar de 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: alguns templates oferecem cores extras que podem aparecer quando o visitante passa o cursor em um link ou clica nele.

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

Alguns templates oferecem opções extras aos links de navegação, dependendo se foram clicados (o "estado" ou "fase" deles). Como os ajustes variam de acordo com o template, procure por 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.

Se precisar de ajuda com um modelo, acesse o guia do template ou a lista de ajustes de Estilos do Site.

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

A maioria dos aparelhos móveis oculta a navegação do site atrás de um ícone de menu ou de um link. Aparelhos móveis maiores, como tablets, podem mostrar o estilo desktop. Saiba mais em Ícones do menu de navegação.

Veja como a Navegação principal aparece nos templates das seguintes famílias:

Template Layout

Adirondack

Horizontal, superior ao centro

Avenue

Horizontal, superior esquerda/centro/direita

Aviator

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

Bedford

Horizontal, superior direita

Brine

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

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

Farro

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é

Montauk

Horizontal, superior esquerda/centro/direita

Native

Horizontal, superior ao centro

Pacific

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

Skye

Vertical, dentro de uma sobreposição

Supply

Vertical, barra lateral à esquerda

Tremont

Horizontal, superior direita/esquerda

Wells

Vertical, barra lateral à esquerda

Wexley

Horizontal, superior esquerda/centro/direita

York

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

Esse artigo foi útil?
Usuários que acharam isso útil: 53 de 250