Teaser

Teasers sind in verschiedenen Größen vorhanden und können verschiedene Themen abdecken.

Der Standard-Teaser ist der Haupt-Teaser, der an allen BASF-Standorten verwendet wird. Es gibt zwei verschiedene Varianten: mit und ohne Polsterung. Bitte verwenden Sie nicht beide innerhalb eines Abschnitts.

.

Beispiel

example.jpg
a. Standard Teaser mit Polsterung
b. Standard Teaser ohne Polsterung
.

Variation mit oder ohne Polsterung

variation with.jpg

Standard Teaser ohne Polsterung
Zur Verwendung in den Größen S / M / L auf einfachen Standorten ohne Hintergrundbilder oder Hintergrundfarben.
Enthält:
a. Bild 16: 9
b. Überschrift
c. Teaser kopieren (mit Link-Symbol)
d. Link (optional)

Standard Teaser mit Polsterung
Zur Verwendung in den Größen S / M / L auf Websites mit Hintergrundbildern oder Hintergrundfarben. Der Rand „y“ erscheint nur, wenn sich der Teaser in der letzten Zeile des Abschnitts befindet.
Enthält:
a. Bild 16: 9
b. Überschrift
c. Teaser kopieren (mit Link-Symbol)
d. Link (optional)
e. weißer Hintergrund
f. Hintergrundbild oder Hintergrundfarbe

.

Responsives Verhalten: Ohne Polsterung

responsive behaviour.jpg

≥ 992

S: Max. drei in einer Reihe
M: Max. zwei in einer Reihe
L: Einer in einer Reihe (Text auf der rechten Seite)

991 - 768

S: Max. zwei in einer Reihe (Slider optional)
M: Max. zwei in einer Reihe
L: Einer in einer Reihe (Text auf der rechten Seite)

767 - 320

S: Einer in einer Reihe (Slider optional)
M: Einer in einer Reihe (Slider optional)
L: Einer in einer Reihe (Text unter Bildern)

.

Responsives Verhalten: Mit Polsterung

with padding.jpg

≥ 992

L: One in a row (text underneath images)
M: Max. two in a row
S: Max. three in a row

991 - 768

L: One in a row (text underneath images)
M: Max. two in a row
S: Max. two in a row (slider optional)

767 - 320

L: One in a row (text underneath images)
M: One in a row (slider optional)
S: One in a row (slider optional)

Spezielle Teaser haben spezielle Aufgaben. Bisher gibt es drei Varianten: Kategorie-, Editorial- und Download-Magazin-Teaser. Die Höhe der Komponenten hängt von den anderen Teasern und Komponenten in derselben Reihe ab.

.

Beispiel Kategorie Teaser

example category teaser.jpg
.

Drei Typen von Spezial-Teasern

three types of special.jpg

Kategorie-Teaser
Visualisiert die jeweilige Kategorie und verlinkt optional auf die Kategorieübersichtsseite, sofern eine vorhanden ist. Verwenden Sie nur S.
Enthält:
a. Hintergrund Unternehmensfarbe
b. Infografik-Symbol, Verhältnis 1: 1
c. Schlagzeile Licht
d. Überschrift fett


Redaktioneller Teaser
Link zur Magazinredaktion. Verwenden Sie nur S.
Enthält:
a. Hintergrund Unternehmensfarbe
b. Ausgabe Überschrift & Unterzeile (SVG)
c. Beschreibung oder Zitat
d. Zitat Bild, Verhältnis 1: 1, Name und Beschreibung
e. Link mit Symbol


Magazin-Teaser herunterladen
Option zum Herunterladen des Magazins in verschiedenen Sprachen. Verwenden Sie nur S. In diesem Teaser sind alle Elemente zentriert.
Enthält:
a. Hintergrund Unternehmensfarbe
b. Überschrift
c. Bildmagazin
d. Download-Links mit Symbolen, Dokumenttyp und -größe

.

Responsives Verhalten

responsive behaviour.jpg

≥ 992

S: Max. drei in einer Reihe

991 - 768

S: Max. zwei in einer Reihe (Slider optional)

767 - 320

S: Einer in einer Reihe (Slider optional)

Zeigt die beliebtesten Links zu Artikeln, Geschichten usw. an. Es gibt drei Variationen: in Unternehmensfarbe, weiß oder blass.

.

Beispiel

example.jpg
.

Farbvarianten

color variation.jpg

Unternehmensfarbe
Verwenden Sie nur S.
Enthält:
a. Überschrift
b. Beschreibung kopieren
c. Anzahl, 40% weiß
d. Überschriftenliste
e. Trennlinie, 30% weiß, immer ganz oben auf dem Listeneintrag
f. Hintergrund Unternehmensfarbe


Weiße und blasse Farbe
Verwenden Sie nur S.
Enthält:
a. Überschrift
b. Beschreibung kopieren
c. Nummer, hellgrau
d. Überschriftenliste, Unternehmensfarbe
e. Trennlinie, mittelgrau, wird als Trennlinie zwischen zwei Listenelementen verwendet
f. Hintergrundfarbe weiß oder blass
G. Hintergrundbild oder Hintergrundfarbe

.

Responsives Verhalten

responsive behaviour.jpg

≥ 992

S: Max. drei in einer Reihe

991 - 768

