2a. Sektionen im Seiteneditor¶
Der modulare Seiteneditor gliedert jede Seite in Sektionen — eigenständige Inhaltsblöcke, die du frei kombinieren, sortieren und ein- oder ausblenden kannst. Dieses Kapitel erklärt alle verfügbaren Layouts und die gemeinsamen Steuerelemente.
Sektionen in der Übersicht¶
Jede Sektion erscheint als dunkle Leiste mit: - Drag-Handle (linkes Symbol) zum Verschieben per Maus - Layout-Icon und Layout-Name - Status-Badge (Veröffentlicht / Entwurf / Archiviert) - Einklapp-Pfeil zum Ein-/Ausblenden des Bearbeitungsformulars - Duplizieren-Button — klone die Sektion als Entwurf - Wiederherstellen-Button — macht die letzte Änderung rückgängig (erscheint nach dem ersten Edit) - Löschen-Button (rot) — entfernt die Sektion dauerhaft
Gemeinsame Steuerfelder (jede Sektion)¶
Oben in jeder Sektion befinden sich vier Dropdown-Felder:
| Feld | Erklärung |
|---|---|
| Layout | Wechsel des Sektionstyps. Achtung: Layoutspezifische Felder werden neu geladen, bestehender Inhalt kann verloren gehen. |
| Status | Veröffentlicht — auf der Website sichtbar · Entwurf — versteckt · Archiviert — versteckt (historisch) |
| Abstand | Abstands-Regelung: Normal, Kein oben, Kein unten, Kein Abstand |
| Hintergrund | Sektionshintergrund: Transparent, Weiß, Hellgrau, Primary, Secondary, Primary-Dark |
Am unteren Ende jeder Sektion gibt es den Bereich Section-Metadaten mit:
| Feld | Erklärung |
|---|---|
| Überschrift (H2) | Optionale sichtbare Überschrift über dem Sektionsinhalt |
| Beschreibung | Einleitungstext, der über dem Layout-Inhalt erscheint |
| Footer-Text | Abschließender Text unter dem Sektionsinhalt |
Reihenfolge ändern¶
Halte den Drag-Handle gedrückt und ziehe die Sektion an die gewünschte Position. Die neue Reihenfolge wird sofort gespeichert.
Alle Sektionstypen¶
Hero Banner¶
Großformatiger Kopfbereich mit Hintergrundbild oder Slider.
| Feld | Erklärung |
|---|---|
| Layout-Modus | Volle Breite / Split links (Bild links, Text rechts) / Split rechts |
| Titel | Zusätzlicher visueller Titel (die Seiten-H1 kommt aus den Seiteneinstellungen) |
| Untertitel | Beschreibungstext unter dem Titel |
| Hintergrundbild | Aus der Mediathek wählen |
| Slider-Gruppe | Alternativ zum Standbild: Gruppe aus der Mediathek für einen Bildwechsler |
| Banner-Höhe | 400px · 500px · 600px · 60vh · 80vh · 100vh |
| Button-Text / -Link | Primärer CTA-Button |
| Zweiter Button-Text / -Link | Optionaler zweiter Button |
| Trust-Stripe | Vertrauenssignale unter den Buttons, durch | getrennt, z.B. Festpreis ab 490 €|Antwort in 24 h |
| Hintergrund-Overlay | Dunkles Overlay für Textlesbarkeit: 0 % bis 80 % |
Einspaltig (Single Column)¶
Freier Fließtext mit vollständiger Quill-Werkzeugleiste.
| Feld | Erklärung |
|---|---|
| Inhalt | Quill-Editor mit Formatierungen, Links, Tabellen, Platzhaltern |
| Ausrichtung | Links · Zentriert · Rechts |
Im Feld „Inhalt" können alle Platzhalter verwendet werden (→ siehe Kapitel 2b).
Zweispaltig (Two Column)¶
Zwei Inhaltsspalten nebeneinander.
| Feld | Erklärung |
|---|---|
| Linke Spalte | Quill-Editor |
| Rechte Spalte | Quill-Editor |
| Spalten-Verhältnis | 50:50 · 60:40 · 40:60 · 70:30 · 30:70 |
Text mit Bild (Text Image)¶
Text und Bild nebeneinander.
| Feld | Erklärung |
|---|---|
| Text | Quill-Editor |
| Bild | Aus der Mediathek wählen |
| Bild-Beschreibung (Alt-Text) | Pflichtfeld für Barrierefreiheit |
| Bild-Position | Links oder Rechts vom Text |
| Bildunterschrift | Optionale Caption unter dem Bild |
Call-to-Action (CTA)¶
Farbiger Handlungsaufruf-Bereich mit Buttons.
| Feld | Erklärung |
|---|---|
| Button-Text/Link (Primär) | Haupt-CTA-Button |
| Button-Stil (Primär) | Primary · Secondary · Outline · Ghost |
| Button-Text/Link (Sekundär) | Optionaler zweiter Button |
| Button-Stil (Sekundär) | Primary · Secondary · Outline · Ghost |
| Hintergrundfarbe | Blau · Orange · Grün · Braun · Grau · Weiß · Teal · Amber |
Die Überschrift und Beschreibung des CTA stammen aus den Section-Metadaten (H2-Feld / Beschreibungs-Feld oben).
Video¶
Einzelner Video-Player aus der Mediathek.
| Feld | Erklärung |
|---|---|
| Video | Aus der Mediathek wählen (MP4 etc.) |
| Autoplay | Startet automatisch (stumm) |
| Endlosschleife | Wiederholt das Video |
| Stumm starten | Für Autoplay erforderlich (Browser-Policy) |
Video-Playlist¶
Mehrere Videos als Galerie oder Reels (9:16).
| Feld | Erklärung |
|---|---|
| Video-Gruppe | Gruppe aus der Mediathek |
| Anzeige-Modus | Galerie (Grid mit Lightbox) · Reels (9:16 Hochkant) |
| Spalten-Anzahl | 2 · 3 · 4 |
Kostenrechner (modulabhängig)¶
Interaktiver Kostenrechner, der Besuchern eine Preisschätzung ermöglicht.
| Feld | Erklärung |
|---|---|
| CTA-Button-Text | Beschriftung des Aktions-Buttons unter dem Rechner |
| CTA-Button-Link | Zielseite nach dem Klick (z.B. /kontakt) |
Dieser Sektionstyp erscheint nur, wenn das Kostenrechner-Modul in der Installation aktiviert ist.
Weitere Inhalte: Platzhalter und Module¶
Viele Inhaltstypen sind nicht als eigenständige Sektionen im Editor verfügbar. Sie werden stattdessen als Platzhalter in einer Einspaltig-Sektion eingefügt oder über separate Module in der Navigation gepflegt.
Platzhalter (in Einspaltig-Sektionen)¶
Folgende Inhalte lassen sich über Platzhalter direkt im Quill-Editor einer Einspaltig-Sektion einbetten:
| Inhalt | Platzhalter |
|---|---|
| Kontaktformular | {{CONTACTFORM}} |
| Testimonials / Zitate | {{TESTIMONIALS:Zitat\|Autor\|Rolle\|\|\|...}} |
| Bildergalerie | {{SLIDER:gruppenname:gallery}} |
| Icon-Liste | {{ICONLIST:simple\|cards\|timeline}}[Icon: name] Text{{/ICONLIST}} |
| Statistik-Zähler | {{STATISTICS:Überschrift}}[Zahl: wert:suffix] Label{{/STATISTICS}} |
| Zeitleiste | Über das Platzhaltersystem (installationsabhängig) |
| Vergleichsbox | Über das Platzhaltersystem (installationsabhängig) |
| Standortkarte | {{MAP:standort_id}} |
Eine vollständige Übersicht aller Platzhalter mit Syntax und Beispielen findest du in → Kapitel 2b: Quill-Editor & Platzhalter.
Module (separate Navigation)¶
Folgende Inhaltstypen werden über eigene Module gepflegt und erscheinen automatisch auf den zugehörigen Seiten — sie sind nicht als Sektion im Seiteneditor verfügbar:
| Modul | Zugriff über | Kapitel |
|---|---|---|
| FAQ | Navigation → FAQ | → Kapitel 7 |
| Team | Navigation → Team | → Kapitel 5 |
Was du jetzt kannst¶
- Du kennst alle verfügbaren Sektionstypen und ihre Felder.
- Du weißt, wie du Sektionen per Drag & Drop sortierst.
- Du kannst Sektionen duplizieren, als Entwurf verstecken und löschen.
- Du verstehst die gemeinsamen Metadaten-Felder (Überschrift, Beschreibung, Footer-Text) und die Hintergrundfarbe.
- Du weißt, dass weitere Inhalte (Kontaktformular, Galerie, Testimonials, FAQ, Team …) über Platzhalter oder Module verfügbar sind.