Spaltenlayouts

Kleiner Leitfaden zur Erstellung von Spaltenlayouts

Die folgenden Spaltenlayout-Beispiele können in WordPress auf dieser Seite einfach als Vorlagen für das eigene Layout verwendet werden. Dazu muss einzig der ausgesuchte Spaltenlayout-Text in WordPress auf der Seite »Spaltenlayouts« herauskopiert und an der gewünschten Stelle in WordPress (in Seiten oder Beiträgen) platziert werden.

Die Grundsätzliche Herangehensweise ist die bildliche Vorstellung eines Spaltenlayouts. Im Texteditor in WordPress (beispielsweise bei Seiten und Beiträgen das »große« Eingabefeld) werden alle Inhalte einfach Zeile für Zeile heruntergeschrieben. Es wird mit der ersten Spalte gestartet und endet mit der letzten Spalte bzw. mit einem abschließenden Shortcode (eine selbsterklärende WordPress Funktion innerhalb einer offenen und geschlossenen, eckigen Klammer).

Folgende Shortcodes bzw. Spaltenlayouts sind möglich:

  • 2-Spalten-Layout (jeweils 50% der Seitenbreite)
  • 2-Spalten-Layout (66% und 33% Seitenbreite)
  • 2-Spalten-Layout (33% und 66% Seitenbreite)
  • 2-Spalten-Layout (75% und 25% Seitenbreite)
  • 2-Spalten-Layout (75% und 25% Seitenbreite)
  • 3-Spalten-Layout (jeweils 33% der Seitenbreite)
  • 3-Spalten-Layout (25%, 50% und 25% Seitenbreite)
  • 3-Spalten-Layout (25%, 25% und 50% Seitenbreite)
  • 3-Spalten-Layout (50%, 25% und 25% Seitenbreite)
  • 4-Spalten-Layout (jeweils 25% der Seitenbreite)

Es folgen die passenden Beispiele der oben genannten Spaltenlayouts

Diese Shortcode Beispiele können aus WordPress auf der bearbeitbaren Seite »Spaltenlayouts« herauskopiert, angepasst und nach Wunsch an anderer Stelle auf der Website eingebunden werden:

Inhalt 50%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.

Inhalt 50%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.



Inhalt 33%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.

Inhalt 33%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.

Inhalt 33%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.



Inhalt 66%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.

Inhalt 33%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.



Inhalt 33%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.

Inhalt 66%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.



Inhalt 25%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.

Inhalt 25%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.

Inhalt 25%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.

Inhalt 25%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.



Inhalt 25%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.

Inhalt 50%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.

Inhalt 25%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.



Inhalt 25%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.

Inhalt 25%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.

Inhalt 50%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.



Inhalt 50%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.

Inhalt 25%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.

Inhalt 25%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.



Inhalt 25%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.

Inhalt 75%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.



Inhalt 75%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.

Inhalt 25%

Um eine erste und somit beispielhafte Darstellung dieser unterschiedlichen Spaltenbreiten präsentieren zu können, wurde dieser Fließtext erstellt.