Das Layout des Banners anpassen (Legacy-Version)

Sie passen Layout und Gestaltung Ihres Banners direkt in der Anwendung an. So schaffen Sie ein Erscheinungsbild, das zu Ihrer Marke und Ihrem Nutzungserlebnis passt.

Die Optionen finden Sie unter:
Cookie banner > Style

Position

Legen Sie fest, wo und wie der Banner auf Ihrer Website erscheint:

1. Popup: zentriert auf dem Bildschirm.
2. Overlay: arbeitet wie das Popup, sperrt die Seite jedoch, bis der Nutzer mit dem Banner interagiert.
3. Bar at the top: fixiert am oberen Bildschirmrand.
4. Bar at the top (pushdown): fährt von oben herein und schiebt den Inhalt nach unten. (Hinweis: funktioniert mit fixierten Headern möglicherweise nicht gut.)
5. Floating at the top left: oben links mit kleinem Abstand.
6. Floating at the top center: oben mittig mit kleinem Abstand.
7. Floating at the top right: oben rechts mit kleinem Abstand.
8. Bar at the bottom: fixiert am unteren Bildschirmrand.
9. Floating at the bottom left: unten links mit kleinem Abstand.
10. Floating at the bottom center: unten mittig mit kleinem Abstand.
11. Floating at the bottom right: unten rechts mit kleinem Abstand.

Farbschema (Theme)

Wählen Sie ein Theme, das Innenabstand, Schaltflächenstil und Erscheinungsbild bestimmt:

1. Block: kleiner Innenabstand, eckige Schaltflächen mit proportionaler Breite.
2. Classic: kleiner Innenabstand, abgerundete Schaltflächen gleicher Breite.
3. Edgeless: kein Innenabstand, eckige Schaltflächen gleicher Breite.
4. Wired: wie Block, jedoch mit invertierten Hintergründen und Farben der Schaltflächen.

Vergleich der Themes

Textausrichtung

Gilt für Titel, Text und Logo des Banners:

• linksbündig
• zentriert
• rechtsbündig

Breite

Passt die Breite des Banners in em an (relativ zur Schriftgröße). Beispiel: 2em entspricht der doppelten Schriftgröße.

• Wird über einen Schieberegler eingestellt.
• Arbeitet mit der Live-Vorschau für sofortige Ergebnisse.
• Nützlich bei längeren Texten oder Schaltflächenbeschriftungen.
• Hinweis: gilt nur für Banner-Positionen, nicht für Bars (diese nehmen immer die volle Breite ein).

Schriftgröße

Passt die Textgröße in px an. Beispiel: 1px = 1/96 Zoll.

• Wird über einen Schieberegler eingestellt.
• Arbeitet mit der Live-Vorschau.
• Voreingestellt ist die Größe aus dem Theme Ihres Shops.

Innenabstand

Passt den Abstand innerhalb des Banners in px an.

• Wird über einen Schieberegler eingestellt.
• Arbeitet mit der Live-Vorschau.
• Die Voreinstellung hängt vom gewählten Theme ab.
• Hinweis: wird vom Theme Edgeless nicht unterstützt.

Farben

Passen Sie die Farben von Banner und Schaltflächen an:

• Wählen Sie aus einer Palette oder definieren Sie eigene Farben.
• Unterstützt werden Hex (zum Beispiel #123456) und RGBA.
• RGBA ergänzt die Rot-, Grün- und Blauwerte um Transparenz.

Schriftart

Standardmäßig übernimmt der Banner die Schrift Ihres Shop-Themes. Sie können auch aus browserübergreifend verfügbaren Schriften wählen:

• Arial, Arial Black, Verdana, Tahoma, Trebuchet MS, Impact
• Times New Roman, Didot, Georgia, American Typewriter
• Andalé Mono, Courier, Lucida Console, Monaco
• Bradley Hand, Brush Script MT, Luminari, Comic Sans MS

Möchten Sie eine eigene Schrift verwenden, laden Sie sie zunächst in die Assets Ihres Shops und binden Sie sie in Ihrer CSS-Datei ein.

z-index

Steuert die Stapelreihenfolge des Banners.

• Höhere Werte sorgen dafür, dass der Banner über anderen Seitenelementen liegt.
• Passen Sie ihn an, wenn es zu Konflikten mit anderen Apps oder Skripten kommt.

Container-ID

Legt die HTML-ID des Banner-Containers fest.

• Ändern Sie sie nur, wenn Sie den Banner über eigene Skripte oder CSS-Selektoren ansprechen müssen.

Banner-Schatten

Fügt hinter dem Banner einen Schatten hinzu.

• Nützlich, wenn Banner- und Hintergrundfarbe ähnlich sind, das verbessert die Sichtbarkeit.

Animation

Aktiviert Animationen beim Erscheinen und Schließen des Banners:

• Einblenden oder Hereinfahren beim Öffnen.
• Ausblenden oder Herausfahren beim Schließen.

Gilt auch für den Link zum erneuten Öffnen (Revoke), sofern er unter Behavior aktiviert ist.

• Hinweis: wird nicht von allen Browsern unterstützt.

Eigenes CSS

Ergänzen Sie eigene CSS-Regeln für weitere Anpassungen.

• Nützlich für die Feinabstimmung von Schaltflächengrößen, Rahmenfarben, Abständen und mehr.

Videoanleitung

Aktualisiert am: 05/10/2026