Spaltenblock mit gleich hohen Absätzen bei Nutzung des Block-Editors

Spaltenblock: Absätze mit gleicher Höhe

Spaltenblock mit gleich hohen Absätzen bei Nutzung des Block-Editors (Gutenberg)

Heute hatten wir das Problem, dass wir einen Spaltenblock im Block-Editor bei einer WordPress-Webseite benötigten, der in jeder Spalte eine Überschrift, einen Absatz und ein Bild enthalten sollte. Das hört sich ja soweit unproblematisch an. Aber wenn die Texte in den Abätzen unterschiedlich lang sind, dann ergibt sich das Problem, dass die Bilder nicht in der gleichen Höhe im Frontend erscheinen.

WordPress: Spaltenblock mit gleich hohen Absätzen bei Nutzung des Block-Editors

Jetzt könnte man natürlich einwenden, na dann nimmt man doch einfach einen zweispaltigen Block mit Absätzen und darunter einen zweispaltigen Block mit zwei Bildern. Hört sich erst mal gut an? – Ist es aber nicht: Denn bei einem Gerät mit einem schmaleren Display, z. B. einem Smartphone, werden in dem Fall zuerst die beiden Absätze links und rechts und dann erst die beiden Bilder gezeigt. Damit geht aber der Zusammenhang von Text und zugehörigem Foto verloren. Das ist also sicher nicht die Lösung.

Eine weitere Lösung, doch einfach den Text unter die Bilder zu setzen, ist natürlich prinzipiell auch denkbar, war aber in diesem Fall nicht möglich. Der Text sollte also auf jeden Fall über den Bildern stehen.

Nun denn … ich habe mich letztendlich entschieden, die beiden Absatzblöcke mit einer gleichen Höhe zu versehen.

Gleiche Höhe des Absatzblocks im Block-Editor beim Spaltenblock

Die Lösung wäre möglich, wenn beide Texte die gleiche Höhe haben. Ich habe hier den linken Absatz mit (1) und den rechten Absatz mit (2) gekennzeichnet.

Das ist prinzipiell möglich, indem ich diesen beiden Absatzblöcken die gleiche Höhe über eine neue CSS-Klasse zuweise. Allerdings muss man in diesem Fall auch wieder berücksichtigen, dass es Verschiebungen je nach Gerät geben kann. Insofern sind Media Queries notwendig, mit denen man die „Feinjustierung“ vornehmen kann.

WordPress: Spaltenblock mit gleich hohen Absätzen bei Nutzung des Block-Editors

Breakpoint des Themes bei den Media Queries

Man sollte allerdings dabei auch den Breakpoint im Blick haben. Der Breakpoint bezieht sich in diesem Fall darauf, dass bei einer bestimmten Breite die Spalten untereinander gezeigt werden. Bei der einspaltigen Anzeige benötigt man natürlich keine feste Höhe mehr für den Absatzblock.

Die folgende CSS-Klasse bezieht sich auf das Theme Twenty Twenty. Wenn man diese CSS-Klasse bei einem anderen Theme einsetzen möchte, müssen die Media Queries dem verwendeten Theme entsprechend angepasst werden.

Der nachfolgende Code kann unter Design > Customizer > Zusätzliches CSS oder in die style.css des Child-Themes eingefügt werden. Die CSS-Klasse feste_hoehe kann natürlich auch für andere Breiten noch weiter ausgebaut werden.

/* Für Container bei zwei Spalten - einspaltig: daher keine feste Höhe bis 599px (Breakpoint) */

@media (min-width: 600px){
	p.feste_hoehe {
			height: 350px;
	}
}

@media (min-width: 700px){
	p.feste_hoehe {
			height: 400px;
	}
}

@media (min-width: 800px){
	p.feste_hoehe {
			height: 320px;
	}
}

@media (min-width: 900px){
	p.feste_hoehe {
			height: 300px;
	}
}

@media (min-width: 1378px){
	p.feste_hoehe {
			height: 250px;
	}
}

CSS-Klasse zuordnen

Jetzt kommt der letzte Schritt: Wir müssen dem Absatzblock diese CSS-Klasse zuordnen. Dazu positionieren wir den Cursor in den Absatzblock. Anschließend sehen wir rechts die Eigenschaften. Wenn man auf „Erweitert“ klickt, findet man ganz unten ein Eingabefeld unter „Zusätzliche CSS-Klasse(n)“. Genau da schreiben wir den Namen für die CSS-Klasse, den wir gewählt haben. In unserem Fall ist das feste_hoehe.

Anschließend sollte man testen, ob die Media Queries für Geräte entsprechender Breite passen. Das kann man mit den Developer Tools z. B. in Chrome (Aufrufen mit F12) überprüfen. Die entsprechenden Werte (siehe oben im Code) müssen ggfs. entsprechend geändert werden.

An sich wäre auch eine Lösung über den Abstandhalter-Block möglich. Aber auch in diesem Fall muss man CSS-Klassen mit Media Queries verwenden, die sich dann allerdings auf die Höhe des Abstandsblocks beziehen.

CSS-Klasse beim Absatzblock zuordnen
Spaltenblock mit gleich hohen Absätzen

Fazit

Mit ein paar CSS-Handgriffen im Block-Editor (Gutenberg) kann man dafür sorgen, dass man ein einheitliches Bild bei Spaltenblöcken auch bei etwas ungewöhnlichen Darstellungen erhält. Diese Lösung ist m. E. auch wunderbar geeignet, um z. B. auf einer Seite eine Darstellung von Bild und Text darunter akkurat aussehen zu lassen, so dass die Kacheln bei einem zweispaltigen Block (oder natürlich auch bei mehr Spalten) immer ein gemeinsames Ende haben. Das wäre vielleicht noch ein Ansatz für einen neuen Beitrag.

Was halten Sie davon?

Wir hoffen, dieser Beitrag hat Ihnen gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Weitere interessante Beiträge rund um WordPress finden Sie hier


Mehr erfahren auf dieser Webseite

Grafik: haurand.com


Infos im Blog

Mehr erfahren auf unserer Webseite

So können Sie Kontakt zu uns aufnehmen – Wir freuen uns über Ihre Anfrage

Telefon Haurand

0241 9551861

Mail haurand

info@haurand.com

Icons made by Gregor Cresnar from www.flaticon.com

Schreibe einen Kommentar

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