Divi CSS – Module einfach und schnell ausrichten

von Nils

Willst Du Divi-Module in einer Zeile nebeneinander ausrichten, kommst Du mit den Divi-Board-Mitteln leicht an Deine Grenzen. Mit dem Zwischenabstand im Divi-Modul (Padding) kannst Du hier zwar Anpassungen vornehmen, aber sobald sich die Bildschirmgröße (Viewport) verändert, variiert auch Dein eingestellter Zwischenabstand.

Mit CSS (Cascading Style Sheets) kannst Du in Divi wesentlich schneller und professioneller arbeiten.

Als Grundvoraussetzung dient hier der CSS-Befehl „display:flex;“. Diesen hinterlegst Du in der Divi-Zeile, in dem Du die Spaltenhöhen ausgleichst. Diese Grundlage ermöglicht Dir nun weitere CSS-Befehle in das benutzerdefinierte CSS der Spalten einzufügen.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

CSS-Befehle

margin: auto;

richtet die kleinere Spalte gegenüber der größeren Spalte zentriert aus.

margin: auto auto 0;

richtet die kleinere Spalte gegenüber der größeren Spalte unten aus.

align-items: center;

richtet die kleinere Spalte gegenüber der größeren Spalte ebenfalls zentriert aus, jedoch fügst Du diesen CSS-Befehl in das benutzerdefinierte CSS der Zeile ein

display:flex;
flex-direction: column;
justify-content: center;

Hier fügst Du das display:flex der Spalte hinzu, die Du ausrichten möchtest. Im Unterschied zu margin:auto; wird mit dieser Befehlsreihenfolge nicht die Höhe der Spalte beeinflusst. Die Spaltenhöhe richtet sich an der gegenüberliegenden größeren Spalte aus.

Variation:

display:flex;
flex-direction: column;
justify-content: flex-end;

richtet das in der Spalte liegende Modul unten aus

display:flex;
flex-direction: column;
justify-content: flex-start;

richtet das in der Spalte liegende Modul oben aus

Noch mehr CSS-Befehle erhältst Du hier.

Newsletter

Impulse abonnieren

Der Newsletter wird ca. 1x im Monat versendet. Du kannst Dich jederzeit mit einem Klick abmelden. Weitere Informationen zur Nutzung Deiner Daten findest Du in der Datenschutzerklärung.

0 Kommentare

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert