Editor do Wix Studio: adicionar e personalizar um mega menu

4分
Mega menus são contêineres que você pode adicionar a um menu horizontal. Quando os visitantes passam o mouse sobre o item de menu relevante, o contêiner é aberto. Faça o design do contêiner do zero e decida para o que você deseja usá-lo: navegação em vários níveis, exibição de produtos em destaque ou qualquer outro fim.
Exemplo de um mega menu no estilo e-commerce, onde o contêiner mostra muitos links de navegação para diferentes categorias de produtos
É importante saber que:
Só é possível adicionar um contêiner do mega menu a um menu horizontal. Os contêineres de mega menu não são suportados em menus verticais, menus âncora e menus hambúrguer.
Neste artigo confira como:

Adicionar e configurar um contêiner do mega menu

Adicione o contêiner do mega menu como um item a um menu existente e dê o nome que você quiser. Recomendamos o uso de um título que reflita o conteúdo mostrado, como "Serviços" ou "Nossa história".
Depois de adicionar e nomear seu contêiner, adicione elementos como botões, formas e texto para criar o conteúdo desejado. 

Para adicionar um mega menu:

  1. Selecione o menu horizontal relevante no seu Editor.
  2. Clique em Gerenciar menu.
  3. Clique em + Adicionar item na parte inferior do painel.
  4. Selecione Mega menu.
  5. Insira um título para o mega menu.
    Dica: esse é o título sobre o qual os visitantes passam o mouse para ver o mega menu.
  6. Clique em OK.
  7. Adicione conteúdo ao mega menu:
    1. (No painel Gerenciar menu) Clique em Editar ao lado de Contêiner.
    2. Adicione todos os elementos necessários ao contêiner.
O painel Gerenciar menu, clicando em Editar para começar a adicionar elementos a um novo contêiner do mega menu

Ajustar o layout do contêiner do mega menu

Após adicionar os elementos que você deseja ao mega menu, altere o layout para combinar com a estrutura da sua página. Você pode ajustar o espaçamento e decidir até onde o contêiner se estende. 

Para alterar o layout:

  1. Selecione o menu relevante no seu editor.
  2. クリックしない レイアウト .
  3. Clique em Mega menu.
  4. Use as opções para ajustar o layout:
    • Esticar contêiner: decida se o contêiner se estende ou não para a largura total da tela do visitante. Quando desativada, você pode definir a largura desejada na tela ou no painel Inspetor.
    • Margens: adicione espaço (em px ou %) entre o contêiner do mega menu e as bordas da tela.
    • Espaço entre os itens e contêiner: arraste o slider para aumentar ou diminuir o espaço entre o menu e o contêiner do mega menu.
A aba do mega menu no painel de layout do menu no Editor do Wix Studio.

Fazer o design do mega menu

Depois de ajustar o layout do contêiner, faça o design das bordas, background e mais. Para manter uma aparência consistente, as alterações feitas no mega menu também se aplicam a todos os submenus que você adicionou.

Para personalizar o design do contêiner:

  1. Selecione o menu relevante no seu editor.
  2. クリックしない Abrir inspetor  no canto superior direito do editor.
Uma captura de tela da abertura do painel Inspetor no Editor do Wix Studio.
  1. Selecione Contêiner do submenu no dropdown O que você deseja criar?.
  2. Use as opções disponíveis para fazer o design do contêiner:
    • Background: defina uma cor, gradiente ou background de imagem para o contêiner. Você pode adicionar várias camadas de background com diferentes níveis de opacidade. 
    • Bordas: adicione e faça o design das bordas para o contêiner.
    • Cantos: deixe os cantos do contêiner mais redondos ou retangulares. 
    • Sombras: adicione uma sombra atrás do contêiner para um efeito 3D.
Selecionando para personalizar o design do contêiner do submenu no painel Inspetor, mostrando as opções disponíveis para mega menus

この記事は役に立ちましたか?

|