Zum Inhalt

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: Slider, Preistabellen, Kacheln, Boxen, Einbettungen und vieles mehr.

Die meisten Platzhalter musst du nicht mehr von Hand schreiben: Du fügst sie über eine Eingabemaske ein und kannst sie später über dieselbe Maske wieder bearbeiten.

Die Quill-Werkzeugleiste

Quill-Editor Werkzeugleiste

Die Werkzeugleiste enthält von links nach rechts:

Symbol / Gruppe Funktion
B I U S Fett, Kursiv, Unterstrichen, Durchgestrichen
Überschriften Normaler Text, Überschrift 2, 3 und 4
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 bearbeiten
{{ }} Platzhalter einfügen (auch mit Strg + Leertaste)
</> HTML-Code an der Cursorposition einfügen

HTML-Quellcode bearbeiten

Der Button { } in der Werkzeugleiste öffnet den Dialog HTML-Quellcode bearbeiten. Darin siehst du den rohen HTML-Quellcode des gesamten Editor-Inhalts und kannst ihn direkt bearbeiten. So kannst du:

  • Inhalte aus anderen Quellen als sauberes HTML einfügen (z. B. aus CMS-Exportdaten)
  • Platzhalter von Hand schreiben oder korrigieren
  • 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.

HTML-Code einfügen

Der Button </> öffnet den Dialog HTML Code einfügen. Anders als bei { } bearbeitest du hier nicht den ganzen Inhalt, sondern fügst ein Stück HTML an der Stelle ein, an der dein Cursor steht. Mit Strg + Enter fügst du schnell ein.

Die Option HTML Code bereinigen (entfernt gefährliche Elemente) ist standardmäßig aus. Schalte sie ein, wenn der Code aus einer unbekannten Quelle stammt.

Platzhalter im Quill-Editor

Im Einspaltig-Layout (und in anderen Textfeldern) kannst du Platzhalter in den Text setzen. Das CMS ersetzt sie beim Seitenaufruf durch echte Inhalte. Im Editor selbst siehst du nur den Code, z. B. {{SLIDER:startseite}} — erst auf der Website erscheint der Slider.

Platzhalter kommen aus zwei Quellen:

Herkunft Bedeutung
Kern Gehört zum Lotse-CMS selbst und steht in jeder Installation zur Verfügung.
Modul Kommt mit einem Zusatzmodul (z. B. Video, Bücher, Kontaktformular). Er funktioniert nur, wenn dieses Modul in deiner Installation vorhanden ist. Fehlt das Modul, erscheint er auch nicht im Menü.

Eine vollständige Liste mit Herkunft findest du weiter unten unter Alle Platzhalter auf einen Blick.

Platzhalter einfügen und bearbeiten

Einfügen über die Eingabemaske

  1. Setze den Cursor an die Stelle, an der der Platzhalter stehen soll.
  2. Klicke in der Werkzeugleiste auf {{ }} (Platzhalter einfügen) oder drücke Strg + Leertaste.
  3. Es öffnet sich das Fenster Platzhalter einfügen. Die Einträge sind nach Gruppen sortiert (z. B. Slider, Media & Downloads, Listen & Boxen, Komponenten). Unter jedem Eintrag siehst du eine Kurzform der Schreibweise.
  4. Klicke auf den gewünschten Eintrag. Für die meisten Platzhalter öffnet sich jetzt eine Eingabemaske als Fenster über dem Editor, z. B. Preistabelle einfügen.
  5. Fülle die Felder aus. Felder mit einem Sternchen * sind Pflichtfelder. Unter vielen Feldern steht ein kurzer Hilfetext.
  6. Klicke auf Einfügen. Der fertige Platzhalter steht danach an der Cursorposition.

Mit Abbrechen, dem × oben rechts oder der Esc-Taste schließt du die Maske, ohne etwas einzufügen.

Je nach Platzhalter sieht die Maske etwas anders aus:

Art So bedienst du die Maske
Einfache Angaben (z. B. Medium, Download, Link-Knopf) Ein Feld je Angabe, Auswahlfelder als Aufklappliste.
Kacheln (z. B. Preistabelle, Referenzen, Zitate) Oben wählst du Spalten pro Reihe (2, 3 oder 4 Spalten). Jede Kachel ist ein eigener Block. Mit + Eintrag hinzufügen legst du eine weitere Kachel an, mit ✕ entfernst du eine.
Listen im Rumpf (Icon-Liste, Statistik-Zahlen) Jede Zeile ist ein eigener Eintrag, ebenfalls mit + Eintrag hinzufügen und ✕.
Preisaufstellung Unten stehen Knöpfe für jede Zeilenart: + Posten, + Rabatt, + Summe, + Hinweis, + Knopf.
Vergleichstabelle Getrennte Bereiche Spalten (mit + Spalte) und Zeilen (mit + Zeile).
Einbettung Eine Auswahl für die Zwei-Klick-Lösung und ein großes Feld für den Einbettungs-Code.

Bilder auswählen: Bei Feldern wie Bild steht neben dem Eingabefeld ein Bild-Knopf 🖼 (Bild aus der Medienverwaltung wählen). Er öffnet die Medienliste, ein Klick auf ein Vorschaubild übernimmt die Auswahl. Mit Kein Bild leerst du das Feld wieder. Alternativ kannst du die ID des Bildes direkt eintragen.

Fehler: Die Maske prüft deine Eingaben, bevor sie den Platzhalter einsetzt. Stimmt etwas nicht, erscheint die Meldung direkt unter dem betroffenen Feld, und nichts wird eingefügt. Typisch ist ein senkrechter Strich | in einem Textfeld: Er trennt im Platzhalter die Felder und darf deshalb nicht im Text stehen.

Nachträglich bearbeiten

Einen vorhandenen Platzhalter musst du nicht mehr im Code ändern:

  1. Klicke mit dem Cursor in den Platzhalter-Code im Editor.
  2. Direkt darunter erscheint ein kleiner Knopf Bearbeiten.
  3. Klicke auf Bearbeiten. Alternativ: Doppelklick auf den Platzhalter oder Alt + Enter, während der Cursor darin steht.
  4. Die Eingabemaske öffnet sich mit den aktuellen Werten, z. B. Preistabelle bearbeiten.
  5. Ändere die Werte und klicke auf Übernehmen. Der alte Platzhalter wird an derselben Stelle durch den neuen ersetzt.

Gelber Hinweiskasten

Manchmal steht oben in der Maske ein gelber Kasten mit Hinweisen. Das passiert, wenn ein älterer Platzhalter in einer früheren Schreibweise gespeichert ist, zum Beispiel mit ||| statt |--| als Kachelgrenze. Die Maske liest die alte Form und schreibt beim Übernehmen die aktuelle. Auf der Website ändert sich dadurch nichts.

Was beim Bearbeiten ersetzt wird: Einige Platzhalter umschließen einen Inhalt, etwa {{HIGHLIGHTBOX:blue}}…{{/HIGHLIGHTBOX}}. Dabei gibt es zwei Fälle:

Platzhalter Was die Maske ändert
ANIMATE, HIGHLIGHTBOX, ICONBOX, LINKBOX, HOMEPAGE_INTRO Nur den öffnenden Tag (z. B. Farbe oder Ausrichtung). Den Inhalt dazwischen schreibst du wie gewohnt im Editor.
ICONLIST, STATISTICS, COMPTABLE, EMBED Den ganzen Block vom öffnenden bis zum schließenden Tag, weil der Inhalt in der Maske gepflegt wird.

Kein Bearbeiten-Knopf?

Erscheint unter einem Platzhalter kein Bearbeiten-Knopf, gibt es für ihn keine Maske. Das gilt für BADGES und für Platzhalter, die nur deine Installation mitbringt (siehe Platzhalter einzelner Installationen). Diese änderst du direkt im Text oder über { }. Steht der Cursor auf einem schließenden Tag wie {{/ANIMATE}}, erscheint der Knopf ebenfalls nicht — klicke dann in den öffnenden Tag.

Einträge mit eigenem Dialog

Einige Menüeinträge nutzen statt der Eingabemaske einen eigenen, einfacheren Dialog oder setzen eine fertige Vorlage ein:

Menüeintrag Verhalten
Basic Slider, Fade Slider (Hero), Cards Slider (Testimonials) Auswahl der Slider-Gruppe aus einer Liste. Den Typ legt der Eintrag fest.
Bild-Galerie Auswahl einer Mediengruppe.
Animierte Liste, Liste: Zeitversetzt, Box: Highlight, Box: Schwebeeffekt Setzt eine fertige Vorlage mit Leerzeile für deinen Inhalt ein.
Link-Box, Icon-Box Eigener Dialog, der auch den Inhalt der Box abfragt.
Icon-Badges (inline) Eigener Dialog für die Badge-Liste.
Homepage Intro Block Setzt den Rahmen mit Leerzeile ein.
Modul-Einträge wie News-Widget, Bücher-Grid, Video Kurze Abfrage (Anzahl, ID oder Auswahlliste).

Auch diese Platzhalter kannst du danach — sofern sie eine Maske haben — über Bearbeiten ändern.

Platzhalter von Hand schreiben

Du kannst jeden Platzhalter auch selbst tippen oder über { } in den HTML-Quellcode setzen, z. B. <p>{{SLIDER:startseite}}</p>. Er muss dann genau so geschrieben werden wie unten angegeben — inklusive der doppelten geschweiften Klammern {{ }} und der Großschreibung.

Schreibregeln für alle Platzhalter

Wenn du einen Platzhalter von Hand schreibst oder liest, helfen dir diese Regeln:

Zeichen Bedeutung Beispiel
: trennt die Angaben {{MEDIA:5:300:C}}
2: / 3: / 4: Spalten pro Reihe, direkt nach dem Namen (nur bei Kachel-Platzhaltern) {{CARDS:3:…}}
|--| trennt die Kacheln voneinander …|--|…
| trennt die Felder innerhalb einer Kachel Titel|Text
, oder ; trennt Einträge einer Liste innerhalb eines Feldes — je nach Platzhalter verschieden, siehe unten PHP,Symfony / Support;Updates
{{/NAME}} schließt einen Bereich {{HIGHLIGHTBOX:blue}}…{{/HIGHLIGHTBOX}}

Verbotene Zeichen

Eine schließende geschweifte Klammer } darf in keinem Wert stehen. Ebenso darf ein Trennzeichen nicht im Text vorkommen, wenn es an dieser Stelle trennt — ein | in einem Kachel-Titel zerteilt die Kachel. Die Eingabemaske weist solche Werte ab.

