Como construir um mega menu de restaurante no Elementor (guia passo a passo gratuito)

Um mega menu de restaurante é um amplo painel suspenso que coloca todo o seu menu de comida, informações dietéticas, horários de funcionamento e um botão de reserva em um só lugar, em vez de enterrá-los atrás de vários cliques Os clientes chegam querendo ver comida, preços, horas e uma maneira de reservar Geralmente em um telefone Muitas vezes enquanto decidem entre você e outro lugar.

Este guia constrói um com Elementor gratuito e gratuito Menu Mega de complementos mestres. Não é necessário Elementor Pro. Aqui está o resultado finalizado Hovering “Dishes” abre o menu completo do restaurante com categorias, preços, etiquetas dietéticas, especial desta noite, e um botão Reserve a Table:

Se você gosta do estilo mega menu restaurante, então você pode baixá-lo e importá-lo no mestre addons widget construtor Então você pode facilmente personalizar a cor do texto, imagem, url etc com base em suas necessidades e usá-lo em seu mega menu em seu site restaurante.

Baixe o mega Menu Restaurante

O que um Mega Menu Restaurante Deve Conter

Antes de construir qualquer coisa, decida o que ganha um lugar no painel O layout que construímos neste guia tem quatro zonas, e elas cobrem quase todos os restaurantes:

O que deixar de fora: sua história completa Sobre, menções à imprensa e feeds sociais Aqueles pertencem a o rodapé. Um painel de navegação é para levar as pessoas a algum lugar, não para contar toda a história.

Você precisa do Elementor Pro para isso?

O próprio widget de mega menu do No. Elementor fica dentro do Elementor Pro, mas a rota gratuita abaixo constrói o mesmo painel sem assinatura.

Para um restaurante de um único local atualizando seu menu algumas vezes por ano, a extensão gratuita é suficiente Um grupo maior de vários locais fazendo malabarismos com vários editores ainda pode obter valor do conjunto de ferramentas mais amplo do Pro, mas essa é uma decisão sobre todo o site, não sobre o mega menu especificamente Elementor documenta aqui o seu fluxo de trabalho de mega menu Pro se você quiser compará-lo diretamente.

O que você precisa

• Elementor (a versão gratuita está bem)
• Complementos Mestres para Elementor, instalado e ativo
• Páginas já criadas para as suas secções de menu (podem ser espaços reservados por enquanto)

Passo 1: Habilite a extensão do mega menu

Master Addons mantém cada widget e extensão atrás de um alternador para que os não utilizados nunca carreguem. Ir para Complementos Mestres → Configurações, abra o Extensões tab, e encontrar Menu Mega no grupo Exibição. Vire o botão e clique Salvar alterações. Se você não vê a alternância, provavelmente está em uma versão antiga do plugin, então atualize primeiro.

Passo 2: Estruturar o Menu WordPress e Mudar no Menu Mega

Ir para Aparência → Menus e construir o esqueleto antes de tocar em qualquer design Nesta construção o menu é chamado Menu Principal com cinco itens: Casa, Pratos, Sobre Nós, Blog, Conta. “Dishes” é o item que recebe o mega painel.

Obter a estrutura direita em primeiro lugar O mega painel é anexado a um item de menu, então reorganizar depois significa refazer o trabalho de design.

Com a extensão ativa, a Menu Mega de complementos mestres a caixa aparece na coluna da esquerda do ecrã Menus Alternar a sua Habilitar Mega Menu alterne. No momento em que você fizer isso, um roxo Mestre Mega o crachá aparece ao lado de cada item do menu Esse crachá é onde as opções do mega menu de cada item vivem.

Passo 3: Ligue o Mega Menu para o seu item de pratos

Clique no Mestre Mega emblema no item “Dishes” Um pop-up de configurações abre com quatro guias: Conteúdo, Configurações, Ícone e Distintivo.

1. No Conteúdo aba, vire o Megamenu habilitado mudar para SIM. O botão Editar Conteúdo do Megamenu acende.
2. No Configurações aba, defina o tamanho e o comportamento do painel. Nós usamos Largura personalizada em 1000 px, largo o suficiente para uma grade de prato mais um cartão em destaque Largura total também está lá se o seu design precisa de toda a tela.
3. Definir Menu Móvel ao Conteúdo do Construtor, Efeito Gatilho para pairar, e Transição para Fade. As guias Icon e Badge são extras opcionais (um emblema “New” em um menu sazonal, por exemplo).
4. Clique Salvar.

Você configura a largura do mega menu na guia Configurações: Largura total, padrão ou largura personalizada como nossa 1000px. A mesma guia contém a fonte do menu móvel, o efeito gatilho (hover ou clique), a animação de transição e alterna o rótulo e a descrição do menu:

Etapa 4: Projete o Painel no Elementor

Voltar à guia Conteúdo, clique em Editar conteúdo do Megamenu. O painel abre no editor Elementor normal, então você o projeta como qualquer outra página Construa as quatro zonas da tabela acima:

• Faixa de cabeçalho: nome do restaurante mais uma pequena nota de cozinha (“Cozinha aberta até às 23h00 · Forno de madeira queimado diariamente às 4”).A nota responde silenciosamente ao “são abertos? pergunta do” sem ninguém caçar por horas.
• Barra lateral da categoria: Entradas, Massas e Risoto, Pizza a Lenha, Correntes e Churrasqueiras, Sobremesas, Vinhos e Bebidas, cada uma com uma contagem de pratos.
• Grade de prato: nome, descrição de uma linha, preço e tags como Vegetariano, Picante ou Escolha do Chef As tags lidam com a filtragem da dieta sem uma coluna separada.
• Cartão em destaque e rodapé de ação: especial desta noite com foto e preço, a Reserve um botão Tabela, horário e endereço, e um link “Download full menu (PDF)” Se preferir mostrar horários de funcionamento estruturados, o Widget Horário de Negócios mantém-nos editáveis num só lugar.

Cada nome de prato, preço e tag permanece editável no painel Elementor à esquerda Atualizar o menu mais tarde é uma edição de conteúdo, não um trabalho de design Publique o modelo quando terminar e feche o editor.

Passo 5: Coloque o Menu no Cabeçalho

O mega menu precisa de um cabeçalho para viver Se o cabeçalho do seu tema já exibe o Menu Principal você pode pular esta etapa, mas construir o cabeçalho com Master Addons mantém tudo em um editor O O Construtor de Tema é gratuito, ao contrário do Elementor Pro.

1. Ir para Complementos Mestres → Construtor de Tema e clique Adicionar Novo Modelo.
2. Defina o tipo de modelo para Cabeçalho, troque Ativação on, e sob Condições escolher Incluir → Site Inteiro.
3. Clique Editar com o Elementor.

Dentro do modelo de cabeçalho, arraste o Menu Navegação widget e escolha Menu Principal em Selecionar Menu. defina o layout como Horizontal e alinhe-o como o design do cabeçalho exigir O item “Dishes” carrega seu mega painel com ele automaticamente.

Passo 6: Passe o mouse e verifique o resultado

Publique o cabeçalho e abra seu site Passe o mouse “Dishes” e o menu completo do restaurante cai sobre a página: categorias à esquerda, pratos com preços no meio, especial desta noite e o botão Reserve uma mesa à direita.

Clique em cada categoria para se certificar de que a contagem de pratos e links se comportam, em seguida, verifique o painel contra a página atrás dele Um painel escuro sobre um herói escuro precisa de uma borda ou sombra para que suas bordas permaneçam visíveis.

Passo 7: Mantenha-o rápido

Imagens do menu carregam em cada página do seu site, então um mega menu descuidado retarda todo o site do restaurante Os sites de restaurantes lentos perdem clientes que estão comparando opções em dados móveis.

• Use uma foto no painel (o especial apresentado), não uma galeria.
• Comprima-o e sirva WebP; dimensione-o para o espaço que realmente ocupa.
• Escreva texto alt real (“wood-fired margherita pizza”).Ajuda na acessibilidade e na pesquisa de imagens.
• Verifique o seu geral Velocidade da página do elementador depois de adicionar o menu, não antes.

Passo 8: Faça funcionar nos telefones

A maior parte do tráfego de restaurantes é móvel, frequentemente proveniente de pessoas que estão do lado de fora e decidem se devem entrar. É por isso que nos propusemos Menu Móvel para o Conteúdo do Construtor de volta na Etapa 3 O mesmo painel que você projetou serve o layout do telefone em vez de uma lista de links simples Um painel amplo ainda precisa entrar em colapso graciosamente:

• Esconder a foto do especial no celular, manter o botão Reserve uma Tabela Os controles de visibilidade responsivos do Elementor lidam com isso por elemento.
• Coloque os links da categoria em primeiro lugar na ordem de empilhamento; foi para isso que vieram os visitantes do telefone.
• Mantenha o botão “Reserve a Table” acessível sem rolagem longa.
• Teste em um telefone real A visualização do editor aproxima o comportamento do toque; ele não o reproduz.

Se o ponto de interrupção padrão do tablet cortar seu painel de maneira estranha, defina o seu próprio com o grátis Extensão de pontos de interrupção personalizados.

Opcional: Mostrar itens sazonais automaticamente

Os restaurantes oferecem ofertas com prazo determinado constantemente: lanche especiais, cardápios festivos, happy hour. Com o grátis Exibição Extensão das condições você pode definir um intervalo de datas ou regra do dia da semana em um elemento do painel para que o link do menu de Natal apareça em dezembro e se remova em janeiro, sem que ninguém edite o site à meia-noite.

Perguntas frequentes

Leitura Relacionada

• Elementor Theme Builder para Grátis
• Como adicionar um pop-up no Elementor gratuitamente
• Widget de Horário Comercial