S: Max. zwei in einer Reihe (Slider optional)

767 - 320

S: Einer in einer Reihe (Slider optional)

Mit dieser Komponente können Sie ein oder mehrere Ereignisse auf Ihrer Seite markieren oder auflisten.

.

Beispiel

example.jpg
.

Elemente

elements.jpg
Event-Teaser basieren auf denselben Elementen, von denen einige optional verwendet werden können.
a. Monat und Datum
b. Überschrift der Veranstaltung
c. Kopieren (optional)
d. Zum Kalenderlink hinzufügen (optional)
e. Weitere Informationen Link (optional, Links zur Detailseite der Veranstaltung)

Die Listen- und Kachelversion enthält ein Hintergrundfeld in Feldgrau. Das Event-Datumsfeld ist in den Unternehmensfarben erhältlich.
.

Datum und Ort-Teaser

date and venue teaser.jpg
Diese Version kann auf der Detailseite Ihrer Veranstaltung verwendet werden, um Datum und Ort in Fettdruck anzuzeigen. Der Link "Zum Kalender hinzufügen" ist optional.
.

Event-Titel

event tiles.jpg
Wenn Sie Ihr Ereignis hervorheben möchten oder mehr als ein Ereignis anzeigen möchten, können Sie die Ereignis-Kachel-Version auswählen.
a. Beispiel drei Kacheln in einer S-Spalte
b. Beispiel einer Kachel in einer schwebenden S-Spalte neben dem Text

Sie können das Ereignisfeld auch mit anderen geeigneten Komponenten wie Download-Teasern, Kontaktfeldern oder dem Slider kombinieren.
.

Event-Listen

event lists.jpg
Für eine detailliertere Ereignisbeschreibung oder wenn Sie mehrere Ereignisse anzeigen möchten, ist die Ereignisliste die perfekte Wahl. Wenn Sie ein spezielles Ereignis hervorheben möchten, können Sie es in das entsprechende Farbpaar der verwendeten Unternehmensfarbe einstellen (dies gilt auch für die Ereignisfelder).
.

Responsives Verhalten

responsive behaviour.jpg
Links: In den drei größten Ansichtsfenstern verhalten sich die Ereignisteaser gleich (sie werden proportional zum Raster skaliert und die definierten Haltepunktregeln gelten).

Rechts: Im kleinsten Ansichtsfenster werden alle Event-Teaser über 12 Spalten ausgeführt. Ereignislisten werden wie Ereignisfelder angezeigt.

Diese Komponente bietet verschiedene Download- und Linkoptionen. Es gibt zwei Varianten: Kacheln und Liste. Die Fliesen sind mit oder ohne Polsterung erhältlich. Eine Mischung aus beidem ist nicht erlaubt!

.

Beispiel download teaser (Titel)

example.jpg
.

Download teaser (Titel)

download teaser tiles.jpg

Teaser ohne Polsterung
Download-Option auf einfachen Websites ohne Hintergrundbilder oder Hintergrundfarben. Verwenden Sie in S auf einfachen Websites ohne Hintergrundbilder oder Hintergrundfarben.
Enthält:
a. Bild (optional). Formate: 16: 9 / DIN Hochformat / DIN Querformat (bei schlechter Bildqualität ist eine kleine Version möglich)
b. Datum
c. Überschrift
d. Beschreibung kopieren
e. Link mit Symbol


Farbige Teaser mit Polsterung
Downloadmöglichkeit auf allen Seiten. Verwenden Sie in S.
Enthält:
a. Bild (optional). Formate: 16: 9 / DIN Hochformat / DIN Querformat (bei schlechter Bildqualität ist eine kleine Version möglich)
b. Datum
c. Überschrift
d. Beschreibung kopieren
e. Verknüpfung mit Symbol, Weiß oder Unternehmensfarbe (abhängig von der Hintergrundfarbe)
f. Hintergrundfarbe: weiß, korporativ oder blass

.

Responsives Verhalten: download teaser (Titel)

responsive behaviour.jpg

≥ 992

S: Max. drei in einer Reihe

991 - 768

S: Max. zwei in einer Reihe (Slider optional)

767 - 320

S: Einer in einer Reihe (Slider optional)

.

Download teaser (Liste)

download teaser list.jpg
Aufgelistete Download-Elemente. Verwendung in XL auf einfachen Websites ohne Hintergrundbilder oder Hintergrundfarben.

Enthält:
a. Bild (optional). Formate: 16: 9 / DIN Hochformat / DIN Querformat (bei schlechter Bildqualität ist eine kleine Version möglich)
b. Datum
c. Überschrift
d. Beschreibung kopieren
e. Sprachangabe
f. Link mit Symbol
G. Trennlinie, mittelgrau, immer ganz oben auf dem Listeneintrag
punkt h.jpg
h. Wenn nur ein Link da ist, wird der Text in eine L-Spalte platziert.
.

Responsives Verhlatenr: download teaser (Liste)

responsive behaviour2.jpg

≥ 768

XL: Einer in einer Reihe (Text auf der rechten Seite)

767 - 320

XL: Einer in einer Reihe (Text unter den Bilderns)

 

Kontakt und Feedback

Das Team Brand Consultancy berät Sie gerne bei Fragen: Kontakt.
Wir freuen uns über ein Feedback zum Brand Portal.