O cabeçalho contém o primeiro conjunto de elementos visíveis quando seu site é carregado. Você pode organizar elementos como logotipo, menu de navegação e ícones de redes sociais da maneira que preferir para que apareçam no cabeçalho.
Neste artigo:
- Cabeçalho para desktop
- Cabeçalho – Borda
- Cabeçalho – Pílula
- Cabeçalho para celular
- Tipos de cabeçalho
- Elementos do cabeçalho
Você pode gerenciar o estilo do cabeçalho (tanto para desktop quanto para dispositivos móveis) na seção Design (1).
Depois de entrar na seção Design, clique na guia Cabeçalho (2).
Alternativamente, você também pode usar a opção de pesquisa do estúdio.
- Entrar cabeçalho (1) na barra de pesquisa.
- Nos resultados relacionados, clique no botão Design – Cabeçalho do site opção 2).
Cabeçalho para desktop
- Layout do cabeçalho – Verifique o layout de cabeçalho atualmente aplicado para o área de trabalho versão. Clique no Alterar layout botão para escolher entre as opções de layout de cabeçalho disponíveis e aplicar ao seu site.
Nós fornecemos dois tipos de layouts de cabeçalho – layouts de cabeçalho superior e layouts de cabeçalho de duas colunas. Os layouts de cabeçalho de duas colunas existem em temas como Burst e Isle. - Largura – Especifique a largura do cabeçalho como Largura total or Largura do site.
'Largura total' exibirá o cabeçalho enquanto cobre toda a largura sem deixar nenhuma margem.
'Largura do site' pode ser especificado no Design seção. Você pode especificar uma largura fixa aqui.
Ele exibirá o cabeçalho aderindo à largura fixa especificada. Saber mais. - Preenchimento Vertical – Adicione espaço (superior e inferior) ao cabeçalho do site (especificado em vh). Saiba mais.
- Comportamento – A posição do cabeçalho da área de trabalho pode ser definida como Ffixado (aqui o cabeçalho ficará fixo no topo, ou seja, mesmo que a página role, o cabeçalho ficará visível) ou Rolar com site (aqui o cabeçalho rolará junto com a página).
- Navegação fixa – Ativar ou desativar a navegação fixa no caso do Srolar com site posição do cabeçalho.
- menu de pegajosa – Defina a posição do menu fixo quando a página for rolada para a esquerda ou para o centro da tela.
Para navegação fixa, o cabeçalho será exibido depois que a seção inicial for rolada até a metade na tela
Confira o preenchimento do cabeçalho em ação:
Veja um exemplo de cabeçalho em um site ativo.
Veja diferentes layouts de cabeçalho da área de trabalho
Veja diferentes layouts de cabeçalho de área de trabalho de 2 colunas
Layouts de cabeçalho baseados em pesquisa com foco na pesquisa de sites
Cabeçalho – Borda
- Fronteira: Habilite ou desabilite a borda do cabeçalho.
- Espessura: Especifique a largura das linhas de borda do cabeçalho.
- Posição: Defina a posição da borda do cabeçalho. Você tem quatro opções – Todos os lados, Superior e Inferior, Somente superior e Somente inferior.
Cabeçalho – Pílula
O cabeçalho em formato de pílula da Pixpa adiciona um visual elegante e moderno ao cabeçalho do seu site, com cantos arredondados e flexibilidade de espaçamento. Este design é ideal para criativos e profissionais que desejam que seu cabeçalho seja visualmente distinto e estiloso.
Você pode aplicar esse estilo a qualquer layout de cabeçalho , o que lhe dá total liberdade de design em diferentes tipos de cabeçalho.
- Cabeçalho – Pílula: Ative a alternância Cabeçalho – Pílula para ativar o estilo de pílula para seu cabeçalho.
- Raio de canto: Ajuste a redondeza dos cantos do cabeçalho usando o controle deslizante ou o campo Raio do Canto. Valores mais altos tornarão os cantos mais arredondados.
- Acolchoamento superior: Especifique o espaço acima do conteúdo no cabeçalho da pílula para controlar o espaçamento vertical.
- Acolchoamento inferior: Defina o espaço abaixo do conteúdo para garantir uma aparência equilibrada.
- Largura compacta: Isso permite que você escolha a largura do cabeçalho da sua pílula:
- Largura completa: Estende o cabeçalho por toda a largura da tela.
- Largura do local: Alinha o cabeçalho com a largura geral do conteúdo do seu site.
- Compacto: Reduz o cabeçalho a um bloco mais firme e centralizado – ideal para designs minimalistas.
Cabeçalho para celular
Essas configurações permitem que você controle a aparência do cabeçalho do seu site em dispositivos móveis. Isso garante um layout limpo e otimizado para telas menores.
- traçado – Verifique o layout de cabeçalho atualmente aplicado para o móvel versão. Clique no Alterar layout botão para escolher entre as opções de layout de cabeçalho disponíveis e aplicar ao seu site.
- Acolchoamento vertical – Adicione Espaço Vertical (superior e inferior) ao cabeçalho do seu site em dispositivos móveis (especificado em vh).
- Cabeçalho Móvel - Especifique se deseja que o cabeçalho para dispositivos móveis apareça apenas em dispositivos móveis (até 768px) ou se deseja que ele se estenda também a tablets (até 1199px).
Após fazer as alterações , certifique-se de clicar no botão Publicar para garantir que elas sejam exibidas em seu site.
Veja diferentes layouts de cabeçalho móvel
- O símbolo de ponto no cabeçalho do celular refere-se às contas do cliente.
- Aparecerá apenas que a opção Conta do Cliente está habilitada na loja. Saiba Mais.
Tipos de cabeçalho
Você pode escolher entre quatro tipos diferentes de cabeçalhos:
Cabeçalho Normal
O layout normal do cabeçalho apresenta um design limpo e direto com logotipo, links de navegação, ícones sociais e botão de menu exibidos horizontalmente. É ideal para fornecer uma experiência de navegação clássica e fácil de usar.
Cabeçalho de duas colunas
O layout do cabeçalho de duas colunas divide o cabeçalho em duas seções distintas, permitindo um logotipo e ícones sociais à esquerda ou no centro e o menu de navegação e outros itens do cabeçalho à direita como uma barra lateral clicável.
Esse layout é perfeito para sites que precisam enfatizar sua marca e ações importantes simultaneamente.
Cabeçalho baseado em pesquisa
O layout do cabeçalho baseado em pesquisa inclui com destaque uma barra de pesquisa, tornando mais fácil para os usuários encontrarem rapidamente conteúdo específico. Esse design é especialmente útil para sites com muito conteúdo, onde a funcionalidade de pesquisa é o foco principal.
Elementos do cabeçalho
- Logotipo/Título do Site – O primeiro elemento do cabeçalho do site é o logotipo/título do site. Defina o título do site/carregue o logotipo do site para o seu site.
Observação: Se você não carregou o logotipo do site, o título do site aparecerá no cabeçalho do site. Além disso, se você forneceu ambos, o logotipo do site ficará visível no cabeçalho do site. - Menu – Outro elemento do cabeçalho do site é o menu (links de menu). Você pode sequenciar os links de navegação do site, or excluir/ocultar qualquer item de menu do seu site.
- Ícones sociais - Você pode adicionar o Ícones sociais que estão conectados aos seus perfis de mídia social ao cabeçalho do seu site. Você pode carregar um imagem de compartilhamento social que será usado como miniatura quando o site ou qualquer uma das páginas do site for compartilhada nas redes sociais. Além disso, escolha onde o ícones de mídia social apareceria em seu site. As posições disponíveis são cabeçalho, rodapé, ambos ou nenhum.
- Caixa de pesquisa - Adicionar um caixa de pesquisa que permite que os visitantes do site pesquisem qualquer conteúdo em Produtos (se você tiver uma Loja habilitada em seu site), Imagens, Postagens de blog e Páginas (Galerias, Pastas e outras páginas) no cabeçalho do site.
- Ícone do carrinho - Adicione um flutuante ícone de carrinho isso é fácil de alcançar e sempre visível sem interferir no cabeçalho do seu site.
- Botão de menu - Adicionar um botão de menu para o cabeçalho do site, ou seja, um botão de chamada para ação que redireciona para um URL especificado. Você pode especificar o O rótulo e URL para o botão Menu. Além disso, escolha o Tamanho do botão ser Pequeno, Médio ou Grande.