Pagebuilder: CMS-Seiten effizient gestalten

Das Modul Contentmanagement wurde mit einem neuen Pagebuilder-System ausgestattet, das die Erstellung und Gestaltung von CMS-Seiten deutlich vereinfacht. Statt eines einfachen HTML-Editors mit manuellen Blöcken bietet der neue Pagebuilder Drag-&-Drop-Elemente, Echtzeit-Vorschau und zentrale Designvorgaben für ein einheitliches Erscheinungsbild – ganz ohne Programmierkenntnisse. CMS-Seiten lassen sich zudem als Vorlagen speichern und wiederverwenden, wodurch die Seitenbearbeitung schneller, transparenter und benutzerfreundlicher wird.

Was ist neu?

Früher wurden CMS-Seiten über einen einfachen HTML-Editor (Froala Editor) erstellt. Inhalte mussten manuell in Blöcke eingefügt werden, und Shortcodes waren zwar verfügbar, jedoch ohne Live-Vorschau. Einheitliches Styling war nur mit HTML- oder CSS-Kenntnissen umsetzbar. Mit dem neuen PageBuilder steht nun ein modernes System zur Verfügung, das die Erstellung und Bearbeitung von CMS-Seiten deutlich vereinfacht. Vorgefertigte, konfigurierbare Elemente können per Drag-and-drop eingefügt werden, Änderungen werden in Echtzeit angezeigt, und Programmierkenntnisse sind nicht erforderlich.

Zentrale Designvorgaben sorgen dafür, dass Seiten optisch einheitlich bleiben. Ebenso können CMS-Seiten als Vorlagen gespeichert und für neue Seiten wiederverwendet werden, wodurch die Erstellung standardisierter Inhalte effizienter wird.

Hauptfunktionen:

• Visueller Seiteneditor: Inhalte direkt im Editor bearbeiten.
• Zweispaltige Ansicht: Seitenstruktur links, Live-Vorschau rechts.
• Echtzeit-Vorschau: Änderungen werden sofort angezeigt.
• Element-Duplikation: Vorhandene Elemente können kopiert werden.
• Responsive Layout: Elemente passen sich automatisch an unterschiedliche Bildschirmgrößen an.

Die wichtigsten Pagebuilder-Bausteine im Überblick

Der qualido-Pagebuilder bietet eine umfassende Palette an Gestaltungselementen, die es ermöglichen, ansprechende und funktionale Webseiten ohne Programmierkenntnisse zu erstellen. Das System gliedert sich in drei Hauptbereiche:

• Layout-Container: Diese bilden das Gerüst der HTML-Seite und strukturieren den grundlegenden Aufbau. Sie ermöglichen die Erstellung responsiver Layouts durch Sektionen, Spalten und Grid-Systeme, die sich automatisch an verschiedene Bildschirmgrößen anpassen.
• Allgemeine Gestaltungselemente: Diese Komponenten dienen der visuellen Seitengestaltung und umfassen klassische Elemente wie Texte, Überschriften, Bilder, Videos, Buttons, Trennlinien und Abstandshalter. Sie ermöglichen die inhaltliche Befüllung und optische Aufwertung der Webseite.
• Funktions-Elemente: Diese sind spezialisierte Komponenten, die für spezifische Anwendungsfälle eingesetzt werden können. Dazu gehören unter anderem offene Aufgaben, Schwarzes Brett, Volltextsuche, Wetter- und Unwetterwarnungen, Meldungsübersichten, Personendarstellungen oder Visitenkarten, die Verwaltung von Fortbildungsbudgets, die Einbindung externer Seiten über iFrames und weitere spezialisierte Komponenten.

Tipp: Durch die intuitive Drag-and-drop-Bedienung und Live-Vorschau können alle Elemente flexibel kombiniert und individuell angepasst werden, wodurch sich professionelle Webauftritte effizient realisieren lassen.

Verfügbare Elemente

Die Basis jeder professionellen Webseite bildet eine durchdachte visuelle Hierarchie:

