Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Criação do cabeçalho 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 recursos extras, 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 um cabeçalho específico para uma página.

Version_7.1_site_header.png

Assista a este vídeo

Crie um cabeçalho

Se o seu site estiver na versão 7.0, o cabeçalho fará parte do template do site. Pule para a seção de recursos da versão 7.0 abaixo para saber mais. 

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 comprasou um login de Contas de Cliente, clique em Elementos.
  5. Para alterar as cores do cabeçalho, clique em Cores.
  6. Para manter o cabeçalho fixo na parte superior do seu site, ative a opção Posição fixa. Quando o cabeçalho estiver fixo, defina o Estilo de cabeçalho fixo como Básico (sempre aparece na parte superior do site) ou Rolar para trás (aparece na parte superior do site ao rolar para cima). 
  7. Clique em qualquer lugar fora do editor, passe o mouse sobre Concluído e clique em Salvar

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. Passe o cursor sobre o cabeçalho e clique em Editar cabeçalho do site. Clique no ícone da área de trabalho
  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. Sua visualização do site mudará 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 o modo como o menu aparece quando os links são expandidos, clique em Menu sobreposto. Você também pode alterar a cor de sobreposição do menu
  9. Para alterar o modo como o menu aparece quando ele é recolhido, escolha um Ícone de menu. Clique em qualquer lugar fora do editor, mova o cursor sobre Concluído e clique em Salvar.

Plano de fundo do cabeçalho

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 definir uma cor sólida ou transparente para o fundo do cabeçalho. Os menus suspensos com pastas em um computador têm a mesma cor de fundo do cabeçalho. Você também pode definir a cor da sobreposição do cabeçalho na versão móvel.

Deixe o fundo transparente

Para tornar o plano de fundo do cabeçalho transparente:

  1. Abra as Configurações gerais de cabeçalho.
  2. Clique em Cores.
  3. Ative a opção Transparente.

Com essa opção ativada, o cabeçalho se sobrepõe à primeira seção da página e mostra a cor ou a imagem de fundo dessa seção. Isso pode mudar de uma página para outra se a primeira seção usar um estilo específico ou tiver uma imagem de fundo.

Quando a alternância Posição fixa está ativada e a primeira seção tem uma imagem de fundo, o comportamento do cabeçalho transparente muda ligeiramente. À medida que você rola, o cabeçalho muda, deixando de exibir a imagem de fundo da primeira seção para exibir a cor de fundo da primeira seção. 

Nota: se a primeira seção da página for uma seção de galeria, o cabeçalho não será transparente sobre as imagens da galeria. Em vez disso, o cabeçalho exibirá a cor de fundo da seção de galeria.

Deixe o fundo como uma cor sólida

Para tornar o plano de fundo do cabeçalho uma cor sólida:

  1. Abra as Configurações gerais de cabeçalho.
  2. Clique em Cores.
  3. Desative a opção Transparente e escolha um tema de cores.

Com a opção Transparente desativada, 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 dessa imagem.

Para obter ajuda sobre temas de cores para seções, consulte Alterando as cores.

Definir a cor de sobreposição para a versão móvel

Escolha um tema de cores para o menu de navegação expandido que aparece em dispositivos móveis:

  1. Abra as Configurações de cabeçalho da versão móvel.
  2. Clique em Menu sobreposto e depois clique em Cores
  3. Escolha um tema de cores.

Para obter ajuda sobre temas de cores para seções, consulte Alterando as cores.

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 principais de navegação

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

Este artigo foi útil?
Utilizadores que acharam útil: 23 de 158
Criação do cabeçalho do site