Directus ist als Headless-CMS eine starke Basis: schnelle API, sauberes Datenmodell, ein modernes Admin-Studio und genug Flexibilität, um nahezu jede Inhaltsstruktur abzubilden. Genau deshalb arbeiten wir damit. Wo Directus aber an Grenzen stößt, ist der Pagebuilder aus den offiziellen Templates – und an dieser Stelle mussten wir für ein ambitioniertes Kundenprojekt ansetzen.
Der Standard-Pagebuilder ist für Einzelseiten gedacht
Der mitgelieferte Pagebuilder aus den Directus-Templates erfüllt seinen Zweck: Man baut eine Seite aus ein paar Blöcken zusammen, ordnet sie an, fertig. Für eine überschaubare Website mit einer Sprache und einer Domain ist das völlig ausreichend.
Für anspruchsvollere Vorhaben reicht das nicht. Sobald eine einzige Installation mehrere Portale, mehrere Sprachen pro Portal und wechselnde, kontextabhängige Inhalte bedienen soll, fehlen dem Standard-Ansatz die entscheidenden Konzepte:
- Keine Mehrsprachigkeit auf Blockebene. Der Standard kennt eine Sprache pro Seite. Wir brauchen Übersetzungen bis auf die Ebene einzelner Inhaltsbausteine – in mehreren Sprachen je Portal.
- Kein Mandanten-Konzept (Multi-Tenant). Redakteur:innen sollen nur ihre eigenen Portale und Seiten sehen, nicht den gesamten Datenbestand.
- Keine differenzierte Routen-Logik. Wir unterscheiden zwischen statischen Seiten, Listenseiten und automatisch generierten Detailseiten für inhaltliche Entitäten.
- Keine kontextabhängige Sichtbarkeit. Inhalte, die nur in bestimmten Zeiträumen oder Situationen erscheinen sollen, sieht der Standard nicht vor.
Kurz: Der Template-Pagebuilder ist ein gutes Werkzeug für die einzelne Seite. Für eine zentral verwaltete Multi-Plattform-Lösung mussten wir tiefer ansetzen.
Eine eigene Datenstruktur als Fundament
Den Kern bildet ein portalbasiertes, mandantenfähiges Datenmodell mit durchgängiger Übersetzungsunterstützung. Jedes Portal bringt eigene Domain, Sprachen, Gestaltung und Einstellungen mit. Seiten hängen am Portal, kennen Hierarchien und Routen-Typen; Inhaltsblöcke werden flexibel an Seiten gehängt – inklusive Reihenfolge, Sichtbarkeit, Layout und kontextabhängiger Steuerung.
Inhaltliche Entitäten sind über Beziehungen mit Portalen verknüpft und vollständig übersetzbar. Das klingt aufwändig – und das ist es auch. Aber genau diese Struktur ermöglicht es, eine Vielzahl an Websites in mehreren Sprachen aus einer einzigen Instanz zu pflegen.
Der Pagebuilder: klassische Features …
Auf diesem Fundament steht ein eigenes Pagebuilder-Studio, das Redakteur:innen erlaubt, vollständige mehrsprachige Seiten ohne technische Kenntnisse zu bauen. Einige Funktionen:
- Eine breite Palette an Inhaltsblöcken – von Hero, Richtext und Call-to-Action über Galerien und Slider bis zu dynamischen Listen- und Detailblöcken.
- Bearbeitung direkt in der Live-Vorschau: Blöcke in der eingebetteten Preview anklicken, auswählen und an exakter Position einfügen. Änderungen speichern automatisch und die Vorschau aktualisiert sich live – ohne harten Reload.
- Seiten zwischen Portalen kopieren inklusive korrektem Remapping aller Referenzen.
- Suchbare Auswahlfelder, weil sich bei einer großen Zahl an Portalen und Inhalten nichts mehr sinnvoll scrollen lässt.
- Seitenübergreifende Layout-Defaults: globale Standardwerte für Breite und Abstände je Block-Typ, mit klarer Hierarchie.
- Unabhängige Breiten-Steuerung für Inhalt und Hintergrund – etwa vollflächiger Hintergrund mit eingerücktem Content.
- Gestaltungssystem mit Portal-Farbwähler und Mustern, die serverseitig eingefärbt werden.
- Sprachverwaltung je Portal: Sprachen hinzufügen oder entfernen, Basissprache geschützt.
- Redirect-Verwaltung und integriertes Tracking für Seitenaufrufe und Weiterleitungen, inklusive einer Übersichts-Ansicht.
… und KI-Features, die echte Arbeit abnehmen
Die beiden zeitintensivsten Aufgaben im redaktionellen Alltag – SEO und Übersetzungen – haben wir mit KI automatisiert:
- SEO-Texte generieren: Auf Knopfdruck erzeugt das System pro Sprache passende Meta-Angaben, Empfehlungstexte und mehr – inhaltlich aus der jeweiligen Seite abgeleitet und direkt einsatzbereit.
- Inhalte übersetzen: Wahlweise nur fehlende Übersetzungen ergänzen oder alle aktualisieren – in einem Durchgang über alle Portalsprachen. Formatierung bleibt erhalten, übersetzt wird nur der Text.
Damit erledigt eine Redakteurin Aufgaben in Minuten, für die sonst Stunden und mehrere Sprachdienstleister nötig wären.
Das Frontend: atomar aufgebaut auf SvelteKit
Das zugehörige Frontend ist vollständig Directus-getrieben und konsequent nach Atomic Design aufgebaut – auf Basis von SvelteKit und modernem Svelte.
Die Komponenten gliedern sich sauber in Atoms (primitive UI-Bausteine ohne Business-Logik), Molecules (Kombinationen mit lokalem State) und Organisms (die Block-Renderer, die Directus-Daten konsumieren). Inhaltsblöcke werden anhand ihres Typs dynamisch auf die passende Komponente aufgelöst; ein gemeinsamer Wrapper übernimmt das Layout. Das hält den Code wartbar und vermeidet Duplizierung.
Weitere Highlights:
- URL-basierte Mehrsprachigkeit kombiniert mit den Directus-Übersetzungen.
- Multi-Tenant per Domain: Theming und Inhalte kommen portalabhängig aus Directus.
- Serverseitiges Rendering für schnelle Auslieferung und gute Suchmaschinen-Indexierung.
- Solide Testabdeckung und strikte Typprüfung.
- Performance-bewusst gebaut – von feingranularer Reaktivität bis zu Maßnahmen gegen Layout-Shift.
Du stehst vor ähnlichen Herausforderungen? Nimm Kontakt mit uns auf.
