Quicktipps

Inhalte vertikal ausrichten

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.

 

Inhalte vertikal ausrichten

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;
}
Inhalte vertikal ausrichten

 

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.

 

Inhalte vertikal ausrichten

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;
}
Inhalte vertikal ausrichten

 

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.

 

Inhalte vertikal ausrichten

0 Kommentare

Einen Kommentar abschicken

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

Weitere Quicktipps

Fehlermeldung Persistenter Objekt Cache deaktivieren

Fehlermeldung Persistenter Objekt Cache deaktivieren

Nervt dich die Meldung „Du solltest einen persistenten Objekt-Cache verwenden“ auch? Hier erfährst du wie du sie ganz einfach los wirst. Entweder mit einer einfachen Zeile Code oder durch direkten Download meines Plugins, das ebendiesen Code für dich installiert.