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.

Last updated 1 year ago

Was this helpful?

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)

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)

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.

CSS-Klasse

Horizontaler Abstand

.zen-cms-gx-0

.zen-cms-gx-1

.zen-cms-gx-2

.zen-cms-gx-3

.zen-cms-gx-4

.zen-cms-gx-5

SM Viewports (ab 576px)

CSS-Klasse

Horizontaler Abstand

.zen-cms-gx-sm-0

.zen-cms-gx-sm-1

.zen-cms-gx-sm-2

.zen-cms-gx-sm-3

.zen-cms-gx-sm-4

.zen-cms-gx-sm-5

MD Viewports (ab 768px)

CSS-Klasse

Horizontaler Abstand

.zen-cms-gx-md-0

.zen-cms-gx-md-1

.zen-cms-gx-md-2

.zen-cms-gx-md-3

.zen-cms-gx-md-4

.zen-cms-gx-md-5

LG Viewports (ab 992px)

CSS-Klasse

Horizontaler Abstand

.zen-cms-gx-lg-0

.zen-cms-gx-lg-1

.zen-cms-gx-lg-2

.zen-cms-gx-lg-3

.zen-cms-gx-lg-4

.zen-cms-gx-lg-5

XL Viewports (ab 1200px)

CSS-Klasse

Horizontaler Abstand

.zen-cms-gx-xl-0

.zen-cms-gx-xl-1

.zen-cms-gx-xl-2

.zen-cms-gx-xl-3

.zen-cms-gx-xl-4

.zen-cms-gx-xl-5

Beispiel:

Vertikale Abstände (y-Achse)

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

CSS-Klasse

Vertikaler Abstand

.zen-cms-gy-0

.zen-cms-gy-1

.zen-cms-gy-2

.zen-cms-gy-3

.zen-cms-gy-4

.zen-cms-gy-5

SM Viewports (ab 576px)

CSS-Klasse

Horizontaler Abstand

.zen-cms-gy-sm-0

.zen-cms-gy-sm-1

.zen-cms-gy-sm-2

.zen-cms-gy-sm-3

.zen-cms-gy-sm-4

.zen-cms-gy-sm-5

MD Viewports (ab 768px)

CSS-Klasse

Horizontaler Abstand

.zen-cms-gy-md-0

.zen-cms-gy-md-1

.zen-cms-gy-md-2

.zen-cms-gy-md-3

.zen-cms-gy-md-4

.zen-cms-gy-md-5

LG Viewports (ab 992px)

CSS-Klasse

Horizontaler Abstand

.zen-cms-gy-lg-0

.zen-cms-gy-lg-1

.zen-cms-gy-lg-2

.zen-cms-gy-lg-3

.zen-cms-gy-lg-4

.zen-cms-gy-lg-5

XL Viewports (ab 1200px)

CSS-Klasse

Horizontaler Abstand

.zen-cms-gy-xl-0

.zen-cms-gy-xl-1

.zen-cms-gy-xl-2

.zen-cms-gy-xl-3

.zen-cms-gy-xl-4

.zen-cms-gy-xl-5

Beispiel:

Horizontale & Vertikale Abstände

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

CSS-Klasse

Horizontaler & Vertikaler Abstand

.zen-cms-g-0

.zen-cms-g-1

.zen-cms-g-2

.zen-cms-g-3

.zen-cms-g-4

.zen-cms-g-5

SM Viewports (ab 576px)

CSS-Klasse

Horizontaler & Vertikaler Abstand

.zen-cms-g-sm-0

.zen-cms-g-sm-1

.zen-cms-g-sm-2

.zen-cms-g-sm-3

.zen-cms-g-sm-4

.zen-cms-g-sm-5

MD Viewports (ab 768px)

CSS-Klasse

Horizontaler & Vertikaler Abstand

.zen-cms-g-md-0

.zen-cms-g-md-1

.zen-cms-g-md-2

.zen-cms-g-md-3

.zen-cms-g-md-4

.zen-cms-g-md-5

LG Viewports (ab 992px)

CSS-Klasse

Horizontaler & Vertikaler Abstand

.zen-cms-g-lg-0

.zen-cms-g-lg-1

.zen-cms-g-lg-2

.zen-cms-g-lg-3

.zen-cms-g-lg-4

.zen-cms-g-lg-5

XL Viewports (ab 1200px)

CSS-Klasse

Horizontaler & Vertikaler Abstand

.zen-cms-g-xl-0

.zen-cms-g-xl-1

.zen-cms-g-xl-2

.zen-cms-g-xl-3

.zen-cms-g-xl-4

.zen-cms-g-xl-5

Beispiel:

