Personalize a fonte, a cor e o tamanho dos links de navegação no seu site.
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 de navegação. Este guia explica como personalizar sua navegação em qualquer site.
Antes de começar
- Para acrescentar links à navegação, adicione páginas no painel Páginas (as páginas na seção Não vinculadas não aparecerão).
- Altere o texto de um link, atualizando o Título de navegação nas Configurações de página.
- Para alterar a ordem dos links no menu, arraste e solte páginas no painel Páginas.
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
- O espaçamento do link de navegação
- A margem em torno do texto
- Se a navegação for corrigida
- A aparência da navegação em computadores em comparação com dispositivos móveis
Você também pode usar opções dos estilos do site para alterar fontes e tamanhos. Saiba mais nas 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 os estilos do site, abra o painel Design e clique em 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 passar o cursor sobre a navegação do site na visualização do site à direita. Quando uma caixa de marcador azul aparecer ao redor dela, clique num link de navegação. Isso filtra ajustes que não afetam os links de navegação. Ao terminar, clique em Mostrar tudo para voltar à exibição principal.
Veja como fica no template Thorne, parte da família Brine:
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:
- Ao editar uma página, clique no ícone do pincel e, em seguida, clique em Fontes .
- Em Estilos gerais do texto, clique em Atribuir estilos.
- Clique em Navegação do site.
- 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.
- 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
O modo de alterar a cor da navegação depende da versão do site e do estilo do cabeçalho.
Cheio e gradiente | Temático e dinâmico |
|
|
Também é possível alterar o tema de cores da sobreposição do cabeçalho da versão móvel.
Para alterar as cores do link de navegação, clique em um ajuste de cor nos estilos do site. Para escolher outra cor, clique numa cor no topo do seletor e, em seguida, selecione um tom dentro do quadrado. Você também pode informar um valor específico no campo de texto. Saiba mais em Mudando as cores ou no 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 links de navegação, edite como o cabeçalho do site aparece nos computadores. Você também pode personalizar a aparência e o posicionamento do ícone do menu em dispositivos móveis.
Em alguns modelos, você pode alterar a posição dos links. Nos estilos do site, procure por ajustes chamados Posição de navegação, Alinhamento de navegação ou algo semelhante. Para saber as posições disponíveis em seu template, consulte a tabela abaixo.
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.
Alguns templates oferecem mais opções 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.
Para obter ajuda com seu template, acesse o guia de templates.
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:
- Os botões de cabeçalho sempre aparecem com os links de navegação atrás do link Menu ou do ícone ☰.
- 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 sempre apareça em um computador.
- Para remover o ícone de menu do cabeçalho, certifique-se de que todas as suas páginas estejam na seção Não vinculadase desative todos os elementos do cabeçalho, exceto o carrinho de compras. Habilitar o carrinho não fará com que o ícone do menu apareça.
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:
- Mude a visualização do dispositivo para o telefone.
- Clique no link de navegação (geralmente um ☰) para que a navegação móvel apareça.
- No Menu Inicial, clique em Site, depois em Design e por último 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 |
|
Avenue |
Link do menu |
|
Aviator |
Link do menu |
|
Bedford |
☰ ícone |
|
Brine |
☰ ícone. Altere o estilo com a seção do ícone do menu Móvel: nos estilos do site. |
|
Farro |
☰ ícone |
|
Five |
☰ ícone |
|
Flatiron |
Link do menu |
|
Forte |
☰ ícone |
|
Galapagos |
☰ ícone |
|
Ishimoto |
Link do menu |
|
Momentum |
☰ ícone |
|
Montauk |
Link do menu |
|
Native |
Link do menu |
|
Pacific |
☰ ícone |
|
Skye |
☰ ícone |
|
Supply |
☰ ícone |
|
Tremont |
☰ ícone |
|
Wells |
Link do menu |
|
Wexley |
Link do menu |
|
York |
☰ ícone |
|
Í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
Abra o painel Design e clique em Estilos do site. Role até a seção Versão móvel: ícone do menu e defina o ajuste Posição do Ícone do 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... .