Das Erstellen von Layouts mit mehreren Spalten erforderte früher HTML-Kenntnisse oder die Hilfe eines Entwicklers, aber das ist jetzt vorbei. ✨
Durch unsere Tests der Inhaltsbearbeitungsfunktionen von WordPress haben wir eine benutzerfreundliche Methode gefunden, um Ihre Inhalte in Spalten aufzuteilen, ohne Code anfassen zu müssen.
Diese Layouts können Ihre Beiträge leichter lesbar und optisch 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 entdeckt haben, um Inhalte mit mehreren Spalten in Ihre WordPress-Beiträge einzufügen.
💡Schnelle Antwort: So fügen Sie Inhalte mit mehreren Spalten in WordPress ein
Hier ist eine kurze Übersicht über die Methoden, die wir für das 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 Laune zu halten.
Während einspaltige Layouts online üblich sind, sind Rasterlayouts ein mächtiges Werkzeug zur Verbesserung der Benutzererfahrung. Hier sind die wichtigsten Vorteile der Verwendung eines mehrspaltigen Layouts in WordPress:
- Verbessert die Lesbarkeit: Genau wie Zeitungen und Zeitschriften 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.
- Steigert das Engagement: Indem Sie Ihre Inhalte leichter verdaulich machen, schaffen Sie eine bessere Benutzererfahrung. Dies kann Besucher dazu ermutigen, mehr Zeit auf Ihrer Website zu verbringen.
Lassen Sie uns nun sehen, wie Sie mehrspaltige Inhalte im Block- und klassischen Editor hinzufügen können. Sie können einfach auf die untenstehenden Links klicken, um zu der Methode zu springen, die Sie verwenden möchten:
Mehrspaltige Inhalte im WordPress Block-Editor hinzufügen – Der einfache Weg
Das Erstellen von mehrspaltigen Inhalten, auch bekannt als Rasterspalten-Inhalte in WordPress, ist jetzt einfach, da es eine Standardfunktion ist. Der WordPress Block-Editor enthält einen Spalten-Block.
Um ein mehrspaltiges Layout 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 Spalten-Block im Tab „Design“ auswählen.
Als Nächstes müssen Sie die Anzahl der Spalten und Layouts auswählen, die Sie für Ihren Blogbeitrag 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 in jeder Spalte hinzuzufügen.
Sie können zum Beispiel den Absatz-Block auswählen und Inhalte hinzufügen.
Sie können auch die Blockeinstellungen in der rechten Spalte des Beitragsbearbeitungsbildschirms im Einstellungsbereich sehen. Hier können Sie die Breite der Spalten bearbeiten.
Zusätzlich zu Text können Sie in WordPress-Spalten auch Bilder 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 in eine Spalte ein Bild und in die andere Spalte Text eingefügt.
Mehrere Spalten im alten WordPress Classic Editor hinzufügen
Wenn Sie Ihr WordPress noch nicht auf Gutenberg aktualisiert haben und immer noch den Classic Editor verwenden, müssen Sie ein separates Plugin für die Erstellung eines Spaltenlayouts installieren.
Installieren und aktivieren Sie zuerst das Column Shortcodes Plugin. Befolgen Sie für detaillierte Anweisungen unsere Schritt-für-Schritt-Anleitung, wie Sie ein Plugin in WordPress installieren.
📌 Haftungsausschluss: Beachten Sie, dass das Plugin nicht mit der neuesten Version von WordPress getestet wurde. Als wir es jedoch auf unserer Demowebsite getestet haben, hat es gut funktioniert. Wenn Sie sich immer noch unsicher sind, lesen Sie unseren Leitfaden für Anfänger 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.
Sie können jedes Layout auswählen, das Sie zu Ihrem WordPress-Blog hinzufügen möchten. Es gibt auch Optionen, um den Spaltenabstand zu bearbeiten.
Sobald Sie einen Shortcode ausgewählt haben, erscheint er automatisch im klassischen Editor. Zum Beispiel haben wir für dieses Tutorial den Shortcode „one half“ 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 „one half (last)“ hinzu, um zwei Spalten nebeneinander anzuzeigen. Von hier aus müssen Sie nur noch Ihren Inhalt zur anderen Spalte hinzufügen.
Danach können Sie Ihre Vorschau anzeigen und Ihren Beitrag veröffentlichen.
So sah es auf unserer Testseite aus.
Häufig gestellte Fragen zum Hinzufügen von mehrspaltigen Inhalten 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 das automatisch für Sie. Auf kleineren Bildschirmen wie Mobiltelefonen werden die Spalten vertikal übereinander gestapelt.
Dieses reaktionsschnelle 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 auszuwählen (nicht den übergeordneten „Columns“-Container). 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 eine präzise Steuerung verwenden.
Was ist, wenn ich erweiterte Layoutoptionen benötige?
Der Standard-Spaltenblock eignet sich hervorragend für die meisten einfachen Layouts. Wenn Sie jedoch mehr Kontrolle über Abstände, Ausrichtung, reaktionsschnelle Einstellungen benötigen oder komplexere Rasterdesigns 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 Mehrspalteninhalte in WordPress-Beiträgen und -Seiten hinzufügen. Möglicherweise möchten Sie auch unseren einfachen Leitfaden lesen, wie Sie eine Checkliste für Blogbeiträge im WordPress-Editor hinzufügen, und unser Tutorial, wie Sie Inhaltsvorlagen in WordPress hinzufügen.
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, jetzt weiß ich endlich, wie das auch 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
Wir freuen uns, dass unser Leitfaden helfen konnte!
Admin
Nishant Kumar
Wirklich sehr nützlich. Ich wusste nicht, wie man eine Spaltensektion 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 jeder der (zwei) Spalten zugewiesen, um sicherzustellen, dass die Spalten auf der Seite die gleiche Höhe haben, oder ist dies etwas, das Sie beim Texteingeben testen/verwalten müssen?
WPBeginner Support
Sie müssten manuell sicherstellen, dass Ihr Inhalt die gleiche oder eine ähnliche Länge hat, wenn Sie das wollten.
Admin
Sir Newton
Bitte, wie kann ich meine E-Commerce-Website so gestalten, dass sie auf Mobilgeräten eine zweispaltige Produktansicht anzeigt.
Danke
WPBeginner Support
Sie sollten sich an den Support Ihres Themes oder das von Ihnen verwendete E-Commerce-Plugin wenden, 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?
WPBeginner Support
Wir haben derzeit keine empfohlene Methode für 11 Spalten. Je nachdem, was Sie anzeigen möchten, sollten Sie 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 erste Spalte und dann den Text in die zweite 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 tauschen?
WPBeginner Support
Im Moment nicht, Sie könnten einen 2-Spalten-Bereich unterhalb des aktuellen Bereichs erstellen und den Inhalt dort platzieren, dann den ursprünglichen löschen.
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 URL und nicht über Einbettungscode hinzufügen kann.
WPBeginner Support
Sie sollten prüfen, ob sich die Videos beim Betrachten außerhalb des Editors überlappen, andernfalls könnten Sie im erweiterten CSS-Bereich 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 eine einfachere Möglichkeit, als manuell Spacer-Blöcke einzufügen und zu dimensionieren?
WPBeginner Support
Für das, was Sie anscheinend möchten, sollten Sie eher den Block „Medien & Text“ als den Block „Spalten“ verwenden.
Admin
Rob Tait
Hallo
Wie schreibe ich in 1 Spalte und dann 2 Spalten für den nächsten Absatz und dann zurück zu 1 Spalte für den 3. Absatz?
Jede Hilfe wird sehr geschätzt?
Danke
Rob
Ashish
Warum können wir nicht einfach Elementor oder ein solches Page-Builder-Plugin verwenden? Es ist viel einfacher zu bedienen mit so vielen zusätzlichen Funktionen.
dimiter kirov
Dieses Plugin wurde seit 3 Jahren nicht aktualisiert und zu allem Überfluss funktioniert es nicht mit dem Gutenberg-Plugin
Jenny
Hallo,
Ich habe versucht, Spalten zu einer meiner Seiten hinzuzufügen, und der Button für erweiterte Spalten wurde nicht angezeigt. Ich habe meine Plugins überprüft und es hieß, es sei installiert. Wissen Sie, was das Problem sein könnte?
Danke!
Jenny
Rob Tait
Sie müssen einen erweiterten visuellen Editor wie TIny MCE installieren, um den Button zu sehen. Er wird nicht im standardmäßigen visuellen Standardeditor angezeigt. Ich hatte gerade dasselbe Problem, aber es wird jetzt angezeigt, nachdem ich das oben Genannte installiert habe, das kostenlos ist.
Ich hoffe, das hilft
Rob
Dennis
Großartig. Genau das, wonach 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 der Spalten-Button erschien nie in meinem Seiten-Editor. Ich weiß, dass Sie nicht der Ersteller des Plugins sind, ich wollte nur unsere Erfahrung teilen
om zho
Beim Einfügen aus TextEdit ist der Textabstand seltsam, da es keine „Clean Format“-Auswahl für Advance WP Column gibt. Wie können Sie das beheben?
Martine S.
Hey, das klingt großartig! Aber wie wird es auf Handys aussehen? 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 Spalte, sodass es wie ein voller Text aussieht – in zwei verschiedenen Sprachen!
Joe Nelo
Welches Plugin verwenden Sie, um zwei Textspalten anzuzeigen? Ich versuche dasselbe für Englisch und Esperanto.
Elizabeth
Wie aktiviere ich das Plugin??
WPBeginner Support
Hallo Elizabeth,
Bitte beachten Sie unsere Schritt-für-Schritt-Anleitung zum Installieren 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 Block von fortlaufendem Text?
Vielen Dank im Voraus für Ihren Rat
Steve Elliott
Gibt es eine Möglichkeit, diesen Spalten eine Hintergrundfarbe zu geben?
Bhagyashree barlingay
Ich kann Material, das ich bereits eingegeben habe, nicht in diese Spalten kopieren/einfügen.
Naveed
Ich verwende 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 Bilder zu jeder Spalte hinzufügen? Oder können Sie Aktionsschaltflächen zu jeder Spalte 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ückgesetzt. Ich habe es mehrmals und in zwei Browsern versucht. Irgendwelche Gedanken?
Dies ist mit Abstand das einfachste Plugin. Ich möchte es WIRKLICH nutzen.
Vielen Dank,
Daniel
Meshellklip
Kannst du Bilder zu jeder Spalte hinzufügen? Oder kannst du 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
Hallo!
Gibt es eine Möglichkeit, ein Layout mit Spalten darzustellen, aber nicht einen Beitrag mit 2-3-4 Spalten usw.?
Jede Spalte auf einer Seite soll ein separater Beitrag sein. So etwas wie das Blog-Layout von Joomla...
WPBeginner Support
Dafür solltest du dir ein mehrspaltiges WordPress-Theme ansehen, davon gibt es viele.
Admin
Karen
Danke! Ich wollte schon seit einer Weile lernen, wie das geht – jetzt ist alles gut! xx
Debra Torres
Das ist genau das, was ich gebraucht habe! Ich habe versucht, Tabellen für Spalten zu verwenden und war so frustriert. Danke, danke, danke!
Mark Corder
Ich muss sagen – wenn man regelmäßig mehrere Spalten verwenden muss, ist das eine großartige Lösung, selbst wenn man HTML/CSS kann! Mir gefällt die Tatsache, dass sie einen Breakpoint in den Optionen für die Anpassung an responsive Designs aufgenommen haben...