Indholdsfortegnelse
En restaurant mega menu er et bredt dropdown panel, der sætter hele din mad menu, kosten info, åbningstider, og en booking knap på ét sted i stedet for at begrave dem bag flere klik. Diners ankommer ønsker at se mad, priser, timer, og en måde at booke. Normalt på en telefon. Ofte mens de beslutter mellem dig og et andet sted.
Denne guide bygger en med gratis Elementor og den gratis Master Addons Mega Menu. Ingen Elementor Pro er nødvendig. Her er det færdige resultat. Svævende “Dishes” åbner den fulde restaurant menu med kategorier, priser, kosten tags, aftenens særlige, og en Reserve a Table knap:
Hvis du kan lide restaurant mega menu stil så kan du downloade det og importere det i master addons widget builder. Så kan du nemt tilpasse tekst farve, billede, url osv baseret på dine behov og bruge det i din mega menu på din restaurant hjemmeside.
Hvad en Restaurant Mega Menu Skal Indeholde
Før du bygger noget, skal du beslutte, hvad der tjener en plads i panelet. Layoutet, vi bygger i denne guide, har fire zoner, og de dækker næsten hver restaurant:
| Zone | Indhold | Hvorfor det er der |
|---|---|---|
| Kategori sidebjælke | Forretter, Pasta & Risotto, Brændefyret Pizza, Net & Grill, Desserter, Vin & Drikkevarer | Lader spisende gæster springe direkte til den sektion, de holder af |
| Opvaskegitter | Fadnavne, korte beskrivelser, priser, tags som Vegetar, Spicy, Chef's Pick | Det mest eftersøgte indhold på enhver restaurantside - med kostinfo indbygget i taggene |
| Udvalgt kort | Aftenens special med foto, beskrivelse og pris | Giver køkkenet et sted at sælge sin bedste tallerken |
| Action footer | Reserver en Table knap, åbningstider, adresse, fuld menu PDF link | Konverterer besøget i stedet for blot at informere det |
Hvad skal du udelade: din fulde Om historie, presseomtaler, og sociale feeds. De hører til i sidefoden. Et navigationspanel er til at få folk et sted hen, ikke til at fortælle hele historien.
Har du brug for Elementor Pro til dette?
Nej. Elementors egen megamenu-widget sidder inde i Elementor Pro, men den gratis rute nedenfor bygger det samme panel uden abonnement.
| Route | Omkostning | Afvejning |
|---|---|---|
| Elementor Pro Mega Menu widget | Betalt årslicens | Kræver Pro på hvert websted, du bygger, plus aktivering af eksperimentelle funktioner |
| Brugerdefineret CSS / håndkodet dropdown | Free | Skrøbelig, svær at redigere mellem menuændringer, ingen visuel redigering |
| Master Addons Mega Menu | Free | Tilføjer et plugin; panelet er designet visuelt i Elementor som enhver anden side |
For en restaurant med et enkelt sted, der opdaterer sin menu et par gange om året, er den gratis udvidelse nok. En større gruppe med flere steder, der jonglerer med flere redaktører, kan stadig få værdi fra Pros bredere værktøjssæt, men det er en beslutning om hele webstedet, ikke om megamenuen specifikt. Elementor dokumenterer sin Pro mega menu workflow her hvis du vil sammenligne det direkte.
Hvad du har brug for
- Elementor (gratis version er fint)
- Master Addons til Elementor, installeret og aktiv
- Sider, der allerede er oprettet til dine menusektioner (de kan være pladsholdere indtil videre)
Trin 1: Aktiver Mega Menu Extension
Master Addons holder hver widget og udvidelse bag en toggle, så ubrugte aldrig indlæses. Gå til Master Addons → Indstillinger, åbne den Udvidelser fane, og find Mega Menu i gruppen Display. Vend dens skift til, og klik Gem ændringer. Hvis du ikke kan se toggle, er du sandsynligvis på en gammel plugin-version, så opdater først.
Trin 2: Strukturer WordPress Menu og Tænd Mega Menu
Gå til Udseende → Menuer og bygge skelettet før du rører noget design. I denne bygge menuen hedder Main Menu med fem elementer: Hjem, Retter, Om os, Blog, Konto. “Dishes” er det element, der får megapanelet.
Få strukturen lige først. Megapanelet er fastgjort til et menupunkt, så omarrangering bagefter betyder at lave designarbejde om.
Med udvidelsen aktiv, en Master Addons Mega Menu boks vises i venstre kolonne på skærmen Menuer. Skift dens Aktiver Mega Menu slå om. I det øjeblik du gør, en lilla Mester Mega badge vises ved siden af hvert menupunkt. Det badge er, hvor hvert elements mega menu muligheder bor.
Trin 3: Tænd for megamenuen for din ret
Klik på Mester Mega badge på “Dishes” element. En indstillinger popup åbnes med fire faner: Indhold, Indstillinger, Ikon, og Badge.
- På Content fane, vend Megamenu aktiveret skift til JA. Knappen Rediger Megamenu-indhold lyser.
- På Indstillinger tab, indstil panelets størrelse og adfærd. Vi brugte Brugerdefineret bredde ved 1000px, bred nok til et parabolgitter plus et fremhævet kort. Full Width er der også, hvis dit design har brug for hele skærmen.
- Set Mobil Menu til Builder Content, Trigger Effect at svæve, og Transition til Fade. Ikon og Badge faner er valgfrie ekstramateriale (en “Ny” badge på en sæsonbestemt menu, for eksempel).
- Klik Gem.
Du konfigurerer mega menu bredden fra fanen Indstillinger: Fuld bredde, standard eller en brugerdefineret bredde som vores 1000px. Den samme fane holder Mobile Menu kilden, Trigger Effect (svæve eller klikke), overgangsanimationen og skifter til menupletten og beskrivelsen:
Trin 4: Design panelet i Elementor
Tilbage på fanen Indhold, klik Rediger Megamenu-indhold. Panelet åbnes i den normale Elementor editor, så du designer det som enhver anden side. Byg de fire zoner ud fra tabellen ovenfor:
- Overskriftsstrimmel: restaurant navn plus en kort køkken note (“Køkken åben til 11:00 pm · Træ ovn fyret dagligt på 4”). Noten svarer stille og roligt på “er de åbne?” spørgsmål uden nogen jagt i timevis.
- Kategori sidebjælke: Forretter, Pasta & Risotto, Brændefyret Pizza, Net & Grill, Desserter, Vin & Drikke, hver med et fadantal.
- Opvaskegitter: navn, en-linje beskrivelse, pris, og tags såsom Vegetarian, Spicy, eller Chef's Pick. Tags håndtere kosten filtrering uden en separat kolonne.
- Udvalgt kort og action sidefod: aftenens særlige med foto og pris, en Reserver en tabelknap, åbningstider og adresse, og et “Download fuld menu (PDF)” link. Hvis du hellere vil vise strukturerede åbningstider, er Business Hours widget holder dem redigerbare ét sted.
Hvert parabolnavn, pris og tag forbliver redigerbart fra Elementor-panelet til venstre. Opdatering af menuen senere er en indholdsredigering, ikke et designjob. Udgiv skabelonen, når du er færdig, og luk editoren.
Trin 5: Sæt menuen i din header
Mega menuen har brug for en overskrift at bo i. Hvis dit temas overskrift allerede viser Hovedmenuen kan du springe dette trin over, men at bygge overskriften med Master Addons holder alt i én editor. Den Theme Builder er gratis, i modsætning til Elementor Pro's.
- Gå til Master Addons → Temabygger og klik Tilføj ny skabelon.
- Indstil skabelontypen til Header, skifte Aktivering på, og under Betingelser vælge Inkluder → Hele webstedet.
- Klik Rediger med Elementor.
Inde i header-skabelonen skal du trække i Navigation Menu widget og pick Hovedmenu under Vælg Menu. Indstil layoutet til Vandret og juster det, som dit overskriftsdesign kræver. “Dishes”-elementet bærer automatisk sit megapanel med sig.
Trin 6: Hold markøren og tjek resultatet
Udgiv overskriften og åbne dit websted. Hold markøren “Dishes” og den fulde restaurant menu falder ned over siden: kategorier til venstre, retter med priser i midten, aftenens særlige og knappen Reserver et bord til højre.
Klik gennem hver kategori for at sikre, at retten tæller og links opfører sig, og kontroller derefter panelet mod siden bag den. Et mørkt panel over en mørk helt har brug for en kant eller skygge, så dens kanter forbliver synlige.
Trin 7: Hold det hurtigt
Menubilleder indlæses på hver side på dit websted, så en skødesløs megamenu bremser hele restaurantens websted. Langsomme restaurantsider mister spisende gæster, der sammenligner muligheder på mobildata.
- Brug ét billede i panelet (den fremhævede special), ikke et galleri.
- Komprimer det og server WebP; størrelse det til den plads, det faktisk optager.
- Skriv ægte alt-tekst (“træfyret margherita pizza”). Det hjælper tilgængelighed og billedsøgning.
- Tjek din overordnede Elementor sidehastighed efter at have tilføjet menuen, ikke før.
Trin 8: Få det til at fungere på telefoner
Det meste restauranttrafik er mobil, ofte fra folk, der står udenfor og beslutter, om de vil komme ind. Det er derfor, vi sætter Mobil Menu til Builder Content tilbage i Trin 3. Det samme panel, du har designet, tjener telefonlayoutet i stedet for en blottet linkliste. Et bredt panel skal stadig kollapse yndefuldt:
- Skjul specialens billede på mobilen, hold knappen Reserver et bord. Elementors responsive synlighedskontrol håndterer dette pr. element.
- Sæt kategorilinkene først i stablingsrækkefølgen; det var det, telefonbesøgende kom efter.
- Hold knappen “Reserver et bord” tilgængelig uden lang rulning.
- Test på en rigtig telefon. Editorens forhåndsvisning tilnærmer berøringsadfærd; den gengiver den ikke.
Hvis standard tabletbrudpunktet skærer dit panel akavet, skal du indstille dit eget med det gratis Brugerdefineret Breakpoints udvidelse.
Valgfrit: Vis sæsonvarer automatisk
Restauranter kører tidsbestemte tilbud konstant: frokost tilbud, festlige menuer, happy hour. Med den gratis Display Betingelser udvidelse du kan indstille et datointerval eller en ugedagsregel på et panelelement, så julemenulinket vises i december og fjerner sig selv i januar, hvor ingen redigerer webstedet ved midnat.
Ofte stillede spørgsmål
Hvordan opretter jeg en restaurant mega menu i Elementor?
Aktiver den gratis Master Addons Mega Menu udvidelse, byg din menu under Udseende > Menuer, tænd Aktiver Mega Menu, og klik derefter på Master Mega badge på dit Dishes element og sæt Megamenu Aktiveret til ja. Klik på Rediger Megamenu Indhold og design panelet i Elementor: menukategorier, retter med priser og diætmærker, en fremhævet special, og en Reserve a Table knap. Endelig skal du vise menuen med Navigation Menu widget i din overskrift.
Har jeg brug for Elementor Pro til en restaurant mega menu?
Nej. Elementors mega menu widget er en Pro funktion, men den gratis Master Addons Mega Menu udvidelse tilføjer den samme mulighed for at frigøre Elementor, og du designer dropdown panelet i den normale Elementor editor.
Hvad skal en restaurant hjemmeside menu omfatte?
Mad menu kategorier såsom forretter, lysnettet, desserter og drikkevarer; parabol priser med kosten tags som vegetarisk, vegansk og krydret; åbningstider og adresse; og en klar booking eller online-bestilling handling. Efterlad din Om historie, presseomtaler og sociale feeds til sidefoden.
Vil en megamenu bremse min restaurants hjemmeside?
Det kan, fordi menubilleder indlæses på hver side. Brug et enkelt komprimeret WebP-foto i størrelse til dets visningsplads i stedet for et galleri, skriv ægte alternativ tekst, og kontroller din sidehastighed igen, når du har tilføjet menuen. Udført omhyggeligt virkningen er ubetydelig.
Hvordan får jeg en restaurant mega menu til at fungere på mobilen?
Indstil indstillingen Mobilmenu til Builder Content, så telefoner får dit designede panel, skjuler parabolbilledet på mobilen, mens du beholder bookingknappen, stak kategorilinks først og hold knappen Reserver en tabel tilgængelig uden lang rulning. Test altid på en rigtig telefon i stedet for editorens forhåndsvisning.
Kan jeg kun vise sæsonbestemte menupunkter på bestemte datoer?
Ja. Den gratis udvidelse Vis betingelser lader dig indstille et datointerval eller en ugedagsregel på ethvert element inde i mega-menupanelet, så et festligt menulink vises og forsvinder efter planen, uden at nogen redigerer webstedet.
Er Max Mega Menu gratis, og passer den godt til en restaurantside?
Max Mega Menu har en gratis version i WordPress repository plus en betalt Pro add-on. Det er en standalone menu plugin, ikke bygget specielt til Elementor, så paneler redigeres i sin egen grænseflade snarere end Elementor editor du allerede bruger til sider. For en all-Elementor restaurant build, Master Addons Mega Menu holder hele panelet i én editor.
Relateret læsning
