Im Divi-Theme werden Module ohne Zutun vertikal am oberen Rand der Spalte dargestellt. Das passt meistens – doch bei mehrspaltigen Zeilen kann man sich dies auch mal anders wünschen. Mittiges Ausrichten oder Module, welche vertikal unten platziert werden, sind mit ein paar Zeilen CSS-Code ganz einfach möglich.
Fügen Sie zunächst folgende Zeilen in das CSS-Stylesheet Ihrer Website ein. Sie finden es unter Design/Customizer/zusätzliches CSS:
/* Inhalt vertikal zentrieren*/
.content-vertical-align-center {
display: flex;
flex-direction: column;
justify-content: center;
}
/* Inhalt vertikal unten ausrichten */
.content-vertical-align-bottom {
display: flex;
flex-direction: column;
justify-content: flex-end;
}Die folgenden Einstellungen müssen in der Divi-Zeile (Row) erledigt werden. Sie funktionieren nicht in den einzelnen Modulen.
- Öffnen Sie die Einstellungen der Zeile (Row), welche die Spalten enthält, welche Sie nun ausrichten möchten.
- Klicken Sie auf den Design-Tab und dort auf «Grösse einstellen».
- Aktivieren Sie «Spaltenhöhe ausgleichen».
- Wechseln Sie auf den Inhalt-Tab. Dort sehen Sie alle Spalten untereinander angezeigt – in jener Reihenfolge, in welcher sie dereinst im Frontend von links nach rechts angezeigt werden.
- Bearbeiten Sie die Einstellungen jener Spalte(n), welche Sie vertikal ausrichten möchten.
- Wechseln Sie auf den «Erweitert»-Tab – auch «Advanced» genannt und klicken Sie dann auf «CSS-ID & Klassen»
- Im Feld «CSS-Klasse» fügen Sie nun die zutreffende Klasse aus obigem Code ein:
- für eine Ausrichtung vertikal-mittig: content-vertical-align-center
- für eine Ausrichtung vertikal-unten: content-vertical-align-bottom
- Wiederholen Sie allenfalls die Schritte 5-7 für weitere auszurichtende Spalten.
Die einzelnen Module innerhalb der betreffenmden Spalten werden nun nach Ihren Vorgaben ausgerichtet; massgebend für die Zeilenhöhe ist dabei immer der längste Inhalt.
Das kann dann etwa so aussehen:
Längerer Text, der die Höhe der Divi-Zeile definiert. Längerer Text, der die Höhe der Divi-Zeile definiert. Längerer Text, der die Höhe der Divi-Zeile definiert. Längerer Text, der die Höhe der Divi-Zeile definiert. Längerer Text, der die Höhe der Divi-Zeile definiert. Längerer Text, der die Höhe der Divi-Zeile definiert. Längerer Text, der die Höhe der Divi-Zeile definiert.
Kürzerer Inhalt in einer Spalte ohne CSS-Klasse.
Darum wird er in Divi oben ausgerichtet.
Kürzerer Inhalt in einer Spalte mit der CSS-Klasse «content-vertical-align-center».
Er wird in Divi mittig dargestellt.
Kürzerer Inhalt in einer Spalte mit der CSS-Klasse «content-vertical-align-bottom».
Der Text wird in Divi am unteren Ende der Spalte angezeigt.
Problem gelöst.
