Texte in Divi vertikal ausrichten ganz einfach
Texte in Divi vertikal ausrichten ist ganz einfach – wenn man weiß wie. Eine Aufgabe, die immer wieder beim Designen von Webseiten auftaucht, ist das vertikale Ausrichten von Texten. WordPress bietet da leider keine einfache Möglichkeit und in Divi gibt es einen Punkt, an dem man denken könnte, es wäre ganz simpel. Ist es aber nicht. Zumindest solange nicht, bis man es einmal heraus hat.
Divi von Elegantthemes.com gehört sicherlich zu einem der populärsten Themes für WordPress. Zum Einen liegt es an den nahezu unendlichen Möglichkeiten, Websites anzupassen, ohne tief in die Materie der Webentwicklung einsteigen zu müssen und zum Anderen an den ständigen Weiterentwicklungen die ElegantThemes dem Theme spendiert und den vielen Vorlagen, die das Design-Team nahezu wöchentlich herausbringt.
Kommen wir zur Sache
Nehmen wir als Beispiel an, es gibt ein zweispaltiges Modul, in dem links ein Bild stehen soll und rechts ein Text. Standardmäßig sieht das ganze dann so aus:
In den Zeileneinstellungen – das ist der grüne Rahmen – muss nun unter „Design“ und „Größe einstellen“ der Schalter „Spaltenhöhe ausgleichen“ eingeschaltet werden.
Dies alleine reicht jedoch nicht aus, um den gewünschten Effekt zu erreichen. Auch wenn der Schalter und dessen Beschreibung dies suggerieren mag, es passiert zunächst einmal nichts.
In den Theme-Optionen muss im Bereich „Eigenes CSS“ noch nachfolgender Code-Schnipsel eigetragen werden:
.et_pb_equal_columns >.et_pb_column {
margin-top:auto;
margin-bottom:auto;
}
Sobald diese Änderungen gespeichert sind, kann sich das finale Ergebnis sehen lassen. Jetzt sieht das ganze dann so aus:
Ab jetzt ist es so, das, sobald der Schalter Spaltenhöhe ausgleichen in irgendeiner Zeile der gesamten Seite eingeschaltet wird, die vertikale Ausrichtung greift. Wird dies nicht gewünscht, müsste man den Code-Schnipsel einer CSS-Klasse zuweisen und diese dann an den gewünschten Positionen eingeben.
Das war es dann auch schon. Texte in Divi vertikal ausrichten ganz einfach ist damit fertig. Bei meinen Webseiten ist es fast schon Standard, das ich den Code-Schnipsel gleich zu Anfang in meine CSS-Dateien eintrage.
Ich hoffe, die Anleitung ist verständlich und hilfreich. Wenn es noch Fragen gibt, können diese gern in die Kommentare gestellt werden.