Design

Im Design-Tab passt du das visuelle Erscheinungsbild des Dienstleistungskatalogs an. Hier konfigurierst du Card-Styles, Grid-Layouts, Featured-Bereiche und mehr.

Card-Styling

Einstellungen für die Darstellung der Service-Cards.

Card-Stil

Was es macht: Bestimmt das visuelle Grunddesign der Cards.

So findest du es: Design > Card-Styling > Card-Stil

Stil	Beschreibung
Erhöht (Schatten)	Cards mit Schatten, wirken “schwebend”
Umrandet	Cards mit Rahmen, flach
Flach	Keine Umrandung, nur Inhalt

Empfehlungen:

Situation	Empfohlener Stil
Heller Hintergrund	Erhöht oder Umrandet
Dunkler Hintergrund	Umrandet oder Flach
Minimalistisches Design	Flach
Premium-Look	Erhöht

Ecken-Radius

Was es macht: Bestimmt, wie rund die Card-Ecken sind.

So findest du es: Design > Card-Styling > Ecken-Radius

Option	Aussehen
Keine Rundung	Eckige Cards
Klein	Leicht gerundet
Mittel	Standard-Rundung
Groß	Deutlich gerundet
Voll rund	Maximale Rundung (Pillenform)

Schatten-Stärke

Was es macht: Bestimmt die Intensität des Card-Schattens.

So findest du es: Design > Card-Styling > Schatten-Stärke

Wert	Beschreibung
0	Kein Schatten
1	Subtiler Schatten
2	Mittlerer Schatten
3	Starker Schatten

Nur relevant bei Card-Stil “Erhöht”.

Bild-Seitenverhältnis

Was es macht: Bestimmt das Format der Service-Bilder.

So findest du es: Design > Card-Styling > Bild-Seitenverhältnis

Format	Verhältnis	Ideal für
Quadratisch	1:1	Instagram-Stil, Icons
Hochformat	3:4	Portraits, Personen
Querformat	4:3	Landschaft, Räume
Breit	16:9	Banner, Header

Text-Ausrichtung

Was es macht: Bestimmt die Ausrichtung des Textes in der Card.

So findest du es: Design > Card-Styling > Text-Ausrichtung

Option	Wirkung
Linksbündig	Text startet links (Standard)
Zentriert	Text in der Mitte
Rechtsbündig	Text startet rechts

Grid-Layout

Einstellungen für die Rasterdarstellung.

Spalten (Smartphone)

Was es macht: Anzahl der Spalten auf kleinen Bildschirmen.

So findest du es: Design > Grid-Layout > Spalten (Smartphone)

Wert	Empfehlung
1	Standard - eine Card pro Zeile
2	Kompakte Cards, kleine Bilder
3	Nur bei sehr kleinen Cards

Spalten (Tablet)

Was es macht: Anzahl der Spalten auf mittleren Bildschirmen.

So findest du es: Design > Grid-Layout > Spalten (Tablet)

Wert	Empfehlung
1	Große, detaillierte Cards
2	Standard
3	Kompakte Übersicht
4	Viele Services, kompakt

Spalten (Desktop)

Was es macht: Anzahl der Spalten auf großen Bildschirmen.

So findest du es: Design > Grid-Layout > Spalten (Desktop)

Wert	Empfehlung
2	Große Cards mit viel Text
3	Standard
4	Viele Services
5-6	Nur bei sehr vielen Services

Card-Abstand

Was es macht: Abstand zwischen den Cards in Pixeln.

So findest du es: Design > Grid-Layout > Card-Abstand

Wert	Aussehen
4 px	Sehr eng
8 px	Kompakt
16 px	Standard
24 px	Luftig
32 px	Sehr großzügig

Featured-Bereich

Einstellungen für den Bereich mit hervorgehobenen Services.

Titel anzeigen

Was es macht: Zeigt eine Überschrift über dem Featured-Bereich.

So findest du es: Design > Featured-Bereich > Titel anzeigen

Einstellung	Wirkung
An	”Empfohlen” oder ähnlicher Titel wird angezeigt
Aus	Featured-Services ohne Überschrift

Featured-Layout

Was es macht: Bestimmt die Darstellung der Featured-Services.

So findest du es: Design > Featured-Bereich > Featured-Layout

Option	Beschreibung
Karussell	Horizontal scrollbar
Grid	Rasterdarstellung
Liste	Vertikal gestapelt

Anzahl Featured

