O Super Menu é uma ferramenta que lhe dá a flexibilidade de criar menus elegantes e poderosos que são perfeitos para adicionar mais opções de navegação e elementos visuais ao seu sítio Web. Se pretende adicionar criatividade e personalidade ao sistema de navegação do seu sítio Web, os mega menus são uma excelente escolha. Neste artigo, vamos ver como criar um menu grande, ricamente estruturado e com um design bonito usando o mega menu elementor. Iremos criar oPadaria de pãoO modelo de sítio Web é utilizado como um exemplo para demonstrar como criar um mega menu no cabeçalho de um sítio Web.
I. Funções experimentais necessárias para ativar o Super Menu
Antes de começar a criar um mega menu, é necessário certificar-se de que as seguintes caraterísticas experimentais estão activadas:
- Contentores-caixa flexíveisPermite uma conceção mais flexível do layout.
- elemento aninhadoElementos múltiplos podem ser aninhados dentro de um contentor.
- menuUma funcionalidade concebida para construir mega menus.
tomar nota deQuando estas funcionalidades forem activadas, os widgets de menu de navegação existentes serão substituídos por novos widgets de menu WordPress e widgets de menu. Os novos widgets são mais poderosos e suportam mais opções de personalização.
II. Criar um Super Menu
Os supermenus são normalmente colocados no cabeçalho ou no rodapé de um sítio Web, mas podem ser colocados noutros locais, conforme necessário. Neste tutorial, vamos usar o cabeçalho como exemplo e explicar em pormenor como criar um mega menu.
1. criar um cabeçalho utilizando o construtor de temas
Primeiro, crie uma nova página:
Utilize o construtor de temas para criar um novo título de cabeçalho.
O construtor de temas oferece uma grande variedade de opções de personalização que podem ajudá-lo a conceber facilmente um cabeçalho que corresponda ao estilo do seu sítio Web.
2. adicionar widgets de menu
Depois de ter criado o contentor no cabeçalho, arraste e largue o widget de menu nesse contentor.
Também é possível adicionar um novo contentor especificamente para o menu, conforme necessário. Isto garante que o menu tem espaço suficiente para ser apresentado no cabeçalho e não entra em conflito com outros elementos.
3. criar itens de menu de nível superior
Começámos com Padaria de pão No modelo de sítio Web, por exemplo, o menu conterá três itens de menu de nível superior:Acolhimento, O nosso pão, A nossa história.
Os passos são os seguintes:
- No separador Conteúdo do menu, clique no item #1.
- Escreva "Home" na caixa de texto Título.
4. adicionar hiperligações aos itens de menu
Cada item de menu requer uma ligação para a página correspondente. Ao adicionar um link para "Home", pode introduzir manualmente o URL da página inicial, mas é preferível que oUtilizar ligações dinâmicasDesta forma, quando alterar o URL de uma página, a ligação do menu também seráatualização automática.
Ligar o menu à página inicial.Os passos são os seguintes:
- Clique no ícone de etiqueta dinâmica junto à caixa de texto do título.
- Selecione Site > URL interno.
- Clique em "Ligações internas".
- No menu pendente Tipo, selecione Conteúdo.
- Na caixa Pesquisar e selecionar, introduza o nome da página à qual pretende ligar (por exemplo, "Página inicial"), introduza uma pesquisa e selecione-a.
Repita os passos anteriores para as páginas "O nosso pão" e "As nossas histórias". Desta forma, os itens do menu serão ligados às respectivas páginas.
5. visualizar e ajustar a estrutura do menu
Após concluir a criação do item de menu, a estrutura do cabeçalho deve ser semelhante à seguinte:
- Início
- O nosso pão
- A nossa história
Nesta altura, pode pré-visualizar o aspeto do menu e ajustar a posição e a ordem dos itens de menu, conforme necessário, para garantir que o menu é apresentado de forma organizada na página.
III. Adicionar elementos de design ao mega menu
Mais do que uma simples ferramenta de navegação, um mega menu permite-lhe adicionar uma variedade de elementos de design para tornar o menu mais animado e interativo. Nesta secção, iremos abordar a forma de adicionar elementos de design a itens de menu, tais comoImagem ou íconeO menu foi concebido para melhorar o aspeto visual do menu.
1. adicionar conteúdo de lista pendente a itens de menu
Selecione um item de menu no separador "Conteúdo", por exemplo, "Página inicial".
Clique no interrutor de conteúdo pendente.
Esta opção converte um item de menu num super menu, permitindo-lhe adicionar conteúdo rico ao item de menu, como imagens, texto, botões, etc.
2. adicionar widgets de imagem
Quando a área de conteúdo pendente está aberta, pode arrastar widgets de imagem para a mesma.
Quando o utilizador passa o rato sobre este item de menu, é apresentada a imagem que definiu.
Os passos são os seguintes:
- Arraste o widget de imagem para a área de conteúdo.
- Selecione a imagem que aparece quando o utilizador passa o cursor sobre um item de menu.
- Feche a área de conteúdo e guarde as definições.
Isto pode ser repetido para outros itens do menu, adicionando imagens diferentes ou outros elementos de design a cada item do menu. Isto tornará o seu mega menu não só poderoso, mas também visualmente apelativo.
3. pré-visualizações e ajustes
No modo de edição, estas imagens podem não ser visíveis na vida real, pelo que é necessária uma página de pré-visualização para ver como o mega menu é efetivamente apresentado. A pré-visualização garante que o design de cada item de menu é o esperado e que todo o conteúdo do menu suspenso é apresentado corretamente.
IV. resumo
Os mega menus são uma excelente ferramenta para adicionar criatividade e navegação personalizada ao seu sítio Web. Com passos detalhados e sugestões de design, é fácil utilizar o Elementor para criar menus grandes, estruturados e visualmente apelativos que proporcionam aos visitantes uma melhor experiência de navegação. Para melhor concretizar estes efeitos e desbloquear funcionalidades mais avançadas, recomenda-se a utilização doElementor ProOferece mais opções de personalização e ferramentas poderosas para o ajudar a criar mega menus de nível profissional.
