O cabeçalho é a parte do seu site que contém o logotipo e a navegação. Há várias maneiras diferentes de controlar o estilo do seu cabeçalho para ajudá-lo 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, como adicionar elementos ou widgets extras, adicionar seções vazias ou predefinidas e salvar seções de cabeçalho para reutilização. Para obter mais informações, consulte Edição avançada de cabeçalho.
Dica
Pegue nosso Configurar o cabeçalho do site Curso da Duda Academy para aprender sobre os tipos de cabeçalhos e como usá-los.
Para ocultar um cabeçalho:
-
Passe o mouse sobre a parte inferior do cabeçalho e clique em cabeçalho.
-
Clique Ocultar cabeçalho da página eme selecione o dispositivo no qual você deseja ocultar o cabeçalho.
Para exibir o cabeçalho:
-
No painel lateral, clique no Exibir elementos (
) ícone.
-
Clique no Esconderícone no rodapé e selecione Simpara exibir o cabeçalho.
Você pode ocultar o cabeçalho de todas as páginas ou somente de páginas específicas.
Para ocultar o cabeçalho:
-
Clique com o botão direito do mouse no cabeçalho para abrir o menu de contexto.
-
Selecione Ocultar neste dispositivoe, em seguida, selecione Somente desta página ou De todas as páginas.
Para exibir o cabeçalho:
-
Localize seu cabeçalho no painel e clique no ícone de olho riscado ao lado dele.
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, vejaComo identificar a versão do editor que seu site usa .
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 simplificar seu design ou enfatizar determinados elementos para dispositivos específicos.
Pontos importantes que você deve conhecer:
-
Qualquer elemento no cabeçalho, incluindo o próprio cabeçalho, pode ser ocultado em qualquer tamanho de tela. Isso pode ser feito na tela ou no painel Camadas.
-
Os elementos incluídos na opção de cabeçalho padrão também podem ser ocultados.
-
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 você estiver no desktop, ele indicará apenas elementos ocultos no desktop.
Para ocultar elementos de cabeçalho no painel Camadas:
-
Na barra de ferramentas superior, clique no tamanho de tela desejado no qual você gostaria de ocultar o elemento.
-
Clique no elemento que você deseja ocultar.
-
Clique no ícone do elemento oculto (
Para exibir elementos de cabeçalho do painel Camadas:
-
Na barra de ferramentas superior, clique no tamanho de tela desejado no qual você gostaria de ocultar o elemento.
-
Clique no elemento que você deseja exibir (ele será exibido desativado com o ícone do olho riscado antes de ser selecionado).
-
Clique no ícone do elemento oculto (
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 reduzido está disponível no desktop e somente para tablet quando o layout do cabeçalho da barra superior é usado.
Para habilitar um cabeçalho reduzido no Editor Clássico:
-
Passe o mouse sobre o cabeçalho e clique em cabeçalhoe, em seguida, clique em Editar design.
-
Na guia Cabeçalho reduzido, clique no Ativar cabeçalho reduzido alternar. Você tem as seguintes opções:
-
Mostrar somente a linha de navegação. Exiba a linha com navegação somente quando o cabeçalho for reduzido. 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 do texto, do link selecionado e do mouse, dos ícones, do 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
-
Alterar 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 na barra de tamanho do logotipo (o padrão é 66%).
-
Para lidar com 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 em branco com colunas, as colunas abrangem todo o espaço da linha.
-
As propriedades de design substituem as propriedades de redução do cabeçalho. Por exemplo, se você definir um plano de fundo de linha no cabeçalho, o plano de fundo da linha será exibido sobre o fundo reduzido do cabeçalho
-
As linhas em branco são exibidas no cabeçalho reduzido.
-
Se você não consegue ver seu cabeçalho reduzido, pode ser porque você não tem linhas suficientes em seu 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 rolará.
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, vejaComo identificar a versão do editor que seu site usa .
O recurso Scroll on Header mantém elementos essenciais de navegação, como o logotipo e o menu, visíveis na parte superior da tela enquanto os usuários rolam para baixo na página. 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
É importante observar que o cabeçalho fixo já deve estar ativado antes que a rolagem no cabeçalho possa ser ativada.
Para ativar a rolagem no cabeçalho:
-
Passe o mouse sobre o cabeçalho e clique em cabeçalho.
-
Clique Editar design. O painel Design do cabeçalho aparecerá.
-
Expanda o Posiçãoseção e habilite a Definir como cabeçalho fixo ative se ainda não estiver habilitado.
-
Habilite o Alterar cabeçalho na rolagem alternar.
-
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
-
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 da tela do desktop, você 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.
-
Mostrar somente a seção de navegação na rolagem. Na seção Posição, habilite a Mostrar somente a seção de navegação na rolagem alterne para manter somente a navegação visível ao rolar. Todas as outras seções no cabeçalho desaparecerão na rolagem.
Observe que essa opção só está disponível para cabeçalhos avançados.
-
As alterações feitas na seção Layout do painel de design do cabeçalho não afetam as configurações de posição.
Você tem a flexibilidade de definir seu cabeçalho para se sobrepor ao conteúdo na primeira linha da 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:
-
Passe o mouse sobre o cabeçalho e clique em cabeçalho.
-
Clique Editar design. O painel Design do cabeçalho aparecerá.
-
Expanda o Posiçãoseção e habilite a alternância para Sobreponha a 1ª seção na página.
-
(Opcional) Configure uma cor de fundo que será aplicada a todos os tamanhos de tela.
Nem todos os widgets são compatíveis e aparecem no cabeçalho reduzido. Se você tiver um widget no cabeçalho que não seja compatível com o cabeçalho reduzido, uma coluna em branco aparecerá no lugar do widget. Você não pode editar widgets quando o cabeçalho está reduzido
Os widgets a seguir são compatíveis e serão exibidos em um cabeçalho reduzido tanto para o Editor Clássico quanto para o Editor 2.0:
-
Navegação
-
Multilíngue
-
Ícones sociais
-
Clique no botão Ligar
-
botão OpenTable
-
Clique no botão E-mail
-
vicita
-
Botão PayPal
-
Botão Curtir do Facebook
-
Imagens e logotipos
-
Carrinho de loja
-
Widget de parágrafo
-
Widget de título
-
Botões
Um cabeçalho fixo se torna estático e permanece no lugar quando você percorre as páginas do seu site.
Nota
No Editor Clássico, Os cabeçalhos móveis são sempre fixos por padrão. No Editor 2.0, você tem a opção de ativar ou desativar um cabeçalho fixo para todos os tamanhos de tela.
Para ativar um cabeçalho fixo:
-
Passe o mouse sobre o cabeçalho e clique em cabeçalhoe, em seguida, clique em Editar design.
-
Na Conteúdo aba, 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
Existem 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:
-
Passe o mouse sobre o cabeçalho e clique em cabeçalho.
-
Na Design guia, selecione um novo layout de cabeçalho. Se você estiver mudando para um cabeçalho fixo, primeiro você precisa desativar a opção para Cabeçalho reduzido na guia Cabeçalho reduzido.
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, vejaComo identificar a versão do editor que seu site usa .
Você pode ativar o layout de um site de hambúrguer no desktop. Por padrão, tablet e celular usam o layout de hambúrguer
Para ativar o layout do site Hamburger:
-
Clique na etiqueta do cabeçalho e selecione Alterar predefinição no menu flutuante. Observe que isso é o mesmo se você tiver um cabeçalho Básico ou Avançado.
-
No painel de design, o Predefinições seção será aberta. Selecione o Hambúrguer ícone ao lado de Navegue pelas predefinições do menu. Observe que nenhuma alteração será refletida na tela ainda.
-
Selecione o layout de hambúrguer desejado. O layout selecionado será exibido na tela.
-
Quando estiver satisfeito com o layout, saia do pop-up Predefinições.
Observe que, ao alterar as predefinições, algumas personalizações podem ser redefinidas. A cor de fundo e o logotipo permanecerão os mesmos.
Para acessar o menu de design do cabeçalho no Editor Clássico, passe o mouse sobre o cabeçalho, clique em cabeçalho, em seguida, clique no Design aba.
Para acessar o menu de design do cabeçalho no Editor 2.0, passe o mouse sobre o cabeçalho, clique em cabeçalho, em seguida, clique em Editar 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 margens e espaçamento, com as alterações na área de trabalho afetando outros tamanhos de tela se o espaçamento permanecer inalterado.
-
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 do cabeçalho. Caso haja mais de uma imagem ou o logotipo seja textual, a imagem do logotipo é mantida como no layout. É importante observar que os cabeçalhos entre os dispositivos não estão conectados, portanto, se você adicionar um logotipo no desktop, ele não será adicionado automaticamente aos outros tipos de dispositivos. A única exceção é que, se o layout do cabeçalho da barra superior for usado no tablet, ele herdará todas as alterações de logotipo feitas 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.
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, vejaComo 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 widgets, linhas
O layout de menu expansível para celular oferece mais personalização e uma forma de exibir widgets no cabeçalho e um menu sempre visível.
Você pode alterar o layout do cabeçalho para um layout predefinido que inclui botões, clique para chamar, carrinho de loja, ícones sociais e muito mais. Você pode adicionar qualquer widget ao menu expansível no painel de widgets
Para selecionar e configurar um cabeçalho e um layout de menu expansível para desktop e tablet:
-
Clique Layout do site.
-
Na Desktopseção, selecione o Menu expansível layout.
-
Na Tabletseção, selecione o Menu expansível layout.
-
Depois de selecionar o layout do menu expansível, um ícone de hambúrguer é exibido no cabeçalho do site. Clique no hambúrguer
) ícone para ver o menu expansível.
-
Na Layoutguia, clique no layout existente para selecionar um layout de menu.
-
Na guia Estilo, você tem as seguintes opções:
-
Entrar a partir de. Topo ou Lado.
-
Efeito de entrada. Capa 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
-
Plano de fundo. Configure a cor ou a imagem do plano de fundo.
-
Fechar cor do ícone. Selecione uma cor para o ícone de fechamento e a cor de fundo do ícone de fechamento.
-
-
Na Espaçamento aba, altere o preenchimento.
O menu expansível pode ter até 3 linhas e cada uma é totalmente personalizada. Se o desktop e o tablet tiverem o mesmo layout de site (ambos expansíveis ou ambas as barras superiores), todas as personalizações serão iguais para ambos. Caso sejam diferentes, cada dispositivo precisa ser definido separadamente.
Para editar a localização do menu expansível no cabeçalho:
-
Passe o mouse sobre o cabeçalho e clique em cabeçalhoe, em seguida, selecione Editar design.
-
Na Layout seção, clique Esquerdaou Certo.
Para selecionar e configurar um cabeçalho e um layout de menu expansível para dispositivos móveis:
-
Passe o mouse sobre o cabeçalho e clique no cabeçalhorótulo e, em seguida, selecione Editar design.
-
Na Layout guia, clique no layout existente para selecionar um layout de menu. O cabeçalho móvel oferece layouts que exibem widgets como links sociais, números de telefone e muito mais. Os layouts de cabeçalho são fixos, então você não pode adicionar novos widgets, mas pode editá-los ou removê-los Quando você adiciona uma loja ou usa o recurso multilíngue, mais opções de layout estão disponíveis, incluindo os ícones do carrinho de remessa da loja e o recurso multilíngue. Se você não tiver a loja ou o multilíngue habilitado, esses layouts
-
Clique Esquerdaou Certopara 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 Layoutguia, 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. Você pode adicionar qualquer widget ao menu expansível, adicionar colunas, classificar as colunas para ficarem próximas umas das outras ou umas sobre as outras. No entanto, quando você muda de um layout para outro, ele exclui todo o conteúdo que você adicionou ao menu, usando apenas os widgets no layout escolhido
-
Na Estilo na guia, você tem as seguintes opções:
-
Entrar a partir de. Topoou Lado. Quando Top estiver selecionado, mova o controle deslizante de altura. Quando Lado estiver selecionado, mova o controle deslizante de largura
-
Efeito de entrada. Capaou Empurrar.
-
Nota
Widgets adicionais não podem ser adicionados 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, vejaComo identificar a versão do editor que seu site usa .
Para exibir itens de cabeçalho acima das imagens do herói, passe o mouse sobre o cabeçalho e clique em cabeçalho, clique no botão Design aba e, em seguida, clique em Sobreponha a primeira linha. Isso dá mais visibilidade às imagens de seus heróis e facilita a criação de sites modernos e bonitos
Lembre-se do 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, vejaComo identificar a versão do editor que seu site usa .
edição avançada permite que você personalize ainda mais o cabeçalho, como adicionar widgets, elementos e seções vazias ou predefinidas. Você também pode salvar seções individuais do cabeçalho e reutilizá-las.
Nota
-
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.
-
Como os cabeçalhos são sincronizados entre os tamanhos de tela, é recomendável verificar todos os tamanhos de tela ao usar a opção de edição avançada.
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 no cabeçalho aba.
-
Clique Editar design.
-
Na seção Layout, clique em Ativar edição avançada.
Se você 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 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 no cabeçalho aba.
-
Clique 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