• Mit der Überschrift/Banner-Elemente lassen sich großflächige Seitentitel mit optionalem Untertitel gestalten, die durch Gradient-Hintergründe in zwei Farben oder durch Hintergrundbilder visuell aufgewertet werden können. Die variable Höhe und Ausrichtung macht diese Elemente ideal für wirkungsvolle Seiten-Header, die Besuchern sofort vermitteln, worum es auf der jeweiligen Seite geht.
• Für die Präsentation von Textinhalten steht die Text-Box zur Verfügung, die mit einem Froala-WYSIWYG-Editor ausgestattet ist. Dieser ermöglicht nicht nur die komfortable Textformatierung, sondern auch die Integration von Shortcodes und Buttons. Mit optionaler Hintergrundfarbe und variabler Breite lässt sich jeder Textbereich genau an die gewünschte Gestaltung anpassen.
• Wenn Inhalte übersichtlich strukturiert und Platz gespart werden soll, bietet sich die Akkordeon-Box an. Diese auf- und zuklappbaren Inhaltsbereiche nutzen ebenfalls den Froala-Editor und unterstützen Shortcodes sowie Button-Integration. Die Header-Farbe kann individuell angepasst werden, und es lässt sich festlegen, ob die Bereiche standardmäßig ausgeklappt oder eingeklappt dargestellt werden sollen.
• Die Artikel-Box präsentiert Inhalte in einem attraktiven Karten-Layout mit Bild, Titel und Untertitel. Besonders praktisch ist der konfigurierbare Button mit individueller Aktion, dessen Farben ebenso wie die Akzentfarben der Box anpassbar sind. Mit variabler Höhe und Breite eignet sich dieses Element perfekt für Teaser und Verlinkungen zu weiterführenden Inhalten.
• Eine besonders vielseitige Gestaltungsoption bietet die Icon-Box, die Text mit aussagekräftigen Icons kombiniert. Zur Auswahl stehen über 2000 FontAwesome-Icons sowie die Möglichkeit, eigene Icons hochzuladen. Die Box-Farben sind individuell anpassbar, und Titel oder Untertitel können optional als Tooltip erscheinen. Eine umfangreiche Aktionskonfiguration ermöglicht es, die Icon-Boxen mit verschiedenen Funktionen zu verknüpfen.
• Für Handlungsaufforderungen stehen Buttons zur Verfügung, die einzeln oder als Button-Gruppen eingesetzt werden können. Optional lassen sich Icons integrieren, und aus verschiedenen Button-Farben und -Stilen kann gewählt werden. Die umfangreiche Aktionskonfiguration sorgt dafür, dass Buttons genau das auslösen, was gewünscht ist von einfachen Links bis zu komplexen Funktionsaufrufen.
• Das Element Bild/Abbildung ermöglicht die Darstellung von Einzelbildern mit Bildunterschrift, wobei Bilder hochgeladen oder aus der Mediathek ausgewählt werden können. Optionale Rahmen, Box-Styling und Schatten-Effekte in verschiedenen Größen sorgen für professionelle Präsentation. Runde Ecken sind konfigurierbar, und bei Bedarf kann eine Klick-Aktion hinterlegt werden.
• Zur optischen Gliederung von Inhalten dient der Abschnitts-Trenner, auch Spacer genannt. Er setzt horizontale Trennlinien zwischen Abschnitten und bietet verschiedene Linien-Stile zur Auswahl, darunter durchgezogene, gepunktete, gestrichelte Linien oder Gradient-Verläufe.
• Für Anwender mit HTML-Kenntnissen oder besonderen Anforderungen steht der HTML-Block bereit, der freien HTML-Inhalt mit dem Froala-Editor ermöglicht und dem bisherigen CMS-Editor entspricht.

Hinweis: Eine besondere Flexibilität bietet der Layout-Container, der verschachtelte Container mit eigenem Editor für mehrspaltige Layouts ermöglicht. So lassen sich beispielsweise zwei Inhaltsspalten mit 66 % und 33 % Breite nebeneinander anordnen. Optional können Titel, Hintergrundfarbe und Box-Styling hinzugefügt werden.

Funktions-Elemente (vorgefertigte Integrationen)

Diese spezialisierten Komponenten erweitern die Webseite um konkrete Anwendungsfunktionen:

