Creating multi-column layouts used to require HTML knowledge or a developer’s help, but not anymore. ✨
Durch unsere Tests der Inhaltsbearbeitungsfunktionen von WordPress haben wir eine benutzerfreundliche Möglichkeit gefunden, Ihre Inhalte in Spalten aufzuteilen, ohne Code anfassen zu müssen.
Diese Layouts können Ihre Beiträge leichter lesbar und visuell ansprechender machen, insbesondere wenn Sie Funktionen vergleichen, Vor- und Nachteile auflisten oder große Textblöcke organisieren.
In diesem Leitfaden stellen wir die einfachsten Methoden vor, die wir zum Hinzufügen von mehrspaltigen Inhalten zu Ihren WordPress-Beiträgen entdeckt haben.
💡Schnelle Antwort: Wie fügt man mehrspaltige Inhalte in WordPress hinzu?
Hier ist eine kurze Übersicht über die Methoden, die wir zum Hinzufügen von Spalten zu Ihren WordPress-Beiträgen und -Seiten behandeln werden.
- Verwendung des Block-Editors: Die einfachste Methode ist die Verwendung des integrierten „Spalten“-Blocks, um Layouts ohne Plugins zu erstellen.
- Verwendung des klassischen Editors: Für Benutzer, die noch den älteren Editor verwenden, zeigen wir Ihnen, wie Sie das Plugin „Column Shortcodes“ verwenden, um ein Rasterlayout hinzuzufügen.
Warum mehrspaltige Inhalte in WordPress hinzufügen?
Der Hauptgrund für das Hinzufügen von mehrspaltigen Inhalten ist, Ihre Beiträge besser lesbar und visuell organisiert zu gestalten, was dazu beiträgt, die Leser bei der Stange zu halten.
Während einspaltige Layouts online üblich sind, sind Rasterlayouts ein leistungsstarkes Werkzeug zur Verbesserung der Benutzererfahrung. Hier sind die wichtigsten Vorteile der Verwendung eines mehrspaltigen Layouts in WordPress:
- Verbessert die Lesbarkeit: Genau wie Zeitungen und Magazine brechen Spalten lange Textzeilen auf, wodurch Ihre Inhalte für Besucher leichter zu lesen und schnell zu überfliegen sind.
- Bessere Organisation: Sie eignen sich perfekt, um Informationen nebeneinander zu organisieren. Dies ist ideal für Produktvergleiche, Vor- und Nachteile-Listen oder die Anzeige von Bildern neben Textbeschreibungen.
- Hebt wichtige Informationen hervor: Sie können ein Spaltenlayout verwenden, um die Aufmerksamkeit des Lesers auf die wichtigsten Teile Ihres Artikels zu lenken.
- Fördert das Engagement: Indem Sie Ihre Inhalte leichter verdaulich machen, schaffen Sie ein besseres Benutzererlebnis. Dies kann Besucher dazu ermutigen, mehr Zeit auf Ihrer Website zu verbringen.
Das gesagt, sehen wir uns an, wie Sie Inhalte mit mehreren Spalten im Block- und klassischen Editor hinzufügen können. Sie können einfach auf die folgenden Links klicken, um zu der Methode zu springen, die Sie verwenden möchten:
- Inhalte mit mehreren Spalten im WordPress Block Editor hinzufügen – Der einfache Weg
- Hinzufügen mehrerer Spalten im alten WordPress Classic Editor
- Häufig gestellte Fragen zum Hinzufügen von Mehrspalteninhalten in WordPress
Inhalte mit mehreren Spalten im WordPress Block Editor hinzufügen – Der einfache Weg
Das Erstellen von Inhalten in mehreren Spalten, auch bekannt als Grid-Spalten-Inhalte in WordPress, ist jetzt einfach, da es eine Standardfunktion ist. Der WordPress Block Editor enthält einen Spalten-Block.
Um ein Layout mit mehreren Spalten hinzuzufügen, müssen Sie einen neuen Beitrag erstellen oder einen bestehenden bearbeiten. Sobald Sie sich im Inhaltseditor befinden, klicken Sie auf das Symbol „+“ oben, um einen Block hinzuzufügen.
Als Nächstes müssen Sie den Spaltenblock auf der Registerkarte „Design“ auswählen.
Als Nächstes müssen Sie die Anzahl der Spalten und Layouts auswählen, die Sie für Ihre Blog-Beiträge verwenden möchten.
WordPress zeigt Ihnen verschiedene Optionen zur Auswahl. Sie können zum Beispiel ein 50/50-Spaltenlayout wählen, ein 33/66-Layout verwenden und mehr.
Nachdem Sie ein Layout ausgewählt haben, können Sie Blöcke zu Ihren Spalten hinzufügen. Der Spalten-Block ermöglicht es Ihnen, Blöcke innerhalb jeder Spalte hinzuzufügen.
Sie können zum Beispiel den Absatzblock auswählen und Inhalte hinzufügen.
You will also be able to see the block settings in the right column of the post-edit screen in the settings panel. Here, you can edit the width of the columns.
Zusätzlich zum Text können Sie in WordPress-Spalten auch Bilder hinzufügen und Videos einbetten.
Bewegen Sie einfach die Maus über eine der Spalten und klicken Sie auf die Schaltfläche „+“, um einen Block hinzuzufügen. Sie können auch einen Block hinzufügen, indem Sie „/“ und dann den Blocknamen eingeben.
Zum Beispiel haben wir ein Bild in eine Spalte und etwas Text in die andere Spalte eingefügt.
Hinzufügen mehrerer Spalten im alten WordPress Classic Editor
Wenn Sie Ihr WordPress noch nicht auf Gutenberg aktualisiert haben und immer noch den Classic Editor verwenden, müssen Sie ein separates Plugin installieren, um ein Rasterspaltenlayout zu erstellen.
Installieren und aktivieren Sie zuerst das Column Shortcodes Plugin. Detaillierte Anweisungen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren eines WordPress-Plugins.
📌 Haftungsausschluss: Beachten Sie, dass das Plugin nicht mit der neuesten Version von WordPress getestet wurde. Als wir es jedoch auf unserer Demowebsite getestet haben, funktionierte es einwandfrei. Wenn Sie sich immer noch unsicher sind, lesen Sie unseren Anfängerleitfaden zur Verwendung veralteter Plugins.
Nach der Aktivierung können Sie einen neuen Beitrag erstellen oder einen alten bearbeiten. Sobald Sie sich im klassischen Editor befinden, klicken Sie einfach auf die Schaltfläche „[ ]“ in der Symbolleiste.
Das Plugin zeigt Ihnen nun eine Liste von Spalten-Shortcodes für Ihren Blogbeitrag an.
You can choose any layout you would like to add to your WordPress blog. There are also options to edit the column padding.
Sobald Sie einen Shortcode ausgewählt haben, erscheint er automatisch im klassischen Editor. Zum Beispiel haben wir für dieses Tutorial den Shortcode „eine Hälfte“ ausgewählt.
Sie können dann Ihren Inhalt zwischen den Shortcodes eingeben.
Klicken Sie anschließend erneut auf das Shortcode-Symbol „[ ]“, um einen weiteren Spalten-Shortcode hinzuzufügen.
Fügen wir den Shortcode 'eine Hälfte (letzte)' hinzu, um zwei Spalten nebeneinander anzuzeigen. Von hier aus müssen Sie nur noch Ihren Inhalt zur anderen Spalte hinzufügen.
After that, you can preview your post and publish it.
So sah es auf unserer Testseite aus.
Häufig gestellte Fragen zum Hinzufügen von Mehrspalteninhalten in WordPress
Hier sind einige Fragen, die unsere Leser häufig zum Hinzufügen von Mehrspalteninhalten auf ihren Websites gestellt haben:
Wie sehen WordPress-Spalten auf Mobilgeräten aus?
WordPress erledigt dies automatisch für Sie. Auf kleineren Bildschirmen wie Mobiltelefonen werden die Spalten vertikal übereinander gestapelt.
Dieses responsive Design stellt sicher, dass Ihre Inhalte unabhängig vom Gerät immer lesbar und benutzerfreundlich sind.
Kann ich die Breite einzelner WordPress-Spaltenblöcke anpassen?
Ja. Um die Breite anzupassen, klicken Sie, um einen einzelnen Spaltenblock (nicht den übergeordneten „Spalten“-Container) auszuwählen. In der Seitenleiste mit den Blockeinstellungen auf der rechten Seite können Sie einen Breitenwert angeben.
Sie können Prozentsätze (%), Pixel (px) und andere Web-Einheiten für präzise Kontrolle verwenden.
Was ist, wenn ich erweiterte Layoutoptionen benötige?
Der Standard-Spaltenblock ist für die meisten einfachen Layouts hervorragend geeignet. Wenn Sie jedoch mehr Kontrolle über Abstände, Ausrichtung, responsive Einstellungen benötigen oder komplexere Gitterdesigns erstellen möchten, ist ein Page-Builder-Plugin die beste Lösung.
Wir empfehlen die Verwendung eines Tools wie SeedProd für vollständige Drag-and-Drop-Designfreiheit.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Inhalte mit mehreren Spalten in WordPress-Beiträgen und -Seiten hinzufügen. Möglicherweise möchten Sie auch unseren einfachen Leitfaden zum Hinzufügen einer Checkliste für Blogbeiträge zum WordPress-Editor und unser Tutorial zum Hinzufügen von Inhaltsvorlagen in WordPress sehen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Jiří Vaněk
Großartig, endlich weiß ich auch, wie es in Gutenberg geht. Das war eigentlich der Grund, warum ich zu Elementor gewechselt bin, weil ich Gutenberg nicht sehr intuitiv fand. Vielleicht war ich einfach zu faul, es zu lernen. In Elementor habe ich diese Funktion jedoch sofort verstanden und gefunden. Jetzt weiß ich auch, wie man mit Gutenberg umgeht :). Danke!
Ralph
Danke! Mit Ihrer Anleitung war es wirklich einfach. Die Verwendung von 3 Spalten wird einige meiner Inhalte definitiv besser aussehen lassen als eine langweilige Textwand.
WPBeginner Support
Schön, dass unser Leitfaden helfen konnte!
Admin
Nishant Kumar
Wirklich sehr nützlich. Ich weiß nicht, wie man einen Spaltenabschnitt in einem WordPress-Blog hinzufügt. Jetzt habe ich es verstanden.
WPBeginner Support
Glad our guide could help
Admin
Matt
Hallo – danke für diesen Beitrag, wirklich hilfreicher Beitrag. Eine schnelle Frage: Wird der Text automatisch den einzelnen (zwei) Spalten zugewiesen, um sicherzustellen, dass die Spalten auf der Seite gleich hoch sind, oder ist dies etwas, das Sie beim Texteingeben testen/verwalten müssen?
WPBeginner Support
You would need to manually ensure your content is the same or similar length if you wanted that.
Admin
Sir Newton
Bitte, wie kann ich meine E-Commerce-Website so gestalten, dass sie auf Mobilgeräten eine Produktansicht mit zwei Spalten anzeigt.
Danke
WPBeginner Support
Sie sollten sich beim Support Ihres Themes oder des von Ihnen verwendeten E-Commerce-Plugins erkundigen, um das Styling Ihrer Shop-Seite zu ändern.
Admin
Stuart
Hallo – ich brauche 11 Spalten. Gibt es eine Möglichkeit, das Maximum (10) zu überschreiten, das ich ermittelt habe?
WPBeginner Support
Wir haben derzeit keine empfohlene Methode, um 11 Spalten breit zu werden. Abhängig davon, was Sie anzeigen möchten, sollten Sie vielleicht in Erwägung ziehen, stattdessen eine Tabelle anstelle von Spalten zu erstellen.
Admin
Caite Adamek
Gibt es eine Möglichkeit, die Spalten automatisch zu übertragen? Als ich meine 2 Spalten eingerichtet habe, habe ich die Bilder in die 1. Spalte und dann den Text in die 2. Spalte gesetzt. Mir ist aufgefallen, dass die mobile Version die 2 Spalten nicht nebeneinander anzeigen kann, sodass zuerst die Bilder und dann der Text angezeigt werden. Ich möchte, dass zuerst der Text und dann die Bilder angezeigt werden. Muss ich alles neu eingeben oder gibt es eine clevere Möglichkeit, den Inhalt der 2 Spalten zu vertauschen?
WPBeginner Support
Not at the moment, you could create a 2 column area beneath where you have it currently and place the content how you want it there then delete the original.
Admin
Kimberly Kelley
Bei Verwendung der Mehrspaltenfunktion (2 Spalten) überlappen sich die Videos. Gibt es eine Möglichkeit, die maximale Breite der Videos anzupassen, da ich sie nur über die URL hinzufügen kann und nicht über den Einbettungscode.
WPBeginner Support
Möglicherweise möchten Sie überprüfen, ob sich die Videos überlappen, wenn sie nicht im Editor angezeigt werden. Andernfalls könnten Sie im Abschnitt „Erweiterte CSS“ nachsehen und die Breite mit diesem Selektor festlegen: https://www.wpbeginner.com/glossary/css/
Admin
Nicole
Gibt es eine Möglichkeit, Elemente in einer Spalte mit neuen Blöcken/dem Gutenberg-Editor vertikal zu zentrieren? Ich möchte zum Beispiel ein vertikal zentriertes Bild links und Text rechts. Sagen wir 30 Zeilen Text und ein Bild mit 200 Pixel Höhe – gibt es einen einfacheren Weg, als manuell Abstandhalterblöcke einzufügen und zu skalieren?
WPBeginner Support
Für das, was Sie anscheinend möchten, sollten Sie eher den Medien- und Textblock als den Spaltenblock verwenden.
Admin
Rob Tait
Hi
How do I write in 1 column and then 2 columns for next paragraph and then back to 1 column for the 3rd p/graph?
Jede Hilfe wird sehr geschätzt?
Danke
Rob
Ashish
Warum können wir nicht einfach Elementor oder ein ähnliches Page-Builder-Plugin verwenden? Es ist viel einfacher zu bedienen und bietet so viele zusätzliche Funktionen.
Dimiter Kirov
Dieses Plugin wurde seit 3 Jahren nicht aktualisiert und funktioniert obendrein nicht mit dem Gutenberg-Plugin
Jenny
Hallo,
Ich habe versucht, Spalten zu einer meiner Seiten hinzuzufügen, aber die Schaltfläche "Erweiterte Spalte" wurde nicht angezeigt. Ich habe meine Plugins überprüft und es wurde angezeigt, dass es installiert ist. Wissen Sie, was das Problem sein könnte?
Vielen Dank!
Jenny
Rob Tait
Sie müssen einen erweiterten visuellen Editor wie TIny MCE installieren, um den Button zu sehen. Er wird nicht im Standard-Visual-Editor angezeigt. Ich hatte gerade dasselbe Problem, aber jetzt wird er nach der Installation des oben genannten kostenlosen Tools angezeigt.
Ich hoffe, das hilft
Rob
Dennis
Großartig. Genau das, was ich gesucht habe, und endlich jemand, der alles Schritt für Schritt erklären kann.
Heather
Ich habe das Plugin installiert und aktiviert. Es wird als „aktiviert“ angezeigt. Trotzdem gibt es keinen Button. Wie kann ich das beheben? Ich weiß bereits, wie man ein Plugin installiert, daher ist diese Lösung nicht anwendbar.
Kirk
Ich habe das Plugin mit einem einfachen kostenlosen Theme installiert, und die Spalten-Schaltfläche wurde in meinem Seiten-Editor nie angezeigt. Ich weiß, dass Sie nicht der Ersteller des Plugins sind, ich wollte nur unsere Erfahrung teilen.
om zho
Beim Einfügen aus dem Texteditor ist der Textabstand seltsam, da es keine Auswahl für „sauberes Format“ für erweiterte WP-Spalten gibt. Wie können Sie das beheben?
Martine S.
Hey, das klingt super! Aber wie sieht das auf Handys aus? Ich benutze ein ähnliches Plugin, um zwei Spalten zu haben, eine für Norwegisch und eine für Englisch. Aber wenn Leute meinen Blog über das Handy lesen, kommt die zweite Spalte direkt nach der ersten, sodass es wie ein voller Text aussieht – in zwei verschiedenen Sprachen!
Joe Nelo
Welches Plugin verwenden Sie, um zwei Spalten Text anzuzeigen? Ich versuche dasselbe für Englisch und Esperanto.
Elizabeth
Wie aktiviere ich das Plugin??
WPBeginner Support
Hallo Elizabeth,
Bitte sehen Sie sich unsere Schritt-für-Schritt-Anleitung an zur Installation eines WordPress-Plugins.
Admin
PB
Gibt es eine Möglichkeit, sicherzustellen, dass der Text in diesen Spalten als Liste angezeigt wird, d. h. mit harten Zeilenumbrüchen zwischen den Elementen und nicht als ein einziger Textblock?
Vielen Dank im Voraus für Ihren Rat
Steve Elliott
Gibt es eine Möglichkeit, diesen Spalten eine Hintergrundfarbe zu geben?
Bhagyashree barlingay
I cannot copy/paste material that I have already typed , into these columns.
Naveed
Ich benutze WordPress Version 4.5, aber dieses Plugin ist nicht mit meinem Theme kompatibel. Kann ich dieses Plugin für mein Theme verwenden??
ik
Können Sie jedem Spalten Bilder hinzufügen? Oder können Sie jedem Spalten Aktionsschaltflächen hinzufügen?
WPBeginner Support
Ja.
Admin
Kate
Spalten funktionieren, aber wenn ich versuche, ein VIDEO in Spalten einzubetten, wird nur der Text des Codes angezeigt...
Daniel Speraw
Es sieht gut aus, wenn Spalten zum Beitrag hinzugefügt werden, aber wenn ich es veröffentlicht sehe, ist es wieder auf 1 zentrierte Spalte zurückgefallen. Ich habe es mehrmals und in zwei Browsern versucht. Irgendwelche Gedanken?
Dies ist mit Abstand das einfachste Plugin. Ich möchte es WIRKLICH benutzen.
Vielen Dank,
Daniel
Meshellklip
Können Sie Bilder zu jeder Spalte hinzufügen? Oder können Sie Aktionsschaltflächen zu jeder Spalte hinzufügen?
Sri Harsha Chilakapati
Hallo,
Meine Website verwendet das responsive Customizr-Theme, und ich möchte diese Responsivität nicht verlieren. Kann ich mit diesem Plugin responsive Spalten hinzufügen?
Chris Xphstos
Ηι!
Gibt es eine Möglichkeit, ein Layout mit Spalten zu präsentieren, aber nicht einen Beitrag mit 2-3-4 Spalten usw.?
Jede Spalte auf einer Seite wird ein separater Beitrag sein. Etwas wie das Blog-Layout von Joomla...
WPBeginner Support
Dafür müssten Sie sich ein mehrspaltiges WordPress-Theme ansehen, davon gibt es viele.
Admin
Karen
Thank you! I’ve been wanting to learn how to do this for a while now – all good now! xx
Debra Torres
Das ist genau das, was ich brauchte! Ich habe versucht, Tabellen für Spalten zu verwenden und war so frustriert. Danke, danke, danke!
Mark Corder
Ich muss sagen – wenn Sie regelmäßig mehrere Spalten verwenden müssen, sieht das wie eine großartige Lösung aus, auch wenn Sie HTML/CSS kennen! Mir gefällt, dass sie einen Breakpoint in den Optionen für die Anpassung an responsive Designs aufgenommen haben...