CMS-Seiten mit Layout-Containern aufbauen

Ob Klinikstartseite, Abteilungsseite oder Projekt-Dashboard – das zweispaltige Layout eignet sich für vielfältige Anwendungsszenarien. In diesem Kapitel wird das Prinzip des zweispaltigen Seitenaufbaus mithilfe von Layout-Containern erläutert. Es zeigt, wie Startseiten im Intranet strukturiert, mit Inhalten gefüllt optimal gestaltet werden können. Ziel ist ein klarer, gut wartbarer und für die Nutzenden intuitiv erfassbarer Seitenaufbau.

Grundidee des zweispaltigen Layouts: Das empfohlene Layout nutzt eine linke Spalte mit 66 % Breite und eine rechte Spalte mit 33 % Breite. Dieses Verhältnis unterstützt das natürliche Blickverhalten der Nutzer, da Hauptinhalte links direkt im Fokus stehen, während ergänzende Informationen in der schmaleren rechten Spalte leicht zu erfassen sind. Die Aufteilung sorgt zudem für einen logischen Informationsaufbau und verhindert übermäßig lange Zeilen auf großen Monitoren.

Nutzen für Intranet-Startseiten: Das Layout trennt organisatorische Inhalte von persönlichen Informationen und bildet somit eine klare inhaltliche Struktur. Unternehmensrelevante Informationen stehen in der breiten Spalte, während persönliche Daten wie Aufgaben und Termine in der schmalen Spalte angezeigt werden. Da diese Struktur aus vielen Portalen bekannt ist, entsteht eine hohe Nutzerakzeptanz ohne Einarbeitungsaufwand. 

CMS-Seite anlegen und Container einfügen

Legen Sie zunächst eine neue CMS-Seite an oder kopieren Sie eine vorhandene Seite, die für den Relaunch genutzt werden soll.

• Seite bearbeiten: Öffnen Sie die CMS-Seite über die Schaltfläche Inhalt bearbeiten. 
• Layout-Container einfügen: Klicken Sie auf Layout-Container einfügen und fügen Sie zwei Layout-Container mit einer Aufteilung von 66 % zu 33 % ein.

So entstehen zwei nebeneinanderliegende Bereiche, die den strukturellen Rahmen für alle folgenden Inhalte bilden.

Schaltflächen in der Werkzeugleiste

Der qualido Pagebuilder stellt Ihnen eine Reihe intuitiver Schaltflächen zur Verfügung, mit denen Sie Ihre Intranet-Seiten strukturieren und bearbeiten können.

Element einfügen: Fügt einzelne Inhaltselemente wie Text-Boxen, Bilder, Meldungsübersichten oder andere Funktionselemente ein. Nach dem Klick öffnet sich eine Auswahl aller verfügbaren Elementtypen. 

Beispiel: Eine CMS-Seite, die ausschließlich aus Elementen besteht, kann im Grunde als ein Vollbreite-Container betrachtet werden, der mit den gewünschten Elementen befüllt wird.

Layout-Container einfügen: Erstellt die grundlegende Spaltenstruktur Ihrer Seite. Nach dem Klick wählen Sie die gewünschte Spaltenaufteilung, beispielsweise 66 Prozent und 33 Prozent. Der neue Container steht dann bereit, um mit Elementen gefüllt zu werden.

Bearbeiten: Öffnet die Konfigurationsmaske des ausgewählten Elements oder Containers. Hier passen Sie Einstellungen wie Breite, Titel, Farben und weitere Eigenschaften an. Alternativ erreichen Sie diese Funktion durch Doppelklick auf das Element.

Duplizieren: Erstellt eine exakte Kopie des ausgewählten Elements oder Containers inklusive aller Einstellungen und Formatierungen. Spart Zeit bei wiederkehrenden Gestaltungselementen, da nur noch die Inhalte angepasst werden müssen.

Löschen: Entfernt das ausgewählte Element oder den gesamten Container dauerhaft von der Seite. Beim Löschen eines Layout-Containers werden auch alle darin enthaltenen Elemente entfernt. Eine Sicherheitsabfrage schützt vor versehentlichem Datenverlust.

Nach oben: Verschiebt das ausgewählte Element oder den Container (mit Elementen) eine Position nach oben innerhalb der Seitenhierarchie. Durch mehrmaliges Klicken bewegen Sie Inhalte schrittweise an die gewünschte Position.

Nach unten: Verschiebt das ausgewählte Element oder den Container eine Position nach unten. Diese Funktion ermöglicht die präzise Steuerung der Inhaltsreihenfolge auf Ihrer Seite.

Hinweis: Bei der Entwicklung des qualido Pagebuilders wurde bewusst auf diese schaltflächenbasierte Lösung gesetzt. Während viele Systeme auf Drag-and-drop setzen, haben sich die Verschieben-Schaltflächen als robustere Lösung erwiesen. Sie bieten eine konsistente Bedienung, die auch bei umfangreichen Seiten stabil bleibt und funktionieren zuverlässig in komplexen Seitenstrukturen mit verschachtelten Containern.

Arbeitsweise mit Layout-Containern

Layout-Container bilden die horizontalen Spalten: Sie legen die Spaltenbreiten fest und enthalten alle Inhaltselemente. Elemente werden immer innerhalb solcher Container eingefügt, nutzen die volle Containerbreite und stapeln sich automatisch untereinander. Container sind für die Struktur zuständig, Elemente für den eigentlichen Inhalt.

