Sådan opbygger du en restaurantmegamenu i Elementor (gratis trin-for-trin guide)

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.

Download Restaurant mega Menu

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:

Hvad skal udelades: din fulde Om historie, presseomtaler, og sociale feeds. De hører til i sidefoden. Et navigationspanel er for at få folk et sted, ikke for 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.

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.

1. På Content fane, vend Megamenu aktiveret skift til JA. Knappen Rediger Megamenu-indhold lyser.
2. 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.
3. 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).
4. 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.

1. Gå til Master Addons → Temabygger og klik Tilføj ny skabelon.
2. Indstil skabelontypen til Header, skifte Aktivering på, og under Betingelser vælge Inkluder → Hele webstedet.
3. 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

Relateret læsning

• Elementor Theme Builder gratis
• Sådan tilføjes en popup i Elementor gratis
• Business Hours Widget