Artikel

Element in Divi-Spalte vertikal zentrieren

Eine einfache Schritt für Schritt Anleitung, inkl. CSS Code & Video

zurück zur Übersicht

7

Ein Artikel von Hiacynta Hess
Aktualisiert: 08. August 2021

Artikel jetzt teilen:

In diesem Artikel möchtebekommst du eine Schritt für Schritt Anleitung, wie du Elemente in einer Divi Spalte automatisch vertikal zentrieren kannst.

Da diese Funktion in Divi fehlt, muss man einen kleinen Umweg über einen CSS Code gehen. Ich empfehle dir unbedingt diese Lösung und nicht mit Margin oder Padding zu arbeiten.

Viel Spaß beim ausprobieren!

Die Problemstellung

In der aktuellen Divi Version hat man keine Möglichkeit ein Element z.B. einen Text oder einen Button innerhalb einer Spalte vertikal 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

Divi Element vertikal zentrieren

Die Lösung: CSS

Die Lösung für dieses Problem ist ein simpler CSS Code den man implementieren muss. Der Befehl dafür lautet:

/* Vertikales Zentrieren von Elementen */

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

Der Einbau des Codes ist kinderleicht, befolge dazu einfach folgende Schritte:

  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 Zeilen Einstellungen der Spalte, deren Elemente du gerne vertikal ausrichten möchtest
Divi Element vertikal zentrieren

Öffne die Zeileneinstellung

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

Divi Element zentrieren

Öffne die Spalteneinstellung der Spalte die du anpassen willst

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

CSS Code in CSS Klasse eintragen

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

Divi Element vertikal zentrieren

Wichtig: Spaltenhöhe ausgleichen aktivieren

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.

Videoanleitung

Schau dir gerne die Schritt für Schritt Anleitung an, die ich für dich aufgenommen habe.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Fazit

Wie du siehst, kann man also über einen kleinen Umweg, in dem Fall über einen simplen CSS Code, die Elemente einer Spalte vertikal zentrieren. Das ist übrigens ein Code, den ich bei einer neuen Divi Installation immer einfüge, da man diese Funktion total oft benötigt.

Deine Fragen zu Divi

Welche Fragen hast du zu diesem Artikel? Hast du diese Funktion im Divi Pagebuilder schon vermisst? Ich freue mich über deinen Kommentar. Du interessierst dich für WordPress, Divi, Webdesign und alles was damit noch zu tun hat? Dann trag dich doch in meinen Newsletter ein.

Divi Elemente vertikal zentrieren

Über den Autor

Hiacynta Hess ist Webdesignerin, Fotografin, Dozentin, Netzwerkerin und Bloggerin. Meine größte Leidenschaft ist es, mein Wissen in jeglicher Form mit dir zu teilen und das tue ich über unterschiedliche Plattformen. Deine Website ist meine Mission und ich möchte dich dabei unterstützen, dass deine Website deine Bühne wird!

Folge mir:
instagramyoutubeWebsite

Kommentare

Stelle mir deine Fragen oder gib mir Feedback!

Datenschutzhinweise:

Wenn du diesen Artikel kommentierst, werden die von dir angegebenen Daten und auch die IP Adresse gespeichert. Deine E-Mail Adresse wird nicht veröffentlicht. Weitere Informationen findest du in meiner Datenschutzerklärung.

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.