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