Auf der Dialogzentrale lassen sich Seiten vielfältig und flexibel mit Text und Medien sowie Inhalten aus Redaktion und Dialogen gestalten. Das Redaktionssystem im Backend bietet die Möglichkeit, diese Inhalte anzulegen, zu verwalten und auf Seiten anzuordnen. Über den Layout-Builder stehen Ihnen als Anwender:innen dafür viele Gestaltungsmöglichkeiten zur Verfügung.
¶ Der Layout-Builder
Der überwiegende Anteil an redaktionellen Arbeitsabläufen findet im sogenannten Layout-Builder, einer Art Baukastensystem, statt. Hier können Sie mit einer einfach zu bedienenden Drag-and-Drop-Oberfläche zügig visuelle Layouts für die Anzeige von Inhalten erstellen. Sie können anpassen, wie Inhalte auf einer einzelnen Seite, in einem Dialog oder Themenraum angeordnet werden.
Im Layout-Builder der Dialogzentrale dienen Abschnitte dazu, den Inhalt einer Webseite in logische Bereiche zu unterteilen. Diese Abschnitte können horizontal oder vertikal angeordnet werden und ermöglichen es, den Inhalt flexibel zu gestalten. Blöcke hingegen sind kleine Einheiten innerhalb dieser Abschnitte, die verschiedene Arten von Inhalten darstellen können, wie Text, Bilder, Videos oder benutzerdefinierte Module. Blöcke können in Abschnitten platziert und angeordnet werden, um das Design und die Funktionalität der Dialogzentrale anzupassen, ohne dass dafür umfangreiche Kenntnisse in der Webentwicklung erforderlich sind.
¶ Die Seitenstruktur
Um einfache Seiten, Dialoge und Themenräume flexibel zu gestalten, bestehen diese aus Abschnitten und Blöcken. Diese Abschnitte und Blöcke werden über das Layout bearbeitet.
Die Aktion Layout findet man in der Inhalts- oder Dialogübersicht im Bereich Aktionen oder im Zahnrad-Menü, das auf der linken Seite erscheint, wenn man in der Rolle Redaktion oder Administration einen Inhalt betrachtet.
Eine Seite wird aus mehreren Abschnitten aufgebaut. In den einzelnen Abschnitten werden Blöcke hinzugefügt. Einen beispielhaften Aufbau zeigt die Skizze rechts.
Blöcke haben unterschiedliche Funktionen und stellen bestimmte Inhalte dar. So enthält z.B. ein Text-Block einen Text, der Hero-Block stellt das Titelbild der Seite dar und ein FAQ-Block eine Liste mit FAQ-Elementen. Eine Übersicht der verschiedenen Blocktypen finden Sie im Artikel Blöcke im Layout-Builder.
Für Seiten können auch sogenannte Layout-Vorlagen erstellt werden.
¶ Layout bearbeiten
Die Inhaltstypen Einfache Seite, News, Veranstaltungen sowie Dialoge und Themenräume können Sie mit dem Layout-Builder bearbeiten. Vorhaben, Newsletter-Ausgaben sowie die Mediathek können Sie nicht mit dem Layout-Builder bearbeiten. Für die Verwendung des Layout-Builders sollten Sie mindestens mit den Rechten der Rolle Redaktion eingeloggt sein.
¶ Neuen Inhalt anlegen
Falls Sie vor dem Bearbeiten zunächst einen neuen Inhalt erstellen möchten, navigieren Sie über das Backend-Menü Inhalt -> Inhalt hinzufügen und wählen den gewünschten Inhaltstyp aus. Hier müssen Sie anschließend zunächst die obligatorischen Meta-Daten (Titel, ggf. Kurzbeschreibung, URL-Alias etc.) definieren, anschließend können Sie den Layout-Builder verwenden.
Falls Sie den Layout-Builder für ein neues Dialogformat oder einen neuen Themenraum verwenden möchten, folgen Sie bitte zunächst den entsprechenden Artikeln hier auf der Doku zum Erstellen dieser Inhalte.
¶ Inhalt bearbeiten
Um den Layout-Builder der Dialogzentrale zu verwenden, sollten Sie zunächst zum gewünschten Inhalt navigieren.
-
Dafür können Sie im Frontend per Klick zum Inhalt navigieren und anschließend durch das Zahnrad-Menü am linken Seitenrand per Klick auf
Layoutin den Layout-Builder wechseln. -
Ist der Inhalt unveröffentlicht oder noch nicht verlinkt, ist der Weg im Frontend ggf. nicht möglich und Sie navigieren über das Backend-Menü. Einfache Seiten, News und Veranstaltungen finden Sie im Backend unter
Inhalt, Dialoge unterInhalt -> Dialogeund Themenräume unterDialogzentrale -> Themenräume. Anschließend klicken Sie aufBearbeitenund dann im Inhalt auf den ReiterLayout.
Sobald Sie sich im Layout-Builder des gewünschten Inhalts befinden, können Sie Abschnitte und Blöcke hinzufügen, bestehende Abschnitte bearbeiten, Reihenfolgen ändern und das Layout Ihrer Seite nach Ihren Vorstellungen anpassen.
Alle Änderungen, die Sie an Abschnitten und Blöcken im Layout-Builder vornehmen, können Sie in der Ansicht sofort sehen. So können Sie verschiedene Optionen ausprobieren. Um die gewünschten Änderungen Ihres Layouts final zu speichern und damit auch öffentlich anzuzeigen, klicken Sie am Seitenanfang auf Layout speichern.
Ungespeicherte Layouts fallen Ihnen als Redakteur:in ggf. nicht direkt auf, da Sie mit dieser privilegierten Rolle einen anderen Blick auf die Plattform haben als Seitenbesucher:innen. Der Layout-Builder merkt sich auch nicht gespeicherte Änderungen, zeigt sie jedoch nur Benutzer:innen mit der Berechtigung zum Bearbeiten des Layouts an. Beachten Sie im Layout-Builder deshalb unbedingt den Hinweis am Anfang der Seite, der Sie auf ungespeichterte Änderungen des Layouts hinweist.
¶ Abschnitt erstellen
-
Wählen Sie die Option
Layoutim Zahnrad-Menü auf der linken Seite oder in der Inhaltsübersicht. -
Klicken Sie auf den Link
Abschnitt hinzufügen.Am rechten Bildrand öffnet sich nun eine Konfigurationsansicht für den Abschnitt. -
Wählen Sie die Spaltenanzahl aus. Oft sind ein oder zwei Spalten ausreichend, um die Seite nicht unübersichtlich zu gestalten. Falls Sie mehr als eine Spalte auswählen, können Sie die relative Breite der Spalten im nächsten Schritt auswählen. Details lesen Sie im Abschnitt Gestaltung mit Designvorlagen
-
Bestätigen Sie mit
Abschnitt hinzufügen. Sie können den Abschnitt nun mit Blöcken befüllen.
Die neu hinzugefügten Abschnitte sind direkt im Redaktionssystem zu sehen. Um diese final zu speichern und auch öffentlich anzuzeigen, klicken Sie am Seitenanfang auf
Layout speichern. Die Layout-Verwaltung weist darauf hin, wenn ungespeicherte Änderungen bestehen.
¶ Block erstellen
- Um einen Block anzulegen, klicken Sie in einem bestehenden Abschnitt auf
Block hinzufügen. - Wählen Sie einen passenden Blocktyp aus der Liste aus. Eine Beschreibung aller Blocktypen finden Sie hier: Blöcke im Layout-Builder.
- Wählen Sie einen Titel und fügen Sie nach Bedarf Text und Medien hinzu. Eine detaillierte Beschreibung der Einstellungsmöglichkeiten verschiedener Blocktypen finden Sie ebenfalls unter Blöcke im Layout-Builder.
- Bestätigen Sie mit
Block hinzufügen. Der Block ist nun in Ihrem Layout zu sehen und kann bei Bedarf weiter bearbeitet werden.
Denken Sie daran, alle Änderungen mit Layout speichern zu speichern.
¶ Gestaltung mit Designvorlagen
Designvorlagen helfen Ihnen dabei, die Seite ansprechend und kohärent zu gestalten. Je nach Abschnitts- und Blocktyp stehen Ihnen dabei verschiedene Vorlagen zur Verfügung. Eine Übersicht bekommen Sie in der Konfigurationsansicht des Blocks über das Drop-Down-Menü Designvorlagen.
¶ Vorlagen für Abschnitte
Nachdem Sie die Spaltenanzahl für einen neuen Abschnitt ausgewählt haben, können Sie eine Designvorlage auswählen. Diese unterscheiden sich hauptsächlich in der Breite. So sollte für einen Hero zum Beispiel eher eine volle Seitenbreite gewählt werden, während für einen Textbereich meist eine mittlere Breite ausreichend ist. Die Vorlagen wirken sich aber auch z.B. auf Innenabstände aus.
Beispiel 1: Bei der Auswahl eine Spalte (one column), kann zwischen den Designvorlagen "schmale" "mittlere" und "volle" Breite (mit oder ohne Rand) ausgewählt werden. Eine mittlere Breite eignet sich dabei gut für einen Text oder textlastige Elemente wie FAQ's. Eine volle Breite lässt ein Hero-Widget präsent erscheinen oder kann einen Kartendialog mit allen Details groß abbilden.
Beispiel 2: Wählt man zwei Spalten (two columns) aus, so kann im oberen Bereich die
Spaltenbreiteeingestellt werden. Diese bestimmt, wieviel Prozent der Gesamtbreite die Spalten jeweils einnehmen. Die Designvorlagen unterscheiden sich neben der Breite im Abstand der Spalten zueinander (mit oder ohne) und der Optionsticky. Bei Designvorlagen mit der Optionstickybleibt bei unterschiedlich langen Spalten die kürzere Spalte beim Scrollen durch die Seite im Blickfeld der Nutzer:innen "hängen". Diese Option bietet sich zum Beispiel an, wenn eine lange Liste von Beiträgen neben einem recht kurzen Dialogformular platziert werden soll. Das Dialogformular bleibt so für die Nutzer:innen sichtbar, während sie durch die Liste der Beiträge scrollen.
¶ Vorlagen für Blöcke
Nach Auswahl eines Blocktyps können Sie ebenfalls für den Block passende Designvorlagen auswählen. Die angebotenen Vorlagen unterscheiden sich je nach Blocktyp. Meist ist keine Designvorlage notwendig. Viel Gestaltungsspielraum bietet außerdem der Texteditor, in dem Medieninhalte, Schriftformate oder –anordnung konfiguriert werden können.
¶ Bestehendes Layout konfigurieren
Eine bestehende Seite kann jederzeit über die Layout-Ansicht verändert und angepasst werden. Dort können Sie Abschnitte und Blöcke konfigurieren. Auf die gleiche Weise lassen sich diese entfernen oder neu hinzufügen.
Beachten Sie, dass das Löschen eines Blocks nicht rückgängig gemacht werden kann, außer durch das Verwerfen aller Änderungen seit dem letzten Speichern.
¶ Abschnitte/Blöcke verschieben
Abschnitte und Blöcke lassen sich per Drag and Drop auf der Seite neu anordnen. Hier gibt es zwei Möglichkeiten:
a) Blöcke werden direkt mit dem Mauszeiger angewählt und an eine andere Stelle gezogen. Zur besseren Übersichtlichkeit können Sie am Anfang der Seite im Layout-Builder das Häkchen bei Inhaltsvorschau anzeigen rausnehmen.
b) Am Seitenanfang im Layout-Builder Abschnitte verschieben auswählen. Am rechten Bildrand öffnet sich ein Konfigurationsmenü, in dem Sie Abschnitte und Blöcke neu anordnen können. Mit Reorder abschließen.
Haben Sie beim Erstellen der Abschnitte die optionale
Administrative Beschriftunggesetzt, haben Sie in dieser Ansicht eine deutlich bessere Übersicht. Falls nicht, empfiehlt sich ggf. Option a.
In beiden Fällen bitte nicht vergessen, das Layout mit den gewünschten Änderungen am Seitenanfang final zu speichern.
¶ Layout-Vorlagen
Eine praktische Funktion, um Zeit beim Erstellen ähnlicher Seiten einzusparen, bieten die Layout-Vorlagen. Diese können für alle Seiten-, Block- und Dialogtypen erstellt werden und beim Erstellen einer neuen Seite oder eines Blocks diesen Typs bereits eine Grundstruktur für das Layout vorgeben.
Beachten Sie, dass neue Layout-Vorlagen von uns committed werden müssen. Sie müssen also eine kurze Mail an kundensupport@zebralog.de schreiben, damit Ihre Vorlage nicht innerhalb von ein paar Tagen oder Wochen beim nächsten Redeploy überschrieben wird.
¶ Layout-Vorlage erstellen
Über das Menü im Backend gelangen Sie unter dem Punkt Struktur zur Layout-Bibliothek. Hier können Sie (falls vorhanden) bereits existierende Layout-Vorlagen Ihrer Seite bearbeiten. Außerdem können Sie durch Layout hinzufügen eine neue Vorlage erstellen.
Nun können Sie der Layout-Vorlage einen aussagekräftigen Namen geben (z.B. Projektinfo-Seite) und auswählen, um welche Art von Seite es sich handeln soll. Besonders empfehlen sich Layout-Vorlagen für:
- Einfache Seite (z.B. für ähnlich aufgebaute Informationsseiten zu Unterprojekten)
- alle Dialogformate (z.B. für parallel laufende Dialoge, die inhaltlich zusammenhängen)
- Themenraum (z.B. um ein ähnliches Design für alle Themenräume zu etablieren)
- Veranstaltung und News (z.B. wenn das Standard-Layout dieser Seiten dauerhaft angepasst werden soll)
Außer die "Einfache Seite" haben alle Elemente ein Standard-Layout hinterlegt. Prüfen Sie also erstmal, ob das Standard-Layout Ihnen zusagt, bevor Sie extra Layout-Vorlagen für verschiedene Elemente (z.B. News und Veranstaltung) erstellen.
Anschließend an die Auswahl der Vorlage bestätigen Sie Ihre Eingabe und landen im Layout-Builder auf einer leeren Seite. Hier können Sie nun nach Belieben alle Abschnitte und Blöcke so gestalten, wie Sie das Layout für zukünftige Seiten vorsehen. Auch Inhalte können Sie hier schon ergänzen, wenn diese für alle geplanten Seiten gleich (oder sehr ähnlich) sein sollen. Die Bearbeitung wird wie gewohnt oben auf der Seite durch Layout speichern beendet.
Wenn Sie all Ihre gewünschten Layout-Vorlagen erstellt haben, schreiben Sie bitte eine kurze Mail an kundensupport@zebralog.de, damit wir Ihre neue Vorlage committen können und Sie diese nicht wieder unerwartet verlieren.
¶ Layout-Vorlage nutzen
Um die von Ihnen erstellte Layout-Vorlage zu nutzen, erstellen Sie einfach eine neue Seite (oder auch Dialog, News etc.) und wählen Sie unter Layout-Vorlage die gewünschte Vorlage aus. Wenn Sie den Inhalt speichern, wird er entsprechend der gewählten Layout-Vorlage angezeigt.
Nun müssen Sie nur noch die Inhalte austauschen oder ergänzen, die Sie für den spezifischen Kontext der Seite gerade benötigen. Dies können Sie wie gewohnt über Layout machen. Hier können Sie alles an der Seite anpassen. Die Vorlage schränkt Sie hier nicht ein - sie soll lediglich dabei helfen, bereits ein Grundgerüst für die Seitengestaltung aufzubauen.