Divi CSS – Module einfach und schnell ausrichten

Divi CSS

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.

0 Kommentare

Einen Kommentar abschicken

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

Deine Daten werden gemäß Datenschutzerklärung verarbeitet.

Nils

Ich bin Nils…

Experte für Memberships und visuelle Kommunikation.

Get Social!

Letzte Beiträge

Mitgliederbereich erstellen | Online-Kurse + Community Plattform
Mitgliederbereich erstellen | Online-Kurse + Community Plattform

Als Online-Unternehmer:in möchtest du deinen Nutzern die Möglichkeit bieten, auf exklusive Online-Kurse zuzugreifen und an einer Community teilzunehmen. Ein Mitgliederbereich (auch Membership genannt) auf deiner WordPress-Website ist die Lösung, um diese Bedürfnisse...