CMS-Plugin Container bearbeiten
Mit dem neuen Template „Seite volle Breite“ kannst du Inhalte erstellen, die über die gesamte Breite des Bildschirms dargestellt werden. Erfahre Schritt für Schritt, wie du dieses Template nutzt und wie du darin farbige Bereiche mit Text im festen Layout einbaust.
Inhalte des Artikels: Springe durch Klick auf das Thema direkt zum jeweiligen Absatz.
Schritt-für-Schritt-Anleitung
1. Neue Seite mit dem Template „volle Breite“ erstellen
- Öffne das CMS und navigiere zur gewünschten Seite oder erstelle eine neue.
- Klicke oben auf „Bearbeiten“, um in den Seitenbearbeitungsmodus zu gelangen.
- Öffne in der Seitenleiste die Registerkarte „Seite“.
- Wähle unter „Vorlage“ das Template „Seite volle Breite“ aus.
- Speichere Deine Auswahl.
🔍 Hinweis: Auf den ersten Blick ändert sich wenig. Der Seitenteaser hatte schon zuvor volle Breite – der Unterschied zeigt sich im Seiteninhalt darunter.
2. Textblock hinzufügen
- Füge im Seiteninhalt ein Text-Plugin hinzu.
- Du siehst: Der Text klebt jetzt am linken Rand – weil er sich über die volle Breite zieht.
3. Text innerhalb eines festen Containers platzieren
- Füge im Seiteninhalt ein Container-Plugin mit fester Breite ein.
- Ziehe das Text-Plugin per Drag & Drop in diesen Container.
- Jetzt ist der Text wieder wie gewohnt innerhalb der festen Inhaltsbreite eingerahmt.
4. Einen vollflächigen, farbigen Bereich („Störer“) gestalten
a) 100 %-Breiten-Container mit Farbe erstellen
- Füge einen Container mit 100 % Breite hinzu.
- Wähle im Plugin die gewünschte Hintergrundfarbe aus.
🔍 Hinweis: Ohne Inhalt ist der Container nicht sichtbar.
b) Inhalt (z. B. Überschrift) in den Container setzen
- Ziehe ein Text-Plugin in den Container.
- Gib z. B. „Überschrift 2“ ein.
- Markiere den Text und formatiere ihn als H2.
- Denke dabei an die Überschriften-Hierarchie und digitale Barrierefreiheit.
c) Feste Breite im Container einfügen
- Ziehe in den 100 %-Container einen weiteren Container mit fester Breite.
- Schiebe das Text-Plugin nun in diesen festen Container.
🔍 Hinweis: So bleibt die Hintergrundfarbe über die volle Breite, während der Inhalt sich innerhalb des gewohnten Layout-Rahmens bewegt.
5. Abstand (Whitespace) hinzufügen
- Füge in den inneren Container ein Row-Plugin ein.
- Erstelle darin eine Spalte.
- Ziehe den Textblock in diese Spalte.
- Jetzt erhält der Text automatisch oben und unten Luft (Abstand) – für bessere Lesbarkeit.
Wenn du generell Abstand zwischen zwei Plugins brauchst, kannst du auch das Plugin Spacing verwenden. Ein Beispiel: du möchtest unter einem Textabschnitt ein Bild einfügen. Dieses Bild würde dann direkt an den Text folgen, mit wenig Abstand. Mit dem Spacing-Plugin kannst du hier zusätzlichen Platz einbauen.
- Suche
Spacinges in der Übersicht über deine Plugins. - In der Bearbeitungsansicht kannst du einstellen, wo mehr Abstand sein soll
- nach oben, unten, rechts, links, oder auch in beide Richtungen.
👉🏻 Tipp: Du kannst dir das Plugin wie einen kleinen unsichtbaren Balken vorstellen, der als leerer Platzhalter mehr Abstand zwischen anderen Plugins schafft.