WordPress: 3 Spalten anlegen

Drei Spalten anlegen

Drei Spalten in WordPress anlegen

  • In diesem Tutorial zeige ich, wie du in WordPress drei Spalten anlegst.
  • Im Beispiel habe ich das Theme Twenty Seventeen verwendet.
  • Mehrspaltigkeit funktioniert auch mit anderen Themes – und mit 2, 4, 5 oder 6 Spalten. ­čśë

Column Shortcodes installieren

Column Shortcodes

Column Shortcodes

  • Installiere das kostenlose Plugin Column Shortcodes. Quelle: Plugin-Directory von wordpress.org. Die Installation erfolgt bequem 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.

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? Hier steht’s: 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

Im Editor hat das Plugin nun den Shortcode f├╝r 3 Spalten Code platziert.

Text in drei Spalten einf├╝gen – und Bilder

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 korrigieren

Abstand der Spalten ├Ąndern

Abstand der Spalten ├Ąndern

Jetzt schau dir die drei Spalten im Frontend 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).

Spalten in Gutenberg anlegen

Mit dem Gutenberg-Editor, der ab WordPress 5 in den Core integriert wird, kannst du in jedem Text-Block Spalten per Mausklick anlegen. Allerdings funktioniert die Aufteilung im Moment (November 2017) nur mit reinem Text – ausprobiert habe ich es mit Gutenberg 1.7. Bin gespannt auf Gutenberg 2.0, vielleicht ist dann ein echtes Mehrspalten-Layout m├Âglich.

Kommentar verfassen