Block Innen-Abstände

Neben den äußeren Abständen eines Blocks können Spalten und Layouts mit mehreren Blöcken auch innere Abstände zueinander haben.

Innen-Abstände (Gutters)

Gutters sind die Innenabstände zwischen den Blöcken, die verwendet werden, um Elemente in den Erlebniswelten zu platzieren und auszurichten.

Über das Feld Innerer Abstand (1) lässt sich ein innerer Abstand (2, 3) zwischen den einzelnen Blöcken in einem Layout oder Spalten Grid definieren.

Diese Einstellung findest Du exklusiv nur bei Zenit Spalten- und Layout Elementen.

Erweiterte Innen-Abstände (Gutters)

Gutters sind die Innenabstände zwischen den Blöcken, die verwendet werden, um Elemente in den Erlebniswelten zu platzieren und auszurichten.

Die Abstandseinstellungen im Layout gelten in der Regel für alle Endgeräte. Um diese Abstände responsiv einzustellen - also für verschiedene Geräte vom Smartphone bis zum Desktop-Gerät, gibt es spezielle Klassen. Verwende dazu breakpoint-spezifische Klassen, um horizontale Abstände, vertikale Abstände oder alle Abstände zu ändern.

Dazu sollte das Feld Innerer Abstand keinen Wert enthalten.

Eine vollständige Liste aller Klassen findest Du weiter unten. Du kannst sie Dir aber auch nach folgendem Schema herleiten: .zen-cms-g{Achse}-{Viewport}-{Größe}

Beispiel: zen-cms-gx-sm-1 = horizontaler Abstand ab SM Endgeräten in der Größe 1

Anwendung in der Administration

Wähle den Block (3) aus, welcher die CSS-Klasse für die Abstandseinstellung erhalten soll und trage eine oder mehrere CSS-Klassennamen in das Feld CSS-Klassen (4).

Die Klassennamen werden ohne Punkt-Notation eingetragen. Mehrere CSS-Klassennamen werden durch Leerzeichen voneinander getrennt eingetragen.

Horizontale Abstände (x-Achse)

.zen-cms-gx-* Klassen können genutzt werden, um horizontale Abstände einzustellen.

Alle

CSS-Klasse	Horizontaler Abstand
.zen-cms-gx-0	0
.zen-cms-gx-1	XS
.zen-cms-gx-2	SM
.zen-cms-gx-3	MD
.zen-cms-gx-4	LG
.zen-cms-gx-5	XL

SM

MD

LG

XL

Beispiel:

zen-cms-gx-5

Vertikale Abstände (y-Achse)

.zen-cms-gy-* Klassen können genutzt werden, um vertikale Abstände einzustellen.

Alle

CSS-Klasse	Vertikaler Abstand
.zen-cms-gy-0	0
.zen-cms-gy-1	XS
.zen-cms-gy-2	SM
.zen-cms-gy-3	MD
.zen-cms-gy-4	LG
.zen-cms-gy-5	XL

SM

MD

LG

XL

Beispiel:

Horizontale & Vertikale Abstände

.zen-cms-g-* Klassen können genutzt werden, um horizontale und vertikale Abstände gleichzeitig einzustellen.

Alle

CSS-Klasse	Horizontaler & Vertikaler Abstand
.zen-cms-g-0	0
.zen-cms-g-1	XS
.zen-cms-g-2	SM
.zen-cms-g-3	MD
.zen-cms-g-4	LG
.zen-cms-g-5	XL

SM

MD

LG

XL

Beispiel: