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 mostra 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 um cabeçalho específico para uma página.

Version_7.1_site_header.png

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 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 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 em qualquer lugar fora do editor, passe o mouse sobre Concluído e clique em Salvar.

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.

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

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. Para salvar as alterações, clique em qualquer lugar fora do editor, mova o cursor sobre Concluído e clique em Salvar.

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 qualquer conteúdo de fundo. Planos de fundo borrados são mais perceptíveis quando a opacidade está abaixo de 90%. Alguns navegadores, incluindo o Internet Explorer e o Firefox, não suportam 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 um vídeo - Estilos de 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 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.

Este artigo foi útil?
Utilizadores que acharam útil: 27 de 203