Variante 1
Einfacher zentrierter CTA-Banner auf einer farbigen Fläche. Meist genutzt um thematische Section zu trennen.
Hinweis: Für CTA-Banner innerhalb einer Content-Section kann das Modul eigenständig ohne Section genutzt werden.
Variante 2
Einfacher zentrierter CTA-Banner auf einer Section mit Hintergrundbild. Hier mit Parallax-Effekt. Funktioniert aber auch mit einem statischen Bild. Leichter Farboverlay, damit das Bild nicht zu unruhig wirkt. Hier hat die Section mehr Padding, damit das Bild besser wirkt. Wird häufig zur optischen Auflockerung genutzt.
Variante 3
Einseitiger CTA-Banner auf einer Section mit Hintergrundbild. Hier mit Parallax-Effekt. Funktioniert aber auch mit einem statischen Bild. Leichter Farboverlay, damit das Bild nicht zu unruhig wirkt. Kann genutzt werden um ein Hintergrundmotiv mit in die Gestaltung einzubeziehen.
Variante 4
CTA-Banner welche zwei Section überlappt. Die Sections darüber und darunter haben dazu jeweils mehr Platz oben und unten als reguläre Sections. Der Banner ist mit negativer Margin nach oben und unten gezogen. Das ganze in eigener Zeile, um Breite, Hintergrund und Abstände gesondert steuern zu können. Achtung: Z-index im Zeilen CSS beachten und migrieren! Das Layout sollte als Vorlage gespeichert werden inkl. vorheriger und nachfolgender Zeile wegen der angepassten Abstände und dann per gespeicherter Vorlage an das zu erstellende Layout angefügt werden.
Hinweise für Entwickler:
.arc-cta-banner-section | Allg. Klasse für alle Variationen dieses Moduls.
.arc-cta-banner-section--var-{n} | {n} wird hier jeweils durch die Nummer der Variante ersetzt.
Hinweis: Variante 4 muss als Vorlage abgespeichert werden inkl. Zeilen CSS