Ältere Schreibweise |||: Früher wurden Kacheln mit drei senkrechten Strichen ||| getrennt. Das wird weiterhin gelesen. Für neue Inhalte ist |--| eindeutiger, und die Maske schreibt beim Speichern immer |--|.

Leere Felder: Lässt du in einer Kachel ein Feld in der Mitte leer, schreibt die Maske dort ein einzelnes Leerzeichen, damit die folgenden Felder an ihrer Position bleiben, z. B. {{PRODUCT_TILE:3:Bräter|89,00 €| |https://…}} (ohne Bild).

Alle Platzhalter auf einen Blick

Platzhalter Zweck Herkunft
{{SLIDER}} Bildslider einer Mediengruppe Kern
{{IMAGE_GALLERY}} Bildergalerie Kern
{{MEDIA}} Bild oder Datei einbinden Kern
{{DOWNLOAD}} Download-Knopf Kern
{{EMBED}} Fremde Einbettung (iframe) mit Zwei-Klick-Lösung Kern
{{ANIMATE}} Animierter Bereich Kern
{{HIGHLIGHTBOX}} Hervorgehobene Box Kern
{{ICONBOX}} Box mit Symbol Kern
{{LINKBOX}} Link-Box Kern
{{ICONLIST}} Liste mit Symbolen Kern
{{CONTACTBOX}} Kontakt-Box Kern
{{BADGE}} Kleines Badge im Fließtext Kern
{{BADGES}} Reihe von Icon-Badges Kern
{{BUTTON}} Link-Knopf Kern
{{HOMEPAGE_INTRO}} SEO-Einleitung für die Startseite Kern
{{STATISTICS}} Statistik-Zahlen mit Zählanimation Kern
{{CARDS}} Icon-Kacheln Kern
{{TESTIMONIALS}} Zitate / Kundenstimmen Kern
{{REFERENCES}} Referenzen-Kacheln Kern
{{PRODUCT_TILE}} Produkt-Kacheln Kern
{{MODULES}} Modul-Kacheln mit Kategorie und Preis Kern
{{PRICING}} Preistabelle mit Preis-Boxen Kern
{{SIMPLE_PRICING}} Einfache Preis-Karten Kern
{{PRICETABLE}} Preisaufstellung mit Summe Kern
{{COMPARE}} Gegenüberstellung vorher / nachher Kern
{{COMPTABLE}} Vergleichstabelle Kern
{{NEWS}} Neueste News-Beiträge Modul Aktuelles → Kapitel 8
{{BOOKS}}, {{BOOK}} Bücher-Raster, einzelnes Buch Modul Bücher → Kapitel 9
{{SHORTSTORIES}}, {{SHORTSTORY}} Kurzgeschichten-Raster, einzelne Kurzgeschichte Modul Kurzgeschichten → Kapitel 9
{{CONTACTFORM}} Kontaktformular Modul Kontaktformular → Kapitel 19
{{MAP}} Karte zu einem Standort Modul Standorte → Kapitel 11
{{VIDEO}}, {{REELS}}, {{VIDEO_GALLERY}} Video, Hochkant-Videos, Video-Galerie Modul Video → Kapitel 25

Kern-Platzhalter: Bilder, Medien und Einbettungen

Slider

{{SLIDER:gruppenname}}
{{SLIDER:gruppenname:typ}}

Zeigt einen Bildslider einer Mediengruppe.

Feld in der Maske Pflicht Erklärung
Mediengruppe ja Der Gruppenname aus der Medienverwaltung (Buchstaben, Ziffern, - und _).
Darstellung nein Siehe Tabelle. Ohne Angabe gilt die Standarddarstellung.
Typ Darstellung
hero Hero, überblendend
fade Überblendend
gallery Galerie
basic Einfach
testimonials Zitate
cards Karten

Beispiele:

  • {{SLIDER:startseite}} — Slider der Gruppe „startseite"
  • {{SLIDER:startseite:hero}} — überblendender Hero-Slider
  • {{SLIDER:kundenstimmen:cards}} — Karten-Slider

Bildergalerie

{{IMAGE_GALLERY:5,6,7}}
{{IMAGE_GALLERY:gruppenname}}

Zeigt mehrere Bilder als Galerie. Im Feld Bilder (Pflicht) trägst du entweder Medien-IDs mit Komma getrennt ein (5,6,7) oder den Namen einer Mediengruppe.

Mediadatei inline einbetten

{{MEDIA:id}}
{{MEDIA:id:breite}}
{{MEDIA:id:breite:ausrichtung}}
{{MEDIA:id::ausrichtung}}

Bettet eine Datei aus der Mediathek ein:

  • Bild: Wird im Text angezeigt.
  • Dokument (PDF, ZIP etc.): Wird als Download-Knopf angezeigt.
Feld in der Maske Pflicht Erklärung
Bild ja Das Medium, per 🖼 auswählen oder ID eintragen.
Breite nein Höchstbreite in Pixeln. Leer lassen für volle Breite.
Ausrichtung nein L Links · C Zentriert · R Rechts

Beispiele:

  • {{MEDIA:23}} — Medium mit ID 23 in voller Breite
  • {{MEDIA:42:600}} — höchstens 600 px breit
  • {{MEDIA:42:600:C}} — höchstens 600 px breit, zentriert
  • {{MEDIA:42::C}} — volle Breite, zentriert (die Breite bleibt leer, deshalb zwei Doppelpunkte)

Die ID einer Mediendatei findest du in der Mediathek-Übersicht (Module → Medien) in der URL beim Bearbeiten. In der Eingabemaske wählst du das Bild bequemer über 🖼.

Download-Button

{{DOWNLOAD:dateiname}}
{{DOWNLOAD:dateiname:Bezeichnung}}

Zeigt einen Download-Knopf für eine Datei aus der Mediathek.

Feld in der Maske Pflicht Erklärung
Dateiname ja Der Dateiname aus der Medienverwaltung, nicht der Anzeigename. Erlaubt sind Buchstaben, Ziffern, Punkt, Unterstrich und Bindestrich — keine Leerzeichen.
Beschriftung nein Text auf dem Knopf. Ohne Angabe erscheint der Dateiname.

Beispiele:

  • {{DOWNLOAD:preisliste.pdf}} — Knopf mit Dateinamen als Beschriftung
  • {{DOWNLOAD:preisliste.pdf:Preisliste 2026}} — Knopf mit eigener Beschriftung

Einbettung (iframe)

{{EMBED}}
<iframe src="https://…" title="…" height="420"></iframe>
{{/EMBED}}

Bindet den Einbettungs-Code eines anderen Anbieters ein, etwa ein Lokido-Widget, einen Terminkalender oder eine Karte. Erlaubt ist ein iframe mit https-Adresse. Links, die der Anbieter unter dem iframe mitliefert, bleiben als normale Links erhalten.

Feld in der Maske Pflicht Erklärung
Zwei-Klick-Lösung nein Erst nach Zustimmung laden · Sofort laden · leer = Projektstandard (die Maske zeigt in Klammern, was in deiner Installation gilt).
Einbettungs-Code ja Den Code des Anbieters unverändert einfügen.

Die Auswahl landet als Zusatz im Platzhalter:

Schreibweise Verhalten
{{EMBED}} Projektstandard — ab Werk: erst nach Zustimmung
{{EMBED:zustimmung}} Besucher sehen zuerst einen Hinweis „Eingebetteter Inhalt" mit den Knöpfen Zustimmen und laden und Ablehnen. Der fremde Inhalt lädt erst nach dem Klick. Nach Ablehnen bleibt eine Zeile mit dem Knopf Erneut fragen stehen.
{{EMBED:direkt}} Der Inhalt lädt sofort mit der Seite.

Zwei-Klick-Regel und Datenschutz

Erst nach Zustimmung laden ist der sichere Weg, sobald der Anbieter beim Laden Daten wie die IP-Adresse der Besucher erhält (DSGVO). Sofort laden wählst du nur, wenn dafür keine Einwilligung nötig ist. In beiden Fällen gehört der Anbieter in deine Datenschutzerklärung.

Fehlt dem iframe ein Titel, setzt das CMS „Eingebetteter Inhalt von …" mit dem Namen des Anbieters ein. Besser ist ein eigener, sprechender Titel im Attribut title — Screenreader lesen ihn vor. Ein iframe mit http://-Adresse wird nicht angezeigt.

Beim Bearbeiten ersetzt die Maske den ganzen Block, also auch den Code zwischen den Tags.

Kern-Platzhalter: Text-Bausteine und Boxen

Animierter Inhaltsbereich

{{ANIMATE:art}}
...Inhalt...
{{/ANIMATE}}

{{ANIMATE:art:variante}}
...Inhalt...
{{/ANIMATE}}

Umschließt einen Inhaltsblock mit einer Einblend-Animation.

Feld in der Maske Pflicht Erklärung
Art ja list (Liste) oder box (Kasten)
Variante nein Siehe Tabelle. Leer lassen für die Vorgabe.
Art Varianten
list default (Vorgabe) · stagger (zeitversetzt) · slide-left · slide-right
box scale (Vorgabe) · highlight (hervorgehoben) · float (Schwebeeffekt) · flip

Beispiel:

{{ANIMATE:list:stagger}}
<ul><li>Punkt 1</li><li>Punkt 2</li></ul>
{{/ANIMATE}}

Highlight-Box

{{HIGHLIGHTBOX:farbe}}Inhalt{{/HIGHLIGHTBOX}}

Farbiger Hinweiskasten. Das Feld Farbe (Pflicht) bietet blue (Blau) · orange (Orange) · green (Grün) · brown (Braun). Den Inhalt schreibst du im Editor zwischen die Tags.

Beispiel:

{{HIGHLIGHTBOX:orange}}Wichtiger Hinweis: Das Angebot gilt nur bis Ende des Monats.{{/HIGHLIGHTBOX}}

Icon-Box

{{ICONBOX:symbol:farbe:ausrichtung}}Inhalt{{/ICONBOX}}
{{ICONBOX:symbol:ausrichtung}}Inhalt{{/ICONBOX}}

Zeigt eine Box mit Symbol.

Feld in der Maske Pflicht Erklärung
Symbol ja Ein Symbolname wie check oder lightbulb (siehe Icon-Liste).
Farbe nein blue · green · orange · brown · neutral. Leer lassen für Blau.
Ausrichtung ja left (Links) · center (Zentriert) · right (Rechts)

Ohne Farbe entfällt die Angabe ganz: {{ICONBOX:check:left}} — nicht {{ICONBOX:check::left}}.

{{LINKBOX:ausrichtung:hintergrund}}[Link: url | Linktext]{{/LINKBOX}}

Zeigt einen hervorgehobenen Link-Kasten. Die Links schreibst du zwischen die Tags als [Link: url | Text].

  • Ausrichtung (Pflicht): left (Links) · center (Zentriert) · right (Rechts)
  • Hintergrund (Pflicht): blue (Blau) · white (Weiß) · transparent (Transparent)

Beispiel:

{{LINKBOX:center:blue}}[Link: /kontakt | Jetzt Kontakt aufnehmen]{{/LINKBOX}}

Icon-Liste

{{ICONLIST:darstellung}}
[Icon: name] Listenpunkt
[Icon: name] Listenpunkt
{{/ICONLIST}}

Zeigt eine Liste, in der jeder Punkt ein Symbol trägt. In der Maske wählst du die Darstellung (Pflicht) und legst je Punkt ein Symbol und einen Text an (beide Pflicht).

Darstellung Ergebnis
timeline Zeitstrahl mit verbundenen Punkten
cards Karten-Raster mit Symbol oben
simple Schlichte Liste, Symbol links neben dem Text

Symbolnamen: Englische Namen (check, star, heart, phone, envelope, home, info, book, calendar, user, map-pin, map, briefcase, search, arrow-right, wrench, pencil, lightbulb, file) oder deutsche Namen (häkchen, stern, herz, telefon, brief, email, haus, zuhause, info, information, buch, kalender, person, benutzer, standort, ort, karte, aktentasche, arbeit, suche, pfeil-rechts, werkzeug, schraubenschlüssel, stift, bearbeiten, glühbirne, idee, datei, dokument).

Beispiel:

{{ICONLIST:simple}}
[Icon: check] Erstgespräch kostenlos
[Icon: check] Festpreis
{{/ICONLIST}}

Kontakt-Box

{{CONTACTBOX:email:telefon}}
{{CONTACTBOX:email:telefon:Überschrift}}

Zeigt eine Kontakt-Karte mit E-Mail und Telefonnummer.

Feld in der Maske Pflicht
E-Mail-Adresse ja
Telefonnummer ja
Überschrift nein

Beispiel: {{CONTACTBOX:info@example.org:0441 123456:So erreichen Sie uns}}

Badge (Inline-Kennzeichnung)

{{BADGE}}
{{BADGE:text}}
{{BADGE:text:farbe:symbol}}

Kleine Auszeichnung im Fließtext. Ohne Angaben erscheint „Neues Angebot!".

  • Text: frei wählbar
  • Farbe: blue (Vorgabe) · orange · green · brown
  • Symbol: sparkles (Funken, Vorgabe) · star · info · check

Beispiel: {{BADGE:Neu im Sortiment:green:star}}

Icon-Badges (Reihe)

{{BADGES:🏢 Agenturen, 👩‍💻 Freelancer, 🏪 Händler}}

Zeigt mehrere runde Badges nebeneinander. Die Einträge trennst du mit Komma. Steht vor dem Text ein Emoji mit Leerzeichen, wird es als Symbol dargestellt. Die Ausrichtung des Absatzes (links, zentriert, rechts) übernimmt die Badge-Reihe.

Ohne Bearbeiten-Knopf

BADGES fügst du über den Menüeintrag Icon-Badges (inline) ein. Eine Bearbeiten-Maske gibt es dafür nicht — ändere den Text direkt im Editor.

{{BUTTON:Beschriftung:ziel}}
{{BUTTON:Beschriftung:ziel:stil}}

Zeigt einen Link als Knopf.

Feld in der Maske Pflicht Erklärung
Beschriftung ja Ohne Doppelpunkt — der trennt hier die Angaben.
Ziel ja https://… oder /seite
Stil nein primary (Primär, Vorgabe) · secondary (Sekundär) · outline (Umriss) · ghost (Dezent)

Beispiele: {{BUTTON:Jetzt starten:https://ziel.de:primary}} · {{BUTTON:Mehr:/leistungen}}

SEO-Einleitung (Startseite)

{{HOMEPAGE_INTRO}}
Einleitungstext
{{/HOMEPAGE_INTRO}}

Ein Einleitungsblock für die Startseite. Er hat keine Einstellungen, den Text schreibst du im Editor zwischen die Tags. Im Menü heißt der Eintrag Homepage Intro Block.

Statistik-Zahlen

{{STATISTICS}}
[Zahl: wert:zusatz] Beschriftung
{{/STATISTICS}}

{{STATISTICS:Beschriftung für Screenreader}}
[Zahl: wert] Beschriftung
{{/STATISTICS}}

Animierte Zähler im Text.

Feld in der Maske Pflicht Erklärung
Beschriftung für Screenreader nein Wird nicht sichtbar angezeigt, sondern von Screenreadern vorgelesen.
Zahl (je Eintrag) ja Nur Ziffern zählen für die Animation — „über 120" läuft nicht mit.
Zusatz (je Eintrag) nein Steht direkt hinter der Zahl, etwa + oder %.
Beschriftung (je Eintrag) ja Text unter der Zahl.

Beispiel:

{{STATISTICS:Zahlen zum Unternehmen}}
[Zahl: 120:+] Projekte
[Zahl: 15] Jahre
{{/STATISTICS}}

Abweichender Dialog möglich

In manchen Installationen ist der Statistik-Platzhalter an die Website angepasst. Dann öffnet der Menüeintrag Statistik-Zähler einen eigenen Dialog, und der Bearbeiten-Knopf fehlt.

Kern-Platzhalter: Kacheln

Alle Kachel-Platzhalter folgen demselben Muster: {{NAME:spalten:Feld|Feld|…|--|Feld|Feld|…}}. Die Spaltenzahl am Anfang ist 2, 3 oder 4. In der Maske heißt die Angabe Spalten pro Reihe.

Icon-Kacheln

{{CARDS:3:🎯|Überschrift|Beschreibung|--|🔒|Überschrift|Beschreibung}}

Felder je Kachel: Symbol (z. B. ein Emoji) · Überschrift (Pflicht) · Beschreibung. Ohne Spaltenangabe: 3 Spalten.

Beispiel: {{CARDS:3:🎯|Schnell|In Minuten startklar|--|🔒|Sicher|Tägliche Sicherung}}

Zitate (Testimonials)

{{TESTIMONIALS:2:Zitat|Autor|Rolle|--|Zitat|Autor|Rolle}}

Felder je Kachel: Zitat (Pflicht) · Autor · Rolle oder Firma. Ohne Spaltenangabe: 2 Spalten. Im Menü heißt der Eintrag Zitate-Box.

Beispiel: {{TESTIMONIALS:2:Genial einfach.|Max Mustermann|Geschäftsführer|--|Endlich selbst pflegbar.|Erika Musterfrau|Marketing}}

Referenzen-Showcase

{{REFERENCES:3:BildId|Titel|Beschreibung|Badge1,Badge2|Adresse|--|BildId|Titel|…}}

Zeigt Projekt-Referenzkarten mit Bild, Titel, Beschreibung und Badges. Ohne Spaltenangabe: 3 Spalten.

Feld je Kachel Pflicht Erklärung
Bild nein Medien-ID, in der Maske per 🖼 wählbar
Titel ja Ohne |
Beschreibung nein Links als [Text](Adresse), siehe unten
Badges nein Mit Komma trennen, z. B. PageSpeed 98, WCAG AA
Link zur Referenz nein Adresse der Projektseite

Adresse (optional, letztes Feld). Ist sie gesetzt, wird der Titel zum Link und am Kartenende erscheint ein Knopf „Zur Referenz". Externe Ziele öffnen in einem neuen Tab. Das Feld darf fehlen — bestehende vierfeldige Karten bleiben unverändert.

Links in der Beschreibung. In der Beschreibung erzeugt [Text](Adresse) einen Link:

{{REFERENCES:3:12|Handwerker-Website|Relaunch für [Müller GmbH](https://mueller.de)|PageSpeed 98,WCAG AA|https://mueller.de}}

Alles andere im Beschreibungstext bleibt reiner Text; HTML-Tags werden bewusst nicht ausgewertet. Erlaubt sind http, https, mailto, tel sowie seiteneigene Ziele wie /referenzen/mueller; alles andere wird als Text ausgegeben statt verlinkt.

Spaltenzahl immer mitschreiben

Das erste Feld einer Referenz-Kachel ist eine Bild-ID, also eine Zahl. {{REFERENCES:3|Kunde|Text}} wird deshalb als „3 Spalten" gelesen, nicht als „Bild 3" — die Kachel verliert ihr Bild. Schreibst du von Hand, setze die Spaltenzahl immer davor: {{REFERENCES:3:3|Kunde|Text}}. Die Eingabemaske macht das automatisch.

Produkt-Kacheln

{{PRODUCT_TILE:3:Produktname|Preis|BildId|Produkt-URL|--|…}}

Kacheln für redaktionelle Produktempfehlungen, z. B. im Rezeptfeld „Verwendete Produkte" (siehe Kapitel 24). Ohne Spaltenangabe: 3 Spalten.

Feld je Kachel Pflicht Erklärung
Produktname ja
Preis nein Freitext, z. B. 69,90 €
Bild nein Medien-ID, in der Maske per 🖼 wählbar
Produkt-URL nein Link zum Produkt; der Knopf heißt „Zum Produkt"

Externe Produkt-Links werden automatisch als Werbelinks gekennzeichnet und öffnen in einem neuen Tab. Zusätzlich erzeugt das CMS strukturierte Produktdaten für Suchmaschinen.

Beispiel: {{PRODUCT_TILE:3:Ofenzauberer|69,90 €| |https://shop.example.org/ofen|--|Bräter|89,00 €| |https://shop.example.org/braeter}}

Modul-Kacheln

{{MODULES:2:kategorie|Titel|Beschreibung|Preis|--|…}}

Kacheln zur Vorstellung von Leistungspaketen mit farbiger Kategorie. Ohne Spaltenangabe: 2 Spalten. Im Menü heißt der Eintrag Modul-Grid (inline).

Feld je Kachel Pflicht Erklärung
Kategorie nein basis · erweitert · profi · premium — bestimmt die Farbe
Titel ja
Beschreibung nein
Preis nein

Beispiel: {{MODULES:2:basis|FAQ|Fragen und Antworten|99 €|--|premium|AI-Chat|Rund um die Uhr erreichbar|719 €}}

Kern-Platzhalter: Preise und Vergleiche

Preistabelle (Preis-Boxen)

{{PRICING:3:Name|Preis|Einheit|Preiszusatz|Beschreibung|Merkmal;Merkmal|Knopftext|Ziel|Shop-Adresse|BildId|--|…}}

Preis-Boxen mit Merkmalen und Knopf. Ohne Spaltenangabe: 3 Spalten. Im Menü heißt der Eintrag Preis-Boxen (inline).

Feld je Kachel Pflicht Erklärung
Hervorheben nein Rahmen in der Primärfarbe und das Abzeichen „Beliebt". Von Hand: ein ! vor dem Namen.
Bezeichnung ja z. B. Profi
Preis nein Freitext. Steht eine Zahl darin, entstehen zusätzlich strukturierte Daten für Suchmaschinen; „auf Anfrage" ist ebenso zulässig.
Einheit nein z. B. pro Monat
Preiszusatz nein z. B. zzgl. MwSt.
Beschreibung nein
Merkmale nein Mit Semikolon trennen — das Komma bleibt als Satzzeichen frei.
Knopfbeschriftung nein Leer: „Zum Shop" bzw. „Mehr erfahren"
Ziel nein z. B. /kontakt
Shop-Adresse nein Wenn gesetzt, führt der Knopf dorthin und öffnet in einem neuen Tab.
Bild nein Medien-ID, in der Maske per 🖼 wählbar

Beispiel:

{{PRICING:3:!Profi|49 €|pro Monat|zzgl. MwSt.|Für wachsende Teams|Alle Funktionen;Telefon-Support|Jetzt buchen|/kontakt|--|Einstieg|19 €}}

Hier ist „Profi" hervorgehoben; die zweite Kachel „Einstieg" hat nur Name und Preis.

Preiskarten (einfach)

{{SIMPLE_PRICING:3:Titel|Beschreibung|Preis|Preisart|--|…}}

Schlichte Preiskarten. Ohne Spaltenangabe: 3 Spalten. Felder je Kachel: Titel (Pflicht) · Beschreibung · Preis · Preisart (z. B. netto).

Beispiel: {{SIMPLE_PRICING:3:Basis|Für den Anfang|29 €|netto|--|Profi|Für wachsende Teams|49 €|netto}}

Preisaufstellung

{{PRICETABLE:Posten|Betrag|--|~Rabatt|Betrag|--|=Gesamt|Betrag|--|?Hinweis|--|!Knopftext:Ziel}}

Posten, Rabatte und eine Summe untereinander, dazu ein Hinweis und ein Knopf. Jede Zeile ist durch |--| getrennt; ein Zeichen am Zeilenanfang legt die Art fest.

Zeilenart (Knopf in der Maske) Zeichen Felder
+ Posten — Bezeichnung (Pflicht) · Betrag
+ Rabatt ~ Bezeichnung (Pflicht) · Betrag
+ Summe = Bezeichnung (Pflicht) · Betrag
+ Hinweis ? Hinweis (Pflicht)
+ Knopf ! Beschriftung und Ziel (beide Pflicht), getrennt durch : statt |; höchstens ein Knopf

Der Betrag ist Freitext — „auf Anfrage" ist ebenso zulässig wie eine Zahl.

Beispiel:

{{PRICETABLE:Konzept und Umsetzung|490 €|--|~Treuerabatt|-50 €|--|=Gesamt|440 €|--|?Alle Preise zzgl. MwSt.|--|!Angebot anfordern:/kontakt}}

Wo du den Eintrag findest

Im Menü steht die Preisaufstellung als Berechnungstabelle in der Gruppe Komponenten, direkt unter der Vergleichstabelle. Sie gehört zum Kern und steht dir deshalb immer zur Verfügung — unabhängig davon, ob das Kontaktformular-Modul gebucht ist. Du kannst den Platzhalter auch von Hand schreiben und über Bearbeiten ändern.

Gegenüberstellung

{{COMPARE:Auszeichnung|Überschrift|Punkt;Punkt|--|Auszeichnung|Überschrift|Punkt;Punkt}}

Zwei Seiten nebeneinander: links das Problem, rechts die Lösung. Es sind genau zwei Kacheln. Im Menü heißt der Eintrag Vergleichsbox (inline).

Feld je Seite Pflicht Erklärung
Auszeichnung nein Die kleine Zeile über der Überschrift, z. B. Vorher
Überschrift ja
Punkte nein Mit Semikolon trennen — das Komma bleibt als Satzzeichen frei.

Beispiel:

{{COMPARE:Vorher|Von Hand|Jede Änderung kostet;Niemand findet etwas|--|Nachher|Mit Lotse|Selbst gepflegt;Auffindbar}}

Vergleichstabelle

{{COMPTABLE:name}}
[Label: …]
[Titel: …]
[Spalten: Kopf der 1. Spalte|Spalte A!|Spalte B]
[Zeile: Kriterium|Wert:Bewertung|Wert:Bewertung]
{{/COMPTABLE}}

Eine Tabelle, die mehrere Angebote Zeile für Zeile vergleicht.

In der Maske:

Feld Pflicht Erklärung
Name (intern) ja Nur zur Unterscheidung, erscheint nicht auf der Seite. Buchstaben, Ziffern, - und _.
Label (optional) nein Kleine Zeile über dem Titel
Titel nein Überschrift der Tabelle
Kopf der 1. Spalte nein Kopfzelle über den Kriterien, ohne Angabe „Kriterium"
Spalten — Je Spalte ein Spaltenname und das Häkchen Hervorheben. Mit + Spalte ergänzen.
Zeilen — Je Zeile ein Kriterium und pro Spalte ein Wert mit Bewertung. Mit + Zeile ergänzen.

Die Bewertung wählst du je Zelle: ✓ (+, gut) · ◐ (~, teilweise) · ✗ (-, nicht vorhanden). Von Hand markiert ein ! hinter dem Spaltennamen die hervorgehobene Spalte.

Beispiel:

{{COMPTABLE:cms-vergleich}}
[Label: Vergleich]
[Titel: Lotse gegen die anderen]
[Spalten: Kriterium|Lotse!|Baukasten]
[Zeile: Barrierefreiheit|WCAG 2.2 AA:+|teilweise:~]
[Zeile: Eigene Domain|inklusive:+|Aufpreis:-]
{{/COMPTABLE}}

Erste Spalte beachten

Der erste Eintrag unter [Spalten: …] ist die Kopfzelle über den Kriterien, keine Vergleichsspalte. Jede [Zeile: …] beginnt deshalb mit dem Kriterium, danach folgt je Vergleichsspalte eine Zelle.

Modul-Platzhalter

Diese Platzhalter bringen Zusatzmodule mit. Sie erscheinen nur im Menü und funktionieren nur auf der Website, wenn das jeweilige Modul in deiner Installation vorhanden ist. Die Einzelheiten stehen im Kapitel des Moduls.

Platzhalter Felder Verfügbarkeit
{{NEWS:anzahl}} Anzahl (Pflicht, 1 bis 12, Vorgabe 3) Nur verfügbar, wenn das Modul Aktuelles installiert ist → Kapitel 8
{{BOOKS:anzahl}} · {{BOOKS:anzahl:spalten}} Anzahl (Pflicht) · Spalten Nur verfügbar, wenn das Modul Bücher installiert ist → Kapitel 9
{{BOOK:id}} Buch (Pflicht, ID aus der Buchverwaltung) Nur verfügbar, wenn das Modul Bücher installiert ist → Kapitel 9
{{SHORTSTORIES:anzahl}} · {{SHORTSTORIES:anzahl:spalten}} Anzahl (Pflicht) · Spalten Nur verfügbar, wenn das Modul Kurzgeschichten installiert ist → Kapitel 9
{{SHORTSTORY:id}} Kurzgeschichte (Pflicht, ID aus der Verwaltung) Nur verfügbar, wenn das Modul Kurzgeschichten installiert ist → Kapitel 9
{{CONTACTFORM}} keine — Aussehen und Felder stehen in den Moduleinstellungen Nur verfügbar, wenn das Modul Kontaktformular installiert ist → Kapitel 19
{{MAP:id}} Standort (Pflicht, ID aus der Standortverwaltung; der Standort muss aktiv sein und Koordinaten haben) Nur verfügbar, wenn das Modul Standorte installiert ist → Kapitel 11
{{VIDEO:id}} Video (Pflicht, ID aus der Medienverwaltung) Nur verfügbar, wenn das Modul Video installiert ist → Kapitel 25
{{REELS:id1,id2,id3}} Videos (Pflicht, Medien-IDs mit Komma, höchstens drei) Nur verfügbar, wenn das Modul Video installiert ist → Kapitel 25
{{VIDEO_GALLERY:gruppenname}} Mediengruppe (Pflicht) Nur verfügbar, wenn das Modul Video installiert ist → Kapitel 25

Seitenumbruch in Kurzgeschichten

{{PAGE_BREAK}} ist kein Platzhalter für Seiten, sondern eine Markierung im Text einer Kurzgeschichte. Damit teilst du eine lange Geschichte in mehrere Seiten auf. Er steht deshalb nicht im Platzhalter-Menü — mehr dazu in Kapitel 9.

Platzhalter einzelner Installationen

Im Menü siehst du eventuell auch Einträge wie Zeitleiste (Timeline) ({{TIMELINE:…}}) oder Standort-Galerie ({{GALLERY:…}}). Diese Platzhalter gehören weder zum Kern noch zu einem Modul, sondern werden für einzelne Websites eigens gebaut. Sie funktionieren nur dort, wo sie eingerichtet sind, und haben keinen Bearbeiten-Knopf. Frage im Zweifel deinen Administrator, ob sie auf deiner Website verfügbar sind.

Was du jetzt kannst

  • Du kennst alle Werkzeuge in der Quill-Werkzeugleiste.
  • Du weißt, wie du den HTML-Quellcode bearbeitest ({ }) und HTML-Code einfügst (</>).
  • Du fügst Platzhalter über {{ }} oder Strg + Leertaste und die Eingabemaske ein.
  • Du änderst vorhandene Platzhalter über Bearbeiten, Doppelklick oder Alt + Enter.
  • Du kennst die Schreibregeln (:, Spaltenzahl, |--|, |, , und ;) und kannst Platzhalter auch von Hand schreiben.
  • Du weißt, welche Platzhalter zum Kern gehören und welche nur mit einem Modul funktionieren.