O cabeçalho é a parte do seu site que contém o logotipo e a navegação. Existem várias maneiras diferentes de controlar o estilo do seu cabeçalho, o que ajuda a criar um cabeçalho atraente para o seu site.
No Editor 2.0, o cabeçalho padrão oferece layouts predefinidos, minimizando o risco de alterações acidentais. Os usuários podem escolher layouts com ações limitadas, garantindo uma experiência de design focada e eficiente. Uma opção de edição avançada também está disponível para usuários que buscam mais personalização, permitindo a adição de widget ou elementos extras além dos layouts predefinidos. Para obter mais informações, consulte Edição avançada de cabeçalhos.
O Shrinking Header é uma versão menor do cabeçalho do site, permitindo que você mantenha fixas informações importantes de navegação sem distrair os usuários enquanto eles rolam uma página para baixo e sem ocupar muito espaço. Ele atua como um recurso de cabeçalho fixo, mas condensa o tamanho dos logotipos e o tamanho geral do cabeçalho. É particularmente útil em sites com cabeçalhos grandes e sites projetados para rolagem longa.
Nota
O cabeçalho retrátil está disponível na versão para desktop e para tablet apenas se o layout de cabeçalho da barra superior for usado.
Para ativar um cabeçalho reduzido no Editor Clássico:
-
hover sobre o cabeçalho, clique em Header e, em seguida, clique em Edit Design.
-
Na guia Cabeçalho reduzido, clique no botão Ativar cabeçalho reduzido. Você tem as seguintes opções:
-
Mostrar somente a linha de navegação. Exiba a linha com navegação somente quando o cabeçalho diminuir. Esse recurso só é aplicável se houver mais de uma linha no cabeçalho.
-
Cor de fundo. Altere a cor de fundo do cabeçalho reduzido. Observe que a cor de fundo da linha substitui a cor de fundo reduzida do cabeçalho.
-
Mais cores de cabeçalho na rolagem. Especifique as cores para o texto, o link selecionado e o hover, os ícones, o texto do botão e muito mais.
-
Tamanho do logotipo. Altere o tamanho para o qual o logotipo ou a imagem diminuem quando o cabeçalho diminui (o padrão é 66%).
-
Altere o logotipo na rolagem. Selecione um logotipo para exibir na rolagem.
-
Espaçamento do cabeçalho. Ajuste o preenchimento superior e inferior do cabeçalho reduzido. Você pode alterar o espaçamento do cabeçalho por dispositivo.
-
Quando o cabeçalho reduzido é ativado, ocorre o seguinte:
-
O espaçamento do cabeçalho altera o espaçamento superior/inferior e a margem para 0. Isso não se aplica às linhas dentro do cabeçalho.
-
As imagens no cabeçalho diminuem até a porcentagem indicada na barra de tamanho do logotipo (o padrão é 66%).
-
Para manipular modelos com um valor mínimo de altura no cabeçalho, a altura mínima do cabeçalho é definida como automática.
-
Se houver linhas vazias com colunas, as colunas ocuparão todo o espaço da linha.
-
As propriedades do design substituem as propriedades do cabeçalho reduzido. Por exemplo, se você definir um plano de fundo da linha no cabeçalho, o plano de fundo da linha será exibido sobre o plano de fundo do cabeçalho reduzido.
-
Linhas vazias são exibidas no cabeçalho reduzido.
-
Se você não conseguir ver o cabeçalho reduzido, talvez seja porque não há linhas suficientes no site para poder rolar para baixo no site e acionar o cabeçalho reduzido. Se você tiver apenas uma linha na página, o site não será rolado.
Nem todos os sites widget são compatíveis e aparecem no cabeçalho de redução. Se o senhor tiver um widget no cabeçalho que não seja compatível com o cabeçalho reduzido, uma coluna vazia aparecerá no lugar do widget. O senhor não pode editar o site widget quando o cabeçalho é reduzido.
Os seguintes sites widget são compatíveis e serão exibidos em um cabeçalho reduzido tanto no Editor Clássico quanto no Editor 2.0:
-
Navegação
-
Multi-idioma
-
Ícones Sociais
-
Botão Clique para Ligar
-
Botão OpenTable
-
Clique no botão E-mail
-
vCita
-
Botão PayPal
-
Botão Curtir do Facebook
-
Imagens e logotipos
-
Carrinho de loja
-
Widgets de parágrafos
-
Título widget
-
Botões
Nota
Essas informações são específicas do Editor 2.0, anteriormente conhecido como Editor All-Flex. Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa.
O recurso Scroll on Header no Editor 2.0 mantém elementos essenciais de navegação, como o logotipo e o menu, visíveis na parte superior da tela à medida que os usuários rolam a página para baixo. Ele condensa os logotipos e o tamanho geral do cabeçalho para economizar espaço e garantir fácil acesso à navegação sem ser intrusivo. Ideal para sites com cabeçalhos grandes ou projetados para rolagem estendida, ele aprimora a experiência do usuário ao manter a acessibilidade às principais opções de navegação.
É importante observar que o cabeçalho fixo já deve ser habilitado antes que a rolagem no cabeçalho possa ser habilitada.
Para ativar a rolagem no cabeçalho:
-
hover sobre o cabeçalho e clique em Header.
-
Clique em Editar design. O painel Design do cabeçalho aparecerá.
-
Expanda a seção Posição e ative a opção Definir como cabeçalho fixo, caso ainda não esteja ativada.
-
Ative o cabeçalho Alterar ao alternar rolagem.
-
Configure as seguintes opções de design:
-
Acolchoamento. Defina os valores iniciais de preenchimento superior e fundo de preenchimento dos cabeçalhos (isso não é específico da opção de cabeçalho fixo).
-
BG na rolagem. Selecione a cor e a opacidade do plano de fundo. As alterações feitas em qualquer tamanho de tela afetarão as outras.
-
Espaçamento na rolagem. Defina o espaçamento superior e inferior em px,%, vh ou vw. Se quiser substituir as configurações de tamanho de tela do desktop, o senhor pode fazer edições no tablet e no celular.
-
Tamanho do logotipo. Use o controle deslizante ou a caixa de texto para especificar o tamanho do logotipo quando o cabeçalho diminui na rolagem. O padrão é 66%. As alterações devem ser feitas em tamanhos de tela individuais.
-
As alterações feitas na seção Layout do Painel de Design do Cabeçalho não afetam as configurações de Posição.
No Editor 2.0, você tem a flexibilidade de definir seu cabeçalho para se sobrepor ao conteúdo na primeira página. Isso pode criar um efeito visualmente atraente em que o cabeçalho se integra perfeitamente ao conteúdo. Se desejar, você pode definir o cabeçalho para se sobrepor à primeira linha. Isso precisa ser ativado por página.
Para ativar a sobreposição do cabeçalho com a primeira linha:
-
hover sobre o cabeçalho e clique em Header.
-
Clique em Editar design. O painel Design do cabeçalho aparecerá.
-
Expanda a seção Posição e ative a opção Sobreposição da 1ª seção na página.
-
(Opcional) Configure uma cor de fundo que será aplicada a todos os tamanhos de tela.
Um cabeçalho fixo se torna estático e permanece no lugar quando você percorre as páginas do seu site.
Nota
Os cabeçalhos para dispositivos móveis são sempre fixos por padrão.
Para ativar um cabeçalho fixo:
-
hover sobre o cabeçalho, clique em Header e, em seguida, clique em Edit Design.
-
Na guia Conteúdo, selecione Definir como cabeçalho fixo. Se a opção de cabeçalho fixo não estiver disponível, você precisará desativar a opção Cabeçalho reduzido na guia Cabeçalho reduzido.
Há vários layouts de cabeçalho flexíveis pré-projetados para você escolher. Se você alternar para um dos layouts de cabeçalho flexíveis pré-projetados, não poderá voltar para um cabeçalho fixo, só poderá alternar entre outros layouts de cabeçalho flexíveis. A troca de layouts também remove o conteúdo existente da seção do cabeçalho. Recomendamos criar um backup antes de alternar os layouts.
Para alterar o layout do cabeçalho:
-
hover sobre o cabeçalho e clique em Header.
-
Na guia Design, selecione um novo layout de cabeçalho. Se você estiver mudando para um cabeçalho fixo, primeiro você precisa desativar a opção Cabeçalho Redutor na guia Cabeçalho Redutor.
Para acessar o menu de design do cabeçalho no Editor Clássico, hover sobre o cabeçalho, clique em Header e, em seguida, clique na guia Design.
Para acessar o menu de design do cabeçalho no Editor 2.0, hover sobre o cabeçalho, clique em Header e, em seguida, clique em Edit Design. O painel de design será aberto na lateral da tela. Ele contém as seguintes opções de design:
-
Layout: explore as opções de layout que combinam os melhores estilos de navegação e hambúrguer de forma consistente em todos os tamanhos de tela. Embora os layouts padrão tenham recursos limitados, uma opção de edição avançada aumenta a flexibilidade.
-
Espaçamento: Defina as margens e o preenchimento, com as alterações no site desktop afetando outros tamanhos de tela se o espaçamento não for alterado.
-
Plano de fundo: escolha a cor ou a imagem do plano de fundo, adicione bordas ou sombras e testemunhe as mudanças refletidas perfeitamente em todos os tamanhos de tela.
-
Posição: ative um cabeçalho fixo com alterações baseadas em rolagem. A ativação do cabeçalho fixo em qualquer tamanho de tela influencia o comportamento de outras pessoas.
Se o cabeçalho contiver uma imagem, o logotipo do site será mantido ao se mover entre os layouts de cabeçalho. Caso exista mais de uma imagem ou o logotipo seja textual, a imagem do logotipo será mantida como no layout. É relevante destacar que os cabeçalhos entre os dispositivos não estão vinculados. Dessa forma, se um logotipo for inserido no desktop, ele não será automaticamente transferido para os outros tipos de dispositivos. A única exceção ocorre quando o layout do cabeçalho da barra superior é usado no tablet, pois ele irá herdar quaisquer alterações de logotipo realizadas no desktop.
Se você excluir o logotipo, adicione novamente a imagem arrastando o elemento de imagem de volta para o cabeçalho e defina o link para voltar à página inicial. Para obter mais informações, consulte widget: Image.
Nota
Essas informações são específicas do Editor Clássico e não são relevantes para o Editor 2.0 (anteriormente conhecido como Editor All-Flex). Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa.
Você pode adicionar um menu expansível em seus sites de desktop e tablet, facilitando a criação de sites modernos com grande flexibilidade de design. Escolha entre vários layouts de menu expansíveis e personalize-os como quiser, adicionando widget, linhas e colunas.
O layout de menu expansível para celular oferece mais personalização e uma maneira de exibir widget no cabeçalho e um menu sempre visível.
O senhor pode alterar o layout do cabeçalho para um layout predefinido que inclui botões, clique para ligar, carrinho de compras, ícones sociais e muito mais. O senhor pode adicionar qualquer widget ao menu expansível no painel widget.
Para selecionar e configurar um cabeçalho e um layout de menu expansível para desktop e tablet:
-
No painel lateral, clique em Tema e depois em Layout do site.
-
Na seção desktop selecione o layout de menu expansível.
-
Na seção Tablet , selecione o layout do menu Expansível.
-
Depois de selecionar o layout do menu expansível, um ícone de hambúrguer é exibido no cabeçalho do site. Clique no ícone de hambúrguer (
) para ver o menu expansível.
-
Na guia Layout , clique no layout existente para selecionar um layout de menu.
-
Na guia Estilo há as seguintes opções:
-
Entre a partir de. Selecione Superior ou Lateral.
-
Efeito de entrada. Selecione Cobrir ou Empurrar.
-
Largura. Mova o controle deslizante para definir a largura do menu expansível quando expandido. A largura do menu é definida em porcentagens para caber em todos os tamanhos de tela.
-
Antecedentes. Configure a cor ou a imagem do plano de fundo.
-
Feche a cor do ícone. Selecione uma cor para o ícone de fechamento e a cor de fundo do ícone de fechamento.
-
-
Na guia Espaçamento , altere o espaçamento.
O menu expansível pode ter até 3 linhas e cada uma é totalmente personalizada. Se os sites para computadores e tablets tiverem o mesmo layout (expansível ou superior), todas as personalizações serão as mesmas para ambos. Caso sejam diferentes, cada dispositivo deve ser definido separadamente.
Para editar a localização do menu expansível no cabeçalho:
-
Passe o mouse sobre o cabeçalho, clique em Cabeçalho e selecione Editar design.
-
Na seção Layout, clique em Esquerda ou Direita.
Para selecionar e configurar um cabeçalho e um layout de menu expansível para dispositivos móveis:
-
hover sobre o cabeçalho, clique no rótulo Header e selecione Edit Design.
-
Na guia Layout, clique no layout existente para selecionar um layout de menu. O cabeçalho móvel oferece layouts que exibem widget, como links sociais, números de telefone e muito mais. Os layouts de cabeçalho são fixos, portanto, não é possível adicionar novos widget, mas o senhor pode editá-los ou removê-los. Quando o senhor adiciona uma loja ou usa o recurso de vários idiomas, mais opções de layout ficam disponíveis, incluindo os ícones para o carrinho de compras da loja e o recurso de vários idiomas. Se o senhor não tiver a loja ou o multilíngue ativado, esses layouts não serão exibidos.
-
Clique em Esquerda ou Direita para a posição do ícone Menu.
-
Se você ainda não estiver, abra o menu na visualização móvel. Isso permite que o editor de menu seja aberto para que você possa editar o menu expansível.
-
Na guia Layout , clique no layout existente para selecionar um layout de menu. O menu expansível oferece vários layouts que podem exibir links sociais, informações de contato e muito mais. O senhor pode adicionar qualquer widget ao menu expansível, adicionar colunas, classificar as colunas para que fiquem uma ao lado da outra ou uma em cima da outra. No entanto, quando o senhor muda de um layout para outro, ele exclui todo o conteúdo que adicionou ao menu, mantendo apenas o widget no layout escolhido.
-
Na guia Estilo, você tem as seguintes opções:
-
Entre a partir de. Selecione Superior ou Lateral. Quando Top estiver selecionado, mova o controle deslizante de altura. Quando Lado estiver selecionado, mova o controle deslizante de largura.
-
Efeito de entrada. Selecione Cobrir ou Empurrar.
-
Nota
Não é possível adicionar mais widget ao cabeçalho móvel.
Nota
Essas informações são específicas do Editor Clássico e não são relevantes para o Editor 2.0 (anteriormente conhecido como Editor All-Flex). Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa.
Para exibir itens de cabeçalho acima das imagens de heróis, hover sobre o cabeçalho, clique em Header (Cabeçalho), clique na guia Design e, em seguida, clique em Overlap first row (Sobrepor a primeira linha). Isso dá mais visibilidade às imagens de seus heróis e facilita a criação de sites modernos e bonitos.
Tenha em mente o seguinte:
-
Para o cabeçalho. Defina a cor de fundo como transparente ou uma cor com opacidade.
-
Para a primeira fila. Use um preenchimento superior igual ou semelhante à altura do cabeçalho.
Nota
Para maior flexibilidade, essa configuração se aplica somente à página atual. Para habilitá-lo em outras páginas, navegue até cada página e siga as etapas acima.
Nota
Essas informações são específicas do Editor 2.0, anteriormente conhecido como Editor All-Flex. Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa.
A edição avançada pode ser ativada para que o cabeçalho acesse mais opções de personalização, como a capacidade de adicionar mais widget e elementos. Alterar o layout do cabeçalho (no painel Design do cabeçalho) redefinirá todas as alterações feitas e desativará a edição avançada.
Nota
Ao usar a opção de edição avançada, certifique-se de verificar todos os tamanhos de tela, pois os cabeçalhos serão sincronizados entre eles.
Ao usar a edição avançada, é recomendável verificar todos os tamanhos de tela devido à sincronização do cabeçalho.
Para ativar a edição avançada:
-
Clique na guia Cabeçalho .
-
Clique em Editar design.
-
Na seção Layout, clique em Habilitar edição avançada.
Se planeja exibir elementos diferentes no desktop e no celular (por exemplo, um botão no desktop e um ícone no celular), utilize o recurso ocultar/mostrar para obter transições perfeitas. Para saber mais, consulte Ocultar ou exibir elementos no cabeçalho (Editor 2.0).
Para desativar a edição avançada e redefinir o cabeçalho, selecione um layout diferente:
-
Clique na guia Cabeçalho.
-
Clique em Editar design.
-
Na seção Layout, clique na seta para acessar as opções de layout.
-
Selecione um layout diferente para desativar a edição avançada e redefinir o cabeçalho. Qualquer alteração feita usando a edição avançada será revertida e não será salva.
Para ocultar um cabeçalho em uma página:
-
hover sobre a parte inferior do cabeçalho e clique em Header.
-
Clique em Ocultar cabeçalho da página e selecione o dispositivo no qual você deseja ocultar o cabeçalho. No Editor 2.0, isso oculta o cabeçalho em todas as páginas.
Para reexibir o cabeçalho:
-
No painel lateral, clique no ícone Reexibir elementos ( ) em Configurações.
-
Clique no ícone Ocultar no rodapé e selecione Sim para exibir o cabeçalho.
Nota
Essas informações são específicas do Editor 2.0, anteriormente conhecido como Editor All-Flex. Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa.
No Editor 2.0, a flexibilidade de ocultar ou exibir elementos no cabeçalho fornece controle granular sobre os componentes visuais em diferentes tamanhos de tela, independentemente de você querer otimizar seu design ou enfatizar determinados elementos para dispositivos específicos.
Pontos importantes que você deve conhecer:
-
Você pode ocultar qualquer elemento, inclusive o cabeçalho, em qualquer tamanho de tela. Isso pode ser feito no painel Tela ou no painel Camadas.
-
A opção de cabeçalho padrão permite que os elementos sejam ocultos.
-
Os elementos ocultos serão exibidos como desativados com um ícone de ocultar elemento (
).
-
O painel de camadas indicará apenas elementos ocultos para o tamanho da tela em que você está atualmente. Por exemplo, se o senhor estiver no desktop, ele indicará apenas os elementos ocultos no desktop.
Para ocultar elementos de cabeçalho no painel Camadas:
-
Para ocultar um elemento, selecione o tamanho de tela desejado na barra de ferramentas superior.
-
Clique em Camadas na barra de ferramentas lateral.
-
Clique no elemento que você deseja ocultar.
-
Clique no ícone ocultar elemento (
Para exibir elementos de cabeçalho do painel Camadas:
-
Para ocultar um elemento, selecione o tamanho de tela desejado na barra de ferramentas superior.
-
Clique em Camadas na barra de ferramentas lateral.
-
Clique no elemento que você deseja exibir (ele será mostrado como desativado com o ícone de olho riscado antes de ser selecionado).
-
Clique no ícone ocultar elemento (