Containereigenschaften bearbeiten

Per Doppelklick auf Seitenelement "Layout-Container" [1]  öffnet sich die Container-Konfiguration, in der Sie folgende Eigenschaften bearbeiten können:

• Container-Breite: Über ein Dropdown-Menü können Sie zwischen verschiedenen vordefinierten Breiten wählen. Die Optionen reichen von 100 Prozent (Vollbreite) über 66 Prozent (Zwei Drittel) bis hin zu 16,7 Prozent (Ein Sechstel). Die im Beispiel ausgewählte Option „66 % – Zwei Drittel“ entspricht der empfohlenen Breite für die linke Spalte in einem zweispaltigen Layout.
• Hintergrundfarbe (des Containers): Im Eingabefeld wird zunächst ein Hex-Farbcode inklusive Transparenz angezeigt, im Beispiel „#C3E0F2FF“. Durch Klicken auf das Feld öffnet sich ein Farbwähler mit detaillierten Einstellungsmöglichkeiten. Der Hex-Code kann direkt eingegeben werden und besteht aus sechs Zeichen. Im Beispiel steht „C3E0F2“ für ein helles Blau und „FF“ für volle Deckkraft. Alternativ können RGB-Werte (R: 195, G: 224, B: 242) manuell eingetragen werden. Zusätzlich lassen sich Sättigung, Helligkeit und Alpha-Wert anpassen. 
• Box-Styling: Über die Checkbox mit der Bezeichnung „Padding & Schatten“ kann dem Container automatisch ein Innenabstand sowie ein dezenter Schlagschatten hinzugefügt werden. Dies hebt den Container optisch vom restlichen Seiteninhalt ab und sorgt besonders bei farbigen Hintergründen für mehr Tiefe im Layout.
• Container-Titel: Hier können Sie eine aussagekräftige Überschrift für den Container eingeben, um den Nutzenden eine klare Orientierung zu bieten.
• Titel-Format: Über ein Dropdown-Menü wird die Hierarchieebene der Überschrift festgelegt. Zur Auswahl stehen die HTML-Überschriften H1 bis H6, wodurch eine klare und semantisch korrekte Strukturierung der Inhalte unterstützt wird.

Tipp: Die benutzerdefinierte Farbpalette am unteren Rand des Hintergrundfarbwählers erleichtert die schnelle Auswahl von Farben, ohne dass Hex-Codes oder RGB-Werte jedes Mal manuell eingegeben werden müssen. Sie lässt sich im Menü CMS‑Konfiguration → CMS‑Designvorgaben einfach mit den Farben Ihres Corporate Designs füllen. So haben Redakteurinnen und Redakteure stets die passenden Unternehmensfarben griffbereit, was die Gestaltung einheitlich und zeitsparend macht.

Container mit Elementen befüllen

Bevor Sie einen Container mit Inhalten befüllen können, müssen Sie diesen zunächst zur Bearbeitung auswählen. In der linken Spalte finden Sie die Liste "Seitenelemente", die alle vorhandenen Layout-Container Ihrer Seite anzeigt:

• Klicken Sie auf den gewünschten Container, um ihn auszuwählen.
• Anschließend starten Sie die Bearbeitung per Doppelklick auf den ausgewählten Container oder nutzen die Schaltfläche Bearbeiten.
• Nun können Sie mit der Schaltfläche Element einfügen neue Inhalte in diesem Container platzieren.

Element einfügen: Öffnet ein Auswahlmenü mit allen verfügbaren Inhaltselementen. Nach der Auswahl wird das Element automatisch im Container platziert und kann konfiguriert werden. Alle Elemente nutzen die volle Breite des Containers und stapeln sich untereinander.

Inhalte für die linke Spalte mit 66 Prozent Breite: Die breitere linke Spalte nimmt die zentralen Informationen auf, die für alle Nutzenden relevant sind. Typische Elemente sind:

• ein Headerbild als visueller Einstieg,
• ein Textbereich für wichtige Informationen,
• eine Meldungsübersicht für aktuelle Nachrichten und ein Kachelmenü aus Icon-Boxen zur Navigation. Diese Elemente nutzen die volle Containerbreite und bilden eine klare vertikale Informationshierarchie.

Inhalte für die rechte Spalte mit 33 Prozent Breite: Die schmalere rechte Spalte eignet sich für kompakte, personalisierte Inhalte. Hier platzieren Sie Funktions-Elemente wie Aufgabenübersichten, Terminkalender oder eine personalisierte Begrüßung. Da der Bereich schmaler ist, sollten die Inhalte kurz und prägnant gehalten werden. Listenansichten und kompakte Widgets funktionieren hier am besten.

Tipp: Neben der Standardaufteilung können Sie auch alternative Layouts nutzen. Für besonders prominente Inhalte eignen sich Container mit voller Breite, für komplexere Strukturen dreispaltige Varianten oder gleich breite Spalten. Farbliche Hervorhebungen durch Container-Hintergrundfarben unterstützen die visuelle Trennung verschiedener Inhaltsbereiche und erleichtern die Orientierung. Achten Sie auf Bildoptimierung und eine überschaubare Elementanzahl, um die Performance der Seite zu gewährleisten.