Möchten Sie das Erscheinungsbild Ihres Einwilligungsbanners an Ihre Marke anpassen? Über die Registerkarte „Stil“ von WPConsent haben Sie die volle Kontrolle über Farben, Schriftgröße und das Aussehen der Schaltflächen. Diese Anleitung führt Sie durch die Anpassung aller visuellen Details Ihres Banners.

Inhaltsverzeichnis

• Voraussetzungen
• Öffnen der Registerkarte „Stil“
• Festlegen der Hintergrund- und Textfarben des Banners
• Auswahl der Schriftgröße
• Konfigurieren der Schaltflächengröße
• Einstellung des Knopfeckradius
• Auswahl des Schaltflächentyps
• Anpassen der Farben einzelner Schaltflächen
• Änderungen speichern
• Überprüfen Ihrer Einrichtung
• Häufig gestellte Fragen
• Schlussfolgerung

Voraussetzungen

• WPConsent ist auf Ihrer WordPress-Website installiert und aktiviert.
• Sie haben Administratorzugriff auf das WordPress-Dashboard.
• Sie haben bereits ein Bannerlayout auf der Registerkarte „Layout“ ausgewählt (siehe Optionen für das Bannerlayout).

Öffnen der Registerkarte „Stil“

Um zu beginnen, navigieren Sie zu WPConsent >> Banner Design und klicken Sie oben auf der Seite auf die Registerkarte „Stil “.

Jede Änderung, die Sie auf dieser Registerkarte vornehmen, aktualisiert die Banner-Vorschau am unteren Rand der Seite in Echtzeit, sodass Sie mit Farben und Schaltflächenstilen experimentieren und das Ergebnis sofort sehen können, ohne vorher speichern zu müssen.

Festlegen der Hintergrund- und Textfarben des Banners

Der erste Abschnitt trägt die Bezeichnung „Banner“ und enthält zwei Farbauswahlfelder.

• Hintergrundfarbe steuert den Hintergrund des Banners. Die Standardeinstellung ist #FFFFFF (weiß).
• Textfarbe steuert die Farbe des Nachrichtentextes. Die Standardeinstellung ist #000000 (schwarz).

Klicken Sie auf ein Farbfeld, um die Farbauswahl zu öffnen. Sie können einen Hexadezimalwert direkt eingeben oder die visuelle Auswahl verwenden, um eine Farbe auszuwählen.

Auswahl der Schriftgröße

Neben den Farbauswahlfeldern finden Sie ein Dropdown-Menü für die Schriftgröße. Wählen Sie einen Wert zwischen 12px und 30px (in 2px-Schritten). Der Standardwert ist 16px.

Verfügbare Größen: 12px, 14px, 16px, 18px, 20px, 22px, 24px, 26px, 28px und 30px.

Konfigurieren der Schaltflächengröße

Scrollen Sie nach unten zum Abschnitt „Schaltflächen “. Das Dropdown-Menü „Schaltflächengröße“ bietet drei Optionen:

Wert	Beschreibung
Klein	Kompakte Tasten mit weniger Abstand.
Regelmäßig	Knöpfe in Standardgröße. Dies ist die Standardeinstellung.
Groß	Knöpfe mit zusätzlicher Polsterung für bessere Sichtbarkeit.

Einstellung des Knopfeckradius

Das Dropdown-Menü „Button Corner“ (Tastenecke) steuert, wie stark die Tastenränder abgerundet sind:

Wert	Beschreibung
Quadrat	Kein Eckenradius. Die Schaltflächen haben scharfe 90-Grad-Ecken.
Leicht abgerundet	Ein subtiler Kantenradius für einen weicheren Look.
Abgerundet	Ein vollständig abgerundeter Eckenradius. Dies ist die Standardeinstellung.

Auswahl des Schaltflächentyps

Das Dropdown-Menü „Schaltflächentyp“ bestimmt, ob Schaltflächen ausgefüllt oder umrandet sind:

Wert	Beschreibung
Gefüllt	Schaltflächen haben eine einfarbige Hintergrundfarbe. Dies ist die Standardeinstellung.
Umrissen	Die Schaltflächen haben einen transparenten Hintergrund mit einem farbigen Rand.

Wenn Sie „Umrandet“ auswählen, fungieren die Einstellungen für die Hintergrundfarbe der Schaltfläche stattdessen als Einstellungen für die Rahmenfarbe.

So sehen die beiden Schaltflächentypen in der Banner-Vorschau aus. Der Stil „Gefüllt“ verleiht den Schaltflächen eine einfarbige Hintergrundfarbe:

