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

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.

Atençã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.

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

Crie um cabeçalho

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.

Links de navegação

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

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 de fundo, o cabeçalho cobrirá parte da imagem.
• 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%.

Atençã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.

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.

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 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.