twoColumnText — 50/50

Zwei reine Textspalten

Zwei gleichwertige Textspalten nebeneinander, jede mit eigener Überschrift, eigenem Fließtext und eigenen Buttons. Kein Bild, keine Box, kein eigener Hintergrund — dieses Element ist der schlichteste Zweispalter im Baukasten.

Typisch für zwei Themen nebeneinander, eine Gegenüberstellung oder einen langen Text, der in zwei Spalten aufgeteilt werden soll.

Wofür es nicht gedacht ist

  • Rechte Spalte als hervorgehobene Box mit Hintergrund oder Rahmen → twoColumnTextTextbox
  • Eine Spalte mit Bild → twoColumnTextImage oder twoColumnImageWithText
  • Mehr als zwei reine Textspalten → textColumns

Diese Instanz steht auf 50/50 am Desktop; auf Tablet und Mobil stapeln die Spalten (wrap).

twoColumnText — 66/33

Dasselbe Element, anderes Spaltenverhältnis

Exakt dasselbe Element wie darüber — geändert wurde nur eine Einstellung: das Spaltenverhältnis am Desktop steht auf 66/33 statt 50/50. Die linke Spalte trägt damit den Hauptext, die rechte eine schmale Randspalte.

Wählbar sind 20/80, 25/75, 33/66, 40/60, 50/50, 60/40, 66/33, 75/25, 80/20 und „wrap“ (gestapelt) — jeweils getrennt für Desktop, Tablet und Mobil.

Randspalte

Eine schmale Spalte eignet sich für Zusatzinfos, Hinweise oder eine kurze Aufzählung neben dem Haupttext.

twoColumnTextTextbox — Text links, Box rechts

Standard 33/66

Links normaler Fließtext, rechts derselbe Textbereich in einer optisch abgesetzten Box mit eigenem Hintergrund, Rahmen, Schatten und Eckenradius. Damit lässt sich ein Hinweis, ein Callout oder ein Aktionskasten neben dem Text betonen.

Am Desktop steht das Element standardmäßig auf 33/66 — der Text ist also schmaler als die Box. Auf Tablet und Mobil stapeln beide Spalten.

Das hier ist die Box

Nicht zu verwechseln mit twoColumnText (zwei gleichwertige Spalten ohne Box) oder mit facts (einzelne farbige Kennzahl-Kacheln).

Hintergrundfarbe, Deckkraft, Rahmen und Radius der Box sind Einstellungen des Elements.

twoColumnTextImage — 50/50, Bild rechts

Feste Rollen: links Text, rechts Bild

Zweispalter mit festen Rollen: die linke Spalte ist immer Text (Überschrift, Fließtext, bis zu zwei Buttons), die rechte immer eine Bild-Galerie. Liegen mehrere Bilder im Galeriefeld, wird daraus automatisch ein Slider.

Der Klassiker für „Beschreibungstext plus ein Foto“. Sollen beide Spalten frei mit Bild oder Text belegt werden können, ist twoColumnImageWithText das richtige Element.

twoColumnTextImage — invertiert, Bild links

invertHorizontalOrder = 1

Dasselbe Element wie darüber, nur mit gesetztem Schalter „Reihenfolge umkehren“. Das Bild rückt nach links, der Text nach rechts — ohne dass die Inhalte umgetragen werden müssen.

So entsteht der übliche Zickzack, wenn mehrere solche Blöcke untereinander stehen: abwechselnd Bild links und Bild rechts.

twoColumnTextImage — columns_mobile = wrap

Umbruchverhalten auf kleinen Schirmen

Diese Instanz zeigt die Spalten-Einstellung für Mobil. Der Wert „wrap“ bedeutet: die beiden Spalten stehen auf dem Handy nicht mehr nebeneinander, sondern untereinander — zuerst der Text, darunter das Bild.

Desktop und Tablet bleiben hier auf 50/50. Spaltenzahl und -verhältnis lassen sich für alle drei Geräteklassen getrennt einstellen, dazu der Spaltenabstand von gx-0 bis gx-6.

Chalet-Raum mit Holzwänden und Ruhebereich

twoColumnImageWithText — Bild links, Text rechts

Beide Spalten frei belegbar

Der flexibelste Zweispalter: jede der beiden Spalten hat eine eigene Bild-Galerie, eine eigene Überschrift, einen eigenen Fließtext und eigene Buttons. Für Bild-neben-Text füllt man eine Spalte mit der Galerie und die andere mit Text — hier liegt das Bild links.

Weil beide Spalten gleich aufgebaut sind, lassen sich auch zwei Bildspalten oder zwei Textspalten mischen. Sind die Rollen dagegen fix (links Text, rechts Bild), ist twoColumnTextImage die einfachere Wahl.