WordPress: Text gleichmäßig automatisch auf zwei Spalten verteilen
Bei einer WordPress-Schulung wurde mir die Frage gestellt, ob es nicht möglich sei, Text gleichmäßig auf zwei Spalten automatisch aufzuteilen. Ich musste zugeben, dass ich zunächst keine Lösung dafür hatte. Das Problem habe ich zwar schon das eine oder andere Mal gesehen, aber immer wieder aus den Augen verloren. Nach Ende der Schulung wollte ich mich aber endlich darum kümmern und habe relativ schnell eine praktikable Lösung unabhängig vom Theme für das Problem gefunden. In diesem Beitrag zeige ich das anhand des klassischen Themes GeneratePress und des Block Themes Twenty Twenty-Three.
Der Spalten-Block ist dafür nicht geeignet
Der an sich naheliegende Ansatz, für diesen Zweck den Spalten-Block zu verwenden, ist hier nicht praktikabel, weil man dann den Text manuell aufteilen muss. Je nach Breite des Geräts wird der Text dann aber auch nicht schön verteilt, sondern ist fest in die Spalte eingebunden. Insofern fällt der Spalten-Block aus.
Mit ein wenig Recherche bin ich dann auf die CSS-Eigenschaft column-count gestoßen. Mit dieser Eigenschaft habe ich die Möglichkeit, einen Text automatisch auf zwei Spalten aufzuteilen. Wenn ich zusätzlich noch eine Media Query verwende, kann ich damit auch steuern, ab wann der Text zweispaltig angezeigt werden soll.
Text im Gruppen-Block aufteilen in Spalten
Letztendlich war die Lösung also einfach: Ich verwende einen Gruppe-Block und innerhalb des Gruppen-Blocks den Absatz-Block. Dem Absatz-Block weise ich in den Block-Eigenschaften unter „Erweitert“ eine CSS-Klasse zu. In meinem Beispiel ist das die Klasse two_columns_text.
Man darf allerdings den Text nicht in verschiedene Absatzblöcke aufteilen, sondern nur mit SHIFT ENTER Zeilenumbrüche einfügen.
Das sieht dann wie folgt aus:
Im Beispiel bleibt der Text einspaltig bei einer Breite bis 719px, wenn ich die folgende CSS-Regel verwende.
Die CSS-Regel kann man bei einem klassischen Theme wie z. B. GeneratePress unter Design > Customizer > Zusätzliches CSS schreiben:
Bei einem Block Theme wie z. B. bei dem aktuellen Standard-Theme Twenty Twenty-Three gibt es seit WordPress 6.2 die Möglichkeit, CSS-Regeln nach Klick auf Design > Website-Editor der Startseite im Website-Editor zu erstellen.
/* Aufteilung Text auf 2 Spalten */
@media (min-width: 720px) {
p.two_columns_text {
column-count: 2;
}
}In dem folgenden kurzen Video kann man sehr schön sehen, wie der Text automatisch verteilt wird und wie der Breakpoint bei 720px funktioniert. In diesem Beispiel verwende ich das Standard-Theme Twenty Twenty-Three:
Info
Peter Müller hat mir als Alternative folgende CSS-Regel genannt:
.mehrspaltig {
column-width: 18rem;
column-gap: 3rem;
column-rule: 1px solid #ccc;
column-count: 2;
}In dem Fall wird keine Media Query benötigt. Eine gute Quelle dazu ist das MDN.
Wenn dieser Absatz-Block häufiger verwendet wird, ist es ratsam, dafür einen Block Pattern zu erstellen. In dem Fall muss man nicht jedes Mal die genannte CSS-Klasse in den Eigenschaften eintragen.
Fazit
Ich habe mich ehrlich gesagt gewundert, dass dieses Problem nicht mit Bordmitteln gelöst werden kann. Oder vielleicht doch? – Wenn das der Fall ist, würde ich mich über einen Kommentar freuen.
Texte können über den Absatz-Block im Gruppen-Block und einer recht einfachen CSS-Klasse durchaus „dynamisch“ zweispaltig aufgeteilt werden. Einziger Aspekt, der beachtet werden muss: Es darf logischerweise nur ein einziger Absatz-Block verwendet werden, wenn der Text wie gezeigt automatisch aufgeteilt werden soll. Innerhalb des Absatz-Blocks kann man dann einen Zeilenumbruch durch gleichzeitiges Drücken von SHIFT und ENTER erreichen.
Links und Quellen
- Die CSS-Eigenschaft
column-countunterteilt den Inhalt eines Elements in die angegebene Anzahl von Spalten:
https://developer.mozilla.org/en-US/docs/Web/CSS/column-count?retiredLocale=de - Basic concepts of multi-column layout:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol
Weitere Beiträge zum Thema
- Gestaltung von Headings (Überschriften) bei Block Themes
- Shrinked Header bei Twenty Twenty-Four
- Cover Block in WordPress 6.5
- WordPress: All-in-One WP Migration, Backup-Migration und Duplicator
- GeneratePress und theme.json: Mehr Einstellungsmöglichkeiten bei den Blöcken
Mehr erfahren auf dieser Webseite
Wir freuen uns über eine Kontaktaufnahme
Was hältst du davon?
Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.
- Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörter.
- Wenn du über unsere neuesten Beiträge informiert werden möchtest, kannst du dich gerne bei unserem Newsletter anmelden.
Beitrags-Kategorien
Allgemein (104) Anleitung (67) Block-Editor (44) CSS (10) Full Site Editing (32) Keine Anzeige (1) Plugins (28) Short News (1) Theme (21) Tipps (69) Veranstaltungen (3) WordPress (112)
Hey Hans-Gerd,
sehr schönes Tutorial!
Kleiner Hinweis: Ich glaube, in dem CSS-Snippet fehlt noch ein schließendes „}“ …
Zu der Technik: Du könntest die Absätze auch in eine Gruppe packen und der Gruppe die CSS-Klasse geben. Das CSS müsste nur geringfügig erweitert werden:
/* Aufteilung Text auf 2 Spalten */
@media (min-width: 720px) {
p.two_columns_text,
.two_columns_text p {
column-count: 2; }
}
Dann könnten auch mehrere Absätze genutzt werden.
Es gibt auch noch mehr Anpassungsmöglichkeiten:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol
Es kann eine Linie zwischen den Spalten gesetzt werden (column-rule), der Abstand kann angepasst werden (column-gap) und einzelne Abschnitte (z.b. für Zwischenüberschriften) könnten auch wieder über die Gesamtbreite gehen (column-span).
Was schade ist, dass der Editor das CSS ja nicht nutzt. Um die Mehrspaltigkeit auch im Editor zu sehen, müsste der Code auch noch dem Editor hinzugefügt werden. Aber inwieweit so ein CSS bei dem dynamischen Text sinnvoll ist? Vermutlich eine der Gründe, warum das (noch) nicht umgesetzt wurde.
Hi Torsten,
herzlichen Dank auch für Deinen umfangreichen Kommentar.
In der Tat habe ich wohl beim Kopieren die letzte geschweifte Klammer „}“ vergessen. Das habe ich gerade korrigiert. Danke für den Hinweis.
Auf den Link hatte mich auch Peter Müller schon hingewiesen. Den Link habe ich bereits in dem Info-Kasten ergänzt.
In der Tat wäre eine entsprechende Anpassung im Editor eine schöne Sache. Vielleicht kommt das ja noch. Macht aber m. E. nur dann Sinn, wenn man z. B. im Vollbildmodus arbeitet und sich das ausschalten lässt.
Bei einem Laptop würde das sonst ziemlich unschön aussehen.
Hej Hans-Gerd.
Sehr schönes Tutorial. So was habe ich gerade gesucht, deine Lösung hat mir sehr geholfen.
Ganz herzlichen Dank.
Liebe Grüße vom Bodensee
Dieter
Hallo Dieter,
freut mich, dass ich Dir damit helfen konnte.
Liebe Grüße
Hans-Gerd