Last updated 1 year ago

Was this helpful?

Innen-Abstände (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)

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

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.

CSS-Klasse

Horizontaler Abstand

.zen-cms-gx-0

.zen-cms-gx-1

.zen-cms-gx-2

.zen-cms-gx-3

.zen-cms-gx-4

.zen-cms-gx-5

SM Viewports (ab 576px)

CSS-Klasse

Horizontaler Abstand

.zen-cms-gx-sm-0

.zen-cms-gx-sm-1

.zen-cms-gx-sm-2

.zen-cms-gx-sm-3

.zen-cms-gx-sm-4

.zen-cms-gx-sm-5

MD Viewports (ab 768px)

CSS-Klasse

Horizontaler Abstand

.zen-cms-gx-md-0

.zen-cms-gx-md-1

.zen-cms-gx-md-2

.zen-cms-gx-md-3

.zen-cms-gx-md-4

.zen-cms-gx-md-5

LG Viewports (ab 992px)

CSS-Klasse

Horizontaler Abstand

.zen-cms-gx-lg-0

.zen-cms-gx-lg-1

.zen-cms-gx-lg-2

.zen-cms-gx-lg-3

.zen-cms-gx-lg-4

.zen-cms-gx-lg-5

XL Viewports (ab 1200px)

CSS-Klasse

Horizontaler Abstand

.zen-cms-gx-xl-0

.zen-cms-gx-xl-1

.zen-cms-gx-xl-2

.zen-cms-gx-xl-3

.zen-cms-gx-xl-4

.zen-cms-gx-xl-5

Beispiel:

Vertikale Abstände (y-Achse)

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

CSS-Klasse

Vertikaler Abstand

.zen-cms-gy-0

.zen-cms-gy-1

.zen-cms-gy-2

.zen-cms-gy-3

.zen-cms-gy-4

.zen-cms-gy-5

SM Viewports (ab 576px)

CSS-Klasse

Horizontaler Abstand

.zen-cms-gy-sm-0

.zen-cms-gy-sm-1

.zen-cms-gy-sm-2

.zen-cms-gy-sm-3

.zen-cms-gy-sm-4

.zen-cms-gy-sm-5

MD Viewports (ab 768px)

CSS-Klasse

Horizontaler Abstand

.zen-cms-gy-md-0

.zen-cms-gy-md-1

.zen-cms-gy-md-2

.zen-cms-gy-md-3

.zen-cms-gy-md-4

.zen-cms-gy-md-5

LG Viewports (ab 992px)

CSS-Klasse

Horizontaler Abstand

.zen-cms-gy-lg-0

.zen-cms-gy-lg-1

.zen-cms-gy-lg-2

.zen-cms-gy-lg-3

.zen-cms-gy-lg-4

.zen-cms-gy-lg-5

XL Viewports (ab 1200px)

CSS-Klasse

Horizontaler Abstand

.zen-cms-gy-xl-0

.zen-cms-gy-xl-1

.zen-cms-gy-xl-2

.zen-cms-gy-xl-3

.zen-cms-gy-xl-4

.zen-cms-gy-xl-5

Beispiel:

Horizontale & Vertikale Abstände

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

CSS-Klasse

Horizontaler & Vertikaler Abstand

.zen-cms-g-0

.zen-cms-g-1

.zen-cms-g-2

.zen-cms-g-3

.zen-cms-g-4

.zen-cms-g-5

SM Viewports (ab 576px)

CSS-Klasse

Horizontaler & Vertikaler Abstand

.zen-cms-g-sm-0

.zen-cms-g-sm-1

.zen-cms-g-sm-2

.zen-cms-g-sm-3

.zen-cms-g-sm-4

.zen-cms-g-sm-5

MD Viewports (ab 768px)

CSS-Klasse

Horizontaler & Vertikaler Abstand

.zen-cms-g-md-0

.zen-cms-g-md-1

.zen-cms-g-md-2

.zen-cms-g-md-3

.zen-cms-g-md-4

.zen-cms-g-md-5

LG Viewports (ab 992px)

CSS-Klasse

Horizontaler & Vertikaler Abstand

.zen-cms-g-lg-0

.zen-cms-g-lg-1

.zen-cms-g-lg-2

.zen-cms-g-lg-3

.zen-cms-g-lg-4

.zen-cms-g-lg-5

XL Viewports (ab 1200px)

CSS-Klasse

Horizontaler & Vertikaler Abstand

.zen-cms-g-xl-0

.zen-cms-g-xl-1

.zen-cms-g-xl-2

.zen-cms-g-xl-3

.zen-cms-g-xl-4

.zen-cms-g-xl-5

Beispiel: