Seitenaufbau¶
Diese Seite zeigt, wie du mit den verfügbaren Blöcken professionelle Seiten zusammenstellst.
Grundprinzip¶
Seiten werden im WordPress Block-Editor (Gutenberg) aus den 18 Theme-Blöcken zusammengesetzt. Jeder Block deckt einen bestimmten Inhaltstyp ab. Durch die Kombination und Reihenfolge der Blöcke entsteht das Seitenlayout.
Landingpage-Baukasten¶
Eine typische Landingpage folgt diesem Aufbau:
1. Hero — Aufmerksamkeit gewinnen
2. Text-Link-Bild — Kernaussage / Hauptfeature vorstellen
3. Text-Link-Bild — Zweites Feature (Reihenfolge umgekehrt)
4. Benefits-List — Vorteile auf einen Blick
5. Kundenfeedback — Vertrauen aufbauen
6. FAQ — Häufige Fragen beantworten
7. Shortcode-CTA — Kontaktformular / Abschluss
Rhythmus durch Wechsel
Setze Text-Link-Bild-Blöcke abwechselnd mit normaler und umgekehrter Reihenfolge ein. Das erzeugt einen angenehmen Zickzack-Rhythmus beim Scrollen.
Beispiel-Layouts¶
Startseite¶
| Position | Block | Inhalt |
|---|---|---|
| 1 | Hero | Hintergrundvideo, Hauptclaim, CTA |
| 2 | Text-Link-Bild | Leistung 1, Text links |
| 3 | Text-Link-Bild | Leistung 2, Text rechts (umgekehrt) |
| 4 | Text-Link-Bild | Leistung 3, Text links |
| 5 | News-Slider | Aktuelle Beiträge |
| 6 | Kundenfeedback | 3–4 Testimonials |
| 7 | FAQ | 5–8 häufige Fragen |
| 8 | Shortcode-CTA | Kontaktformular |
Produktseite¶
| Position | Block | Inhalt |
|---|---|---|
| 1 | Hero | Produktbild, Produktname |
| 2 | Text-Link-Bild | Produktbeschreibung mit Bild |
| 3 | Galerie-Slider | Produktbilder-Galerie |
| 4 | Benefits-List | Produktvorteile |
| 5 | Bildvergleichslider | Vorher/Nachher |
| 6 | FAQ | Produktfragen |
| 7 | Shortcode-CTA | Angebotsanfrage |
Blog-/Newsseite¶
| Position | Block | Inhalt |
|---|---|---|
| 1 | Hero | Seitentitel (nur Headline) |
| 2 | News-Slider | Aktuelle Beiträge |
| 3 | WYSIWYG | Ergaenzender Text |
Portfolio/Galerie¶
| Position | Block | Inhalt |
|---|---|---|
| 1 | Hero | Titel und Einleitung |
| 2 | Fullwidth-Image | Staerkstes Bild |
| 3 | Galerie-Slider | Weitere Arbeiten |
| 4 | Bildvergleichslider | Vorher/Nachher |
| 5 | Kundenfeedback | Kundenstimmen |
Tipps für gute Seiten¶
Abstaende¶
- Die meisten Blöcke haben bereits sinnvolle Abstaende eingebaut
- Nutze die Spacing-Optionen (Margin/Padding) im Block-Editor für Feintuning
- Der Spacer-Block ist nur für Sonderfälle gedacht
Überschriften-Hierarchie¶
- Verwende H1 nur einmal pro Seite (im Hero oder ersten Block)
- Nachfolgende Abschnitte mit H2 kennzeichnen
- Unter-Abschnitte mit H3 und tiefer
Badges und Kicker¶
- Kicker eignen sich für Kategorisierungen: „Unsere Leistungen", „So funktioniert's"
- Badges eignen sich für Tags und Schlagwörter: „Neu", „Beliebt", „WordPress"
Call-to-Action¶
- Setze mindestens einen CTA-Button pro Seitenabschnitt
- Nutze die Glow-Button-Farbvarianten gezielt:
- Cyan oder Green für positive Aktionen (Kontakt, Mehr erfahren)
- Orange für dringende Aktionen (Jetzt buchen)
- Pink oder Purple für kreative Angebote
Bilder¶
- Verwende für Hero-Bilder die Größe fullwidth (2500px breit)
- Für Text-Link-Bild reicht die Größe content (1460px) oder large (1200px)
- Aktiviere Lazy Loading für alle Bilder unterhalb des sichtbaren Bereichs
- Markiere rein dekorative Bilder als dekorativ (besser für Barrierefreiheit)