Bild-Teaser-Liste, einfach

Mit diesem Element können einfache Bild-Text-Teaser zu ausgewählten Seiten in einer Liste ausgegeben werden. Es ist auch möglich, alle Unterseiten einer bestimmten Seite auszugeben. Dieses Element ist geeignet, wenn die entsprechenden Zielseiten ein Bild und Teasertexte haben. Wenn kein Bild in den Seiteneigenschaften hinterlegt wurde, wird ein Platzhalterbild angezeigt. Wie bei den meisten Listen-Elementen kann auch hier übergreifend neben der Überschrift und Unterüberschrift ein Einleitungstext gepflegt werden.

Über den „Listen Heading Typ“ kann der Stil der Überschriften für die Text Elemente bestimmt werden. Der Typ sollte nie höher sein, als der der Überschrift der Liste selbst. Wenn die übergreifende Überschrift ausgeblendet ist und der Listen Heading Typ auf „Standard Konvention“ steht, sind die Überschriften der Listen Elemente alle eine h2. Achten Sie stets auf eine korrekte Semantik!

Auf dieser Seite finden Sie:

Layout „Auto layout“, eine direkt ausgewählte Seite
Layout „Auto layout“, zwei direkt ausgewählte Seiten
Layout „Auto layout“, drei direkt ausgewählte Seiten
Layout „Auto layout“, vier direkt ausgewählte Seiten
Manuelle Überschreibung des Auto layouts
Layout „1 Spalte, großes Bild links. Danach abwechselnd.“
Layout „1 Spalte, großes Bild rechts. Danach abwechselnd.“
Layout „1 Spalte, Bild links. Danach abwechselnd.“
Layout „1 Spalte, Bild rechts. Danach abwechselnd.“
Darstellungsstil „CTA“
Darstellungsstil „Ohne Teasertext“
Unterseiten der ausgewählten Seiten
Theme & Hintergrund „Cyan“
Theme & Hintergrund „Mint“

Das ist eine UnterüberschriftLayout „Auto layout“, eine direkt ausgewählte Seite

Hier kann ein Einleitungstext stehen. Wenn die Überschrift zum Einleitungstext mit Typ „[h2] Überschrift“ eingeblendet ist der Listen Heading Typ auf „Standard Konvention“ steht, sind die Headings der Listen-Elemente automatisch als h3 gestylt. In diesem Beispiel wurde eine Seite direkt ausgewählt. Diese wird im Auto layout einspaltig dargestellt.

Normales Textelement

Ein Textelement mit Überschrift und Fließtext.

Normales Textelement

Wenn die übergreifende Überschrift des Elements verborgen ist wie in diesem Beispiel, und der Listen Heading Typ auf „Standard Konvention“ steht, werden die Überschriften der IconText Elemente automatisch zur h2.

Normales Textelement

Ein Textelement mit Überschrift und Fließtext.

Normales Textelement

Das ist eine UnterüberschriftLayout „Auto layout“, zwei direkt ausgewählte Seiten

Bei zwei ausgewählten Seiten werden die Teaser im Auto layout nebeneinander platziert.

Normales Textelement

Ein Textelement mit Überschrift und Fließtext.

Normales Textelement

Text & Bilder

Ein Text-Element mit einer beliebigen Anzahl von Bildern.

Text & Bilder

Das ist eine UnterüberschriftLayout „Auto layout“, drei direkt ausgewählte Seiten

Bei drei ausgewählten Seiten werden die Teaser im Auto layout nebeneinander platziert und laufen über die ganze Breite.

Normales Textelement

Ein Textelement mit Überschrift und Fließtext.

Normales Textelement

Text & Bilder

Ein Text-Element mit einer beliebigen Anzahl von Bildern.

Text & Bilder

Spotify Podcast

Ein Spotify Podcast mit Transkript.

Spotify Podcast

Das ist eine UnterüberschriftLayout „Auto layout“, vier direkt ausgewählte Seiten

Bei vier ausgewählten Seiten werden die Teaser im Auto layout nebeneinander platziert und laufen über die ganze Breite.

Normales Textelement

Ein Textelement mit Überschrift und Fließtext.

Normales Textelement

Text & Bilder

Ein Text-Element mit einer beliebigen Anzahl von Bildern.

Text & Bilder

Spotify Podcast

Ein Spotify Podcast mit Transkript.

Spotify Podcast

Bild mit Scroll-Effekt

