Welche Component für welchen Inhalt?
Beantworte ein paar Fragen — am Ende steht eine Empfehlung mit Begruendung.
Womit faengst du an?
Was für Inhalt?
Wie viele Einträge und wie viel Detail?
Wie lang ist die Erklärung?
Wie viele Fragen?
Was für Medien?
Wie viele Zitate?
Welche Art Aktion?
Wohin navigieren?
Karten-Grid
Warum: Parallele Struktur, gut zum Scannen, mit Bild und Kurztext. Spaltenzahl passt sich automatisch an.
Vermeiden: Stark unterschiedliche Textlängen — wirkt unruhig.
Component ansehen →Tabelle
Warum: Strukturierte Werte zum Vergleichen — Zeilen und Spalten.
Vermeiden: Mehr als 4-5 Spalten auf Mobil.
Component ansehen →Tabs
Warum: Verwandte Inhalte, die sich umschalten lassen — spart Vertikal-Platz.
Vermeiden: Pflichtinhalte verstecken; mehr als 5 Tabs.
Component ansehen →Text-Inhalt (Heading + Absatz)
Warum: Sauberer Fließtext-Block mit waehlbarer Heading-Ebene.
Vermeiden: Sehr lange Absätze ohne Untergliederung.
In der Werkstatt nutzen →Text-Inhalt + JumpTo
Warum: Heading-Hierarchie macht den Text scanbar, JumpTo erlaubt Sprünge.
Vermeiden: Mehr als 6 Headings ohne Inhaltsverzeichnis.
JumpTo ansehen →Bild + Text
Warum: Bild und Text-Erklärung nebeneinander — für Storytelling.
Vermeiden: Auf Mobil bleibt das Bild riesig; klein-Klein vermeiden.
Component ansehen →Accordion (FAQ)
Warum: Aufklappbare Antworten halten die Seite ruhig.
Vermeiden: Pflichtinformationen darin verstecken.
Component ansehen →Eigene FAQ-Seite mit Suchfilter
Warum: Bei mehr als 12 Fragen wird das Akkordion unueberschaubar.
Vermeiden: Alles auf eine Hauptseite packen.
Akkordion-Beispiele →Bildergalerie
Warum: Mehrere Bilder als Grid — zum Stoebern, Lightbox-fähig.
Vermeiden: Bilder ohne Alt-Texte einbinden.
Component ansehen →Slider
Warum: Sequentieller Inhalt mit Reihenfolge.
Vermeiden: Wichtige Inhalte ausschließlich im Slider — viele klicken nicht weiter.
Component ansehen →Video
Warum: Eingebettetes Video mit Poster-Bild und Lazy-Load.
Vermeiden: Autoplay mit Sound — sehr nervig.
Component ansehen →Zitat (Quote)
Warum: Hervorgehobenes Zitat mit Autor-Angabe schafft Vertrauen.
Vermeiden: Anonyme Zitate ("ein Kunde sagte…").
Component ansehen →Grid mit 3 Quote-Items
Warum: Drei Testimonials nebeneinander wirken stark, sind sozialer Beweis.
Vermeiden: Nur 2 — wirkt zufällig; mehr als 3 — Aussage verwaessert.
Pattern in der Werkstatt →CTA-Banner
Warum: Promo-Box mit Tag, Headline und Button — auffällig für Aktionen.
Vermeiden: Mehrere Banner auf derselben Seite übereinander.
In der Werkstatt nutzen →CTA-Buttons
Warum: 1-2 große Buttons zentriert — für den Zeitpunkt der Conversion.
Vermeiden: Mehr als 3 Buttons in einer Reihe.
Button-Component →Kontaktformular
Warum: Strukturierte Eingaben mit Pflichtfeldern und Validierung.
Vermeiden: Mehr als 7 Felder; Pflichtfelder nicht markieren.
Input-Component →Hero
Warum: Maximaler Impact am Seitenanfang — Headline, Subtext, max. 2 CTAs.
Vermeiden: Auf jeder Unterseite — verliert sonst seine Wirkung.
Component ansehen →Navigation
Warum: Konsistentes Hauptmenue mit Logo und Einträgen.
Vermeiden: Mehr als 7 Top-Level-Einträge; tiefe Hover-Menüs auf Mobil.
Component ansehen →Breadcrumbs
Warum: Orientierung in tiefen Strukturen, klein und unaufdringlich.
Vermeiden: Auf der Startseite — da gibt's keinen Pfad.
Component ansehen →JumpTo
Warum: Inhaltsverzeichnis für lange Seiten — sticky, schnelle Sprünge.
Vermeiden: Bei Seiten unter 3 Sektionen — nimmt Platz weg.
Component ansehen →Pagination
Warum: Strukturierter Zugriff auf viele Einträge.
Vermeiden: Bei weniger als 12 Einträgen — alles auf einer Seite.
Component ansehen →