Wo Sie das Design einrichten

Sie können das Design des Cookie-Banners im Consentio-Dashboard im Bereich Designer Ihrer Website konfigurieren. Änderungen wirken sich sofort auf Ihre Website aus.

Verfügbare Layouts

Wählen Sie aus mehreren vordefinierten Layouts:

Box (Modal)

Ein klassisches modales Fenster in der Bildschirmmitte. Geeignet für Websites, die sicherstellen möchten, dass Nutzer den Banner bemerken.

Leiste (Banner)

Eine horizontale Leiste am unteren oder oberen Bildschirmrand. Eine weniger aufdringliche Option, die das Durchsuchen von Inhalten nicht beeinträchtigt.

Cloud (schwebend)

Ein kompaktes schwebendes Fenster in einer Bildschirmecke. Eine minimalistische Option für Websites, die ein dezentes Design bevorzugen.

Position

Je nach gewähltem Layout können Sie die Position festlegen:

Farbschema

Passen Sie die Banner-Farben an Ihre Marke an:

Vordefinierte Themes

• Hell - Heller Hintergrund, dunkler Text
• Dunkel - Dunkler Hintergrund, heller Text
• Automatisch - Automatisch je nach Systemeinstellung des Nutzers

Individuelle Farben

Legen Sie individuelle Farben für einzelne Elemente fest:

• Hintergrund - Hintergrundfarbe des Banners
• Text - Hauptfarbe des Textes
• Primärer Button - Farbe der Schaltfläche „Alle akzeptieren“
• Sekundärer Button - Farbe der Schaltfläche „Ablehnen“
• Links - Farbe der Links

Typografie

Legen Sie Schriftarten für den Banner-Text fest:

• Schriftfamilie - Wählen Sie aus Google Fonts oder verwenden Sie eine Systemschrift
• Textgröße - Größe des Haupttexts
• Überschriftgröße - Größe der Banner-Überschrift

Animationen

Legen Sie die Animation für das Ein- und Ausblenden des Banners fest:

• Fade - Sanftes Ein-/Ausblenden
• Slide - Einschieben vom Bildschirmrand
• Keine - Keine Animation

Eckenradius

Legen Sie den Eckenradius für Banner und Buttons fest:

• Keiner - Scharfe Ecken (0px)
• Klein - Leichte Abrundung (4px)
• Mittel - Mittlere Abrundung (8px)
• Groß - Deutliche Abrundung (16px)
• Voll - Maximale Abrundung (999px)

Plan-Einschränkungen

Einige Anpassungsoptionen sind nur in kostenpflichtigen Plänen verfügbar:

Banner-Text

Bearbeiten Sie den auf dem Banner angezeigten Text:

• Überschrift - Haupttitel des Banners
• Beschreibung - Erklärender Text zu Cookies
• Akzeptieren-Button - Text für die Schaltfläche „Alle Cookies akzeptieren“
• Ablehnen-Button - Text für die Ablehnen-Schaltfläche
• Einstellungslink - Text zum Öffnen der Präferenzen

Änderungen in der Vorschau

Im Designer sehen Sie eine Live-Vorschau des Banners. Sie können:

• Zwischen Desktop- und Mobilansicht wechseln
• Verschiedene Zustände testen (erste Anzeige, Einstellungszentrum)
• Das Erscheinungsbild im hellen/dunklen Modus prüfen

CSS-Anpassung

Für erweiterte Anpassungen können Sie individuelles CSS verwenden. Das Widget nutzt CSS-Variablen:

/* Beispiel für Stil-Überschreibungen */
.consentio-banner {
  --consentio-bg: #ffffff;
  --consentio-text: #1a1a1a;
  --consentio-primary: #10b981;
  --consentio-primary-hover: #059669;
  --consentio-border-radius: 12px;
}