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.

Menü-Modus

Der wichtigste Entscheidungspunkt: Soll dein Menü nur informieren oder auch Bestellungen ermöglichen?

Informativ

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

So findest du es: Layout > Menü-Modus > Informativ

Wann verwenden:

• Digitale Speisekarten in Restaurants
• Preisübersichten ohne Online-Bestellung
• Kataloge und Produktübersichten

Auswirkung:

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

---

Bestellbar

Was es macht: Nutzer können Varianten wählen, Extras hinzufügen und Artikel in den Warenkorb legen.

So findest du es: Layout > Menü-Modus > Bestellbar

Wann verwenden:

• Lieferdienste
• Online-Bestellsysteme
• Take-Away Apps

Auswirkung:

Element	Verhalten
Varianten	Können ausgewählt werden
Extras	Können hinzugefügt 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

Wähle, wie deine Artikel dargestellt werden:

Liste

Was es macht: Klassische vertikale Listenansicht.

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

Eigenschaft	Wert
Beste für	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 für	Visuelle Speisekarten mit Bildern
Bilder	Gross, dominant
Spalten	1-4 (konfigurierbar)

Spalten-Einstellung

Wenn du Grid oder Karten wählst, 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 für	Premium-Präsentationen, Food-Apps
Bilder	Sehr gross, Fokus auf Visuelles
Spalten	1-4 (konfigurierbar)

---

Magazin

Was es macht: Gemischte Größen im Magazin-Stil.

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

Eigenschaft	Wert
Beste für	Kreative Präsentationen, Highlights
Bilder	Unterschiedliche Größen
Besonderheit	Erste Artikel größer dargestellt

---

Minimal

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

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

Eigenschaft	Wert
Beste für	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 für Smartphones
• 3-4 Spalten nur wenn die Bilder gross genug sind

---

Erscheinungsbild

Visuelle Anpassungen für 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 Größe aller Elemente für mehr Inhalt auf dem Bildschirm.

So findest du es: Layout > Dichte > Kompaktmodus

Optionen:

Einstellung	Wirkung
An	Kleinere Schrift, kleinere Bilder, weniger Abstand
Aus	Normale Größen (Standard)

Wann verwenden

Der Kompaktmodus eignet sich für lange Speisekarten, bei denen Nutzer schnell überfliegen möchten.

---

Detail-Ansicht

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

Separate Seite

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

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

Eigenschaften:

• Vollbildansicht
• Zurück-Navigation nötig
• Beste für umfangreiche Details

---

Bottom Sheet

Was es macht: Schiebt ein Panel von unten hoch.

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

Eigenschaften:

• Überlagert 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 für Details

Empfehlung

• Separate Seite - Für ausführliche Details mit vielen Optionen
• Bottom Sheet - Für schnelles Durchstöbern
• Dialog - Für minimale Details oder Bestellbestätigung

---

Alle Einstellungen auf einen Blick

Einstellung	Bereich	Standard
Menü-Modus	Menü-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
• Menü-Modus: Informativ

Lieferdienst-App

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

Minimale Preisliste

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

---

Tipps

Mobile-First

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

Grid vs. Liste

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

Detail-Ansicht anpassen

Für Lieferdienste mit vielen Varianten und Extras eignet sich die “Separate Seite” am besten, da mehr Platz für Auswahlen vorhanden ist.