Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Navegação de estilo

A navegação do seu site é um conjunto de links que direciona os visitantes para o conteúdo do seu site. A navegação normalmente é exibida na parte superior do seu site, embora alguns versão 7.0templates suportem navegação em rodapés ou barras laterais.

Todos os sites incluem opções para alterar a fonte, a cor e o tamanho dos links da navegação. Este guia explica como personalizar sua navegação em qualquer site.

Antes de começar

Encontre os ajustes de estilo de navegação

A maneira como você altera o estilo de navegação depende da versão do seu site.

Os estilos de link de navegação são definidos principalmente pelo cabeçalho do site. No editor de cabeçalho, você pode alterar:

  • O layout de navegação
  • As cores de navegação
  • A margem em torno do texto
  • Se a navegação é fixa
  • A aparência da navegação em computadores em comparação com dispositivos móveis

Você também pode usar opções em Estilos do Site para alterar fontes e tamanhos. Para saber mais, consulte as seções abaixo.

Cada família de templates tem seus próprios estilos do site, portanto, não há uma única regra sobre como atualizar seus links de navegação. Use estas dicas para encontrar as opções de estilo aceitas pelo seu template:

  • Para abrir Estilos do Site no Menu Inicial, clique em Design e, em seguida, Estilos do Site.
  • Role entre os ajustes à esquerda e procure os ajustes relacionados. Os ajustes geralmente incluem a palavra Navegação.
  • Você também pode mover o cursor sobre a navegação do seu site na visualização do site à direita. Quando uma caixa de marcador azul aparecer ao redor dela, 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

A maneira como você altera sua fonte de navegação depende da versão do seu site.

Por padrão, sua fonte de navegação corresponde à fonte em todo o site. Para definir um tipo de fonte ou tamanho diferente para sua navegação:

  1. Ao editar uma página, clique no ícone do pincel e, em seguida, clique em Fontes .
  2. Em Estilos gerais do texto, clique em Atribuir estilos.
  3. Clique em Navegação do site.
  4. Para alterar a fonte, clique em Estilo e, em seguida, escolha Personalizado. Escolha uma nova família de fontes, peso, estilo e outros detalhes. Clique em Salvar para aplicar suas alterações.
  5. Para alterar o tamanho, clique em Tamanho e escolha um tamanho de Parágrafo predefinido ou escolha Personalizado. Para definir um tamanho personalizado, use o controle deslizante ou insira manualmente um novo valor rem. Clique em Salvar para aplicar as alterações.
Dica: para saber como a versão 7.1 usa valores rem para tamanhos de fonte, visite Alterar fontes.

Para alterar a fonte de navegação, clique no ícone v ao lado do nome do ajuste para abrir o menu suspenso. Aqui é possível 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

A maneira como você altera a cor de navegação depende da versão do seu site.

Para mudar as cores dos links de navegação, altere o tema de cores da seção de cabeçalho. Também é possível alterar o tema de cores da sobreposição do cabeçalho da versão móvel.

Depois de definir um tema de cores, você pode personalizar ainda mais o tema definindo cores específicas para os links de navegação.

Para alterar as cores do link de navegação, clique em um ajuste de cor em Estilos do site. Escolha uma nova cor clicando em uma cor na parte superior do seletor e, em seguida, selecionando um tom dentro do quadrado. Você também pode inserir um valor específico no campo de texto. Para obter mais ajuda, visite Mudar as cores ou o Guia de templates do seu site.

Alterar o layout e o espaçamento

A maneira como você altera o layout de navegação depende da versão do seu site.

Para alterar a posição e o espaçamento dos seus links de navegação, edite o cabeçalho do seu site. Você também pode personalizar a aparência e posicionamento do ícone do menu em dispositivos móveis.

Em alguns templates, é possível alterar a posição dos links. Em Estilos do Site, procure por ajustes chamados Posição de navegação, Alinhamento de navegação ou algo semelhante. Veja na tabela abaixo as posições disponíveis no seu template.

Dica: alguns templates aceitam navegação fixa ou “presa”, que permanece na mesma posição na parte superior do navegador enquanto você rola a página para baixo.

Exibição de navegação por template

O layout de navegação do seu site depende do template do seu site e é exibido de forma diferente em dispositivos móveis. Dispositivos móveis maiores, como tablets, podem exibir os estilos de computador.

Veja como a navegação principal é exibida em computadores nestas famílias de templates:

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, na barra de navegação

Montauk

Horizontal, superior esquerda/centro/direita

Native

Horizontal, superior ao centro

Pacific

Horizontal, superior central, 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 direito/esquerdo

Wells

Vertical, barra lateral à esquerda

Wexley

Horizontal, superior esquerda/centro/direita

York

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

Alterar o espaçamento entre links

Para alterar o espaço em torno dos links de navegação, procure por ajustes nos estilos de site que alteram seu cabeçalho, banner ou navegação. Enquanto os ajustes variam de acordo com o template, os ajustes de espaçamento de links geralmente incluem palavras como preenchimento, espaçamento ou largura.

Opções ativas e de pairar (versão 7.0)

Na versão 7.1, não é possível definir cores diferentes para links de navegação ativa e foco. Os links ativos são sempre sublinhados.

Em alguns templates, há opções adicionais para links de navegação, dependendo se foram clicados. Isso às vezes é chamado de “estado” ou “fase”. Embora os ajustes variem 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.

Se precisar de ajuda com um template, confira o guia desse template ou a lista de ajustes dos 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

Em dispositivos móveis, os links de navegação principal colapsam atrás de um link de Menu ou ícone ☰ (também conhecido como ícone de "hambúrguer"). Um visitante pode clicar ou tocar nele para revelar o menu completo. Isso ajuda com a usabilidade e mantém seu site amigável para dispositivos móveis.

O link ou ícone também pode aparecer nos navegadores de computador, dependendo do tamanho do navegador do visitante, do número de links no menu ou do comprimento dos títulos de navegação.

A maneira como você estiliza sua navegação móvel depende da versão do seu site.

Para estilizar a sua navegação móvel, edite o cabeçalho do seu site. No editor de cabeçalho, clique no botão Dispositivo móvel para definir estilos específicos para dispositivos móveis, incluindo o layout e o tipo de ícone de menu.

Lembre-se:

  • O ícone de menu sempre aparece no dispositivo móvel, mesmo que todas as páginas estejam na seção Não Vinculada.
  • Não é possível alterar o tamanho da fonte de navegação móvel.
  • Não é possível fazer com que o ícone do menu apareça sempre em um computador.

Em muitos casos, a navegação móvel herda estilos da tela do computador para manter sua marca consistente. Alguns templates têm opções avançadas de estilos móveis, que oferecem um grau mais fino de controle. Para saber mais, acesse o guia do template.

Para explorar quais ajustes afetam sua navegação móvel, abra sua navegação na visualização do telefone antes de abrir os Estilos do Site:

  1. Mude a visualização do dispositivo para o telefone.
  2. Clique no link de navegação (geralmente um ☰) para que a navegação móvel apareça.
  3. No Menu Inicial, clique em Design e depois em Estilos do site. A navegação móvel permanecerá aberta.
Dica: caso não veja a navegação no na versão móvel, veja se você não deixou a cor do fundo ou do cabeçalho igual à do texto da navegação. Na versão móvel, os links podem aparecer sobre essa cor.

Ícone de menu ou design de link por template

Veja como o ícone ☰ ou o link Menu é exibido nestas famílias de templates:

Família de template

Ícone ou link (sempre aparece em dispositivos móveis)

É exibido em computadores...

Adirondack

☰ ícone

  • Em navegadores estreitos (640 px)
  • Para sempre mostrar o ícone nos computadores, marque Sempre mostrar navegação em Estilo do Site.

Avenue

Link do menu

  • Em navegadores estreitos (640 px)

Aviator

Link do menu

  • Em navegadores estreitos (640 px)

Bedford

☰ ícone

  • Automaticamente quando os links não se encaixam
  • Em navegadores estreitos (640 px)

Brine

☰ ícone. Altere o estilo com a seção do ícone do menu Móvel: nos estilos do site.

  • Em navegadores estreitos (640 px por padrão. Altere isso com o ajuste de ponto de interrupção móvel.)

Farro

☰ ícone

  • Em navegadores estreitos (640 px)

Five

☰ ícone

  • Em navegadores estreitos (640 px)

Flatiron

Link do menu

  • Em navegadores estreitos (640 px)

Forte

☰ ícone

  • Em navegadores estreitos (768 px)

Galapagos

☰ ícone

  • Em navegadores estreitos (724 px)

Ishimoto

Link do menu

  • Em navegadores estreitos (800 px)

Momentum

☰ ícone

  • Em navegadores estreitos (736 px)

Montauk

Link do menu

  • Em navegadores estreitos (640 px)

Native

Link do menu

  • Em navegadores estreitos (640 px)

Pacific

☰ ícone

  • Em navegadores estreitos (768 px)
  • Para sempre mostrar o ícone em computadores, selecione Sempre usar sobreposição nav em Estilos do Site.

Skye

☰ ícone

  • Sempre exibe

Supply

☰ ícone

  • Em navegadores estreitos (1024 px)

Tremont

☰ ícone

  • Em navegadores estreitos (640 px)
  • Automaticamente quando os links não se encaixam
  • Para sempre mostrar o ícone em computadores, selecione Estilo de navegação: ícone em Estilos do Site..

Wells

Link do menu

  • Em navegadores estreitos (800 px)

Wexley

Link do menu

  • Em navegadores estreitos (640 px)

York

☰ ícone

  • Em navegadores estreitos (768 px)

Ícones de navegação móvel vazios

Em alguns templates, o ícone sempre aparece no celular, mesmo que todas as suas páginas estejam na seção Não vinculada.

É possível ocultar o ícone de menu nessas famílias de templates:

  • Família Brine
  • Família Farro

Vá para o Menu Inicial, clique em Design e, em seguida, clique em Estilos do Site. Role até a seção do ícone do menu Móvel: e defina o ajuste de posição do ícone Menu como Ocultar.

Nessas famílias de templates, não há uma maneira integrada de ocultar o ícone de navegação móvel:

  • Bedford
  • Forte
  • Galapagos
  • Montauk
  • Wells
  • York

Dica: você pode ocultar o ícone de navegação móvel adicionando código personalizado. Para saber mais, visite esta publicação no Squarespace Forum.

Tenha em mente que nosso suporte não cobre modificações no código personalizado. Por isso, não podemos ajudar na configuração ou na resolução de problemas de soluções baseadas em código.

Ocultar o menu recolhido em computadores

Para evitar que o link ou o ícone apareça nos computadores:

  • Mantenha os títulos de navegação curtos.
  • Reduza o número de links no menu. Você pode usar pastas para agrupar páginas relacionadas em menus suspensos ou, se o site estiver na versão 7.0, mover páginas para navegação secundária ou rodapé.
  • Se o seu site estiver na versão 7.0, mude para um template diferente. Clique no botão Versão 7.0 acima e, em seguida, explore as opções do Exibir em computadores... .
Este artigo foi útil?
Utilizadores que acharam útil: 81 de 523