• Offene Aufgaben: Zeigt eine Liste der persönlichen Aufgaben des Benutzers in anpassbarer Darstellung an. 
• Schwarzes Brett: Ermöglicht die Anzeige von Pinboard-Einträgen mit Filtermöglichkeiten nach Kategorien und Datum in anpassbarer Darstellung. Volltextsuche: Bietet ein Suchfeld mit Vorschlägen und anpassbarem Platzhaltertext für die Inhaltssuche. 
• Wetter/Unwetterwarnung: Zeigt Wetter- oder Unwetterwarnungen für einen konfigurierten Standort an.
• Meldungsübersicht: Stellt Ereignis- und Fehlermeldungen mit Filterfunktionen nach Kategorien und in verschiedenen Ansichten (Blog-Stil oder Liste) dar.
• Person/Visitenkarte: Präsentiert eine einzelne Personenkarte mit oder ohne Foto und konfigurierbaren Feldern wie Name, E-Mail, Telefon und Position. 
• Fortbildungsbudget: Visualisiert das Schulungsbudget grafisch mit anpassbarer Überschrift und Farben. Externe Seite/iFrame: Ermöglicht die Einbindung externer Inhalte mit konfigurierbarer Höhe.
• Terminliste/Terminkalender: Bietet eine Übersicht kommender Termine mit Filtermöglichkeiten nach Kategorien und verschiedenen Ansichten (Liste, Kacheln oder Kalender). 
• Personengruppe: Zeigt mehrere Personen aus einer Gruppe als Liste oder Visitenkarten mit Filtermöglichkeiten an. 
• Datum/Uhrzeit: Stellt die aktuelle Zeit als analoge oder digitale Uhr optional mit Datum dar. 
• Zeiterfassung: Ermöglicht direkten Zugriff auf Zeiterfassungsfunktionen mit Element-Aktionen.

Element-Aktionen im qualido-Pagebuilder

Element-Aktionen bilden die technische Schnittstelle zwischen der Seitengestaltung und den verschiedenen qualido-Funktionsbereichen (Modulen). Sie ermöglichen es, komplexe Workflows abzubilden und Inhalte gezielt miteinander zu verknüpfen, ohne dass Nutzer zwischen unterschiedlichen Bereichen wechseln müssen. Dank dieser Flexibilität können Elemente wie Buttons, Textboxen, Akkordeons oder Icon-Boxen nicht nur optisch überzeugen, sondern auch funktional als direkte Zugangspunkte zu wichtigen Ressourcen dienen. Von Dokumenten und CMS-Seiten über Formulare bis hin zu E-Learning und qualido-Funktionen: Die Aktionen sind flexibel einsetzbar und auf Ihre Einrichtung abgestimmt.

Element-Aktionen stehen in Elementen wie Text-Boxen, Akkordeon-Boxen, Artikel-Boxen, Icon-Boxen, Buttons oder Bilder zur Verfügung. Um eine Verknüpfung zu erstellen, klicken Sie neben dem Aktionsfeld auf die Schaltfläche Konfigurieren.Folgende Aktionstypen können ausgewählt werden:

Verfügbare Aktionstypen

• Dokumentenliste: Erstellt eine Verknüpfung zu im qualido-Dokumentenmanagement verwalteten Dokumenten. 
• CMS-Seite/Flowchart: Ermöglicht die Navigation zu einer bestehenden CMS-Seite oder einem Flowchart innerhalb der qualido-Umgebung. Ideal für die Verknüpfung verwandter Inhalte oder prozessorientierter Darstellungen.
• Formulare/Vorgangsarten: Öffnet direkt ein vorkonfiguriertes Formular aus dem Ereignismanagement. Der Nutzer kann sofort mit der Dateneingabe beginnen, ohne zusätzliche Navigationsschritte.
• Link: Greift auf zentral in der Linkverwaltung hinterlegte Links zu. Dies gewährleistet konsistente Verlinkungen und vereinfacht die Wartung häufig verwendeter URLs.
• Manueller Link: Bietet die Möglichkeit zur freien Eingabe einer URL. Besonders geeignet für externe Webseiten oder Ressourcen außerhalb des qualido managers.
• Service: Zeigt eine Liste verfügbarer Servicedokumente an. Nutzer können aus der Übersicht das benötigte Dokument auswählen und direkt darauf zugreifen.
• Servicedokument: Öffnet ein spezifisches Servicedokument ohne Umweg über eine Zwischennavigation. Optimiert für häufig benötigte Dokumente mit direktem Zugriffsbedarf.
• qualido-Funktion: Startet ausgewählte qualido-Funktionen direkt aus dem Seitenelement heraus. Ermöglicht die Integration von qualido manager Systemfunktionen in den Seitenkontext.
• E-Learning: Bietet direkten Zugriff auf E-Learning-Inhalte wie Schulungsvideos, Tutorials oder interaktive Lernmodule. Unterstützt die nahtlose Integration von Weiterbildungsangeboten in den Arbeitsablauf.

Tipp: Durch diese vielseitigen Aktionsmöglichkeiten lassen sich Seiten noch gezielter gestalten, Workflows effizienter abbilden und Inhalte für Nutzer schneller zugänglich machen. Gleichzeitig unterstützt die flexible Konfiguration eine konsistente Gestaltung von Buttons, Text-Boxen und anderen Elementen, wodurch die Nutzerführung deutlich verbessert wird.