Table des matières
Un méga menu de restaurant est un large panneau déroulant qui met tout votre menu de nourriture, info diététique, heures d'ouverture, et un bouton de réservation en un seul endroit au lieu de les enterrer derrière plusieurs clics Les convives arrivent voulant voir la nourriture, les prix, les heures, et une façon de réserver Habituellement sur un téléphone Souvent tout en décidant entre vous et ailleurs.
Ce guide en construit un avec Elementor gratuit et gratuit Menu Mega des modules complémentaires principaux. Aucun Elementor Pro n'est nécessaire Voici le résultat fini Le vol stationnaire de “Dishes” ouvre le menu complet du restaurant avec des catégories, des prix, des étiquettes diététiques, le spécial de ce soir, et un bouton Réserver une table :
Si vous aimez le style de méga menu du restaurant, vous pouvez le télécharger et l'importer dans le constructeur de widgets addons principaux. Ensuite, vous pouvez facilement personnaliser la couleur du texte, l'image, l'url, etc. en fonction de vos besoins et l'utiliser dans votre méga menu sur le site Web de votre restaurant.
Télécharger le Mega Menu Restaurant
Ce que devrait contenir un méga menu de restaurant
Avant de construire quoi que ce soit, décidez ce qui rapporte une place dans le panneau La disposition que nous construisons dans ce guide comporte quatre zones, et elles couvrent presque tous les restaurants :
| Zone | Contenu | Pourquoi c'est là |
|---|---|---|
| Catégorie sidebar | Entrées, Pâtes & Risotto, Pizza au feu de bois, Mains & Grill, Desserts, Vin & Boissons | Laisse les convives sauter directement dans la section qui leur tient à cœur |
| Grille à vaisselle | Noms de plats, descriptions courtes, prix, tags comme Végétarien, Épicé, Chef's Pick | Le contenu le plus recherché sur n'importe quel site de restaurant contient des informations diététiques intégrées aux balises |
| Carte en vedette | Spécial ce soir avec une photo, une description et un prix | Donne à la cuisine un endroit pour vendre sa meilleure assiette |
| Pied d'action | Réserver un bouton Table, heures d'ouverture, adresse, menu complet Lien PDF | Convertit la visite au lieu de simplement l'informer |
Que laisser de côté : votre histoire complète, vos mentions dans la presse et vos flux sociaux. Ceux-ci appartiennent le pied de page. Un panneau de navigation sert à amener les gens quelque part, et non à raconter toute l'histoire.
Avez-vous besoin d'Elementor Pro pour cela ?
Le méga widget de menu de No. Elementor se trouve dans Elementor Pro, mais l'itinéraire gratuit ci-dessous crée le même panneau sans abonnement.
| Route | Coût | compromis |
|---|---|---|
| Widget Elementor Pro Mega Menu | Licence annuelle payante | Nécessite Pro sur chaque site que vous construisez, ainsi que des fonctionnalités expérimentales |
| CSS personnalisé/dépose codée à la main | Gratuit | Fragile, difficile à modifier entre les modifications de menu, pas de modification visuelle |
| Menu Mega des modules complémentaires principaux | Gratuit | Ajoute un plugin ; le panneau est conçu visuellement dans Elementor comme n'importe quelle autre page |
Pour un restaurant à emplacement unique mettant à jour son menu plusieurs fois par an, l'extension gratuite suffit Un groupe multi-localisations plus important jonglant avec plusieurs éditeurs pourrait toujours obtenir de la valeur de l'ensemble d'outils plus large de Pro, mais c'est une décision sur l'ensemble du site, pas sur le méga menu spécifiquement Élémenteur documente ici son flux de travail Pro mega menu si vous voulez le comparer directement.
Ce dont vous avez besoin
- Élémenteur (la version gratuite est correcte)
- Modules complémentaires principaux pour Elementor(s), installé et actif
- Pages déjà créées pour vos sections de menu (elles peuvent être des espaces réservés pour l'instant)
Étape 1 : Activer l'extension Mega Menu
Master Addons garde chaque widget et extension derrière une bascule pour que ceux qui ne sont pas utilisés ne se chargent jamais Aller à Additions principales → Paramètres, ouvre le Extensions tab, et trouver Méga Menu dans le groupe Affichage. Allumez sa bascule et cliquez Enregistrer Modifications. Si vous ne voyez pas la bascule, vous êtes probablement sur une ancienne version de plugin, alors mettez à jour en premier.
Étape 2 : Structurez le menu WordPress et activez le méga-menu
Aller à Apparence → Menus et construisez le squelette avant de toucher n'importe quel design Dans cette construction, le menu s'appelle Menu principal avec cinq éléments : Accueil, Vaisselle, À propos de nous, Blog, Compte. “Dishes” est l'élément qui obtient le méga panneau.
Obtenez la structure droite d'abord Le méga panneau est attaché à un élément de menu, donc réorganiser ensuite signifie refaire le travail de conception.
Avec l'extension active, a Menu Mega des modules complémentaires principaux case apparaît dans la colonne de gauche de l'écran Menus. Commuter son Activer le méga menu basculer Le moment où tu fais, un violet Maître Méga le badge apparaît à côté de chaque élément du menu. Ce badge est l'endroit où vivent les méga options de menu de chaque élément.
Étape 3 : activez le méga menu de votre article de plats
Cliquez sur le Maître Méga badge sur l'élément “Dishes” Une fenêtre contextuelle de paramètres s'ouvre avec quatre onglets : Contenu, Paramètres, Icône et Badge.
- Sur le Contenu tab, lance le Megamenu activé passez à OUI. Le bouton Modifier le contenu Megamenu s'allume.
- Sur le Paramètres onglet, définissez la taille et le comportement du panneau. Nous avons utilisé Largeur personnalisée à 1000 px, assez large pour une grille de plat plus une carte en vedette La pleine largeur est également là si votre design a besoin de tout l'écran.
- Définir Menu Mobile au contenu du constructeur, Effet déclencheur à Hover, et Transition à Fade. Les onglets Icône et Badge sont des extras optionnels (un badge“New” sur un menu saisonnier, par exemple).
- Cliquez Enregistrer.
Vous configurez la largeur du méga menu à partir de l'onglet Paramètres : Pleine largeur, par défaut ou largeur personnalisée comme notre 1000 px. Le même onglet contient la source du menu mobile, l'effet de déclenchement (déplacer ou cliquer), l'animation de transition et les basculements pour l'étiquette et la description du menu :
Étape 4 : Concevoir le panneau dans Elementor
Retour sur l'onglet Contenu, cliquez sur Modifier le contenu Megamenu. Le panneau s'ouvre dans l'éditeur Elementor normal, vous le concevez donc comme n'importe quelle autre page Construisez les quatre zones à partir du tableau ci-dessus :
- Bande d'en-tête : nom du restaurant plus une courte note de cuisine“ (Cuisine ouverte jusqu'à 23h00 · Four à bois cuit quotidiennement à 4”). La note répond tranquillement à la question “are ils ouvrent ?” sans que personne ne chasse pendant des heures.
- Barre latérale de catégorie : Entrées, pâtes et risotto, pizza au feu de bois, plats et grillades, desserts, vins et boissons, chacun avec un nombre de plats.
- Grille de plats : nom, description d'une ligne, prix et tags tels que Végétarien, Épicé, ou Chef's Pick Les tags gèrent le filtrage alimentaire sans colonne séparée.
- Pied de page de carte et d'action en vedette : le spécial de ce soir avec photo et prix, a Réserver un bouton Table, heures d'ouverture et adresse, et un lien “Télécharger le menu complet (PDF)” Si vous préférez afficher les heures d'ouverture structurées, le Widget Heures d'affaires les garde modifiables en un seul endroit.
Chaque nom de la parabole, prix et étiquette reste modifiable à partir du panneau Élémenteur à gauche La mise à jour du menu plus tard est une modification de contenu, pas un travail de conception Publiez le modèle lorsque vous avez terminé et fermez l'éditeur.
Étape 5 : Mettez le menu dans votre en-tête
Le méga menu a besoin d'un en-tête pour vivre Si l'en-tête de votre thème affiche déjà le menu principal, vous pouvez sauter cette étape, mais la construction de l'en-tête avec Master Addons conserve tout dans un seul éditeur Theme Builder est gratuit[traduction], contrairement à celui d'Elementor Pro.
- Aller à Additions principales → Créateur de thèmes et cliquez Ajouter un nouveau modèle.
- Définissez le type de modèle sur En-tête, interrupteur Activation sur, et sous Conditions choisir Inclure → Site entier.
- Cliquez Modifier avec Elementor.
À l'intérieur du modèle d'en-tête, faites glisser le Menu Navigation widget et choisissez Menu Principal sous Sélectionner le menu. Définissez la disposition sur Horizontal et alignez-la comme l'exige votre conception d'en-tête. L'élément “Dishes” transporte automatiquement son méga panneau avec lui.
Étape 6 : Survolez et vérifiez le résultat
Publiez l'en-tête et ouvrez votre site Hover “D“” et le menu complet du restaurant descend sur la page : catégories à gauche, plats avec prix au milieu, spécial ce soir et bouton Réserver une table à droite.
Cliquez sur chaque catégorie pour vous assurer que le plat compte et que les liens se comportent bien, puis vérifiez le panneau par rapport à la page derrière. Un panneau sombre sur un héros sombre a besoin d'une bordure ou d'une ombre pour que ses bords restent visibles.
Étape 7 : Gardez-le rapide
Les images de menu se chargent sur chaque page de votre site, donc un méga menu imprudent ralentit l'ensemble du site du restaurant Les sites de restaurants lents perdent les convives qui comparent les options sur les données mobiles.
- Utilisez une photo dans le panneau (le spécial présenté), pas une galerie.
- Compressez-le et servez WebP ; taillez-le à l'espace qu'il occupe réellement.
- Écrivez du vrai texte alternatif (“wood-fired margherita pizza”).Il aide à l'accessibilité et à la recherche d'images.
- Vérifiez votre globalement Vitesse de la page de l'élémentateur après avoir ajouté le menu, pas avant.
Étape 8 : Faites en sorte que cela fonctionne sur les téléphones
La plupart du trafic des restaurants est mobile, souvent de personnes debout dehors décidant d'entrer ou non. C'est pourquoi nous nous sommes installés Menu Mobile pour le contenu du constructeur à l'étape 3. le même panneau que vous avez conçu sert la disposition du téléphone au lieu d'une liste de liens nus. Un panneau large doit encore s’effondrer gracieusement :
- Cacher la photo de la spéciale sur mobile, garder le bouton Réserver une table Les commandes de visibilité réactive d'Elementor gèrent cela par élément.
- Mettez les liens de catégorie en premier dans l’ordre d’empilement ; c'est pour cela que les visiteurs du téléphone sont venus.
- Gardez le bouton “Reserve a Table” accessible sans long défilement.
- Test sur un vrai téléphone L'aperçu de l'éditeur se rapproche du comportement tactile ; il ne le reproduit pas.
Si le point d'arrêt par défaut de la tablette coupe maladroitement votre panneau, définissez le vôtre gratuitement Extension personnalisée des points d'arrêt.
Facultatif : Afficher automatiquement les éléments saisonniers
Les restaurants proposent constamment des offres limitées dans le temps : plats spéciaux pour le déjeuner, menus festifs, happy hour. Avec le gratuit Extension Conditions d'affichage vous pouvez définir une plage de dates ou une règle du jour de la semaine sur un élément du panneau afin que le lien du menu de Noël apparaisse en décembre et se supprime en janvier, personne n'éditant le site à minuit.
Foire aux questions
Comment créer un méga menu restaurant dans Elementor ?
Activez l'extension gratuite Master Addons Mega Menu, créez votre menu sous Apparence > Menus, activez Activer Mega Menu, puis cliquez sur le badge Master Mega sur votre élément Plats et définissez Megamenu Activé sur oui Cliquez sur Modifier le contenu Megamenu et concevez le panneau dans Elementor : catégories de menu, plats avec prix et étiquettes diététiques, un spécial en vedette et un bouton Réserver une table Enfin, affichez le menu avec le widget Menu Navigation dans votre en-tête.
Ai-je besoin d'Elementor Pro pour un méga menu de restaurant ?
Le méga widget de menu de No. Elementor est une fonctionnalité Pro, mais l'extension gratuite Master Addons Mega Menu ajoute la même capacité à libérer Elementor, et vous concevez le panneau déroulant dans l'éditeur Elementor normal.
Que doit inclure un menu du site Web du restaurant ?
Catégories de menus alimentaires telles que entrées, plats, desserts et boissons ; prix des plats avec des étiquettes diététiques comme végétarien, végétalien et épicé ; heures d'ouverture et adresse ; et une action de réservation claire ou de commande en ligne. Laissez votre histoire, mentions de presse et flux sociaux pour le pied de page.
Un méga menu va-t-il ralentir le site de mon restaurant ?
Il peut, parce que les images de menu se chargent sur chaque page Utilisez une seule photo WebP compressée dimensionnée à son espace d'affichage plutôt qu'une galerie, écrivez du texte alternatif réel et revérifiez la vitesse de votre page après avoir ajouté le menu Fait soigneusement l'impact est négligeable.
Comment faire fonctionner un méga menu de restaurant sur mobile ?
Définissez l'option Menu mobile sur Contenu du constructeur afin que les téléphones obtiennent votre panneau conçu, masquent la photo de la parabole sur mobile tout en conservant le bouton de réservation, empilez d'abord les liens de catégorie et gardez le bouton Réserver une table accessible sans long défilement. Testez toujours sur un vrai téléphone plutôt que sur l'aperçu de l'éditeur.
Puis-je afficher les éléments du menu saisonnier uniquement à certaines dates ?
Oui. L'extension gratuite Conditions d'affichage vous permet de définir une plage de dates ou une règle du jour de la semaine sur n'importe quel élément du panneau de menu méga, de sorte qu'un lien de menu festif apparaît et disparaît dans les délais sans que personne ne modifie le site.
Max Mega Menu est-il gratuit et convient-il bien à un site de restaurant ?
Max Mega Menu a une version gratuite dans le dépôt WordPress plus un add-on Pro payant C'est un plugin de menu autonome, non construit spécifiquement pour Elementor, donc les panneaux sont édités dans sa propre interface plutôt que l'éditeur Elementor que vous utilisez déjà pour les pages Pour une construction de restaurant tout-Elementor, Master Addons Mega Menu garde tout le panneau dans un seul éditeur.
Lecture Connexe
