Ajuste o estilo dos elementos que aparecem no topo de cada página do seu site.

O cabeçalho é onde são exibidos o título ou o logotipo do seu site, o menu de navegação e outros recursos. Normalmente, o cabeçalho mantém a mesma aparência em todo o site e desempenha um papel importante na forma como os visitantes navegam e interagem com o seu conteúdo.

Esses recursos estão disponíveis para cabeçalhos de site na versão 7.1. Se o seu site estiver na versão 7.0, o cabeçalho é específico do template do seu site.

Vídeos em cabeçalhos do site

Este vídeo mostra como editar e estilizar o cabeçalho do seu site.

Altere o título ou o logotipo do site

Ao criar seu site, pode ser que tenha dado um título para ele. Se adicionar um logotipo, ele substituirá o título do seu site no cabeçalho; mas, de qualquer forma, você deve adicionar um título para o 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.

Adicione, edite ou exclua links de navegação no cabeçalho

O menu de navegação no cabeçalho do seu site reflete as páginas que você adicionou ao painel Páginas. Para alterar os links de navegação:

• Adicione páginas à sua navegação
• Edite títulos de páginas
• Apagar páginas

Adicione um botão ao cabeçalho

Adicionar um botão a um cabeçalho coloca sua chamada para ação em destaque, incentivando os visitantes a clicarem nele imediatamente. Dependendo do layout do seu cabeçalho, o botão pode estar agrupado com links de navegação ou separado deles. No celular, o botão sempre aparece abaixo dos links de navegação.

Para adicionar um botão ao seu cabeçalho:

1. Abra o painel "Páginas".
2. Clique em Editar no canto superior esquerdo da prévia do site.
3. Passe o cursor sobre o cabeçalho e clique em Editar cabeçalho do site.
4. Clique em Adicionar elementos.
5. Ative a opção Botão.

Edite o botão do cabeçalho

Para definir o link de texto e o estilo do botão:

1. Abra o painel "Páginas".
2. Clique em Editar no canto superior esquerdo da prévia do site.
3. Passe o cursor sobre o cabeçalho e clique em Editar cabeçalho do site.
4. Clique no botão do cabeçalho e, em seguida, clique em Editar Design.
5. Em Conteúdo, edite o texto e o link do botão.
6. Clique na aba Design e, em seguida, escolha Primário, Secundário ou Terciário para definir o estilo do botão.

O formato do seu cabeçalho segue o estilo dos seus botões.

Defina a fonte do botão do cabeçalho

Ao definir o estilo do botão como Secundário ou Terciário, o texto no botão do cabeçalho seguirá o estilo dos botões.

Para aplicar o estilo Primário à fonte de um botão de cabeçalho:

1. Abra os estilos do site.
2. Clique em > ao lado de Fontes.
3. Clique em Alocar estilos.
4. Clique no botão do cabeçalho e faça as alterações.

Defina a cor do botão do cabeçalho

A forma como se altera a cor do botão do cabeçalho depende do estilo do plano de fundo do cabeçalho.

Se o estilo do plano de fundo do seu cabeçalho for:

• Sólido - Cor - A cor do botão segue a paleta de cores padrão do seu site.
• Sólido - Tema - A cor do botão segue a paleta de cores selecionada.
• Gradiente - A cor do botão segue a paleta de cores padrão do seu site.
• Adaptativo - A cor do botão segue a paleta de cores da seção superior de cada página. Personalize a cor do botão para cada paleta de cores utilizada em suas seções.

Adicione um login da conta, links para redes sociais, um carrinho ou um seletor de idioma ao seu cabeçalho

Para adicionar outros elementos ao seu cabeçalho, como um login de conta para clientes, links para redes sociais, um carrinho de compras ou um seletor de idioma: 

1. Abra o painel "Páginas".
2. Clique em Editar no canto superior esquerdo da prévia do site.
3. Passe o cursor sobre o cabeçalho e clique em Editar cabeçalho do site.
4. Clique em Adicionar elementos.
5. Ative o botão ao lado dos recursos que deseja ativar.

Personalize as funcionalidades do cabeçalho

Você pode personalizar o design dos seus links para redes sociais e ícone do carrinho. Se o seu site utiliza Weglot, também é possível personalizar o seletor de idioma.

Para editar essas funcionalidades:

1. Abra o painel "Páginas".
2. Clique em Editar no canto superior esquerdo da prévia do site.
3. Passe o cursor sobre o cabeçalho e clique em Editar cabeçalho do site.
4. Clique no recurso que deseja editar, em seguida, clique no ícone de lápis.
5. Use as configurações para fazer alterações no design. As opções variam de acordo com a funcionalidade.
6. Clique em Salvar.

Adicione efeitos de design ao seu cabeçalho

Ao editar o design do cabeçalho do seu site, é possível adicionar efeitos visuais para que tenha uma aparência única ou alinhada à sua marca. Estes efeitos se aplicam às versões para desktop e móvel do cabeçalho.

Para adicionar efeitos de cabeçalho:

