Site avançado: cabeçalho e menu expansível

Você pode adicionar um menu expansível aos seus sites para desktop e tablet, facilitando a criação de sites modernos com grande flexibilidade de design. Escolha entre diversos layouts de menu expansível e personalize-os como desejar, adicionando widgets, linhas e colunas.

O menu expansível layout A versão para dispositivos móveis oferece mais opções de personalização e uma forma de exibição. widgets no cabeçalho e um menu que está sempre visível.

Você pode alterar o layout do cabeçalho para um valor predefinido layout Isso inclui botões, clique para ligar, carrinho de compras, ícones de redes sociais e muito mais. Você pode adicionar qualquer um. widget para o menu expansível a partir do Painel de widgets.

Computador e tablet

Selecione o layout de menu expansível

Para selecionar um layout de menu expansível para o seu site:

1. No painel esquerdo, clique em Design.
2. Clique em Layout do Site.
3. Na seção Área de Trabalho, selecione Layout de menu expansível.
4. Na seção Tablet, selecione o layout à esquerda.

Cabeçalho para desktop e tablet

Após selecionar o layout de menu expansível, um ícone de hambúrguer será exibido no cabeçalho do seu site. Clique no hambúrguer () ícone para ver o menu expansível.

Para editar a localização do menu expansível no cabeçalho:

1. Posicione o cursor sobre o cabeçalho, clique em Cabeçalho e, em seguida, selecione Editar Design.
2. Na seção Layout, clique em Esquerda ou Direita.

Menu expansível para desktop e tablet

Para configurar o menu expansível:

1. Clique no ícone de hambúrguer () para abrir o editor de design de menu.
2. Na guia Layout, clique no layout existente para selecionar um layout de menu.
3. Na aba Estilo, você tem as seguintes opções:
   • Digite 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 porcentagem para se ajustar a todos os tamanhos de tela.
   • Plano de fundo. Configure a cor ou imagem de fundo.
   • Cor do ícone de fechar. Selecione uma cor para o ícone de fechar e uma cor de fundo para o ícone de fechar.
4. Na aba Espaçamento, altere o preenchimento.

O menu expansível pode ter até 3 linhas, e cada uma delas é totalmente personalizável.

Se você não visualizar os recursos de cabeçalho mencionados acima, pode estar usando a versão antiga. Para atualizar para o novo cabeçalho, clique nele na visualização para desktop ou tablet. Um backup automático é criado ao atualizar o cabeçalho.

Cabeçalho móvel

Para editar o cabeçalho da versão móvel:

1. Posicione o cursor sobre o cabeçalho, clique no rótulo "Cabeçalho" e selecione "Editar design".
2. Na aba Layout, clique no layout existente para selecionar um layout de menu. O cabeçalho para dispositivos móveis oferece layouts que exibem widgets como links para redes sociais, números de telefone e muito mais. Os layouts do cabeçalho são fixos, portanto, você não pode adicionar novos widgets, mas pode editá-los ou removê-los. Ao adicionar uma loja ou usar o recurso multilíngue, mais opções de layout ficam disponíveis, incluindo os ícones para o carrinho de compras da loja e o recurso multilíngue. Se você não tiver a loja ou o recurso multilíngue ativado, esses layouts não serão exibidos.
3. Clique à esquerda ou à direita para definir a posição do ícone do menu.

Navegação móvel

Para editar o menu expansível, abra o menu na visualização para dispositivos móveis. O editor de menu será aberto automaticamente para que você possa fazer as alterações.

1. Na aba Layout, clique no layout existente para selecionar um layout de menu. O menu expansível oferece vários layouts que podem exibir links de redes sociais, informações de contato e muito mais. Você pode adicionar qualquer widget ao menu expansível, adicionar colunas e classificá-las para ficarem lado a lado ou umas sobre as outras. No entanto, ao alternar entre layouts, todo o conteúdo adicionado ao menu será excluído, mantendo apenas os widgets do layout escolhido.
2. Na aba Estilo, você tem as seguintes opções:
   • Digite a partir de. Selecione Superior ou Lateral. Quando Superior estiver selecionado, mova o controle deslizante de altura. Quando Lateral estiver selecionado, mova o controle deslizante de largura.
   • Efeito de entrada. Selecione Cobrir ou Empurrar.

Atualizações nos layouts para dispositivos móveis

Em 8 de setembro de 2019, três layouts para dispositivos móveis foram removidos por não serem usados ​​com frequência. Os dois layouts restantes são mais modernos e úteis.

Se você já possui um site com um dos layouts que foram removidos e selecionar outro layout, os layouts que foram removidos desaparecerão, mas você poderá restaurá-los a partir do backup do site.

Para atualizar o cabeçalho da nova visualização para dispositivos móveis, clique no cabeçalho na visualização para dispositivos móveis. Um backup automático é criado ao atualizar o cabeçalho.