Möchten Sie, dass Ihr Cookie-Banner so aussieht, als würde es zu Ihrer Website gehören, anstatt nachträglich angebracht zu sein? Die Registerkarte "Stil" unter "Banner-Design" steuert die Farben des Banners, seine Textgröße sowie die Form und Farbe seiner drei Schaltflächen. Alles, was Sie brauchen, ist WPConsent installiert und aktiviert.
Diese Anleitung führt Sie durch jede Einstellung auf dieser Registerkarte und zeigt Ihnen, wie Sie Ihre Arbeit in der Live-Vorschau überprüfen können, bevor Sie speichern.
Inhaltsverzeichnis
- Festlegen der Bannerfarben und Textgröße
- Gestalten der Schaltflächen
- Färben der drei Schaltflächen
- Vorschau des Banners
- Speichern Ihrer Stile
- Häufig gestellte Fragen
Stellen Sie vor Beginn sicher, dass WPConsent auf Ihrer WordPress-Website installiert und aktiviert ist.
Festlegen der Bannerfarben und Textgröße
Um zu beginnen, öffnen wir die Registerkarte, auf der die Farben und die Textgröße des Banners enthalten sind.
Gehen Sie in der WordPress-Admin-Seitenleiste zu WPConsent » Banner Design.
Banner-Design öffnet sich auf der Registerkarte "Layout". Oben auf der Seite befinden sich drei Registerkarten in der Reihenfolge: Layout, dann Stil, dann Inhalt. Um zu den Stileinstellungen zu gelangen, klicken Sie auf Stil.
Die drei Registerkarten teilen das Banner in drei Aufgaben auf. Layout bestimmt die Form des Banners und seine Position, und unsere Anleitung zu Banner-Layout-Optionen behandelt es. Inhalt enthält jedes Wort, das das Banner sagt, behandelt in unserer Anleitung zu Banner-Inhalt und Text. Stil, die Registerkarte, auf der wir uns befinden, kümmert sich darum, wie alles aussieht.
Jede Einstellung auf dieser Registerkarte speist eine Live-Vorschau, die sich über eine Schaltfläche im Seitenkopf öffnet. Sie können eine Farbe oder eine Schaltflächenform ausprobieren und das Ergebnis sehen, bevor Sie sich dazu verpflichten.
Der erste Abschnitt des Panels heißt Banner und enthält die drei Einstellungen, die das Banner selbst gestalten.
Hintergrundfarbe füllt das Banner-Panel und Textfarbe wird auf die Nachricht des Banners angewendet. Das Paar färbt auch die schwebende Einstellungs-Schaltfläche, wenn Sie diese aktiviert haben. Schriftgröße legt die Größe des Nachrichtentextes fest.
WPConsent zeichnet das Banner in seinem eigenen isolierten Container, sodass die hier von Ihnen ausgewählten Farben die Farben sind, die die Besucher sehen, unabhängig davon, was das Stylesheet Ihres Themes tut.
Um eine Farbe zu ändern, klicken Sie auf das Feld Hintergrundfarbe.
Der Auswähler bietet Ihnen einen Farbverlauf für den Farbton, einen vertikalen Schieberegler für die Nuance und eine Reihe von Voreinstellungen am unteren Rand. Sie können auch einen Hex-Wert direkt in das Feld eingeben, was der schnellere Weg ist, wenn Sie Ihre Markenfarbe bereits kennen. Textfarbe und die sechs Schaltflächenfarben weiter unten öffnen alle denselben Auswähler.
Wenn Sie irgendwo außerhalb des Auswählers klicken, wird er geschlossen, und das kleine Quadrat neben dem Feld zeigt weiterhin die Farbe an, auf die Sie sich festgelegt haben.
Für den Nachrichtentext öffnen Sie das Dropdown-Menü Schriftgröße.
Die Liste reicht von 12px bis 30px in 2px-Schritten. Diese Einstellung steuert den Nachrichtentext des Banners. Der Schaltflächentext wird stattdessen durch die Schaltflächengröße bestimmt, die der nächste Abschnitt behandelt.
Gestalten der Schaltflächen
Eine Gruppe von Einstellungen formt alle Schaltflächen auf dem Banner auf einmal, sodass Größe und Form einmal statt pro Schaltfläche eingestellt werden.
Unter einem Trennstrich enthält der Abschnitt Buttons drei Dropdowns. Beginnen Sie mit Button-Größe.
Button-Größe legt gemeinsam die Höhe und die Textgröße fest. Klein ergibt einen 30px-Button mit 14px Text, Standard ergibt 45px und 15px, und Groß ergibt 60px und 18px.
Klein eignet sich für ein Banner, das nicht stört, und Groß für eines, bei dem Besucher sofort handeln sollen.
Button-Ecken legt fest, wie abgerundet die Ecken sind. Quadratisch ergibt scharfe Ecken und Leicht Abgerundet einen kleinen Radius von 4px. Abgerundet ergibt einen Radius von 20px, was bei den kleineren Button-Größen wie eine Pille wirkt.
Die Wahl sollte zu den Buttons passen, die Ihr Theme bereits verwendet. Quadratisch passt zu einem scharfen, redaktionellen Design und Abgerundet zu einem weicheren, mit Leicht Abgerundet dazwischen.
Button-Typ ist derjenige, der eine Vorschau wert ist. Um ihn zu sehen, öffnen Sie Button-Typ und wählen Sie Umrandet.
Gefüllt gibt jedem Button eine durchgehende Füllung. Umrandet macht das Innere des Buttons transparent und zieht einen 2px-Rand in der Farbe, die Gefüllt als Füllung verwendet.
Umrandete Buttons fallen auf einer belebten Seite weniger auf, und gefüllte Buttons wirken deutlicher klickbar.
Alle drei dieser Einstellungen erreichen auch die Buttons im Einstellungsfeld. Die Buttons, die Besucher nach dem Öffnen ihrer Cookie-Einstellungen sehen, entsprechen denen auf dem Banner. Unser Leitfaden zum Einstellungsfeld behandelt diesen Bildschirm.
Färben der drei Schaltflächen
Unter einem weiteren Trennstrich paart der Abschnitt Button-Farbe eine Hintergrund- und eine Schriftfarbe für jeden der drei Buttons des Banners. Beginnen Sie mit Akzeptieren-Hintergrund.
Die drei Zeilen folgen den drei Buttons des Banners. Akzeptieren-Hintergrund und dessen Schriftfarbe gestalten den Akzeptieren-Button. Ablehnen-Hintergrund und dessen Schriftfarbe gestalten den Ablehnen-Button. Anpassen-Hintergrund und dessen Schriftfarbe gestalten den Einstellungen-Button.
Dem Akzeptieren-Button die stärkste Farbe zu geben und die anderen beiden ruhiger zu lassen, ist eine gängige Wahl. Es hält das Banner auf einen Blick lesbar.
Hinweis: Wenn der Button-Typ auf Umrandet eingestellt ist, wird jede Hintergrundfarbe stattdessen zur Randfarbe dieses Buttons. Ein umrandeter Button hat keine Füllung hinter seinem Text, daher muss jede Schriftfarbe gegen Ihren Bannerhintergrund und nicht gegen den Button lesbar sein.
Wenn Sie den schwebenden Einstellungsbutton aktiviert haben, folgt diesem Abschnitt ein Abschnitt Design des schwebenden Einstellungsbuttons mit einem Icon-Picker darin. Unser Leitfaden zum schwebenden Zustimmungsbutton behandelt diese Einstellung.
Vorschau des Banners
WPConsent kann Ihr Banner in voller Größe über der Admin-Seite anzeigen. Das ist der schnellste Weg, eine Farbwahl zu beurteilen, bevor sie live geht.
Klicken Sie oben rechts auf der Seite auf Vorschau.
Die Überlagerung verwendet die aktuell auf dem Bildschirm befindlichen Einstellungen und nicht die zuletzt gespeicherten, sodass nicht gespeicherte Änderungen darin angezeigt werden. Wenn der Button-Typ auf Gefüllt eingestellt ist, hat jeder Button eine durchgehende Hintergrundfarbe.
Wenn der Button-Typ auf Umrandet eingestellt ist, behalten dieselben drei Buttons einen Rand und verlieren ihre Füllung.
Diese Vorschau zeigt auch, warum die Schriftfarbe wichtiger wird, sobald die Füllung wegfällt. Jede Schaltfläche behält die Schriftfarbe, die ihr für den gefüllten Stil zugewiesen wurde, und wenn die Füllung entfernt wird, sitzt diese Farbe nun stattdessen auf dem Hintergrund des Banners. Der Wechsel zu "Umrandet" ist daher ein guter Zeitpunkt, um die drei Felder für die Schriftfarbe zu überprüfen.
Die Vorschau bleibt geöffnet, während Sie weiterarbeiten, und sie folgt jeder Änderung, die Sie auf dem Tab vornehmen. Dieselbe Schaltfläche blendet sie wieder aus.
Speichern Ihrer Stile
Nichts auf diesem Tab wird gespeichert, bis Sie speichern. Der letzte Schritt ist also, das, was Sie eingerichtet haben, zu bestätigen.
Wenn Ihr Banner so aussieht, wie Sie es möchten, scrollen Sie zum Ende des Panels. Klicken Sie dann auf Speichern & Fortfahren.
Diese Schaltfläche speichert Ihre Stile und bringt Sie zum Tab "Inhalt", der der nächste Schritt in der Drei-Tab-Sequenz ist. Der Link "Zurück" daneben kehrt zu "Layout" zurück, ohne zu speichern.
Die Schaltfläche "Speichern" oben rechts auf der Seite speichert dieselben Einstellungen und lässt Sie auf dem Tab "Stil". Das ist derjenige, den Sie verwenden sollten, wenn das Styling das Einzige ist, was Sie hier ändern wollten.
Das war's! Ihr Zustimmungsbanner trägt jetzt Ihre eigenen Farben, Textgröße und Schaltflächenformen.
Schauen Sie sich als Nächstes unseren Leitfaden zu Bannerinhalt und -text an, um die Nachricht und die Schaltflächenbeschriftungen festzulegen, die Ihr Banner anzeigt.
Häufig gestellte Fragen
Meine neuen Farben werden auf meiner Website nicht angezeigt
Leeren Sie Ihre Caches und laden Sie die Website erneut. Bannerstile sind Teil der Seite, die WPConsent rendert. Ein Caching-Plugin oder ein seitenweiter Cache auf Host-Ebene kann die Version vor Ihrer Änderung weiterhin ausliefern. Unser Leitfaden zur Datenbank- und Cache-Verwaltung behandelt die Caches, die WPConsent selbst verwaltet.
Warum ist der Text meiner umrandeten Schaltfläche unsichtbar?
Eine umrandete Schaltfläche hat ein transparentes Inneres, sodass ihr Text direkt auf dem Hintergrund des Banners liegt und die Schriftfarbe behält, die Sie ihm gegeben haben. Weißer Text auf einem weißen Banner ist die übliche Ursache. Geben Sie jeder Schaltfläche eine Schriftfarbe, die sich von Ihrem Hintergrund abhebt, oder setzen Sie den Schaltflächentyp zurück auf "Gefüllt".
Ändert die Schriftgröße auch den Schaltflächentext?
Nein. Die Schriftgröße gilt für die Nachricht des Banners. Der Schaltflächentext wird durch die Schaltflächengröße bestimmt, die 14px Text mit "Klein", 15px mit "Standard" und 18px mit "Groß" kombiniert.
Gelten diese Stile auch für das Präferenzpanel?
Teilweise. Hintergrundfarbe, Textfarbe und die drei Schaltflächenfarbpaare werden in das Präferenzpanel übernommen, ebenso wie Schaltflächengröße, Schaltflächenecken und Schaltflächentyp. Die Schriftgröße gilt für die Banner-Nachricht.
Wird mein Theme die Bannerstile überschreiben?
Nein. WPConsent rendert das Banner innerhalb eines Shadow-Roots, das die CSS Ihres Themes und die CSS des Banners voneinander trennt. Deshalb muss ein Bannerstil hier und nicht in der Stylesheet Ihres Themes geändert werden.
Kann ich etwas gestalten, das der Stil-Tab nicht abdeckt?
Ja. WPConsent stellt die Farben und Größen des Banners als CSS-Variablen zur Verfügung, die Sie selbst festlegen können, und es akzeptiert Ihr eigenes CSS für feinere Details. Unsere Leitfäden zur Anpassung des Banners mit CSS-Variablen und Anpassung des Banners mit CSS behandeln beide Wege.
Speichert die Vorschau etwas?
Nein. Die Vorschau liest die aktuell auf dem Bildschirm befindlichen Einstellungen, sodass sie sowohl ungespeicherte als auch gespeicherte Änderungen anzeigt. Wenn Sie die Seite verlassen, ohne zu speichern, werden alle Änderungen verworfen, die Sie vorgenommen haben.
Kann ich verschiedene Stile auf verschiedenen Seiten verwenden?
Die Registerkarte „Stil“ legt ein Erscheinungsbild für die gesamte Website fest, sodass jede Seite dasselbe Banner anzeigt. Für eine feinere Steuerung als die Registerkarte bietet, behandelt unser Leitfaden zum Anpassen des Banners mit CSS den manuellen Weg.