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.