Divi Elemente innerhalb einer Spalte vertikal ausrichten

Video Anleitung
Level:
Anfänger ⭐

Hiacynta Hess
Webdesignerin

Video Anleitung
Level:
Anfänger ⭐

Aktualisiert am:
26. September 2023

Hiacynta Hess
Webdesignerin

Aktualisiert am:
26. September 2023

In der aktuellen Divi Version hat man keine Möglichkeit ein Element z.B. einen Text oder einen Button innerhalb einer Spalte vertikal (mittig) zu zentrieren. Das bedeutet, wenn man zwei Spalten hat und in einer dieser Spalten befindet sich ein Bild, dass 500px hoch ist, dann wird die Headline in der anderen Spalte immer ganz oben angezeigt.

Divi Element vertikal zentrieren

Um dieses Problem zu lösen, musst du lediglich einen einfachen CSS Code in Divi integrieren. Der CSS Code lautet, wie folgt:

/* Vertikales Zentrieren von Elementen */

.vertikal-zentrieren {
display: flex;
flex-direction: column;
justify-content: center;}

Um den Code zu integrieren, musst du folgende Schritte beachten:

  1. Öffne das Dashboard in gehe links im Reiter auf den Punkt Divi und zu den Theme-Optionen
  2. Scrolle ganz nach unten zu dem Punkt Eigene CSS und füge den Code ein und speichere das ganze ab
  3. Öffne die Zeileneinstellungen der Spalte, deren Elemente du gerne vertikal ausrichten möchtest
Divi Element vertikal zentrieren

Da ich in meinem Fall nur die rechte Spalte vertikal ausrichten möchte, öffne ich die Einstellungen zu der rechten Spalte.

Divi Element zentrieren

Nun wählst du oben im Menu den Reiter Erweitert aus und öffnest das Feld CSS -ID & Klassen. In das Feld CSS Klasse trägst du den Befehl vertikal-zentrieren ein. Damit verknüpfst du die Funktion des CSS Codes mit der Spalte.

Divi Spalte vertikal zentrieren

Wichtig ist, dass du unter dem Reiter Design » Größe einstellen, JA bei Spaltenhöhe ausgleichen aktivierst.

Divi Element vertikal zentrieren

Anschließend alles abspeichern und das war es auch schon! Wenn du den CSS Code einmal in den Divi Einstellungen hinterlegt hast, brauchst du immer nur in der CSS Klasse den Code einfügen und schon ist dein Element in Divi vertikal ausgerichet.

Hat dir dieses Video geholfen?

Your page rank:

WordPress Website selbst erstellen

Hiacynta Hess

Hiacynta Hess ist die Autorin des Artikels und führt seit 2004 ein Online Business. Mittlerweile unterstützt sie andere Online-Unternehmen bei Ihrer Website, SEO und sonstigen Marketing-Aktivitäten.

Transparenzhinweis:
Die mit einem * gekennzeichneten Links sind Affiliate Links. Diese diesen zur Orientierung und zum einfachen Finden der Produkte. Solltest du über den Link etwas bestellen, erhalte ich eine kleine Provision. Für dich entstehen keine Mehrkosten. Generell empfehle ich nur Produkte, die ich selbst getestet habe und die ich auch gut finde. Danke für deine Unterstützung.

Weitere Video-Anleitungen zum Divi-Theme

Entdecke weitere hilfreiche Video-Anleitungen zum Divi-Theme oder besuche meinen YouTube-Kanal

Keine Ergebnisse gefunden

Die angefragte Seite konnte nicht gefunden werden. Verfeinern Sie Ihre Suche oder verwenden Sie die Navigation oben, um den Beitrag zu finden.

Abonniere meinen Newsletter!

Mache es wie die anderen Online-Unternehmer, die regelmäßig exklusive Insidertipps für Ihr Online-Business und Ihre Marketing-Maßnahmen direkt ins Postfach bekommen. Kostenlos und jederzeit abbestellbar.

Weitere Infos findest du in meinen Datenschutzhinweisen.

WordPress Cookie Hinweis von Real Cookie Banner