Layout

Im Layout-Tab bestimmst du die grundlegende Struktur deiner Speisekarte: Welcher Layout-Typ wird verwendet, wie viele Spalten hat das Grid und wie werden die Details angezeigt.

Menue-Modus

Der wichtigste Entscheidungspunkt: Soll dein Menue nur informieren oder auch Bestellungen ermoeglichen?

Informativ

Was es macht: Das Menue zeigt Artikel nur an - ohne Bestellfunktion.

So findest du es: Layout > Menue-Modus > Informativ

Wann verwenden:

• Digitale Speisekarten in Restaurants
• Preisuebersichten ohne Online-Bestellung
• Kataloge und Produktuebersichten

Auswirkung:

Element	Verhalten
Varianten	Werden angezeigt, aber nicht ausgewaehlt
Extras	Werden angezeigt, aber nicht ausgewaehlt
Warenkorb	Nicht sichtbar
”In den Warenkorb” Button	Nicht sichtbar

---

Bestellbar

Was es macht: Nutzer koennen Varianten waehlen, Extras hinzufuegen und Artikel in den Warenkorb legen.

So findest du es: Layout > Menue-Modus > Bestellbar

Wann verwenden:

• Lieferdienste
• Online-Bestellsysteme
• Take-Away Apps

Auswirkung:

Element	Verhalten
Varianten	Koennen ausgewaehlt werden
Extras	Koennen hinzugefuegt werden
Warenkorb	Sichtbar mit Anzahl und Summe
”In den Warenkorb” Button	Sichtbar und aktiv

Wichtig

Der Modus “Bestellbar” erfordert das aktivierte Orders-Modul. Ist es nicht aktiv, wird eine Warnung angezeigt.

---

Layout-Typ

Waehle, wie deine Artikel dargestellt werden:

Liste

Was es macht: Klassische vertikale Listenansicht.

So findest du es: Layout > Layout-Typ > Liste

Eigenschaft	Wert
Beste fuer	Lange Speisekarten, text-lastige Inhalte
Bilder	Klein, links neben dem Text
Platzverbrauch	Gering - viele Artikel sichtbar

---

Grid

Was es macht: Rasteransicht mit konfigurierbaren Spalten.

So findest du es: Layout > Layout-Typ > Grid

Eigenschaft	Wert
Beste fuer	Visuelle Speisekarten mit Bildern
Bilder	Gross, dominant
Spalten	1-4 (konfigurierbar)

Spalten-Einstellung

Wenn du Grid oder Karten waehlst, erscheint automatisch die Spalten-Einstellung. Mehr dazu unter “Grid-Einstellungen”.

---

Karten

Was es macht: Grosse, bildreiche Karten im Raster.

So findest du es: Layout > Layout-Typ > Karten

Eigenschaft	Wert
Beste fuer	Premium-Praesentationen, Food-Apps
Bilder	Sehr gross, Fokus auf Visuelles
Spalten	1-4 (konfigurierbar)

---

Magazin

Was es macht: Gemischte Groessen im Magazin-Stil.

So findest du es: Layout > Layout-Typ > Magazin

Eigenschaft	Wert
Beste fuer	Kreative Praesentationen, Highlights
Bilder	Unterschiedliche Groessen
Besonderheit	Erste Artikel groesser dargestellt

---

Minimal

Was es macht: Nur Text und Preise, keine Bilder.

So findest du es: Layout > Layout-Typ > Minimal

Eigenschaft	Wert
Beste fuer	Klassische Speisekarten, Textfokus
Bilder	Keine
Platzverbrauch	Minimal

---

Grid-Einstellungen

Nur sichtbar bei Layout-Typ “Grid” oder “Karten”.

Spalten

Was es macht: Bestimmt, wie viele Artikel nebeneinander angezeigt werden.

So findest du es: Layout > Raster-Einstellungen > Spalten

Optionen:

Spalten	Wirkung
1	Ein Artikel pro Zeile (volle Breite)
2	Zwei Artikel nebeneinander (Standard)
3	Drei Artikel nebeneinander
4	Vier Artikel nebeneinander

Empfehlung

• 1-2 Spalten fuer Smartphones
• 3-4 Spalten nur wenn die Bilder gross genug sind

---

Erscheinungsbild

Visuelle Anpassungen fuer die Darstellung.

Abstand

Was es macht: Bestimmt den Abstand zwischen den einzelnen Artikeln.

