Você pode ter um menu expansível em sites para desktops e tablets, o que facilita a criação de sites modernos com excelente flexibilidade de design. Escolha entre vários layouts de menus expansíveis e personalize-os como desejar, adicionando widgets, linhas e colunas.

O layout de menu expansível para celular oferece mais personalizações e uma maneira de exibir widgets no cabeçalho e no menu que sempre estarão visíveis.

Você pode alterar o layout do cabeçalho com layouts predefinidos que contêm botões, cliques para chamada, o carrinho da loja, ícones sociais e outros. É possível adicionar qualquer widget ao menu expansível a partir do painel de widgets.

Computador e tablet

Selecione o layout do menu expansível

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

1. No painel da esquerda, clique em Design.
2. Clique em Layout do site.
3. Na seção Desktop, selecione o layout Menu expansível.
4. Na seção "Tablet", selecione o layout com o menu expansível.

Cabeçalho para computador e tablet

Depois de selecionar o layout do menu expansível, um ícone de hambúrguer é exibido no cabeçalho do site. Clique no ícone hambúrguer () para ver o menu expansível.

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

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

Menu expansível para desktops e tablets

Para configurar o menu expansível:

1. Clique no ícone do hambúrguer () para abrir o editor Design de menu.
2. Na guia Layout, clique no layout atual para selecionar um layout no menu.
3. Na guia Estilo há as seguintes opções:
   • Digite de. Selecione Início ou Lateral.
   • Efeito de entrada. Selecione Capa ou Push.
   • Largura. Mova o controle deslizante para definir a largura do menu expansível quando expandido. A largura do menu é definida em porcentagens para se adequar a todos os tamanhos de tela.
   • Fundo . Configure a cor ou a imagem de fundo.
   • Cor do ícone Fechar. Escolha uma cor para o ícone Fechar e a cor de fundo do ícone.
4. Na guia Espaçamento, troque o preenchimento.

O menu expansível pode ter até 3 linhas e cada uma é totalmente personalizada.

Se não vir os recursos de cabeçalho mencionados acima, você pode estar usando o cabeçalho antigo. Para atualizar com o novo cabeçalho, clique no cabeçalho na visão para desktops e para tablets. Será criado um backup automático quando você atualizar o cabeçalho.

Cabeçalho para celular

Para editar o cabeçalho para celulares:

1. Passe o mouse sobre o cabeçalho, clique no rótulo Cabeçalho e selecione Editar design.
2. Na guia Layout, clique no layout atual para selecionar um layout no 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, portanto, você não pode adicionar novos widgets, mas pode editá-los ou removê-los.
   Quando você adiciona uma loja ou usa o recurso Multi-idioma, mais opções de layout estão disponíveis, incluindo os ícones do carrinho de compras da loja e o recurso multilíngue. Se você não tiver a loja ou o Multi-idioma habilitado, esses layouts não aparecerão.
3. Clique em 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 no modo de exibição móvel. O editor de menus será aberto automaticamente para você editar.

1. Na guia Layout, clique no layout atual para selecionar um layout no menu. O menu expansível oferece diversos layouts que podem exibir links sociais, informações de contato e outros. Adicione qualquer widget que quiser ao menu expansível, adicione colunas, organize as colunas para ficarem próximas umas das outras ou umas sobre as outras. Entretanto, quando você alternar de um layout para outro, ele excluirá todo o conteúdo adicionado ao menu, utilizando somente os widgetss do layout escolhido .
2. Na guia Estilo há as seguintes opções:
   • Digite de. Selecione Início ou Lateral. Se for selecionado Início, mova o controle deslizante altura. Com a opção Lateral selecionada, mova o controle deslizante Largura.
   • Efeito de entrada. Selecione Capa ou Push.

Atualizações de celular

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

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

Para atualizar o novo cabeçalho da visualização móvel, clique no cabeçalho na visualização móvel. Será criado um backup automático quando você atualizar o cabeçalho.