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.

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

Não é possível criar cabeçalhos específicos de página ou remover elementos em determinadas páginas.

Assista a este vídeo

Crie um cabeçalho

Nos sites da versão 7.0, o cabeçalho faz parte do template do site. Para saber mais, confira a 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.

Dica: para alterar os links de navegação, adicione, edite, exclua ou reorganize páginas no painel Páginas.

Conforme cria seu cabeçalho, você pode definir estilos em todo o site e escolher a aparência do cabeçalho em computadores e dispositivos móveis.

Definir estilos globais

Para definir os estilos de cabeçalho para todo o site:

1. Clique em Editar no canto superior esquerdo da prévia do site.
2. Mova o cursor sobre o cabeçalho e clique em Editar cabeçalho do site. Isso abre a guia Global. 
3. Para editar o título do site ou adicionar um logotipo, clique em Título do site e logotipo. O logotipo aparece no lugar do título do site. Mesmo que você use um logotipo, adicione também um título ao site. Os motores de busca usam o título nos resultados de busca e nas abas do browser, a menos que você adicione um título SEO separado.
4. Para adicionar ou ocultar um botão, ícones de redes sociais, ícone de carrinho de compras ou um login de contas de clientes, clique em Elementos.
5. Para adicionar estilos de plano de fundo de cabeçalho, clique em Estilo. Saiba mais sobre as opções abaixo. 
6. Para manter o cabeçalho fixo na parte superior do seu site, ative a opção Posição fixa. Quando o cabeçalho for fixo, defina o estilo de cabeçalho fixo como Básico (sempre aparece na parte superior do site) ou Role para trás (aparece na parte superior do site ao rolar para cima). Cabeçalhos fixos de qualquer tipo podem se expandir ou contrair ligeiramente ao rolar, dependendo do dispositivo.
7. Clique fora do editor e depois clique em Salvar para salvar as alterações e continuar editando; ou clique em Sair e depois Salvar para fechar o editor.

Definir layouts de computador e dispositivos móveis

Para definir como o cabeçalho aparece em computadores e em dispositivos móveis:

1. Clique em Editar no canto superior esquerdo da prévia do site.
2. Mova o cursor sobre o cabeçalho e clique em Editar cabeçalho do site. Clique no ícone Computador. 
3. Para alterar o layout, clique em Layout do cabeçalho. Role para ver todas as opções de layout e clique em uma para vê-la no seu site.
4. Para definir a largura do conteúdo do cabeçalho, clique em Completo ou Inserção. 
5. Use os controles deslizantes para alterar a margem e o espaçamento entre os elementos.
6. Clique no ícone Móvel. A visualização do seu site muda automaticamente para a visualização móvel. 
7. Para alterar o layout, clique em Layout do cabeçalho. Role para ver todas as opções de layout e clique em uma para vê-la no seu site.
8. Para alterar a forma como o menu aparece quando os links são expandidos, clique em Menu de sobreposição. Você também pode definir o espaçamento de links e escolher um tema de cores. Use os ajustes em Sobreposição de menu para definir o link específico do celular, o botão e as cores de fundo.  
9. Para alterar a forma como o menu aparece quando o menu é recolhido, escolha um ícone Menu.
10. Clique fora do editor e depois clique em Salvar para salvar as alterações e continuar editando; ou clique 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 móvel e, em seguida, clique 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 de plano de fundo ao cabeçalho para dar ao cabeçalho uma aparência mais distinta do restante do conteúdo ou ajudá-lo a se misturar com o restante da identidade visual do seu site. 

Dica: os menus suspensos da pasta em um computador correspondem à cor de fundo do cabeçalho. 

Para adicionar um estilo de plano de fundo:

1. Abra as configurações globais do cabeçalho. 
2. Clique em Estilo.
3. Clique no menu suspenso na parte superior do editor para escolher um plano de fundo. Escolha entre Sólido, Gradiente, Tema ou Dinâmico. Saiba mais sobre cada opção abaixo. 
4. Dependendo do estilo escolhido, personalize as outras configurações que aparecem, que podem incluir cores, um efeito de desfoque, bordas ou uma sombra projetada. 
5. Clique fora do editor e depois clique em Salvar para salvar as alterações e continuar editando; ou clique em Sair e depois Salvar para fechar o editor.