Was es macht: Wie viele Featured-Services maximal angezeigt werden.

So findest du es: Design > Featured-Bereich > Anzahl Featured

Wert	Empfehlung
1-3	Wenige Highlights
5	Standard
10	Umfangreiche Auswahl

Kategorie-Chips

Einstellungen für die Kategorie-Filter-Chips.

Chip-Stil

Was es macht: Bestimmt das Aussehen der Kategorie-Chips.

So findest du es: Design > Kategorie-Chips > Chip-Stil

Stil	Aussehen
Gefüllt	Vollflächig gefärbt
Umrandet	Nur Rahmen, transparent
Abgerundet	Pillenform

Kategorie-Icons anzeigen

Was es macht: Zeigt Icons neben den Kategorienamen.

So findest du es: Design > Kategorie-Chips > Kategorie-Icons anzeigen

Einstellung	Wirkung
An	Icon + Text im Chip
Aus	Nur Text

”Alle” Chip anzeigen

Was es macht: Zeigt einen Chip zum Zurücksetzen des Filters.

So findest du es: Design > Kategorie-Chips > “Alle” Chip anzeigen

Einstellung	Wirkung
An	”Alle” Chip am Anfang der Leiste
Aus	Kein Reset-Chip (Tippen auf aktiven Chip resettet)

Card-Inhalt

Einstellungen für die Inhalte auf den Service-Cards.

Kategorie-Badge anzeigen

Was es macht: Zeigt ein Badge mit der Kategorie auf der Card.

So findest du es: Design > Card-Inhalt > Kategorie-Badge anzeigen

Einstellung	Wirkung
An	Kategorie als Label auf der Card
Aus	Keine Kategorie-Anzeige auf Card

Provider auf Card anzeigen

Was es macht: Zeigt den Anbieter-Namen auf der Card.

So findest du es: Design > Card-Inhalt > Provider auf Card anzeigen

Einstellung	Wirkung
An	Anbieter-Name unter dem Service-Namen
Aus	Nur Service-Name

Bewertung auf Card anzeigen

Was es macht: Zeigt die Sternebewertung auf der Card.

So findest du es: Design > Card-Inhalt > Bewertung auf Card anzeigen

Einstellung	Wirkung
An	Sterne + Anzahl Bewertungen
Aus	Keine Bewertungsanzeige

Buchen-Button anzeigen

Was es macht: Zeigt einen “Jetzt buchen” Button direkt auf der Card.

So findest du es: Design > Card-Inhalt > Buchen-Button anzeigen

Einstellung	Wirkung
An	Button auf jeder Card
Aus	Buchung erst auf der Detailseite

Button-Stil

Was es macht: Bestimmt das Aussehen des Buchen-Buttons.

So findest du es: Design > Card-Inhalt > Button-Stil

Stil	Aussehen
Gefüllt	Vollflächig in Akzentfarbe
Umrandet	Nur Rahmen
Text	Nur Text, kein Button-Hintergrund

Alle Einstellungen auf einen Blick

Einstellung	Bereich	Standard	Optionen
Card-Stil	Card-Styling	Erhöht	Erhöht/Umrandet/Flach
Ecken-Radius	Card-Styling	Mittel	Keine/Klein/Mittel/Groß/Voll
Schatten-Stärke	Card-Styling	1	0-3
Bild-Seitenverhältnis	Card-Styling	Querformat	Quadrat/Hoch/Quer/Breit
Text-Ausrichtung	Card-Styling	Links	Links/Mitte/Rechts
Spalten (Phone)	Grid	1	1-3
Spalten (Tablet)	Grid	2	1-4
Spalten (Desktop)	Grid	3	1-6
Card-Abstand	Grid	16 px	4-32 px
Titel anzeigen	Featured	An	An/Aus
Featured-Layout	Featured	Karussell	Karussell/Grid/Liste
Anzahl Featured	Featured	5	1-10
Chip-Stil	Kategorie	Abgerundet	Gefüllt/Umrandet/Abgerundet
Kategorie-Icons	Kategorie	An	An/Aus
”Alle” Chip	Kategorie	An	An/Aus
Kategorie-Badge	Card-Inhalt	An	An/Aus
Provider auf Card	Card-Inhalt	Aus	An/Aus
Bewertung auf Card	Card-Inhalt	An	An/Aus
Buchen-Button	Card-Inhalt	An	An/Aus
Button-Stil	Card-Inhalt	Gefüllt	Gefüllt/Umrandet/Text