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.
Sektionstypen des Kerns¶
Diese fünf Layouts gehören zum Lotse-CMS selbst und stehen in jeder Installation zur Verfügung.
Hero Banner¶
Großformatiger Kopfbereich mit Hintergrundbild oder Slider.
| Feld | Erklärung |
|---|---|
| Layout-Modus | Volle Breite (Bild/Slider im Hintergrund) · Split: Bild/Slider links, Text rechts · Split: Text links, Bild/Slider rechts |
| Titel (optional) | 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 (Vorgabe: 500px) |
| Button-Text / Button-Link | Primärer CTA-Button |
| Zweiter Button-Text / -Link (optional) | Optionaler zweiter Button |
| Trust-Stripe (optional) | Vertrauenssignale unter den Buttons, durch | getrennt, z. B. Festpreis ab 490 €|Antwort in 24 h (höchstens 250 Zeichen) |
| Hintergrund-Overlay | Dunkles Overlay für Textlesbarkeit: Kein Overlay · Leicht (20 %) · Mittel (40 %, Vorgabe) · Stark (60 %) · Sehr stark (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 (gleichmäßig) · 60:40 (breitere linke Spalte) · 40:60 (breitere rechte Spalte) · 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) | Wichtig für Barrierefreiheit und SEO — fülle das Feld immer aus, wenn das Bild etwas aussagt |
| Bild-Position | Links oder Rechts vom Text |
| Bildunterschrift (optional) | Caption unter dem Bild |
Call-to-Action (CTA)¶
Farbiger Handlungsaufruf-Bereich mit Buttons.
| Feld | Erklärung |
|---|---|
| Button-Text (Primär) / Button-Link (Primär) | Haupt-CTA-Button |
| Button-Stil (Primär) | Primary (Ausgefüllt) · Secondary (Ausgefüllt Orange) · Outline (Umrandet) · Ghost (Transparent) |
| Button-Text (Sekundär, optional) / Button-Link (Sekundär, optional) | Optionaler zweiter Button |
| Button-Stil (Sekundär) | Primary · Secondary · Outline · Ghost |
| Hintergrundfarbe | Primär (Theme) · Sekundär (Theme) · Grün · Braun · Grau · Weiß · Teal · Amber |
Die Überschrift und Beschreibung des CTA stammen aus den Section-Metadaten (H2-Feld / Beschreibungs-Feld).
Sektionstypen aus Modulen¶
Zusatzmodule bringen eigene Layouts mit. Sie erscheinen in der Auswahl Layout nur, wenn das jeweilige Modul in deiner Installation vorhanden ist. Die Felder im Einzelnen erklärt das Kapitel des Moduls.
| Layout | Wofür | Wichtigste Felder | Modul / Kapitel |
|---|---|---|---|
| Kostenrechner | Interaktiver Rechner, mit dem Besucher eine Preisschätzung erhalten | CTA-Link (z.B. Kontaktseite), CTA-Button-Text | Nur verfügbar, wenn das Modul Kostenrechner installiert ist → Kapitel 20 |
| Aktuelle Angebote | Liste der aktuell gültigen Angebote | Überschrift (optional), Nur diese Kategorien, Maximale Anzahl, Gültigkeitszeitraum anzeigen | Nur verfügbar, wenn das Modul Angebote installiert ist → Kapitel 23 |
| Video | Einzelner Video-Player aus der Mediathek | Video, Autoplay (wenn stumm), Endlosschleife, Stumm starten | Nur verfügbar, wenn das Modul Video installiert ist → Kapitel 25 |
| Video-Playlist | Mehrere Videos als Galerie oder Reels (9:16) | Video-Gruppe, Anzeige-Modus (Galerie / Reels), Spalten-Anzahl (2, 3 oder 4) | Nur verfügbar, wenn das Modul Video installiert ist → Kapitel 25 |
| Standortkarte | Karte mit einem, mehreren oder allen Standorten | Alle aktiven Standorte anzeigen, Standorte auswählen, Karten-Höhe, Zoom-Stufe, Nach Kategorie filtern | Nur verfügbar, wenn das Modul Standorte installiert ist → Kapitel 11 |
| Speisekarten-Anzeige | Speise- und Getränkekarten eines Gastro-Betriebs | Gastro-Betrieb, Anzuzeigende Arten, Ansicht, QR-Code und Druckansicht | Nur verfügbar, wenn das Gastro-Modul installiert ist → Kapitel 16 |
Layout fehlt in der Auswahl?
Siehst du ein hier genanntes Layout nicht, ist das zugehörige Modul in deiner Installation nicht vorhanden. Wende dich an deinen Administrator.
Weitere Inhalte: Platzhalter und Module¶
Viele Inhaltstypen sind nicht als eigenständige Sektionen im Editor verfügbar. Sie werden stattdessen als Platzhalter in den Text einer Sektion eingefügt oder über separate Module in der Navigation gepflegt.
Platzhalter (in Textfeldern)¶
Folgende Inhalte lassen sich über Platzhalter direkt im Quill-Editor einbetten, z. B. in einer Einspaltig-Sektion. Du fügst sie über den Knopf {{ }} in der Werkzeugleiste ein:
| Inhalt | Platzhalter | Herkunft |
|---|---|---|
| Bildslider / Bildergalerie | {{SLIDER:gruppe}} · {{IMAGE_GALLERY:gruppe}} |
Kern |
| Fremde Einbettung (iframe) | {{EMBED}}…{{/EMBED}} |
Kern |
| Testimonials / Zitate | {{TESTIMONIALS:2:Zitat|Autor|Rolle|--|…}} |
Kern |
| Icon-Liste | {{ICONLIST:timeline}}[Icon: name] Text{{/ICONLIST}} |
Kern |
| Statistik-Zähler | {{STATISTICS}}[Zahl: wert:zusatz] Beschriftung{{/STATISTICS}} |
Kern |
| Preise | {{PRICING:…}} · {{SIMPLE_PRICING:…}} · {{PRICETABLE:…}} |
Kern |
| Gegenüberstellung / Vergleichstabelle | {{COMPARE:…}} · {{COMPTABLE:name}}…{{/COMPTABLE}} |
Kern |
| Referenzen / Produkte | {{REFERENCES:…}} · {{PRODUCT_TILE:…}} |
Kern |
| Kontaktformular | {{CONTACTFORM}} |
Modul Kontaktformular → Kapitel 19 |
| Standortkarte (einzelner Standort) | {{MAP:standort_id}} |
Modul Standorte → Kapitel 11 |
| Video | {{VIDEO:id}} · {{REELS:…}} · {{VIDEO_GALLERY:gruppe}} |
Modul Video → Kapitel 25 |
Eine vollständige Übersicht aller Platzhalter mit Syntax, Eingabemaske 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 |
|---|---|---|
| Team | Navigation → Team | → Kapitel 5 |
| Jobs | Navigation → Jobs | → Kapitel 6 |
| FAQ | Navigation → FAQ | → Kapitel 7 |
| Aktuelles (News) | Navigation → Aktuelles | → Kapitel 8 |
| Bücher & Kurzgeschichten | Navigation → Bücher / Kurzgeschichten | → Kapitel 9 |
Auch diese Module sind nur sichtbar, wenn sie in deiner Installation vorhanden sind.
Was du jetzt kannst¶
- Du kennst die fünf Sektionstypen des Kerns und ihre Felder.
- Du weißt, welche Sektionstypen aus Modulen kommen und wo sie erklärt sind.
- 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.