So findest du es: Layout > Erscheinungsbild > Abstand

Wertebereich: 0 - 24 Pixel

Wert	Wirkung
0	Kein Abstand, Artikel grenzen direkt aneinander
4-8	Dezenter Abstand (Standard)
12-16	Deutlicher Abstand
20-24	Grosser Abstand, luftiges Layout

---

Karten-Radius

Was es macht: Abrundung der Kartenecken.

So findest du es: Layout > Erscheinungsbild > Karten-Radius

Wertebereich: 0 - 24 Pixel

Wert	Wirkung
0	Eckige Karten
4-8	Leicht abgerundet (Standard)
12-16	Deutlich abgerundet
20-24	Stark abgerundet

---

Bild-Radius

Was es macht: Abrundung der Bildecken innerhalb der Karten.

So findest du es: Layout > Erscheinungsbild > Bild-Radius

Wertebereich: 0 - 24 Pixel

Design-Tipp

Der Bild-Radius sollte gleich oder kleiner als der Karten-Radius sein, um ein harmonisches Erscheinungsbild zu erzielen.

---

Dichte

Kompaktmodus

Was es macht: Reduziert die Groesse aller Elemente fuer mehr Inhalt auf dem Bildschirm.

So findest du es: Layout > Dichte > Kompaktmodus

Optionen:

Einstellung	Wirkung
An	Kleinere Schrift, kleinere Bilder, weniger Abstand
Aus	Normale Groessen (Standard)

Wann verwenden

Der Kompaktmodus eignet sich fuer lange Speisekarten, bei denen Nutzer schnell ueberfliegen moechten.

---

Detail-Ansicht

Bestimmt, wie Artikel-Details angezeigt werden, wenn man auf einen Artikel tippt.

Separate Seite

Was es macht: Oeffnet eine neue Vollbild-Seite mit allen Details.

So findest du es: Layout > Detail-Ansicht > Separate Seite

Eigenschaften:

• Vollbildansicht
• Zurueck-Navigation noetig
• Beste fuer umfangreiche Details

---

Bottom Sheet

Was es macht: Schiebt ein Panel von unten hoch.

So findest du es: Layout > Detail-Ansicht > Bottom Sheet

Eigenschaften:

• Ueberlagert die Liste
• Schnell schliessbar
• Liste bleibt im Hintergrund sichtbar

---

Dialog

Was es macht: Zeigt ein zentriertes Popup.

So findest du es: Layout > Detail-Ansicht > Dialog

Eigenschaften:

• Kompakte Darstellung
• Schnell schliessbar
• Weniger Platz fuer Details

Empfehlung

• Separate Seite - Fuer ausfuehrliche Details mit vielen Optionen
• Bottom Sheet - Fuer schnelles Durchstoebern
• Dialog - Fuer minimale Details oder Bestellbestaetigung

---

Alle Einstellungen auf einen Blick

Einstellung	Bereich	Standard
Menue-Modus	Menue-Modus	Informativ
Layout-Typ	Layout-Typ	Liste
Spalten	Grid-Einstellungen	2
Abstand	Erscheinungsbild	8px
Karten-Radius	Erscheinungsbild	12px
Bild-Radius	Erscheinungsbild	8px
Kompaktmodus	Dichte	Aus
Detail-Ansicht	Detail-Ansicht	Separate Seite

---

Beispiel-Konfigurationen

Restaurant-Speisekarte (klassisch)

• Layout-Typ: Liste
• Kompaktmodus: Aus
• Detail-Ansicht: Bottom Sheet
• Menue-Modus: Informativ

Lieferdienst-App

• Layout-Typ: Grid (2 Spalten)
• Kompaktmodus: Aus
• Detail-Ansicht: Bottom Sheet
• Menue-Modus: Bestellbar

Minimale Preisliste

• Layout-Typ: Minimal
• Kompaktmodus: An
• Detail-Ansicht: Dialog
• Menue-Modus: Informativ

---

Tipps

Mobile-First

Teste dein Layout auf einem Smartphone. Die meisten Nutzer werden dein Menue mobil verwenden.

Grid vs. Liste

Wenn deine Artikel gute Bilder haben, waehle Grid. Bei text-lastigen Beschreibungen ist Liste besser.

Detail-Ansicht anpassen

Fuer Lieferdienste mit vielen Varianten und Extras eignet sich die “Separate Seite” am besten, da mehr Platz fuer Auswahlen vorhanden ist.