Menü-Übersicht

Organisiere die Vorspeisen, Hauptgerichte und Desserts deines Restaurants mit einer Speisekarte direkt auf deiner Website.

Zuletzt aktualisiert: 21. Januar 2025

Verwenden Sie Menü-Blöcke, um die Menüs Ihres Restaurants auf Ihrer Website anzuzeigen. Das ist eine großartige Alternative zum Einbetten von PDF- Menüs, die nicht immer so SEO-freundlich sind wie Text direkt auf der Seite. Indem Sie spezielle Formatierungsoptionen nutzen, können Sie mehrere Menüs in einem einzigen Menü-Block erstellen.

Diese Anleitung beschreibt das Hinzufügen von Menü-Blöcken für deine Restaurant-Website. Um ein Drop-down-Menü in der Navigation deiner Website zu erstellen, gehe zu Drop-downs zu deiner Navigation hinzufügen.

So erlangst du Zugriff auf diese Funktion

Menü-Blöcke sind in den Abos Basis, Core, Plus, Advanced, Business, E-Commerce Basis-Abo und Erweitertes E-Commerce-Abo verfügbar. Weitere Informationen findest du unter Das richtige Squarespace-Abonnement auswählen.

Einen Menü-Block hinzufügen

So fügen Sie einen Menü-Block hinzu:

  1. Bearbeite eine Seite oder einen Beitrag, klicke auf Block hinzufügen oder auf eine Einfügemarke und wähle Menü aus dem Menü aus. Weitere Informationen findest du unter Inhalte mithilfe von Blöcken hinzufügen.
  2. Öffne den Block-Editor, indem du auf das Bleistiftsymbol auf dem Block klickst.
  3. Bearbeite den Text im Tab Inhalt, um deine Menüs, Menü-Abschnitte und Menü-Elemente zu erstellen.
  4. Verwenden Sie den Tab Design, um das Menü-Design anzupassen.
  5. Verwenden Sie den Tab Formatierungshilfe, um Tipps zur Formatierung zu erhalten.

Menüs hinzufügen

Um Ihnen den Einstieg zu erleichtern, enthalten die Menü-Blöcke Beispielinhalte. Wir empfehlen, die Beispielelemente einzeln durch eigene Menü-Elemente zu ersetzen, um die Formatierung beizubehalten. Sie können den Inhalt auch löschen und den Schritten in diesem Abschnitt folgen, um ganz von vorne anzufangen.

Menü-Blöcke können mehrere Menüs enthalten. Zum Beispiel kannst du deine Brunch-, Mittag- und Abendmenüs zum selben Block hinzufügen.

So fügen Sie ein Menü hinzu:

  1. Gib im Tab „Inhalt“ den Namen des Menüs ein.
  2. Füge mindestens drei Gleichheitszeichen (=) darunter hinzu.

Add_the_name_of_a_menu__like_breakfast__then_add_at_least_three_equals_signs_below_it.png

Add_the_name_of_a_menu__like_breakfast__then_add_at_least_three_equals_signs_below_it.png
  1. Fügen Sie eine optionale Beschreibung oder Anmerkung über das Menü direkt unter den Gleichheitszeichen hinzu.

Add_an_optional_description_or_note_about_the_menu_below_the_equals_signs.png

Add_an_optional_description_or_note_about_the_menu_below_the_equals_signs.png
  1. Füge unten weitere Menüs im selben Format hinzu.

Add_more_menus_below__like_Lunch_and_Dinner__using_the_same_format.png

Add_more_menus_below__like_Lunch_and_Dinner__using_the_same_format.png

Diese Menüs werden auf der Seite in eine Kategorie-Navigation umgewandelt. In den folgenden Abschnitten erfahren Sie, wie Sie den Rest des Menüinhalts hinzufügen können.

Hinweis

Wenn du dem Block nur ein Menü hinzufügst, wird die Kategorie-Navigation möglicherweise nicht angezeigt.

KB Guide Image

Abschnitte hinzufügen

Sie können jedes Menü in Abschnitte unterteilen. So können Abschnitte ein Menü beispielsweise nach Vorspeisen, Salaten, Hauptgerichten, Beilagen und Desserts organisieren.

