Dreispaltige Bühnen

Aller guten Contentspalten sind drei!

Sprechblase mit dem Wort Info
Badgeinfo

Worum geht's?
Eine dreispaltige Bühne auf einer Website bezieht sich auf das Layout, bei dem der Inhalt in drei parallelen Spalten angeordnet ist. Dieses Layout bietet spezifische Vorteile, die je nach den Zielen und Anforderungen einer Website von Nutzen sein können: von mehr Informationsfläche bis hin zu verbesserter Organisation.

Glühbirne neben der Überschrift Gut zu Wissen
Glühbirne neben der Überschrift Gut zu Wissen

Gut zu wissen
Die dreispaltige Bühne verhält sich responsiv, d. h. bei kleineren Bildschirmen werden die Spalten untereinander angeordnet, damit eine gute Präsentation des Inhalts gewährleistet wird. Wichtig beim Einsatz einer dreispaltigen Bühne ist, dass der Inhalt übersichtlich und benutzerfreundlich bleibt. 

Filmklappe neben der Überschrift Live Demo
Filmklappe neben der Überschrift Live Demo

Live-Demo

Beispiel A

Abstand zwischen den Spalten

Dreispaltige Bühne

mit extra Abstand zwischen den Texten

  • Hier ein paar Fakten

  • für eine Checkliste

  • in der mittleren Spalte

Rechte Spalte mit Video

Beispiel B

Abstände vor und nach Spalteninhalt

Mittlere Spalte

Vor dem Text wurde ein dreifacher Abstand eingepflegt, während nach dem Text kein Abstand eingepflegt wurde.

Linke Spalte

Vor dem Text wurde ein zweifacher Abstand eingepflegt, während nach dem Text kein Abstand eingepflegt wurde.

Beispiel C

Unterschiedliche Inhaltsausrichtung

Spalten mit doppeltem Abstand

Der Inhalt dieser ersten Spalte ist links ausgerichtet (Bühne & Inhaltselement Überschrift)

Spalte in der Mitte

Der Inhalt der mittleren Spalte wird mittig dargestellt (Bühne & Inhaltselement Überschrift)

Rechte Spalte

in der dritten Spalte wird der vollständige Inhalt rechtsbündig ausgerichtet dargestellt (Bühne & Inhaltselement Überschrift)

Beispiel D

Einzelnes Medienelemente in jeder Spalte 

Blick über eine Düne und Strand auf das offene Meer mit blauem, leicht bewölktem Himmel
Blick über eine Düne und Strand auf das offene Meer mit blauem, leicht bewölktem Himmel
00:00
Bergpanorama mit grünen Wiesen im Vordergrund und blauem Himmel

Beispiel E

Verschiedene Abstände zwischen Inhaltselementen

gewählter Abstand: S

Text mit Medienelement:

Sonnenuntergang über dem Meer mit Wellen, die an einen sandigen Strand rollen.
Sonnenuntergang am Meeresstrand

gewählter Abstand: M

Text mit Medienelement:

Sonnenuntergang über dem Meer mit Wellen, die an einen sandigen Strand rollen.
Sonnenuntergang am Meeresstrand

gewählter Abstand: L

Text mit Medienelement:

Sonnenuntergang über dem Meer mit Wellen, die an einen sandigen Strand rollen.
Sonnenuntergang am Meeresstrand