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 para um layout predefinido que inclui botões, clique para ligar, carrinho de store, ícones sociais e muito mais. Você pode adicionar qualquer widget ao menu expansível 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 Área de trabalho, selecione Menu expansível layout.
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 aba 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 aba 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 aba 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 store ou usa o recurso Multi-idioma, mais opções de layout estão disponíveis, incluindo os ícones do carrinho de compras da store e o recurso multilíngue. Se você não tiver a store 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 aba Layout, clique no layout atual para selecionar um layout no menu. O menu expansível oferece vários layouts que podem exibir os links sociais, informações de contato e muito mais. Você pode adicionar qualquer widget ao menu expansível, adicionar colunas, classificar as colunas para estar um ao lado do outro ou em cima um do outro. No entanto, quando você alterna de um layout para outro, ele exclui todo o conteúdo adicionado ao menu, utilizando apenas os widgets no 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.