Teaservorlagen für bildlastige Teaser

Ziel ist die visuelle Bewerbung von Kampagnen, um Nutzer auf Landingpages oder Aktionsseiten zu leiten.

Bei 100% Rasterbreite

• Desktop, hohe Ausprägung: 1424 x 464 px | NUR dieses Format ist als Slider einzusetzen
• Desktop niedrige Ausprägung: 1424 x 344 px
• Mobile, hohe Ausprägung: 464 x 464 px | NUR dieses Format ist als Slider einzusetzen
• Mobile, niedrige Ausprägung: 464 x 344 px

Bei 50% Rasterbreite

• Desktop, hohe Ausprägung: 704 x 464 px
• Desktop, mittlere Ausprägung: 704 x 344 px
• Desktop, niedrige Ausprägung: 704 x 224 px
• Mobile, hohe Ausprägung: 464 x 464 px
• Mobile, mittlere Ausprägung: 464 x 306 px
• Mobile, niedrige Ausprägung: 464 x 224 px

Bei 1/3 Rasterbreite

• Desktop, hohe Ausprägung: 464 x 464 px
• Desktop, mittlere Ausprägung: 464 x 344 px
• Desktop, niedrige Ausprägung: 464 x 224 px
• Mobile, hohe Ausprägung: 464 x 464 px
• Mobile, mittlere Ausprägung: 464 x 306 px
• Mobile, niedrige Ausprägung: 464 x 224 px

WICHTIG: Bei allen Teaservarianten mit einem Bild, das in niedrigerer Höhe eingesetzt wird, müssen einzelne oder mehrere Elemente (Subheadline, Coupon Code, Button) weggelassen werden, damit die Elemente weiterhin auf das Bild passen. Die hier dargestellten Varianten sind ausgewählte Beispielvarianten. Prüft den Teaser im kompletten Responsive-Verhalten durch Kleinerziehen des Browsers, um sicherzustellen, dass alles passt.

• Bild: Keine wesentlichen Texte auf das Bild setzen (UX-/Barrierefreiheitsgründe)
• Headline: Eine kurze und prägnante Headline, die die Aufmerksamkeit der Nutzer sofort erregt. Achte darauf, dass die Zeichenanzahl begrenzt ist, um eine klare und verständliche Botschaft zu vermitteln.
• Subline: Eine kurze, erklärende Subline, die die Headline ergänzt und weitere Informationen bietet. Auch hier sollte die Zeichenanzahl begrenzt sein, um die Lesbarkeit zu gewährleisten.
• CtA: Ein klarer CtA-Text, der auffordernd ist und gleichzeitig das dahinter stehende Linkziel verdeutlicht
• Subline / Coupon Code / CtA: Bei allen Teaservarianten mit einem Bild, das in niedrigerer Höhe eingesetzt wird, müssen einzelne oder mehrere dieser Elemente weggelassen werden, damit die Elemente weiterhin auf das Bild passen. Prüft den Teaser im kompletten Responsive-Verhalten durch Kleinerziehen des Browsers, um sicherzustellen, dass alles passt.

Kann ebenfalls zur Bewerbung von Kampagnen (weniger aktionistisch) oder weiteren vertrieblichen Themen verwendet werden.

Bei 100% Rasterbreite

Eine Verwendung im 100% Raster ist nicht vorgesehen und sollte unterlassen werden, auch wenn es optisch okay erscheint.

Bei 50% Rasterbreite

• Desktop: 704 x 224 px
• Mobile: 464 x 224 px

Bei 1/3 Rasterbreite

• Desktop: 464 x 224 px
• Mobile: Es muss kein Bild gepflegt werden. Einfach die Checkbox "Mobile-Version anzeigen" setzen, da das erwartete Bildformat gleich ist.

Bei 1/4 Rasterbreite

• Desktop: 464 x 302 px
• Mobile: 464 x 224 px

• Bild: Keinen wesentlichen Texte auf das Bild setzen (UX-/Barrierefreiheitsgründe)
• Headline: Eine kurze und prägnante Headline, die die Aufmerksamkeit der Nutzer sofort erregt. Achte darauf, dass die Zeichenanzahl begrenzt ist, um eine klare und verständliche Botschaft zu vermitteln.
• Subline: Eine kurze, erklärende Subline, die die Headline ergänzt und weitere Informationen bietet. Auch hier sollte die Zeichenanzahl begrenzt sein, um die Lesbarkeit zu gewährleisten.
• CtA: Ein klarer CtA-Text, der auffordernd ist und gleichzeitig das dahinter stehende Linkziel verdeutlicht

Kombination aus visueller Kampagnenbewerbung und passenden Produktempfehlungen

• Desktop: 464 x 464 px
• Mobile: 464 x 306 px

Nur im 100% Raster einsetzbar.

• Mainteaser: Vorgaben entsprechend dem Kampagnenstyle-Mainteaser. Nicht alle Inhalte des Kampagnenstyle-Teasers werden angezeigt (e.g. Gutscheincode). Der CtA wird im Gegensatz zum regulären Kampagnenstyle-Teaser unterhalb der Produktreco angezeigt.
• Reco: Es kann der Recommendation-Teaser gepflegt werden

Visuell unterstützter inhaltlicher Einstieg in Themengebiete eines ähnlichen Oberthemas

• Desktop: 344 x 344 px
• Mobile: s.o. oder kleineres quadratisches Format

Nur im 100% Raster einsetzbar.

• Headline (optional): Inhaltlicher Themeneinstieg
• Bild: Das Visual sollte die gesamte Fläche ausfüllen (= kein weiß am Rand, damit die abgerundeten Ecken sichtbar sind. Darüber hinaus ist es wichtig, dass wesentliche Bildinhalte im oberen Drittel des Bild platziert sind (Ein Teil des quadratischen Formates wird durch die weiße Fläche mit CtA abgedeckt und in kleineren Bildschirmbreiten wird das Format zusätzlich unten abgeschnitten.
• CtA: Ein klarer CtA-Text oder ein kurzer textlicher Einstieg in das verlinkter Thema. Je kürzer der Text, desto besser.

Visueller Einstieg in die Markenseiten anhand des Markenlogos

Es werden keine einzelnen Bilder gepflegt, es wird das im BO gepflegte Markenlogo aus Stammdaten/Markenparameter anhand der im Teaser gewählten Marken automatisch gezogen.

Nur im 100% Raster einsetzbar.

Die Pflege von "Weiteren Marke" im Teaser hat keinen Effekt auf die Anzeige im Frontend. Es werden nur die Marken angezeigt, die unter "Top Marken" gepflegt sind.