Editor X: usar menus horizontais estilizados

5 min de leitura
O Editor X está em transição para o Wix Studio, nossa nova plataforma para agências e freelancers.Saiba mais sobre o Wix Studio
O menu horizontal estilizado é um elemento de navegação avançado oferecido pelo Editor X, com várias opções de personalização exclusivas. Você pode adaptar esse menu para o que você precisar, ao ajustar o layout e o design de cada área. 
Exemplo de um menu horizontal estilizado em um site do Editor X
Neste artigo, saiba como:

Adicionar um menu horizontal estilizado

Escolha um menu horizontal estilizado que combine com o visual desejado. Você pode personalizar o design para que ele fique como você deseja e escolher qual menu mostrar nesse elemento. Pode ser um menu existente exibido em outro lugar do seu site ou um menu personalizado apenas para esse contexto. 

Para adicionar um menu horizontal estilizado:

  1. Clique em Elementos na parte superior do Editor X.
  2. Clique em Menu e busca.
  3. Clique em Menus horizontais estilizados.
  4. Arraste e solte o menu relevante no local desejado em sua página. 
  5. (Opcional) Crie um novo menu com páginas personalizadas:
    1. Clique em Gerenciar menu.
    2. Clique no dropdown em Qual menu é exibido?.
    3. Clique em Gerenciar menus do site.
    4. Clique em + Adicionar menu na parte inferior para criar o menu personalizado.
Adicionando um menu horizontal estilizado no painel Adicionar no Editor X

Fazer o design de um menu horizontal estilizado

No painel Inspetor, você pode personalizar cada parte do seu menu horizontal estilizado, desde o menu e o contêiner do submenu até os itens de menu e submenu. 

Para fazer o design do menu:

  1. Clique no seu menu horizontal estilizado.
  2. Clique no ícone Inspetor na parte superior do Editor X.
  3. Clique na aba Design
  4. Selecione uma opção em O que você deseja criar?:
    • Contêiner do menu
    • Itens do menu
    • Contêiner do submenu
    • Itens do submenu
  5. Use as opções disponíveis para criar seu menu. Você pode:
    • Adicionar camadas de preenchimentos de background e ajustar a opacidade de cada camada.
    • Formatar e personalizar o texto.
    • Adicionar bordas para destacar determinada área do seu menu.
    • Arredondar os cantos do seu menu/submenu.
    • Adicionar sombra para acentuar o menu ou seus itens.
    • Ajustar o preenchimento ao redor do menu ou de seus itens.
Dica:
Você pode criar os itens de menu e submenu para diferentes estados: Normal, Ao passar o mouse ou Página atual (ou seja, quando o visitante está em uma página que ele vê no menu ou submenu).
Criando o design do menu e submenu horizontal estilizado no Editor X

Ajustar o layout de um menu horizontal estilizado

Ajuste o layout do seu menu e submenu para que eles fiquem exatamente como você deseja. Você pode escolher como exibir itens de menu que não se encaixam (Quebrar texto ou Rolar) e a forma como o submenu é aberto (Suspenso ou Colunas). Você também pode controlar o espaçamento, o preenchimento e muito mais.

Para ajustar o layout do menu:


  1. Clique no seu menu horizontal estilizado.
  2. Clique no ícone Layout .
  3. Escolha em qual área você deseja trabalhar: Menu ou Submenu.
  4. Ajuste o layout do menu e submenu como desejar. Clique abaixo para saber mais sobre as opções disponíveis:
Ajustando o layout do menu e do submenu horizontal estilizado no Editor X

Esse artigo foi útil?

|