...

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.

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, Websites und visuelle Kommunikation.

Get Social!

Letzte Beiträge

WordPress Membership erstellen: Dein Leitfaden mit WishList Member
WordPress Membership erstellen: Dein Leitfaden mit WishList Member

  Möchtest Du einen erfolgreichen WordPress Membership Bereich erstellen? Mit WishList Member hast Du ein mächtiges Tool an der Hand, das Dir hilft, Deine Inhalte zu schützen und Deine Mitglieder effektiv zu verwalten. In diesem Blogbeitrag zeige ich Dir, wie Du...

ThriveCart Pro mit Frau am Laptop

ThriveCart Pro+* – Das beste Zahlungstool, ohne Verkaufsgebühren – jetzt kaufen und meinen Online-Kurs gratis erhalten.
mehr erfahren