Criação do cabeçalho do site

Ajuste o estilo do menu e de outros elementos que aparecem no topo de cada página do site.

Ultima atualização 20 de Dezembro de 2024

Cabeçalho do site é onde aparecem a navegação e o título ou logotipo. Posicionado no topo, o cabeçalho é o mesmo em todo o site e tem um papel importante na forma como os visitantes navegam e interagem com o conteúdo.

Este guia ensina como criar o cabeçalho do site e como mostrar mais recursos, como o ícone de carrinho de compras, ícones de redes sociais ou o botão de chamada para ação. O cabeçalho é o mesmo em todas as páginas do site.

Anotação

não é possível criar um cabeçalho específico para um página nem excluir elementos em determinadas páginas. Na versão 7.1, porém, é possível ocultar o cabeçalho em algumas páginas do site.

Version_7.1_site_header.png

Assista a um vídeo - Construa um cabeçalho

Crie um cabeçalho

Acessando o recurso

Nos sites da versão 7.0, o cabeçalho faz parte do template do site. Saiba mais na seção de recursos da versão 7.0 abaixo.

Dependendo do design escolhido, o cabeçalho já inclui o título do site, links de navegação ou outros elementos quando o site é criado.

Para alterar os links de navegação, adicione, edite ou apague páginas no painel "Páginas". Para reorganizar os links:

  1. Clique em Editar no canto superior esquerdo da prévia do site.
  2. Passe o cursor sobre o cabeçalho e clique em Editar cabeçalho do site.
  3. Clique nos links de navegação e depois no ícone de lápis.
  4. Clique e arraste os links de navegação para colocá-los na ordem de sua preferência.

A reorganização dos links aqui afeta os links no painel "Páginas".

Conforme cria o cabeçalho, você pode definir estilos em todo o site e escolher como cabeçalho aparecerá no computador e na versão móvel.

Defina o design geral dos cabeçalhos do site

Para definir o design dos cabeçalhos em todo o site:

  1. Clique em Editar no canto superior esquerdo da prévia do site.
  2. Passe o cursor sobre o cabeçalho e clique em Editar cabeçalho do site.
  3. Para editar o título ou adicionar a imagem do logotipo do seu site, clique no título ou no logotipo e depois clique no ícone de lápis. Os logotipos aparecem no lugar do título do site. Ao usar um logotipo, adicione também o título do site. Os buscadores usam o título nos resultados das buscas e nas abas do browser, a menos que você adicione um título separado para SEO.
  4. Ao terminar de editar o título e o logotipo do site, clique fora do editor para continuar editando o cabeçalho do site.
  5. Para adicionar ou ocultar um botão, os ícones de redes sociais, o ícone do carrinho de compras, o login da conta do cliente ou a opção de idioma, clique em Adicionar elementos e ative ou desative as opções. Para continuar editando o cabeçalho do site, clique fora do editor.
  6. Clique em Salvar para salvar as alterações e continuar editando; ou em Sair e depois Salvar para fechar o editor.

Defina o layout na versão para computador

Para definir como o cabeçalho aparece nos computadores:

  1. Clique em Editar no canto superior esquerdo da prévia do site.
  2. Passe o cursor sobre o cabeçalho e clique em Editar cabeçalho do site. Para confirmar que você está no modo desktop: no canto superior direito, clique no ícone Computador
  3. Para alterar o layout, clique em Editar design. Clique no layout atual para conferir todas as opções. Clique em um layout para ver a prévia no seu site.
  4. Para fixar a largura do conteúdo do cabeçalho, clique em Cheio ou Inserção.
  5. Use os controles para alterar o preenchimento e o espaçamento entre links, ícones de redes sociais e elementos.
  6. Escolha um dos efeitos a seguir; lembre-se de que as edições afetam a versão móvel e para computador:
    • Sombra projetada - ative a opção Sombra projetada para adicionar um efeito de sombra ao redor do cabeçalho. Use as configurações que aparecem para escolher a cor, o quanto ela se espalha e a distância. Também é possível adicionar um efeito de desfoque. 
    • Borda - Ative a opção Borda para adicionar uma borda ao redor do cabeçalho. Use as configurações que aparecem para escolher a cor, a posição e a espessura da linha.
  7. Para adicionar algum estilo no fundo do cabeçalho, clique em Editar design e depois na aba Cor. As alterações feitas aqui afetam a versão móvel e para computador. Saiba mais abaixo sobre as opções.
  8. Para manter o cabeçalho fixo no topo do site, clique na aba Design e ative a opção Posição fixa. Com o cabeçalho fixo, você pode deixar o estilo do cabeçalho fixo como Básico (para sempre aparecer no topo do site) ou Rolar para trás (aparece no topo do site ao rolar a tela). Dependendo do aparelho, o cabeçalho fixo se expande ou contrai ligeiramente durante a rolagem. As alterações aqui afetam tanto a versão móvel quanto para computador.

Defina o layout e os estilos na versão móvel

  1. Para mudar para a versão móvel: no canto superior direito da tela, clique no ícone Móvel. A prévia do site muda automaticamente para a versão móvel.
  2. Para alterar o layout, clique em Editar design. Clique no layout atual para conferir todas as opções. Clique em um layout para ver a prévia no seu site.
  3. Escolha um dos efeitos a seguir; lembre-se de que as edições afetam a versão móvel e para computador:
    • Sombra projetada - ative a opção Sombra projetada para adicionar um efeito de sombra ao redor do cabeçalho. Use as configurações que aparecem para escolher a cor, o quanto ela se espalha e a distância. Também é possível adicionar um efeito de desfoque. 
    • Borda - Ative a opção Borda para adicionar uma borda ao redor do cabeçalho. Use as configurações que aparecem para escolher a cor, a posição e a espessura da linha.
  4. Para manter o cabeçalho fixo no topo do site, clique na aba Design e ative a opção Posição fixa. Com o cabeçalho fixo, você pode deixar o estilo do cabeçalho fixo como Básico (para sempre aparecer no topo do site) ou Rolar para trás (aparece no topo do site ao rolar a tela). Dependendo do aparelho, o cabeçalho fixo se expande ou contrai ligeiramente durante a rolagem. As alterações aqui afetam tanto a versão móvel quanto para computador.
  5. Para adicionar algum estilo no fundo do cabeçalho, clique em Editar design e depois na aba Cor. As alterações feitas aqui afetam a versão móvel e para computador. Saiba mais abaixo sobre as opções.
  6. Para alterar como o menu aparece quando os links são expandidos, clique em Ver menu e depois em Editar design. Você pode fixar o alinhamento e o espaçamento dos links e escolher um esquema de cores. Para definir o link, o botão, o texto do botão e as cores de fundo específicos à versão móvel, use os ajustes em Sobreposição do menu.
  7. Para alterar a forma como o menu aparece quando o menu é recolhido, escolha um ícone Menu.
  8. Clique em Salvar para salvar as alterações e continuar editando; ou em Sair e depois Salvar para fechar o editor.

Dica

para deixar a versão móvel do seu site com um visual diferente, adicione ao cabeçalho uma imagem de logotipo separada. Saiba mais em Adição do logotipo ao site.

Para definir a fonte e o tamanho do título do site no celular:

  1. Abra Estilos do Site.
  2. Clique em Fontes e depois clique em Atribuir estilos.
  3. Clique em Título do site na versão móvel e depois nos menus suspensos para escolher o estilo e o tamanho da fonte.

Para mais informações, acesse Alterar fontes.

Estilos de fundo do cabeçalho

Acessando o recurso

Se o seu site estiver na versão 7.0, o fundo do cabeçalho depende do template. Passe para a seção de recursos da versão 7.0 (abaixo) para saber mais.

Você pode adicionar estilos ao fundo ao cabeçalho para dar ao cabeçalho um visual mais distinto do restante do conteúdo ou para ele combinar com o a identidade visual do site.

Dica

no computador, o plano de fundo da lista suspensa tema mesma cor do plano de fundo do cabeçalho.

Para adicionar um estilo de plano de fundo:

  1. Clique em Editar no canto superior esquerdo da prévia do site.
  2. Passe o cursor sobre o cabeçalho e clique em Editar cabeçalho do site.
  3. Clique em Editar design e depois na aba Cor.
  4. Selecione um estilo para o plano de fundo no menu suspenso (topo do editor). Escolha entre Cheio, Gradiente ou Adaptável. Saiba mais abaixo sobre cada opção.
  5. Dependendo do estilo escolhido, personalize as configurações do estilo de fundo, como cores, efeitos de desfoque e opacidade.
  6. Clique em Salvar para salvar as alterações e continuar editando; ou em Sair e depois Salvar para fechar o editor.

Opções de estilo

Escolha entre estas opções de estilo de plano de fundo:

  • Cheio - escolha um fundo de cor cheia. Você pode usar cores personalizadas ou a paleta do seu site; ou ainda combinar um dos esquemas de cores do seu site .
  • Gradiente - O cabeçalho sobrepõe a primeira seção da página. Escolha uma cor gradiente que desapareça no plano de fundo da primeira seção. Escolha as cores de fundo e de navegação da paleta de seu site ou escolha cores personalizadas.
  • Adaptável - deixe o plano de fundo transparente. O cabeçalho se sobrepõe à primeira seção da página e apresenta o fundo da primeira seção. Isso pode mudar de uma página para outra — vai depender de se a primeira seção usa estilos específicos da seção ou se tem uma imagem de fundo.

Lembre-se:

  • No plano de fundo Cheio, o cabeçalho se sobrepõe à primeira seção da página. Se a primeira seção tiver uma imagem ou vídeo de fundo, o cabeçalho cobrirá parte do fundo.
  • Quando o plano de fundo estiver definido como Adaptável ou Gradiente e a primeira seção da página for uma seção de layout automático, blog, eventos, galeria ou loja, o cabeçalho não será transparente sobre nenhuma imagem. Em vez disso, o cabeçalho exibe a cor de fundo da primeira seção.

Outras opções de estilo

Dependendo do efeito de plano de fundo escolhido, o editor também pode mostrar estas opções de estilo:

  • Opacidade - use o controle para alterar a transparência da cor.
  • Desfocar fundo - ative a opção Desfocar fundo para desfocar o conteúdo ao fundo. Os fundos desfocados ficam mais visíveis com a opacidade abaixo de 90%.

Anotação

alguns browsers, como o Firefox, não aceitam fundo desfocado.

Assista a um vídeo - Estilos de cabeçalho

Adicionar um botão a um cabeçalho

Adicionar um botão a uma imagem de cabeçalho coloca sua chamada à ação na frente e no centro, incentivando os visitantes a clicarem nele imediatamente. Suas opções dependem da versão do site.

Um botão de chamada à ação no cabeçalho do site é exibido em todo o site. Para adicionar um botão ao cabeçalho:

  1. Clique em Editar em uma página do site.
  2. Clique em Editar cabeçalho do site.
  3. Clique em Adicionar elementos.
  4. Ative a opção Botão.
  5. Clique fora do editor.

Para editar o texto, o link e o tipo do botão:

  1. Ao editar o cabeçalho do site, clique no botão e depois no ícone de lápis.
  2. Em Conteúdo, edite o texto e o link do botão.
  3. Para editar o tipo de botão, clique na aba Design. O botão usará os estilos escolhidos para esse tipo de botão.
  4. Clique em Salvar para salvar as alterações e continuar editando; ou em Sair e depois Salvar para fechar o editor.

Dependendo do layout escolhido para o cabeçalho em um computador, o botão pode ser agrupado com seus links de navegação ou separado deles. No celular, o botão sempre aparece abaixo dos links de navegação.

Para ajustar o estilo do botão:

Você pode adicionar botões ao cabeçalho do site nestas famílias de modelos:

Edite outros elementos do cabeçalho

Além do botão, você também pode adicionar ao cabeçalho links para as redes sociais, um carrinho, um login da conta e a seleção de idiomas.

Para editar cada um dos elementos de cada vez, clique no elemento desejado enquanto edita o cabeçalho do site. Em seguida, clique no ícone de lápis para acessar o editor desse elemento específico. Você pode editar:

  • Links para redes sociais - onde fica o link do ícone, o tamanho, a margem e a espessura da margem do ícone
  • Carrinho de compras - design, tamanho, margem e se aparecerá um zero quando vazio
  • Troca do idioma - o tamanho do ícone ou da bandeira, o formato da bandeira e qual bandeira mostrar. Você precisa de um serviço externo para usar esse elemento. Saiba mais em "Criando um site multi-idiomas com o Weglot".

Oculte o cabeçalho

Para chamar a atenção para o seu conteúdo ou incentivar os visitantes a realizar uma ação, você pode ocultar o cabeçalho em determinadas páginas.

Acessando o recurso

A omissão do cabeçalho só está disponível nas páginas de layout, inclusive de um site para membros. Páginas de coleção, como blog, loja, portfólio e eventos, não têm essa opção.

Para ocultar o cabeçalho:

  1. Abra o painel "Páginas".
  2. Passe o cursor sobre o título de uma página e clique em o ícone de engrenagem ao lado do título.
  3. Clique em Navegação na guia de configurações da página.
  4. Clique os botões para desativar a opção Mostrar cabeçalho.

Repita esses passos para cada página em que você deseja ocultar o cabeçalho. 

Recursos do cabeçalho na versão 7.0

Na versão 7.0, o cabeçalho do site ainda aparece em todas as páginas e inclui os mesmos elementos da versão 7.1, mas os estilo depende do template do site. Saiba mais sobre o cabeçalho do seu template no guia do template correspondente.

Alguns templates têm recursos especiais no cabeçalho. Use os links da tabela para saber mais:

