WordPress: Spalten anlegen

Drei Spalten anlegen
Drei Spalten in WordPress anlegen
  • In diesem Tutorial zeige ich, wie du in WordPress Spalten anlegst – mit zwei verschiedenen Methoden:
  • WordPress-Spalten mit Column Shortcodes,
  • WordPress-Spalten mit Gutenberg

WordPress-Spalten mit Column Shortcodes

Column Shortcodes
Column Shortcodes
  • Installiere das kostenlose Plugin Column Shortcodes. Die Installation erfolgt im Backend über Plugins  > Installieren.
  • Aktiviere Column Shortcodes.
  • Lege einen neuen Beitrag oder eine neue Seite an – oder bearbeite einen existierenden Beitrag oder eine existierende Seite.
Kaufmann und Kauffrau im E-Commerce
Ein bisschen Werbung in eigener Sache: Kaufmann und Kauffrau im E-Commerce: Das Handbuch für Ausbildung und Beruf. Von Bernd Schmitt.

Shortcode-Button klicken

Shortcode-Button
Der Shortcode-Button

Nach der Aktivierung von Column Shortcodes findest du im Editor rechts neben Medien einfügen den Shortcode-Button, du erkennst ihn an den beiden eckigen Klammern. Klicke auf den Button, um Shortcodes für die Erzeugung von Spalten abzurufen.

PS: Was ist überhaupt ein Shortcode? Tutorial: WordPress Shortcodes.

Shortcode für drei Spalten erzeugen

Shortcode Spalten in WordPress
Drei Spalten in WordPress

Im Beispiel sollen drei Spalten angelegt werden. Klicke dazu in Column Shortcodes Folgendes an:

  • eine von drei – den Shortcode für die erste Spalte
  • eine von drei – den Shortcode für eine weitere Spalte
  • eine von drei (letzte) – den Shortcode für die letzte Spalte

Jetzt hat das Plugin den Shortcode für 3 Spalten Code platziert.

Text und Bilder in drei Spalten

Shortcode für drei Spalten
Shortcode für drei Spalten

Hinweis: Bei dir steht der Code nebeneinander, ich habe ihn nur etwas übersichtlicher angeordnet. Jetzt schreibe deine Texte und füge Bilder ein. Platziere die Inhalte zwischen den öffnenden und schließenden Shortcode-Tags. Beispiel:

  1. [one_third] Text und Bild für erste Spalte [/one_third]
  2. [one_third] Text für zweite Spalte [/one_third]
  3. [one_third] Bild für dritte Spalte [/one_third_last]

Spalten-Abstände anpassen

Abstand der Spalten ändern
Abstand der Spalten ändern

Jetzt speichere deinen Beitrag (oder deine Seite) und schau dir die drei Spalten in der Besucheransicht an. Passt alles, oder sind die Abstände zwischen den Spalten zu gering? Falls du unzufrieden bist:

  1. Klicke noch einmal auf den Shortcode-Button
  2. Rechts findest du Spalten Innenabstand (Optional)
  3. Darunter sind 4 Eingabefelder – oben/rechts/unten/links – zur Anpassung der Innenabstände, dem Padding. Voreingestellt ist überall der Wert 0.
  4. Tipp: Gib Werte zwischen 5 und 10 ein, um die Abstände zu vergrößern – oder Minuswerte zur Verkleinerung.
  5. Klicke links auf den Shortcode eine von drei. Deine Änderung gilt exakt für diesen Shortcode.
  6. Damit alles symmetrisch bleibt: Gib dieselben Werte nochmal ein und klicke auf den Shortcode eine von drei (letzte).
Kaufmann und Kauffrau im E-Commerce
Ein bisschen Werbung in eigener Sache: Kaufmann und Kauffrau im E-Commerce: Das Handbuch für Ausbildung und Beruf. Von Bernd Schmitt.

WordPress-Spalten mit Gutenberg

Das war die alte Methode. In Zukunft, schätzungsweise ab Frühjahr 2019,  musst du nämlich kein Plugin mehr installieren, um Spalten in WordPress zu erzeugen. 😉 Wenn du den Gutenberg-Editor installierst, kannst du das jetzt schon ausprobieren.

Mehrere Textspalten in Gutenberg
Mehrere Textspalten in Gutenberg – ohne Plugin, einfach per Mausklick
  • Mit dem Gutenberg-Editor, der ab WordPress 5 in den Core kommt, legst du Spalten per Mausklick an.
  • Wähle dazu den Block Layout-Elemente > Spalten. Allerdings funktionieren die Spalten für Blöcke, die keine Textblöcke sind, im Moment (September 2018) nur als Beta.

Blöcke in Spalten anordnen

Spalten in WordPress
Spalten in WordPress. Wenn du den Spalten-Block öfter verwendest, erscheint er in der Vorauswahl der Blöcke.

Um nicht nur Text, sondern auch Buttons, Listen, Bilder oder einen anderen Block in Spalten anzuordnen, gehst du in zwei Schritten vor:

  1. Einen Spaltenblock einfügen
  2. Den gewünschten Block in die Spalte einfügen
Spalten in WordPress
Zwei Spalten in WordPress. In jede Spalte kann nun ein Gutenblock eingefügt werden.

Im Bild oben wurden zwei Spalten angelegt. In jede dieser Spalten kann nun ein Block eingefügt werden. Achtung: Diese Funktion ist noch Beta. Es ist mir nicht gelungen, Spalten zu verschachteln.