Configurações do menu
Altere o layout, os elementos, a animação, o espaçamento e outras configurações que valem para o menu inteiro.
A aba Configurações controla onde o menu aparece e como todos os itens dele se parecem e se comportam. Para estilizar um único item, use as configurações dele — veja Edite um item do menu.
Abra as configurações
-
Abra a aba Configurações
No Gerenciador de menu, abra o menu e clique no ícone de engrenagem na barra lateral esquerda do editor. A pré-visualização é atualizada enquanto você edita.
O ícone de engrenagem abre as configurações do menu. -
Salve e publique
Clique em Salvar e depois em Publicar.
Os padrões abaixo são os valores com que um menu novo costuma começar; alguns dependem do seu tema.
Configurações
Posição
- Substituir automaticamente
- O app encontra o menu principal do seu tema e o substitui.
- Substituir menu existente
- Você escolhe os menus do tema a substituir em Selecione seu menu principal e Selecione seu menu para celular.
- Exibir o menu neste seletor CSS
- Você digita o seletor da área em Seletor CSS do seu menu principal e Seletor CSS do seu menu para celular. Use somente se as opções acima não funcionarem no seu tema.
Cada opção é explicada passo a passo em Publique um menu no seu tema.
Layout e elementos
- Orientação
- Horizontal mostra os itens de nível superior em uma linha. Vertical os empilha em uma coluna, como um menu lateral.
- Alinhar
- Alinha os itens de nível superior à Esquerda, à Direita ou ao Centro na barra de menu.
- Largura máxima do menu
- Largura máxima do menu em px, por exemplo
1200. Vazio usa toda a largura disponível. - Exibir campo de busca
- Adiciona um campo de busca de produtos ao menu.
- Exibir divisor no desktop
- Uma linha separadora entre os itens de nível superior no desktop. Cor: Cores > Separator color.
- Exibir divisor no celular
- Linhas separadoras entre os itens no menu para celular.
- Exibir indicadores (seta para baixo)
- Uma pequena seta ao lado dos itens que têm submenu.
Submenu
- Exibir borda
- Uma borda ao redor dos submenus. Cor: Cores > Submenu > Border color.
- Ativar barra de rolagem no desktop
- Os compradores podem rolar dentro de um submenu mais alto que a tela, em vez de ele ser cortado.
- Ativar barra de rolagem no celular
- O mesmo, para o menu para celular.
- Largura máxima do submenu
- Largura máxima do submenu em px. Vazio usa a largura padrão.
- Abrir estilo no celular
- Menu suspenso expande o submenu abaixo do item pai. Deslizar o abre como um novo painel, com um jeito de voltar ao nível anterior.
Animação do menu
- Acionador – Desktop
- Como os submenus abrem no desktop: Ao passar o mouse, Clique ou Alternar ao clicar.
- Acionador – Celular
- Como os submenus abrem no menu para celular, com as mesmas três opções.
- Efeito
- A animação de abertura: Desvanecer ou Mover para cima.
- Velocidade da transição
- Duração da animação em ms, até 1500.
- Atraso da transição
- Espera antes de um submenu abrir ou fechar, em ms, até 1500. Com Ao passar o mouse, evita que os submenus abram de relance quando o mouse passa por cima.
Os acionadores:
- Ao passar o mouse — o submenu abre quando o mouse passa sobre o item.
- Clique — o primeiro clique ou toque abre o submenu; clicar no item de novo leva ao link dele.
- Alternar ao clicar — cada clique abre ou fecha o submenu; o item pai nunca leva ao link dele.
Links da conta
Atalhos da conta do cliente que mudam conforme o estado de login do comprador. Todos vêm desativados por padrão. Ao ativar um, aparecem campos para o ícone e o título dele (por exemplo Ícone de login e Título de login, para trocar “Login” por “Entrar”).
- Exibir link de login
- Exibido quando o comprador não está conectado.
- Exibir link de cadastro
- Um link para criar uma conta. Exibido quando o comprador não está conectado.
- Exibir link da conta
- Um link para a página da conta do cliente. Exibido quando o comprador está conectado.
- Exibir link de logout
- Exibido quando o comprador está conectado.
Espaçamento
Arraste o controle deslizante ou digite um valor em px.
- Espaçamento interno do menu principal
- Espaço horizontal de cada lado de cada item de nível superior.
- Altura de linha do menu principal
- Altura da barra de menu de nível superior.
- Altura de linha do menu suspenso
- Altura de cada linha em um submenu suspenso.
- Altura de linha da aba
- Altura de cada aba em um menu com abas.
- Altura de linha da lista de links
- Altura de cada link em um bloco de lista de links.
Carrossel
Vale para blocos que deslizam, como carrosséis de produtos e o carrossel de imagens.
- Reprodução automática
- Os slides se movem sozinhos.
- Loop infinito
- Depois do último slide, o carrossel recomeça pelo primeiro.
Avançado
- Menu para celular quando a largura for menor que
- Largura da tela em px abaixo da qual o menu para celular é usado. Telas mais largas recebem o menu desktop.
- Ocultar submenu do bloco de lista de links
- Somente celular. Recolhe os links abaixo do título de cada lista de links; os compradores tocam na seta do título para expandi-los.
- Exibir botão Adicionar ao carrinho
- Um botão de adicionar ao carrinho nos produtos dos blocos de produto do menu. Cores: Cores > Botão Adicionar ao carrinho.
- Ativar imagens com carregamento adiado
- Carrega as imagens do menu somente quando necessário, o que ajuda na velocidade da página. Recomendamos manter ativado.
Solução de problemas
Tocar em um item pai no celular não abre a página dele
Com Acionador – Celular definido como Alternar ao clicar, tocar em um item pai apenas abre o submenu dele. Altere para Clique ou adicione a página pai como o primeiro link dentro do submenu. Veja Um item de menu não redireciona no celular.
O menu para celular não aparece em um tablet ou notebook pequeno
O menu desktop é usado em qualquer tela mais larga que Menu para celular quando a largura for menor que. Aumente esse valor.
Esta página foi útil?
Obrigado pelo feedback! Conte o que faltou
Relatar um problema