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.
Wenn du in einer mehrspaltigen Zeile mehrere Objekte mit unterschiedlicher Größe plazierst werden diese im Regelfall alle oben ausgerichtet. Das sieht meisten eher suboptimal aus. Optisch besser, da harmonischer ist es oft wenn alle Module vertikal zentriert werden. Du hast standardmäßig nur die Möglichkeit in den Einstellungen der Zeile unter Design > Größe einstellen den Spaltenabstand einzuschalten und die Spaltenhöhen auszugleichen. Dadurch bekommen alle Module die gleidhen Abstände bzw. die gleiche Höhe, zentrieren lassen sie sich damit aber leider nicht.
Aber wie so oft gibt es auch hierfür einfache Lösungen. Ich zeige dir nachfolgend 2 davon. Eine mit der du jede Spalte einzeln ausrichten kannst und eines mit dem du die gesamte Zeile ausrichtest. Und das Gute daran ist, für beide ist nur jeweils ein wenig CSS und das Eintragen einer Klasse nötig.
Im ersten Beispiel siehst du wie eine Zeile mit 3 Spalten angezeigt wird. Spaltenabstand und Spaltenhöhen sind hier schon eingeschalten. Optisch ist das eine Katastrophe.
Einzelne Spalten ausrichten
Wenn du nur einzelne Spalten aus richten möchtest kopierst du dir den folgenden Code und fügst ihn entweder in deinem Dashboard unter Design > Customizer > Zusätzliches CSS oder noch besser in die style.css von deinem child-theme ein.
/* Spalten vertikal zentrieren */
.spalten-zentrieren {
display: flex;
flex-direction: column;
justify-content: center;
}
Ab sofort kannst du jederzeit in deiner gesamten Webseite bei mehrspaltigen Zeilen jede Spalte die du ausrichten möchtest mit nur einem Eintrag der Klasse ausrichten. Dazu gehst du in der Zeile auf die Einstellungen der jeweiligen Spalte, klickst auf den Reiter Erweitert und dann auf CSS-ID & Klassen. Dort trägst du folgende Klasse:
spalten-zentrieren
unter CSS-Klasse ein.
Das war`s schon. Vergiss nicht zu speichern und evtl. deinen Cache zu leeren. Deine Spalte in die du gerade die Klasse eingetragen hast (im Beispiel unten der Text) ist jetzt vertikal zentriert.
Nachdem du jetzt weißt wie man einzelne Spalten vertikal zentriert zeige ich dir als nächstes noch wie man eine ganze Zeile vertikal ausrichtet unabhängig davon wieviele Spalten sie hat
Ganze Zeile ausrichten
In diesem Fall kopierst du dir wieder den folgenden Code und fügst ihn ebenfalls entweder in deinem Dashboard unter Design > Customizer > Zusätzliches CSS oder noch besser in die style.css von deinem Child Theme ein.
/* komplette Zeilen vertikal zentrieren */
.zeilen-zentrieren {
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
}
Ab sofort musst du nicht mehr jede Spalte einzeln ausrichten sondern kannst jederzeit in deiner gesamten Webseite bei mehrspaltigen Zeilen, die gesamte Zeile mit nur einem Eintrag der Klasse ausrichten. Dazu klickst du in der Zeile auf den Reiter Erweitert und dann auf CSS-ID & Klassen. Dort trägst du folgende Klasse:
zeilen-zentrieren
unter CSS-Klasse ein.
Das war`s schon. Vergiss auch diesmal nicht zu speichern und evtl. deinen Cache zu leeren. Deine gesamte Zeile, in die du gerade die Klasse eingetragen hast, ist jetzt vertikal zentriert.
0 Kommentare