Zweispaltige Bühnen

DAS Inhaltselement für ästhetische Contentaufteilung

Worum geht's?
Eine zweispaltige Bühne auf einer Website bezieht sich auf das Layout, bei dem der Inhalt in zwei parallelen Spalten angeordnet ist. Dieses Layout bietet mehrere Vorteile, die zur Verbesserung der Benutzererfahrung und zur effektiven Präsentation und Organisation von Informationen beitragen können.

Gut zu wissen
Die zweispaltige Bühne verhält sich responsiv, d. h. bei kleineren Bildschirmen werden beide Spalten untereinander angeordnet, damit eine gute Präsentation des Inhalts gewährleistet wird.

© Deinde dolorem quem maximum
© Occultum facinus esse potuerit

2 spaltige Bühne mit HG-Bild + Text

Fließtexte lassen sich gut mit Bildern auflockern. Das Bild wurde in dieser zweispaltigen Bühne als Hintergrundbild in der Rahmenbühne hinterlegt und der Text hat einen farbigen Hintergrund bekommen. Die Position des Hintergrundbildes und des Textes können getauscht werden, sodass der Text in der linken Spalte erscheint.

2 spaltige Bühne mit HG-Video + Text

Fließtexte lassen sich gut mit Videos auflockern. Das Video wurde in dieser zweispaltigen Bühne als Hintergrundvideo in der Rahmenbühne hinterlegt und der Text hat einen farbigen Hintergrund bekommen. Die Position des Hintergrundvideos und des Textes können getauscht werden, sodass der Text in der linken Spalte erscheint.

© Hier steht das copyright
© Laborum ex Lorem enim reprehenderit. Veniam officia velit sunt et officia ipsum Lorem fugiat.

zweispaltige Bühne 

mit Hintergrundbild links 
mobile Darstellung: Reihenfolge der Darstellung der Spalten getauscht, d.h. es wird erst die rechte Spalte (Text), dann die linke Spalte (Bild) dargestellt.

Hier steht eine Überschrift

die direkt im Text mit Medien-Element gepflegt ist

Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Nulla consequat massa quis enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Maecenas malesuada. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Cras sagittis. Nulla facilisi. Morbi mollis tellus ac sapien. Aenean viverra rhoncus pede. Sed lectus. Vivamus consectetuer hendrerit lacus.

"Hier steht ein Zitat passend zum Thema. Dadurch lassen sich Seiten optisch auflockern. Statt eines Zitates könnte hier auch eine Gästestimme oder ein Tipps der Redaktion stehen."

von Max Mustermann

2 spaltige Bühne mit HG-bild + Text

Fließtexte lassen sich gut mit Bildern auflockern. Das Bild wurde in dieser zweispaltigen Bühne als Hintergrundbild in der Rahmenbühne hinterlegt und der Text hat einen farbigen Hintergrund bekommen. Die Position des Hintergrundbildes und des Textes können getauscht werden, sodass der Text in der rechten Spalte erscheint.

 

  • Das Bild und der Text nehmen die gesamte Breite des Bildschirms ein.

  • Der Text bricht nicht um und hinter dem Text können Hintergrundfarben genutzt werden.

  • Es können Elemente wie Button, Checkliste vertikal, Überschrift, Text, Fakten vertikal platziert werden

© Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hier steht eine Headline in Styling M

und hier steht ein Untertitel in Styling XL die dadurch größer wirkt

In die Rechte Spalte ist im Text mit Medien Element ein Bild als PNG eingefügt worden, damit das Logo keinen zusätzlichen Hintergrund hat. Als Hintergrund der Bühne ist eine Farbe gewählt worden. Alternativ könnte als Hintergrund auch ein Hintergrundbild gewählt werden, das eine Struktur wie Stoff, Holz, Tapete etc. zeigt und dadurch nur dezent als Hintergrund wirkt.

Hier steht eine Überschrift

die direkt im Text mit Medien-Element gepflegt ist

Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Nulla consequat massa quis enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Maecenas malesuada. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Cras sagittis. Nulla facilisi. Morbi mollis tellus ac sapien. Aenean viverra rhoncus pede. Sed lectus. Vivamus consectetuer hendrerit lacus.

2

spaltige Bühnen sind eine tolle Sache

100  %

anspruchsvoll bis auf den letzten Buchstaben

1000

Zeilen Text optisch ansprechend dargestellt

2 spaltige Bühne mit animiertem Störer

Der Störer wird in den Bühneneinstellungen gepflegt. 

2 spaltige Bühne mit überlappendem Störer

Der Störer wird in den Bühneneinstellungen gepflegt. 

© Deinde dolorem quem maximum

Dies ist eine 2/3 1/3 Bühne

In dieser Bühne sind die Spalten 2/3  1/3  aufgeteilt.

Dies ist eine 1/3 2/3 Bühne

Bei dieser Bühne sind die Spalten in 1/3  2/3 aufgeteilt. In der 2/3  Bühne befindet sich ein Video und der Test ist mit einer transparenten Box hinterlegt.    

zweispaltige Bühne 

mit einzelnem Medienelement

© Urheberrecht für die Ausgabe
00:00