LWL-Werbe-Layer
Regelung
Allgemein:
- Der Werbe-Layer ist in der Breite variabel und in der Höhe fest. Er ist geeignet für die responsive Werbung mit HTML 5/CSS3.
- Die maximale Breite beträgt 1260 Pixel.
- Die maximale Gesamthöhe (Kopfzeile und Content-Bereich) beträgt 720 Pixel.
- Die Größe des Layers richtet sich nach der Größe der dargestellten Werbung.
- Nach dem Einscrollen steht der Layer zentriert im Content-Bereich mit Abstand nach oben und unten (von jeweils 100 Pixeln in der Desktop-Ansicht).
Aufbau des Layers:
- Die Kopfzeile besteht aus der Kennzeichnung „Anzeige“ und dem X-Button zum Schließen des Layers. Die Höhe beträgt 40 Pixel.
- Im Content-Bereich wird die Werbe-Anzeige gespielt. Die maximale Höhe beträgt 680 Pixel.
- Standardhintergrund: #ffffff (weiß).
- Hintergrund „Kopfzeile“: #00335f (dunkelblau).
- Typografie „Kopfzeile“: Open Sans Normal 400.
- Schriftgröße: 16 pt.
- Schriftfarbe: #ffffff (weiß).
- Layer-Schatten CSS: box-shadow: 0 Pixel, 0 Pixel, 20 Pixel, 0 Pixel, rgba (0, 0, 0, 0.2).
Verhalten des Layers:
- Der Layer ist beim Aufruf der entsprechenden Seite im Off-Canvas.
- Scrollt man auf der Seite zum Ende eines Textes oder Abschnitts, schiebt sich der Layer mit der Scrollbewegung von links in den Sichtbereich.
- Der Layer scrollt weiter über den Content.
- Der Layer positioniert sich vertikal zentriert über den Text beziehungsweise im Content.
- Mit einem Click auf den X-Button kann der Layer wieder geschlossen werden. Wahlweise kann man einfach weiter scrollen.
Responsives Verhalten:
- Ist die Breite des Browser-Fensters beziehungsweise des Viewports geringer als die maximale Breite des Werbe-Layers, so wird er mit einer Breite von 100 Prozent und mit einem Randabstand von 30 Pixeln angezeigt.
- Auf mobilen Endgeräten unter der Größe eines Tablets beträgt der Abstand zum Rand 15 Pixel - unabhängig von der Ansicht (Portrait oder Landscape).
- Die Höhe des Layers passt sich dabei an den Inhalt (der Werbung) an, damit diese möglichst optimal dargestellt werden kann.