Opções de estilo

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

• Sólido - Escolha um fundo de cor sólida. Escolha cores de fundo e de navegação na paleta do seu site ou escolha cores personalizadas. 
• Gradiente - Escolha uma cor de gradiente que desbota do escuro para o claro na parte superior do cabeçalho. Escolha cores de fundo e de navegação na paleta do seu site ou escolha cores personalizadas. 
• Tema - Combine a cor de fundo com um dos temas de cores do seu site. 
• Dinâmico - Torne o plano de fundo transparente. O cabeçalho sobrepõe a primeira seção da página e exibe a cor de fundo ou a imagem da primeira seção. Isso pode mudar de página para página, dependendo se a primeira seção usa estilos específicos de seção ou tem uma imagem de fundo.

Lembre-se:

• Quando o plano de fundo é definido como Sólido ou Tema, o cabeçalho sobrepõe a primeira seção da página. Se a primeira seção tiver uma imagem de fundo, o cabeçalho cobrirá parte da imagem.
• O cabeçalho será sólido se a primeira seção for um blog, galeria, loja ou seção de eventos.
• Quando o plano de fundo estiver definido como Dinâmico e a primeira seção da página for uma seção de galeria, o cabeçalho não ficará transparente sobre as imagens da galeria. Em vez disso, o cabeçalho exibe a cor de fundo da seção da galeria.

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 deslizante para alterar a transparência da cor. 
• Desfoque de fundo - ative a opção Desfocar fundo para desfocar o conteúdo do fundo. Fundo borrados são mais perceptíveis quando a opacidade fica abaixo de 90%. Alguns browsers, como o Firefox, não aceitam fundos desfocados.
• 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.
• 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; e adicione um efeito de desfoque.

Assista a este vídeo

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.

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 de fundo	Disponível em alguns templates
Imagem ou vídeo de 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
Pastas	Sempre disponível, mas a exibição varia de acordo com o modelo
Logotipo	Sempre disponível, mas a exibição varia de acordo com o template
Links de navegação principal	Sempre disponível, mas a exibição varia de acordo com o template
Sobreposição de navegação	Disponível na família de templates Skye (alguns sites móveis têm uma sobreposição)
Barra de pesquisa	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 a exibição varia 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, cabeçalhos fixos exibem todos os elementos de cabeçalho do seu site (como título do site ou links de logotipo e 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	Dispositivo 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. Mais informações.	Não fixado
Avenue	Não fixado	Não fixado
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 fixado
Bedford	Somente páginas índice O cabeçalho reaparece em uma posição fixa após você rolar pela primeira seção.	Não fixado
Brine	Não fixado	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 fixado	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 fixado	Não fixado
Flatiron	No painel Estilos do Site, selecione Posição do cabeçalho: Fixo.	Não fixado
Forte	Não fixado	Não fixado
Galapagos	Não fixado	Não fixado
Ishimoto	Não fixado	Não fixado
Momentum	Sempre fixado	Sempre fixado
Montauk	Não fixado	Não fixado
Native	Não fixado	Não fixado
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 fixado
Skye	Sempre fixado Pode ser transparente	Sempre fixado
Supply	Barra lateral, fixada (role a tela se o conteúdo não couber na tela do browser)	Não fixado
Tremont	Não fixado	Não fixado
Wells	Barra lateral, sempre fixa	Não fixado
Wexley	Não fixado	Não fixado
York	Não fixado	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 suportam cabeçalhos de página. Cabeçalhos de página são áreas de conteúdo específicas 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 mouse sobre a parte superior da página e clique em Editar.
2. Use blocos para adicionar conteúdo como texto e imagens.
3. Clique em Save (Salvar) para publicar suas alterações.

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