Recurso

Disponibilidade

Cor do fundo

Disponível em alguns templates

Imagem ou vídeo do banner

Disponível em alguns templates

Área de blocos

Disponível em alguns templates

Informações comerciais

Disponível em alguns templates

Botões

Disponível em alguns templates

Cabeçalho fixo

Disponível em alguns templates

Lista suspensa Sempre disponível, mas aparece de acordo com o template
Logotipo

Sempre disponível, mas aparece de acordo com o template

Links de navegação principal

Sempre disponível, mas a exibição varia de acordo com o modelo

Sobreposição de navegação

Disponível na família de templates Skye (alguns sites na versão móvel têm uma sobreposição)

Barra de busca

Disponível em alguns templates

Navegação secundária

Disponível em alguns templates
Carrinho de compras Sempre disponível, mas alguns templates têm opções de estilo

Título do site

Sempre disponível, mas aparece de acordo com o template

Ícones de redes sociais

Disponível em alguns templates

Slogan

Disponível em alguns templates

Cabeçalho fixo na versão 7.0

Na versão 7.0, alguns templates aceitam cabeçalho fixo. A navegação fixa ou "presa" permanece na mesma posição no topo do browser enquanto você rola a página para baixo. A tabela abaixo mostra quais templates aceitam cabeçalho fixo e como eles aparecem no computador ou aparelho móvel.

  • Exceto onde indicado, os cabeçalhos fixos mostram todos os elementos de cabeçalho do seu site (como título do site e links do logotipo e na navegação).
  • Para preservar o espaço nas telas menores, a navegação não é fixa na versão móvel de vários templates. Em alguns casos, a navegação pode ser corrigida em aparelhos móveis maiores, como tablets.
Template Computador Versão móvel

Adirondack

No painel Estilos do Site, marque Sempre mostrar Navegação.

Se você rolar para baixo, o cabeçalho será recolhido, e o título do site substituirá o logotipo. Saiba mais.

Não fixo

Avenue

Não fixo

Não fixo

Aviator

Apenas links de navegação

No painel Estilos do Site, use o Layout de Página de Informações para selecionar tanto Offset ou Cartão de visita.

Não fixo

Bedford

Somente páginas índice

O cabeçalho reaparece em uma posição fixa após você rolar pela primeira seção.

Não fixo

Brine

Não fixo

Na versão móvel, a barra no topo pode ser fixa (Topo fixo). A barra na parte inferior é sempre fixa. Escolha o que aparece em cada uma.

Farro

Não fixo

Na versão móvel, a barra no topo pode ser fixa (Topo fixo). A barra na parte inferior é sempre fixa. Escolha o que aparece em cada uma.

Five

Não fixo

Não fixo

Flatiron

No painel Estilos do Site, selecione Posição do cabeçalho: Fixo.

Não fixo

Forte

Não fixo

Não fixo

Galapagos

Não fixo

Não fixo

Ishimoto

Não fixo

Não fixo

Momentum

Sempre fixo

Sempre fixo

Montauk

Não fixo Não fixo

Native

Não fixo Não fixo

Pacific

Somente links de navegação, e somente em Páginas de Índice definidas como páginas iniciais.

No painel Estilos do Site, selecione Navegação de rolagem do Índice: mostrar na rolagem. A navegação reaparece em uma posição fixa após você rolar pela primeira seção.

Não fixo

Skye

Sempre fixo

Pode ser transparente

Sempre fixo

Supply

Barra lateral, fixada (role a tela se o conteúdo não couber na tela do browser)

Não fixo

Tremont

Não fixo

Não fixo

Wells

Barra lateral, sempre fixa

Não fixo

Wexley

Não fixo

Não fixo

York

Não fixo

Na versão móvel, a barra pode ser fixa (posição da barra na versão móvel: topo fixo ou parte inferior fixa)

Cabeçalhos de página na versão 7.0

Na versão 7.0, alguns templates aceitam cabeçalhos de página - áreas com conteúdo específico da página que aparecem acima do conteúdo da página principal.

Há cabeçalhos de página disponíveis nestas famílias de templates:

  • Avenue
  • Brine (denominadas áreas de introdução)
  • Farro (denominadas áreas de introdução )
  • Five
  • Wexley
  • York

Para editar o cabeçalho da página:

  1. Passe o cursor sobre o topo da página e clique em Editar.
  2. Use blocos para adicionar conteúdo como texto e imagens.
  3. Clique em Salvar para publicar as alterações.

Os cabeçalhos de página são separados do conteúdo da página principal. Não é possível transferir blocos do cabeçalho da página para outras áreas de conteúdo na página.

Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.