Inhaltsverzeichnis
Ein Restaurant Mega-Menü ist ein breites Dropdown-Panel, das Ihre gesamte Speisekarte, diätetische Informationen, Öffnungszeiten und einen Buchungsbutton an einem Ort platziert, anstatt sie hinter mehreren Klicks zu begraben. Die Gäste kommen an und möchten Essen, Preise, Stunden und eine Möglichkeit zum Buchen sehen. Normalerweise am Telefon. Oft während der Entscheidung zwischen Ihnen und woanders.
Dieser Leitfaden erstellt einen mit kostenlosem Elementor und kostenlosem Master Addons Mega-MenüEs wird kein Elementor Pro benötigt Hier das fertige Ergebnis Mit dem schwebenden “Geschirr” wird die komplette Restaurantkarte mit Kategorien, Preisen, Diät-Tags, dem Special für heute Abend, und einem Button Tisch reservieren: geöffnet
Wenn Ihnen der Restaurant-Mega-Menü-Stil gefällt, können Sie ihn herunterladen und im Master-Addons-Widget-Builder importieren. Dann können Sie die Textfarbe, das Bild, die URL usw. ganz einfach an Ihre Bedürfnisse anpassen und in Ihrem Mega-Menü auf Ihrer Restaurant-Website verwenden.
Laden Sie das Mega-Menü des Restaurants herunter
Was ein Restaurant-Mega-Menü enthalten sollte
Bevor Sie etwas bauen, entscheiden Sie, was einen Platz im Panel einbringt. Das Layout, das wir in diesem Leitfaden erstellen, besteht aus vier Zonen, und sie decken fast jedes Restaurant ab:
| Zone | Inhalt | Warum es da ist |
|---|---|---|
| Kategorie Seitenleiste | Vorspeisen, Pasta und Risotto, Holzpizza, Netz & Grill, Desserts, Wein & Getränke | Lassen Sie die Gäste direkt zu dem Abschnitt springen, der ihnen am Herzen liegt |
| Geschirrgitter | Dish-Namen, Kurzbeschreibungen, Preise, Tags wie Vegetarisch, Spicy, Chef's Pick | Der meistgesuchte Einzelinhalt auf einer Restaurantseite mit in die Tags integrierten Ernährungsinformationen |
| Ausgewählte Karte | Das Special heute Abend mit Foto, Beschreibung und Preis | Gibt der Küche einen Ort, an dem sie ihren besten Teller verkaufen kann |
| Aktionsfußzeile | Reservieren Sie einen Tisch-Button, Öffnungszeiten, Adresse, komplettes Menü PDF-Link | Konvertiert den Besuch, anstatt ihn nur zu informieren |
Was Sie weglassen sollten: Ihre vollständige Geschichte, Presseerwähnungen und soziale Feeds. Die gehören dazu Die Fußzeile. Ein Navigationsfeld dient dazu, Menschen irgendwohin zu bringen, nicht um die ganze Geschichte zu erzählen.
Benötigen Sie dafür Elementor Pro?
Nr. Elementors eigenes Mega-Menü-Widget befindet sich im Elementor Pro, aber die kostenlose Route unten erstellt dasselbe Panel ohne Abonnement.
| Route | Kosten | Abwägung |
|---|---|---|
| Elementor Pro Mega Menü Widget | Bezahlte Jahreslizenz | Erfordert Pro auf jeder von Ihnen erstellten Website und ermöglicht experimentelle Funktionen |
| Benutzerdefinierter CSS / handcodierter Dropdown | Kostenlos | Zerbrechlich, schwer zu bearbeiten zwischen Menüänderungen, keine visuelle Bearbeitung |
| Master Addons Mega-Menü | Kostenlos | Fügt ein Plugin hinzu; das Panel ist wie jede andere Seite visuell in Elementor gestaltet |
Für ein Restaurant mit einem Standort, das seine Speisekarte ein paar Mal im Jahr aktualisiert, reicht die kostenlose Erweiterung aus. Eine größere Gruppe mit mehreren Standorten, die mehrere Redakteure jongliert, könnte immer noch einen Nutzen aus Pros breiterem Toolset ziehen, aber das ist eine Entscheidung über die gesamte Website, nicht über das Mega-Menü speziell. Elementor Dokumentiert hier seinen Pro Mega Menü Workflow Wenn man es direkt vergleichen will.
Was Sie brauchen
- Elementor (kostenlose Version ist in Ordnung)
- Master-Addons für ElementorInstalliert und aktiv
- Bereits erstellte Seiten für Ihre Menüabschnitte (es können vorerst Platzhalter sein)
Schritt 1: Aktivieren Sie die Mega-Menü-Erweiterung
Master Addons behält jedes Widget und jede Erweiterung hinter einem Kipphebel, sodass ungenutzte Addons niemals geladen werden. Gehen Sie zu Master Addons → EinstellungenÖffnen Sie die Erweiterungen Tab, und finden Mega-Menü In der Gruppe Anzeige. drehen Sie den Umschalter auf und klicken Sie Änderungen speichern. Wenn du den Kipphebel nicht siehst, bist du wahrscheinlich auf einer alten Plugin-Version, also erst aktualisieren.
Schritt 2: Strukturieren Sie das WordPress-Menü und schalten Sie das Mega-Menü ein
Gehe zu Aussehen → Menüs und bauen Sie das Skelett, bevor Sie irgendein Design berühren In diesem Build wird das Menü Hauptmenü mit fünf Elementen genannt: Startseite, Gerichte, Über uns, Blog, Konto. “Geschirr” ist der Artikel, der das Mega-Panel bekommt.
Holen Sie sich zuerst die Struktur richtig Das Mega-Panel ist an einem Menüpunkt befestigt, sodass das Umstellen im Nachhinein eine Neugestaltung der Designarbeit bedeutet.
Mit der Erweiterung aktiv, a Master Addons Mega-Menü Box erscheint in der linken Spalte des Menüs-Bildschirms Schalten Sie dessen Mega-Menü aktivieren Umschalten auf. In dem Moment, in dem du es tust, ein Lila Meister Mega Badge erscheint neben jedem Menüpunkt. Bei diesem Badge leben die Mega-Menüoptionen jedes Artikels.
Schritt 3: Schalten Sie das Mega-Menü für Ihren Geschirrartikel ein
Klicken Sie auf die Meister Mega Abzeichen auf dem Punkt “Geschirr” Ein Einstellungs-Popup wird mit vier Registerkarten geöffnet: Inhalt, Einstellungen, Symbol und Abzeichen.
- Auf der Inhalt Tab, drehen Sie die Megamenu-fähig Wechseln Sie zu JA. Die Schaltfläche Megamenu Content bearbeiten leuchtet auf.
- Auf der Einstellungen Tabulator, legen Sie die Panelgröße und das Verhalten fest. Wir haben verwendet Benutzerdefinierte Breite Bei 1000 px, breit genug für ein Geschirrraster plus eine vorgestellte Karte Voll Breite ist auch da, wenn Ihr Design den ganzen Bildschirm braucht.
- Set Mobiles Menü Inhalte erstellen Auslöseeffekt Schweben, und Übergang Zu Fade. Icon und Badge Tabs sind optionale Extras (ein “Neues” Badge auf einem saisonalen Menü zum Beispiel).
- Klicken Sie auf Speichern.
Sie konfigurieren die Mega-Menübreite über die Registerkarte Einstellungen: Volle Breite, Standard oder eine benutzerdefinierte Breite wie unsere 1000 px. Auf derselben Registerkarte befinden sich die Quelle des mobilen Menüs, der Trigger-Effekt (Hover oder Klick), die Übergangsanimation und Umschaltungen für die Menübezeichnung und Beschreibung:
Schritt 4: Entwerfen Sie das Panel in Elementor
Zurück auf der Registerkarte Inhalt, klicken Sie Megamenu-Inhalte bearbeiten. Das Panel öffnet sich im normalen Elementor-Editor, also gestaltet man es wie jede andere Seite Bauen Sie die vier Zonen aus der obigen Tabelle aus:
- Kopfstreifen: Restaurantname plus eine kurze Küchennotiz (“Küche geöffnet bis 11:00 pm · Holzofen täglich gebrannt um 4”).Die Notiz beantwortet leise die Frage “sind sie geöffnet?”, ohne dass jemand stundenlang jagt.
- Kategorie Seitenleiste: Vorspeisen, Pasta und Risotto, Holzpizza, Hauptgerichte, Desserts, Wein und Getränke, jeweils mit einer Anzahl von Gerichten.
- Geschirrraster: Name, einzeilige Beschreibung, Preis und Tags wie Vegetarian, Spicy oder Chef's Pick. Die Tags verarbeiten die Nahrungsfilterung ohne separate Spalte.
- Ausgewählte Karten- und Aktionsfußzeile: Das Special heute Abend mit Foto und Preis, ein Reservieren Sie eine Tischtaste‘s, Öffnungszeiten und Adresse, und einen Link “Vollmenü herunterladen (PDF)” Wer lieber strukturierte Öffnungszeiten anzeigen möchte, der Geschäftszeiten-Widget Sie an einem Ort bearbeitbar hält.
Jeder Gerichtname, Preis und Tag bleibt über das Elementor-Panel auf der linken Seite bearbeitbar. Das spätere Aktualisieren des Menüs ist eine Inhaltsbearbeitung und kein Designauftrag. Veröffentlichen Sie die Vorlage, wenn Sie fertig sind, und schließen Sie den Editor.
Schritt 5: Legen Sie das Menü in Ihre Kopfzeile
Das Mega-Menü benötigt einen Header zum Leben, wenn der Header Ihres Themes bereits das Hauptmenü anzeigt, können Sie diesen Schritt überspringen, aber beim Erstellen des Headers mit Master-Addons bleibt alles in einem Editor. Der Theme Builder ist kostenlos„im Gegensatz zu Elementor Pro.
- Gehe zu Master-Addons → Theme Builder und klicken Neue Vorlage hinzufügen.
- Stellen Sie den Vorlagentyp auf ein KopfzeileSchalten Aktivierung on, und unter Bedingungen wählen Einschließen → Gesamte Seite.
- Klicken Sie auf Mit Elementor bearbeiten.
Ziehen Sie innerhalb der Header-Vorlage die Navigationsmenü Widget und Pick Hauptmenü Unter Menü auswählen Stellen Sie das Layout auf Horizontal ein und richten Sie es so aus, wie Ihr Header-Design es erfordert. Der Artikel “Gerichte” trägt sein Mega-Panel automatisch mit sich.
Schritt 6: Bewegen Sie den Mauszeiger und überprüfen Sie das Ergebnis
Veröffentlichen Sie den Header und öffnen Sie Ihre Seite Bewegen Sie den Mauszeiger “Gerichte” und das vollständige Restaurantmenü fällt über die Seite nach unten: Kategorien links, Gerichte mit Preisen in der Mitte, das Special heute Abend und der Button Tisch reservieren rechts.
Klicken Sie sich durch jede Kategorie, um sicherzustellen, dass das Gericht zählt und Links sich verhalten, und überprüfen Sie dann das Panel mit der Seite dahinter. Ein dunkles Panel über einem dunklen Helden benötigt einen Rand oder Schatten, damit seine Kanten sichtbar bleiben.
Schritt 7: Halten Sie es schnell
Menübilder werden auf jeder Seite Ihrer Website geladen, sodass ein nachlässiges Mega-Menü die gesamte Restaurant-Website verlangsamt. Langsame Restaurantseiten verlieren Gäste, die Optionen auf mobile Daten vergleichen.
- Verwenden Sie ein Foto im Panel (das vorgestellte Special), keine Galerie.
- Komprimieren Sie es und bedienen Sie WebP; Größen Sie es auf den tatsächlich belegten Platz ein.
- Schreibe echten Alt-Text (“Holzbefeuerte Margherita-Pizza”) Es hilft bei der Barrierefreiheit und der Bildersuche.
- Überprüfen Sie Ihre Gesamt Elementor-Seitengeschwindigkeit Nach dem Hinzufügen des Menüs, nicht vorher.
Schritt 8: Sorgen Sie dafür, dass es auf Telefonen funktioniert
Der größte Teil des Restaurantverkehrs ist mobil, häufig von Leuten, die draußen stehen und entscheiden, ob sie reinkommen. Aus diesem Grund legen wir fest Mobiles Menü to Builder Content zurück in Schritt 3. Das gleiche Panel, das Sie entworfen haben, dient dem Telefonlayout anstelle einer bloßen Linkliste Ein breites Panel muss noch anmutig zusammenbrechen:
- Foto des Specials auf Mobil ausblenden, Taste Tisch reservieren behalten Die responsiven Sichtkontrollen von Elementor übernehmen das pro Element.
- Setzen Sie die Kategorielinks in der Stapelreihenfolge an die erste Stelle; Dafür kamen Telefonbesucher.
- Halten Sie die Schaltfläche “Tisch reservieren” ohne langes Scrollen erreichbar.
- Testen Sie auf einem echten Telefon. Die Editorvorschau nähert sich dem Berührungsverhalten an; es reproduziert es nicht.
Wenn der Standard-Tablet-Breakpoint Ihr Panel umständlich schneidet, legen Sie Ihr eigenes mit dem kostenlosen fest Benutzerdefinierte Haltepunkteerweiterung.
Optional: Saisonale Artikel automatisch anzeigen
Restaurants führen ständig zeitgebundene Angebote: Mittags-Specials, festliche Menüs, Happy Hour Mit dem kostenlosen Erweiterung der Anzeigebedingungen Sie können einen Datumsbereich oder eine Wochentagsregel für ein Panelelement festlegen, sodass der Weihnachtsmenülink im Dezember erscheint und sich im Januar entfernt, ohne dass die Website um Mitternacht bearbeitet wird.
Häufig gestellte Fragen
Wie erstelle ich ein Restaurant-Megamenü in Elementor?
Aktivieren Sie die kostenlose Master Addons Mega Menu Erweiterung, bauen Sie Ihr Menü unter Aussehen > Menüs, schalten Sie Mega Menü aktivieren ein, klicken Sie dann auf das Master Mega Badge auf Ihrem Dishes Artikel und stellen Sie Megamenu Aktiviert auf ja. Klicken Sie auf Megamenu Inhalt bearbeiten und entwerfen Sie das Panel in Elementor: Menükategorien, Gerichte mit Preisen und Diät-Tags, ein Featured Special, und eine Taste reservieren Zum Schluss zeigen Sie das Menü mit dem Navigationsmenü-Widget in Ihrer Kopfzeile an.
Brauche ich Elementor Pro für ein Restaurant-Megamenü?
Das Mega-Menü-Widget von No. Elementor ist eine Pro-Funktion, aber die kostenlose Master Addons Mega Menu-Erweiterung bietet die gleiche Funktion zum kostenlosen Elementor und Sie entwerfen das Dropdown-Panel im normalen Elementor-Editor.
Was sollte eine Speisekarte für Restaurants beinhalten?
Speisekartenkategorien wie Vorspeisen, Stromnetz, Desserts und Getränke; Gerichtspreise mit Diätanhängern wie vegetarisch, vegan und würzig; Öffnungszeiten und Adresse; und eine klare Buchungs- oder Online-Bestellaktion. Hinterlassen Sie Ihre Über-Geschichte, Presseerwähnungen und Social Feeds für die Fußzeile.
Wird ein Mega-Menü die Website meines Restaurants verlangsamen?
Es kann, weil Menübilder auf jeder Seite laden Verwenden Sie ein einzelnes komprimiertes WebP-Foto, das auf seinen Anzeigeplatz zugeschnitten ist, anstatt eine Galerie, schreiben Sie echten Alt-Text und überprüfen Sie Ihre Seitengeschwindigkeit nach dem Hinzufügen des Menüs erneut Vorsichtig ausgeführt ist die Auswirkung vernachlässigbar.
Wie mache ich ein Restaurant Mega Menü funktioniert auf Mobil?
Stellen Sie die Option Mobiles Menü auf Builder Content, damit Telefone Ihr entworfenes Panel erhalten, verstecken Sie das Geschirrfoto auf dem Handy, während Sie die Buchungsschaltfläche beibehalten, stapeln Sie zuerst Kategorienlinks und halten Sie die Schaltfläche Reservieren Sie eine Tabelle ohne langes Scrollen erreichbar Testen Sie immer auf einem echten Telefon und nicht in der Editorvorschau.
Kann ich saisonale Menüpunkte nur zu bestimmten Terminen anzeigen?
Ja. Mit der kostenlosen Erweiterung Anzeigebedingungen können Sie einen Datumsbereich oder eine Wochentagsregel für jedes Element innerhalb des Mega-Menüfelds festlegen. Daher erscheint ein festlicher Menülink und verschwindet planmäßig, ohne dass jemand die Website bearbeitet.
Ist das Max-Mega-Menü kostenlos und passt es gut für einen Restaurantstandort?
Max Mega Menu hat eine kostenlose Version im WordPress-Repository plus ein kostenpflichtiges Pro-Add-on Es ist ein eigenständiges Menü-Plugin, nicht speziell für Elementor gebaut, daher werden Panels in einer eigenen Oberfläche bearbeitet und nicht der Elementor-Editor, den Sie bereits für Seiten verwenden Für einen All-Elementor-Restaurant-Build behält Master Addons Mega Menu das gesamte Panel in einem Editor.
Verwandte Lektüre