1. Abra o painel "Páginas".
2. Clique em Editar no canto superior esquerdo da visualização do site, passe o cursor sobre o cabeçalho e clique em Editar cabeçalho do site.
3. Clique em Editar design.
4. Na seção Efeitos, adicione uma sombra projetada, adicione uma margem e defina um estilo de cabeçalho fixo.

Adicione uma sombra projetada ao seu cabeçalho

Para criar um efeito de sombra ao redor do cabeçalho:

1. Ao editar o design do cabeçalho, clique em Sombra projetada. Isso permite uma sombra projetada imediatamente.
2. Escolha entre os presets Suave ou Forte. Você pode personalizar os presets depois de selecioná-los.
3. Para escolher e personalizar a cor, clique em Cor.
4. Para alterar a aparência da sombra projetada, use os controles deslizantes Dispersão, Distância e Desfoque. Recomendamos que experimente diferentes combinações para encontrar a ideal para você.
5. Para remover a sombra projetada, clique em Remover.

Adicione uma margem ao redor do cabeçalho

Para criar uma margem ao redor do cabeçalho:

1. Ao editar o design do cabeçalho, clique em Margem. Isso permite a criação imediata de uma margem.
2. Para escolher e personalizar a cor, clique em Cor.
3. Clique em S, M ou L para definir a espessura da linha, ou clique em … para definir uma espessura personalizada.
4. Defina a posição da margem. Ela pode ser exibida em todos os lados do cabeçalho, apenas na parte superior, apenas na parte inferior ou tanto na parte superior quanto na inferior.
5. Para remover a margem, clique em Remover.

Ative um cabeçalho fixo

Dependendo do aparelho, os cabeçalhos fixos de qualquer estilo podem expandir ou contrair ligeiramente ao rolar a página. Para manter o cabeçalho fixo no topo do seu site enquanto os visitantes rolam a página:

1. Ao editar o design do cabeçalho, ative a opção posição fixa.
2. Defina o estilo de cabeçalho fixo como Básico (o cabeçalho sempre aparece no topo do navegador) ou Rolar para trás (o cabeçalho só aparece no topo do navegador quando o visitante rola para cima).

Personalize o menu de navegação do aparelho móvel

Na visualização para aparelhos móveis, a navegação do cabeçalho será recolhida e transformada em um menu expansível.

Para estilizar o menu de navegação móvel:

1. Abra o painel "Páginas".
2. Clique em Editar no canto superior esquerdo da visualização do site, passe o cursor sobre o cabeçalho e clique em Editar cabeçalho do site.
3. No canto superior direito, clique no ícone Tela na versão móvel.
4. Clique no menu de navegação móvel e, em seguida, clique no ícone de lápis.
5. Selecione um estilo de ícone de menu.
6. Clique em S, M, ou L para definir a espessura das linhas do ícone, ou clique em … para definir uma espessura personalizada.

Altere os efeitos e a cor do fundo do cabeçalho

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. Se a navegação tiver menus suspensos, o plano de fundo do menu suspenso no computador terá a mesma cor do plano de fundo do cabeçalho.

Para alterar o 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 Sólido, Gradiente ou Adaptativo. 
5. Dependendo do estilo escolhido, personalize a cor, o efeito de desfoque e a opacidade do estilo de fundo. Alguns navegadores podem não exibir efeitos de desfoque.

Plano de fundo sólido do cabeçalho

Para definir o plano de fundo do cabeçalho com uma cor sólida, escolha o estilo de fundo sólido. Escolha uma cor personalizada, use a paleta do seu site ou use uma cor da paleta de cores do seu site.

Plano de fundo do cabeçalho em gradiente

Para que o fundo do cabeçalho se misture gradualmente com o fundo da primeira seção de cada página, escolha o estilo gradiente. É possível personalizar o fundo gradiente e as cores de navegação.

Plano de fundo do cabeçalho adaptativo

Para dar ao cabeçalho uma aparência que varia de página para página, escolha o estilo adaptativo para torná-lo transparente. O fundo da primeira seção de cada página é exibido atrás do cabeçalho.

Oculte o cabeçalho do site

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.

Páginas de coleção, como páginas de blog e de loja, 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.
5. Repita esses passos para cada página em que você deseja ocultar o cabeçalho.

Posso alterar a aparência do meu cabeçalho para aparelhos móveis?

Você pode personalizar o layout, a altura e a largura do cabeçalho para aparelhos móveis independentemente da visualização para desktop. Outras alterações no design afetam tanto a visualização para desktop quanto a visualização para aparelhos móveis.

Para definir estilos distintos para a visualização no computador ou no celular:

1. Clique em Editar no canto superior esquerdo da visualização do site. No canto superior direito, clique no ícone Modo desktop ou no ícone Modo móvel, dependendo de qual você deseja editar.
2. Passe o cursor sobre o cabeçalho e clique em Editar cabeçalho do site.
3. Clique em Editar design. 
4. Clique no menu suspenso Layout e selecione um layout para alterar a disposição do cabeçalho. Use os controles deslizantes para alterar o espaçamento entre links e outros elementos.
5. Use o controle deslizante do cabeçalho para alterar a altura do cabeçalho.
6. Clique em Completo ou Inserção para definir a largura do cabeçalho.
7. Clique em Salvar.