Möchten Sie das Erscheinungsbild Ihres Einwilligungsbannes an Ihre Marke anpassen? Der Tab Stil von WPConsent gibt Ihnen die volle Kontrolle über Farben, Schriftgröße und das Aussehen der Schaltflächen. Diese Anleitung führt Sie durch die Anpassung jedes visuellen Details Ihres Banner-Stylings.

Inhaltsverzeichnis

• Voraussetzungen
• Öffnen des Stil-Tabs
• Festlegen der Hintergrund- und Textfarben des Banners
• Auswählen einer Schriftgröße
• Konfigurieren der Schaltflächengröße
• Festlegen des Eckradius der Schaltfläche
• Auswählen des Schaltflächentyps
• Anpassen einzelner Schaltflächenfarben
• Speichern Ihrer Änderungen
• Einrichtung überprüfen
• FAQ
• Schlussfolgerung

Voraussetzungen

• WPConsent ist auf Ihrer WordPress-Website installiert und aktiviert.
• Sie haben Administratorzugriff auf das WordPress-Dashboard.
• Sie haben bereits ein Banner-Layout im Tab Layout gewählt (siehe Banner-Layout-Optionen).

Öffnen des Stil-Tabs

Um zu beginnen, navigieren Sie zu WPConsent >> Banner-Design und klicken Sie auf den Tab Stil oben auf der Seite.

Jede Änderung, die Sie in diesem Tab 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 zuerst speichern zu müssen.

Festlegen der Hintergrund- und Textfarben des Banners

Der erste Abschnitt heißt Banner und enthält 2 Farbwähler.

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

Klicken Sie auf eine Farbfeld, um den Farbwähler zu öffnen. Sie können einen Hex-Wert direkt eingeben oder den visuellen Wähler verwenden, um eine Farbe auszuwählen.

Auswählen einer Schriftgröße

Neben den Farbwählern finden Sie ein Dropdown-Menü für die Schriftgröße. Wählen Sie einen Wert zwischen 12px und 30px (in 2-px-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 3 Optionen:

Wert	Beschreibung
Klein	Kompakte Schaltflächen mit weniger Abstand.
Standard	Standardgroße Schaltflächen. Dies ist die Standardeinstellung.
Groß	Schaltflächen mit zusätzlichem Abstand für höhere Sichtbarkeit.

Festlegen des Eckradius der Schaltfläche

Das Dropdown-Menü Schaltflächenecken steuert, wie abgerundet die Kanten der Schaltflächen sind:

Wert	Beschreibung
Eckig	Kein abgerundeter Eckenradius. Schaltflächen haben scharfe 90-Grad-Ecken.
Leicht abgerundet	Ein dezenter Eckenradius für ein weicheres Aussehen.
Abgerundet	Ein vollständig abgerundeter Eckenradius. Dies ist die Standardeinstellung.

Auswählen des Schaltflächentyps

Das Dropdown-Menü Button Type bestimmt, ob Schaltflächen gefüllt oder umrandet sind:

Wert	Beschreibung
Gefüllt	Schaltflächen haben eine durchgehende Hintergrundfarbe. Dies ist die Standardeinstellung.
Umrandet	Schaltflächen haben stattdessen einen transparenten Hintergrund mit einem farbigen Rand.

Wenn Sie Umrandet auswählen, fungieren die Einstellungen für die Schaltflächenhintergrundfarbe stattdessen als Einstellungen für die Randfarbe.

Hier sind die 2 Schaltflächentypen in der Banner-Vorschau. Der Stil Gefüllt verleiht Schaltflächen eine durchgehende Hintergrundfarbe:

Der Stil Umrandet ersetzt die durchgehende Hintergrundfarbe durch einen farbigen Rand und hält den Innenbereich der Schaltfläche transparent:

Anpassen einzelner Schaltflächenfarben

Unter den allgemeinen Schaltflächeneinstellungen finden Sie einen Abschnitt Schaltflächenfarbe mit Farbauswahlen für jede der 3 Schaltflächen.

Akzeptieren-Schaltfläche:

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

Ablehnen-Schaltfläche:

• Abbrechen Hintergrund ist die Füllfarbe (oder Randfarbe, wenn umrandet). Standard: #FFFFFF.
• Schriftfarbe ist die Textfarbe auf der Ablehnen-Schaltfläche. Standard: #FFFFFF.

Einstellungen-Schaltfläche:

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

Wenn Sie die schwebende Einstellungs-Schaltfläche aktiviert haben, sehen Sie am unteren Rand dieser Registerkarte auch den Abschnitt Design der schwebenden Einstellungs-Schaltfläche. Details zur Konfiguration des Symbols finden Sie im Leitfaden für die schwebende Einwilligungs-Schaltfläche.

Speichern Ihrer Änderungen

Klicken Sie auf Speichern & 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.

Einrichtung überprüfen

1. Überprüfen Sie die Banner-Vorschau am unteren Rand der Seite. Sie spiegelt jede Änderung in Echtzeit wider, sodass Sie Ihre Farben, Schriftgröße und Schaltflächenstile bestätigen können, bevor Sie speichern.
2. Öffnen Sie Ihre Website nach dem Speichern in einem neuen Inkognito- oder privaten Browserfenster.
3. Bestätigen Sie, dass das Banner die von Ihnen gewählte Hintergrundfarbe, Textfarbe und Schriftgröße anzeigt.
4. Überprüfen Sie, ob Größe, Eckradius, Typ und Farben der Schaltflächen mit Ihren Einstellungen übereinstimmen.

FAQ

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, leeren Sie dessen Cache, nachdem Sie die Banner-Einstellungen gespeichert haben.

Warum sieht der Umriss-Schaltflächenstil genauso aus wie der ausgefüllte?

Wenn Sie von Ausgefüllt zu Umriss wechseln, wird die Hintergrundfarbe zur Rahmenfarbe. Wenn sowohl der Hintergrund als auch der Rahmen die gleiche Farbe hatten, ist der visuelle Unterschied gering. Versuchen Sie, eine deutliche Rahmenfarbe festzulegen, um den Umriss-Effekt 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 Text des Hauptinhalts im Banner-Nachrichtenbereich. Die Textgröße der Schaltflächen skaliert proportional mit der Einstellung Schaltflächengröße, nicht mit der Dropdown-Liste für die Schriftgröße.

Schlussfolgerung

Sie haben nun den visuellen Stil Ihres Einwilligungsbannners angepasst, von Hintergrundfarben und Schriftgröße bis hin zu Schaltflächenformen und einzelnen Schaltflächenfarben. Alle Änderungen werden in der Live-Vorschau angezeigt, bevor Sie sie veröffentlichen. Um mit der Einrichtung Ihres Banners fortzufahren, erfahren Sie in unserer Anleitung, wie Sie die Beschriftungen von Nachrichten und Schaltflächen bearbeiten: Text des Bannerinhalts anpassen.