Der Stil „Umrandet“ ersetzt den einfarbigen Hintergrund durch einen farbigen Rand, wobei das Innere der Schaltfläche transparent bleibt:

Anpassen der Farben einzelner Schaltflächen

Unterhalb der allgemeinen Schaltflächeneinstellungen finden Sie den Abschnitt „Schaltflächenfarbe“ mit Farbauswahlfeldern für jede der drei Schaltflächen.

Akzeptieren-Schaltfläche:

• Hintergrund akzeptieren ist die Füllfarbe (oder Rahmenfarbe, wenn umrandet). Standard: #E8B13A.
• Schriftfarbe ist die Textfarbe auf der Schaltfläche „Akzeptieren“. Standard: #FFFFFF.

Ablehnen-Schaltfläche:

• Hintergrund löschen ist die Füllfarbe (oder Rahmenfarbe, wenn umrandet). Standard: #FFFFFF.
• Schriftfarbe ist die Textfarbe auf der Schaltfläche „Ablehnen“. Standard: #FFFFFF.

Einstellungen-Schaltfläche:

• Hintergrund anpassen ist die Füllfarbe (oder Rahmenfarbe, wenn umrandet). Standard: #04194E.
• Schriftfarbe ist die Textfarbe auf der Schaltfläche „Einstellungen“. Standard: #FFFFFF.

Wenn Sie die Schaltfläche für die schwebenden Einstellungen aktiviert haben, wird am unteren Rand dieser Registerkarte auch der Abschnitt „Design der Schaltfläche für schwebende Einstellungen“ angezeigt. Weitere Informationen zum Konfigurieren des Symbols finden Sie in der Anleitung zur schwebenden Zustimmungsschaltfläche.

Änderungen speichern

Klicken Sie auf „Speichern und fortfahren“, um zu speichern und zur Registerkarte „Inhalt“ zu wechseln. Alternativ können Sie oben rechts auf „Speichern“ klicken, um auf der aktuellen Registerkarte zu bleiben.

Überprüfen Ihrer Einrichtung

1. Überprüfen Sie die Banner-Vorschau unten auf der Seite. Dort werden alle Änderungen in Echtzeit angezeigt, sodass Sie vor dem Speichern überprüfen können, ob Farben, Schriftgröße und Schaltflächenstile korrekt sind.
2. Öffnen Sie Ihre Website nach dem Speichern in einem neuen Inkognito- oder privaten Browserfenster.
3. Überprüfen Sie, ob das Banner die von Ihnen gewählte Hintergrundfarbe, Textfarbe und Schriftgröße anzeigt.
4. Überprüfen Sie, ob die Größe, der Eckenradius, der Typ und die Farben der Schaltfläche mit Ihren Einstellungen übereinstimmen.

Häufig gestellte Fragen

Warum werden meine Farbänderungen nicht im Frontend angezeigt?

Leeren Sie alle Seiten-Caches und laden Sie die Website neu. Wenn Sie ein Caching-Plugin verwenden, löschen Sie dessen Cache, nachdem Sie die Bannereinstellungen gespeichert haben.

Warum sieht der umrandete Schaltflächenstil genauso aus wie der gefüllte?

Wenn Sie von „Gefüllt“ zu „Umrandet“ wechseln, wird die Hintergrundfarbe zur Rahmenfarbe. Wenn Hintergrund und Rahmen dieselbe Farbe haben, ist der visuelle Unterschied kaum erkennbar. Versuchen Sie, eine andere Rahmenfarbe festzulegen, um den Umrandungseffekt deutlich zu sehen.

Warum wirkt sich die Änderung der Schriftgröße nicht auf meine Schaltflächen aus?

Die Einstellung für die Schriftgröße steuert den Fließtext im Bereich für die Banner-Nachricht. Die Textgröße der Schaltflächen wird proportional zur Einstellung für die Schaltflächengröße skaliert, nicht zur Dropdown-Liste für die Schriftgröße.

Schlussfolgerung

Sie haben nun das visuelle Erscheinungsbild Ihres Einwilligungsbanners angepasst, von den Hintergrundfarben und der Schriftgröße bis hin zu den Formen und Farben der einzelnen Schaltflächen. Alle Änderungen werden in der Live-Vorschau angezeigt, bevor Sie sie veröffentlichen. Um mit der Einrichtung Ihres Banners fortzufahren, erfahren Sie in unserem Leitfaden zum Anpassen des Banner-Inhalts, wie Sie die Nachrichten- und Schaltflächenbeschriftungen bearbeiten können.