2b. Quill-Editor & Platzhalter¶
Der Quill-Editor ist der Rich-Text-Editor im Seiteneditor und in vielen anderen Formularbereichen. Zusätzlich zu den Formatierungsfunktionen unterstützt der Editor Platzhalter — spezielle Codes, die beim Rendern auf der Website durch dynamische Inhalte ersetzt werden.
Die Quill-Werkzeugleiste¶
Die Werkzeugleiste enthält von links nach rechts:
| Symbol / Gruppe | Funktion |
|---|---|
| B I U S | Fett, Kursiv, Unterstrichen, Durchgestrichen |
| H2 H3 | Überschriften (Heading 2, Heading 3) |
| klein / normal / groß / sehr groß | Schriftgröße |
| Farbpalette | Textfarbe (35 Farben) |
| Ausrichtung | Links / Zentriert / Rechts / Blocksatz |
| Link | Hyperlink einfügen |
| " | Blockzitat |
| 1. 2. / • | Nummerierte Liste / Aufzählungsliste |
| ← → | Einzug verkleinern / vergrößern |
| x₂ x² | Tiefgestellt / Hochgestellt |
| Tabellen-Symbol | Tabelle einfügen |
| Radiergummi | Formatierung entfernen |
| { } | HTML-Quellcode direkt bearbeiten |
HTML-Quellcode bearbeiten¶
Der Button { } rechts in der Werkzeugleiste öffnet einen Dialog, in dem du den rohen HTML-Quellcode des Editor-Inhalts siehst und direkt bearbeiten kannst. So kannst du:
- Inhalte aus anderen Quellen als sauberes HTML einfügen (z.B. aus CMS-Exportdaten)
- Platzhalter-Codes einfügen, die in der visuellen Ansicht nicht gerendert werden
- Komplexe Strukturen wie Tabellen manuell korrigieren
Tipp für Kurzgeschichten: Lange Texte lassen sich als HTML über „Für Web kopieren" aus Textverarbeitungsprogrammen einfügen — den resultierenden HTML-Code dann über die { }-Schaltfläche einfügen.
Klicke auf Speichern im Dialog oder Abbrechen, um ohne Änderungen zu schließen.
Platzhalter im Quill-Editor¶
Im Einspaltig-Layout (und in anderen Textfeldern) kannst du Platzhalter direkt in den Text schreiben. Das CMS ersetzt diese beim Seitenaufruf durch echte Inhalte.
Platzhalter müssen genau so geschrieben werden wie unten angegeben — inkl. geschweifter Klammern
{{}}.
Slider / Bildgalerien¶
{{SLIDER:gruppenname}}
{{SLIDER:gruppenname:typ}}
Zeigt einen Bildslider einer Slider-Gruppe. Der optionale Typ steuert die Darstellung:
| Typ | Darstellung |
|---|---|
(ohne Typ) oder fade |
Überblend-Slider |
gallery |
Einfache Bildergalerie |
cards / testimonials |
Karten-Slider (für Zitate) |
Beispiele:
- {{SLIDER:startseite}} — Slider der Gruppe „startseite"
- {{SLIDER:referenzen:gallery}} — Galerie der Gruppe „referenzen"
- {{SLIDER:kundenstimmen:cards}} — Testimonial-Karten
Mediadatei inline einbetten¶
{{MEDIA:id}}
{{MEDIA:id:breite}}
Bettet eine Datei aus der Mediathek ein:
- Bild: Wird inline als <img> angezeigt. Mit optionaler Breite in Pixel, z.B. {{MEDIA:42:600}} für max. 600 px.
- Dokument (PDF, ZIP etc.): Wird als Download-Button angezeigt.
Beispiel: {{MEDIA:23}} — zeigt das Mediaelement mit ID 23.
Die ID einer Mediendatei findest du in der Mediathek-Übersicht (Module → Medien) in der URL beim Bearbeiten.
Download-Button¶
{{DOWNLOAD:dateiname}}
{{DOWNLOAD:dateiname:Bezeichnung}}
Zeigt einen Download-Button für eine Datei aus der Mediathek.
{{DOWNLOAD:broschuere.pdf}}— Button mit Dateinamen als Label{{DOWNLOAD:broschuere.pdf:Broschüre herunterladen}}— Button mit eigenem Label
Animierter Inhaltsbereich¶
{{ANIMATE:typ}}
...Inhalt...
{{/ANIMATE}}
Umschließt einen Inhaltsblock mit einer Einblend-Animation.
| Typ | Beschreibung |
|---|---|
list |
Listenanimation (jede Zeile animiert ein) |
box |
Boxanimation |
box:highlight |
Hervorgehobene Box |
Beispiel:
{{ANIMATE:list}}
<ul><li>Punkt 1</li><li>Punkt 2</li></ul>
{{/ANIMATE}}
Link-Box¶
{{LINKBOX:position:hintergrundfarbe}}[Link: url | Linktext]{{/LINKBOX}}
Zeigt einen visuell hervorgehobenen Link-Kasten.
- Position:
left·right·center - Hintergrundfarbe:
blue·orange·green·brown
Beispiel:
{{LINKBOX:center:blue}}[Link: /kontakt | Jetzt Kontakt aufnehmen]{{/LINKBOX}}
Icon-Liste¶
{{ICONLIST:variante}}[Icon: iconname] Listenpunkt[Icon: iconname] Listenpunkt{{/ICONLIST}}
Zeigt eine Liste mit Icon-Voranstellung. Mehrere Punkte werden als [Icon: …] Text-Paare hintereinander geschrieben.
| Variante | Darstellung |
|---|---|
simple |
Schlichte Liste, Icon links neben dem Text |
cards |
Karten-Grid mit Icon-Badge oben |
timeline |
Zeitleisten-Darstellung mit verbundenen Punkten |
Icon-Namen: Englische Lucide-Namen (check, star, heart, phone, envelope, home, info, book, calendar, user, map-pin, briefcase, search, arrow-right, wrench, pencil, lightbulb, file) oder deutsche Aliase (häkchen, stern, herz, telefon, brief, haus, info, buch, kalender, person, standort, aktentasche, suche, pfeil-rechts, werkzeug, stift, glühbirne, datei).
Beispiel:
{{ICONLIST:simple}}[Icon: check] Erstgespräch kostenlos[Icon: check] Festpreis{{/ICONLIST}}
Icon-Box¶
{{ICONBOX:icon:farbe:position}}Inhalt{{/ICONBOX}}
Zeigt eine Box mit Icon.
- Farbe:
blue·orange·green·brown - Position:
left·right·top
Highlight-Box¶
{{HIGHLIGHTBOX:farbe}}Inhalt{{/HIGHLIGHTBOX}}
Farbiger Hinweiskasten.
- Farbe:
blue·orange·green·brown
Beispiel:
{{HIGHLIGHTBOX:orange}}Wichtiger Hinweis: Das Angebot gilt nur bis Ende des Monats.{{/HIGHLIGHTBOX}}
Kontakt-Box¶
{{CONTACTBOX:email:telefon}}
{{CONTACTBOX:email:telefon:Titel}}
Zeigt eine Kontakt-Karte mit E-Mail und Telefonnummer.
Badge (Inline-Kennzeichnung)¶
{{BADGE}}
{{BADGE:text}}
{{BADGE:text:variante:icon}}
Kleines Inline-Badge.
- Variante:
blue·orange·green·brown - Icon:
sparkles·star·info·check
Neueste News-Beiträge¶
{{NEWS:anzahl}}
Zeigt die letzten n News-Beiträge. Erfordert das aktivierte Aktuelles-Modul.
Video-Platzhalter¶
{{VIDEO:id}} — Einzelner Video-Player
{{REELS:id1,id2,id3}} — Bis zu 3 vertikale Videos (9:16)
{{VIDEO_GALLERY:gruppenname}} — Video-Galerie einer Gruppe
Bücher & Kurzgeschichten¶
{{BOOKS:anzahl}} — Grid mit n aktuellen Büchern (Standard: 4)
{{BOOK:id}} — Einzelnes Buch als Card
{{SHORTSTORIES:anzahl}} — Grid mit n aktuellen Kurzgeschichten
{{SHORTSTORY:id}} — Einzelne Kurzgeschichte als Featured Card
Kontaktformular¶
{{CONTACTFORM}}
Bettet das Kontaktformular ein (sendet E-Mail, speichert keine Daten).
Statistik-Zähler (inline)¶
{{STATISTICS:Überschrift}}[Zahl: wert:suffix] Label{{/STATISTICS}}
Animierte Zähler inline im Text.
Testimonials inline¶
{{TESTIMONIALS:Zitat|Autor|Rolle|||Zitat2|Autor2|Rolle2}}
Zeigt Testimonial-Quoteboxen.
Preistabelle¶
{{PRICETABLE:Leistung|Preis|||~Rabatt|Preis|||=Gesamt|Preis|||?Hinweis|||!CTA:URL}}
Strukturierte Preisaufstellung:
- Normaler Eintrag: Leistung|Preis
- Rabatt-Zeile: ~Rabatt|Preis
- Summen-Zeile: =Gesamt|Preis
- Hinweis: ?Text
- CTA-Button: !Buttontext:URL
Preiskarten (einfach)¶
{{SIMPLE_PRICING:anzahl-spalten:Titel|Preis|Beschreibung|||...}}
Einfache Preiskarten, optional mit Spaltenanzahl als erstem Parameter (1–4).
Standortkarte (inline)¶
{{MAP:standort_id}}
Zeigt eine Karte mit einem einzelnen Standort.
Seitenumbruch (Kurzgeschichten)¶
{{PAGE_BREAK}}
Fügt einen manuellen Seitenumbruch in Kurzgeschichten ein — ermöglicht kapitelweise Navigation.
Referenzen-Showcase¶
{{REFERENCES:MediaId|Titel|Beschreibung|Badge1,Badge2|||MediaId2|...}}
Zeigt Projekt-Referenzkarten mit Bild, Titel, Beschreibung und Badges.
Platzhalter im HTML-Editor einfügen¶
Da der Quill-Editor Platzhalter in geschweiften Klammern ggf. visuell ausblendet oder umformatiert, empfiehlt sich folgendes Vorgehen:
- Klicke auf { } in der Werkzeugleiste.
- Füge den Platzhalter direkt in den HTML-Quellcode ein, z.B.
<p>{{SLIDER:startseite}}</p>. - Klicke auf Speichern.
Der Platzhalter erscheint dann als normaler Text im Editor — auf der Website wird er korrekt gerendert.
Was du jetzt kannst¶
- Du kennst alle Werkzeuge in der Quill-Werkzeugleiste.
- Du weißt, wie du den HTML-Quellcode direkt bearbeitest (Button
{ }). - Du kannst Platzhalter für Slider, Medien, Downloads, Animationen, Videos, Bücher und mehr einsetzen.
- Du weißt, wie du Platzhalter korrekt über den HTML-Dialog einfügst.