So erstellen Sie einen Abschnitt:

  1. Geben Sie den Abschnittsnamen unterhalb des entsprechenden Menüs ein.
  2. Fügen Sie mindestens drei Bindestrichte (-) darunter hinzu.
  3. Geben Sie in der Zeile direkt unter den Bindestrichen eine optionale Beschreibung des Abschnitts ein.
Create_menu_sections_to_divide_between_different_types_of_food__like_Seafood_and_Pancakes.png

Abschnitte werden als Überschriften auf der Seite angezeigt.

KB Guide Image

Menü-Elemente hinzufügen

So fügen Sie ein Menü-Element hinzu:

  1. Geben Sie den Namen des Elements unterhalb eines Abschnitts ein.
  2. Fügen Sie eine Beschreibung des Elements unter seinem Namen hinzu.
  3. Um den Preis anzuzeigen, fügen Sie einen Preis unterhalb der Beschreibung hinzu.
  4. Fügen Sie Preisvarianten hinzu, indem Sie einen Schrägstrich (/) zwischen den Preisen verwenden. Das ist nützlich für Preise nach Glas/Flasche oder ganze/halbe Portionen.
  5. Füge Marktpreise hinzu, indem du $MKT oder $Marktpreis als Preis hinzufügst. Solange das Währungssymbol davor steht, kannst du den Preis direkt nach dem Menü-Element oder der Beschreibung platzieren.
  6. Fügen Sie Optionen oder Add-Ons zu einem Menüpunkt hinzu, indem Sie + in einer neuen Zeile unterhalb des Preises eingeben.
  7. Wenn du eine ungerade Anzahl von Elementen hast, kann das Hinzufügen eines
    -Tags am unteren Rand des Abschnitts dabei helfen, die Menüspalten auszugleichen.
  8. Wenn du in einigen deiner Menüs zusätzliches Padding siehst, erfahre mehr über das Festlegen der Mindesthöhe mit deinem ersten Menü.
Add_items_with_descriptions_and_prices_below_each_section.png

Das Design anpassen

Sie können den Menü-Stil und das Währungssymbol von Menü-Blöcken anpassen.

Menü-Stil

Klicke im Block-Editor auf den Tab Design und wähle einen Stil aus:

  • Zentriert erstellt ein Menü mit einer Spalte und zentriertem Text. Dieses Design ist ideal für kurze Menüs.
  • Mehrspaltig erstellt ein Menü mit mehreren Spalten und linksbündigem Text. Die Anzahl der Spalten hängt von der Breite deiner Website und des Browsers ab.

Währungssymbol

Klicke auf das Tab Design und wähle im Drop-down-Menü Währungssymbol eine Währung für die Menüpreise aus. Du kannst $Dollar, Euro, £Pfund oder ¥Yen wählen.

Hinweis

Das hier ausgewählte Währungssymbol wird vor den Zahlen in der dritten Zeile von Menü-Block-Elementen angezeigt, auch wenn du beim Zusammenstellen des Menüs im Tab Inhalt ein anderes Währungssymbol oder überhaupt kein Symbol verwendet hast. Um ein anderes Währungssymbol zu verwenden, überprüfe die folgenden Schritte.

Schriftarten und Farben

Verwende Website-Stile, um die Schriftarten und Farben deines Menüs zu ändern. Wie du diese gestaltest, hängt von der Version deiner Squarespace-Website ab.

Du kannst bestimmte Schriftarten und Farben für jeden Textbereich im Menü-Block festlegen:

  • Um die Schriftarten festzulegen, verwende die Menü-Block-Anpassungen unter Stile zuweisen
  • Um die Farben festzulegen, verwende die Menü-Block-Anpassungen unter Farben

Weitere Informationen findest du unter Schriftarten ändern und Farben ändern.

Der Text im Menü-Block folgt den gleichen Stil-Anpassungen wie der Textkörper deiner Website. Weitere Informationen findest du unter Schriftarten ändern und Farben ändern.

Formatierungshilfe (nur Computer)

Der Tab „Formatierungshilfe“ enthält Beispiele für formatierte Menüs, Abschnitte und Menü-Elemente.

Tipp

Wenn dir die Formatierung der Menü-Navigation und der Abschnitte nicht gefällt, kannst du Menü-Blöcke verwenden, um Menü-Elemente und dann Header mit Text-Blöcken hinzuzufügen. Ein Beispiel findest du in den Demo-Inhalten des Hunter-Templates.

Fehlerbehebung

Menü-Elemente sind nicht einheitlich ausgerichtet

Die Ausrichtung des Menü-Blocks hängt von vielen Faktoren ab: ob Beschreibungen vorhanden sind, der Länge von Titel und Beschreibungstext, der Anzahl der Elemente und vielem mehr.

Da Browser versuchen, gleichmäßige Inhaltsspalten zu erstellen, fließt der Text von oben nach unten und von links nach rechts. Das bedeutet, dass die Titel der Artikel nicht immer perfekt aufeinander abgestimmt sind.

Wenn Sie eine ungerade Anzahl von Elementen haben, kann es hilfreich sein, das folgende HTML-Tag am Ende des Abschnitts hinzuzufügen:


Dies kann die Formatierung ausgleichen, sodass die Menü-Elemente in gleichmäßigen Zeilen angezeigt werden.

Zusätzliches Padding in Menüs

Wenn unter einigen deiner Menükategorien zusätzliches Padding oder zusätzlicher Leerraum angezeigt wird, kann dies an der Menge des Inhalts in deiner ersten Menükategorie liegen. Der Inhalt in deiner ersten Menükategorie legt die Mindesthöhe des Menü-Blocks fest. Dies kann dazu führen, dass in anderen Kategorien zusätzliches Padding angezeigt wird.

Wenn du beispielsweise ein umfangreiches Frühstücksmenü, aber ein kurzes Mittagsmenü hast, enthält das Mittagsmenü unter den Elementen einen Leerraum, der der Höhe des Frühstücksmenüs entspricht. Um dies zu verhindern, füge jedem Menü eine ähnliche Menge an Inhalten hinzu oder füge das Menü mit den wenigsten Inhalten als erste Kategorie hinzu.

Es erscheint kein Text, wenn ich etwas eingebe

Wenn kein Text angezeigt wird, wenn Sie tippen, beenden Sie die Eingabe des Inhalts und speichern Sie dann den Block. Öffnen Sie ihn erneut, und Ihr Inhalt wird nun so angezeigt, wie er eingegeben wurde.

Mein Währungssymbol ist nicht verfügbar

Wenn du eine nicht verfügbare Währung verwendest, gib ein Währungssymbol in der dritten Zeile eines Elements ein und füge ein Leerzeichen hinzu. Gib dann dein Währungssymbol und den Preis ein. Dies überschreibt das integrierte Währungssymbol, wodurch dein Währungssymbol angezeigt wird.

Ich kann keinen Text in den Menü-Block einfügen

Auf Computern ist es nicht möglich, beim Bearbeiten mit der rechten Maustaste in Menüblöcke zu klicken. Um Inhalte zu kopieren und einzufügen, verwenden Sie stattdessen Tastaturkürzel. Um Formatierungsprobleme zu vermeiden, empfehlen wir die folgenden Tastaturkürzel:

Mac

  • Kopieren –  + C
  • Einfügen + Shift + V

Windows

  • Kopieren – Strg + C
  • EinfügenStrg + Shift + V

Text wird nicht korrekt formatiert

Fehler in Menü-Blöcken beeinträchtigen deren Textformatierung. Um Probleme zu vermeiden, sieh dir die folgenden Tipps zur Fehlerbehebung für deinen Text an:

  • Vergewissere dich, dass du mindestens drei Gleichheitszeichen (=) hast, die Menüs voneinander abtrennen, und mindestens drei Bindestriche (-), die Abschnitte voneinander abtrennen.
  • Drücke nach jeder Texteingabe Eingabe oder Enter, um sicherzustellen, dass jede Zeile korrekt platziert wird.
  • Vermeide die Benutzung der Leertaste zum Abtrennen von Inhalten. Menü-Blöcke verwenden Leerzeichen nicht auf diese Weise und formatieren den Text somit nicht korrekt.
Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.