Ein Bild wird beim Scrollen freigegeben, mit darüberliegendem Textfeld.

Bild mit Scroll-Effekt

Das ist eine UnterüberschriftManuelle Überschreibung des Auto layouts

Die automatische Spaltenaufteilung im Layout kann auch überschrieben werden, indem eine andere Layoutvariante gewählt wird, wie hier die zweispaltige Aufteilung mit dem Layout „2 Spalten“. Darüber hinaus können die Listen-Elemente auch „erzwungen“ ein-, drei- oder vierspaltig dargestellt werden.

Normales Textelement

Ein Textelement mit Überschrift und Fließtext.

Normales Textelement

Text & Bilder

Ein Text-Element mit einer beliebigen Anzahl von Bildern.

Text & Bilder

Spotify Podcast

Ein Spotify Podcast mit Transkript.

Spotify Podcast

Bild mit Scroll-Effekt

Ein Bild wird beim Scrollen freigegeben, mit darüberliegendem Textfeld.

Bild mit Scroll-Effekt

Das ist eine UnterüberschriftLayout „1 Spalte, großes Bild links. Danach abwechselnd.“

In dieser Layoutvariante werden die Teaserbilder groß dargestellt wie im Auto layout bei einer ausgewählten Seite. Die Platzierung des Teaserbildes wechselt bei mehreren ausgewählten Seiten ab.

Normales Textelement

Ein Textelement mit Überschrift und Fließtext.

Normales Textelement

Text & Bilder

Ein Text-Element mit einer beliebigen Anzahl von Bildern.

Text & Bilder

Spotify Podcast

Ein Spotify Podcast mit Transkript.

Spotify Podcast

Das ist eine UnterüberschriftLayout „1 Spalte, großes Bild rechts. Danach abwechselnd.“

Bei dieser Layoutvariante steht das Bild des ersten Teasers auf der rechten Seite und die Platzierung wechselt im Folgenden ab.

Normales Textelement

Ein Textelement mit Überschrift und Fließtext.

Normales Textelement

Text & Bilder

Ein Text-Element mit einer beliebigen Anzahl von Bildern.

Text & Bilder

Spotify Podcast

Ein Spotify Podcast mit Transkript.

Spotify Podcast

Das ist eine UnterüberschriftLayout „1 Spalte, Bild links. Danach abwechselnd.“

In dieser Layoutvariante teilen sich Teaserbild und Text die Contentbreite. Die Platzierung des Teaserbildes wechselt bei mehreren ausgewählten Seiten ab.

Normales Textelement

Ein Textelement mit Überschrift und Fließtext.

Normales Textelement

Text & Bilder

Ein Text-Element mit einer beliebigen Anzahl von Bildern.

Text & Bilder

Spotify Podcast

Ein Spotify Podcast mit Transkript.

Spotify Podcast

Das ist eine UnterüberschriftLayout „1 Spalte, Bild rechts. Danach abwechselnd.“

Bei dieser Layoutvariante steht das Bild des ersten Teasers auf der rechten Seite und die Platzierung wechselt im Folgenden ab.

Normales Textelement

Ein Textelement mit Überschrift und Fließtext.

Normales Textelement

Text & Bilder

Ein Text-Element mit einer beliebigen Anzahl von Bildern.

Text & Bilder

Spotify Podcast

Ein Spotify Podcast mit Transkript.

Spotify Podcast

Das ist eine UnterüberschriftDarstellungsstil „CTA“

Bei diesem Darstellungsstil werden die Linklabel in Button-Optik gestylt. Das Bild wird nicht abgerundet und die rote Linie am unteren Rand des Bildes entfällt, damit eine Seite auch mit einem freigestellten PNG angeteasert werden können, das in den Seiteneigenschaften gepflegt wurde.

Normales Textelement

Ein Textelement mit Überschrift und Fließtext.

Normales Textelement

Text & Bilder

Ein Text-Element mit einer beliebigen Anzahl von Bildern.

Text & Bilder

Spotify Podcast

Ein Spotify Podcast mit Transkript.

Spotify Podcast

Das ist eine UnterüberschriftDarstellungsstil „Ohne Teasertext“

Bei diesem Darstellungsstil werden die in den Seiteneigenschaften gepflegten Teasertexte nicht ausgegeben. Das kann hilfreich sein, wenn die Seiten sehr unterschiedlich lange Teasertexte haben.