Immer passend zum eigenen Layout
Das Aussehen der Marketing Suite Elemente kann vereinfacht ausgewählt werden. Je nach Erscheinungsbild der eigenen Seite kann zwischen einem hellen oder einem dunklen Layout gewählt werden.
Standardauswahl Hell oder Dunkel
Im Backend unter Styling-Einstellungen ist das Erscheinungsbild mit einem Klick auswählbar:
Was ist, wenn das helle oder dunkle Farbschema nicht 100%ig zum eigenen Style passt?
Dafür gibt es eine Lösung. Die Farben sind schnell und einfach durch CSS-Variablen anpassbar. Ganz individuell.
Farben individualisieren
In folgendem Beispiel werden exemplarisch die Farben des Cookie-Consents individualisiert. Die Vorgehensweise ist bei anderen Marketing Suite Elementen gleich. Buttons oder Overlays können genauso bearbeitet werden.
1. Schritt - Zuerst ist im Abschnitt "Styling-Einstellungen" die Option "Standarddarstellung nutzen / anpassen" auszuwählen. Nach dem Anklicken der Option wird die Layout-Auswahl angeboten. Dort ist die grundlegende Entscheidung für eine von zwei Varianten zu treffen - entweder ein helles oder ein dunkles Layout.
Element mit CSS stylen
2. Schritt - Nach der grundlegenden Konfiguration des Elementes (Hell oder Dunkel), wird es etwas technisch. Aber keine Sorge, es ist nicht kompliziert 😉
Bitte der folgenden Schritt - für Schritt Anleitung folgen:
- Die Seite mit dem jeweiligen Marketing Suite Element (hier Cookie Consent) im Frontend aufrufen
- Ist das Element sichtbar, einen Rechtsklick darauf machen und "Element untersuchen" wählen. (Je nach Browser leicht unterschiedlich benannt)
- In der Elemente-Ansicht muß sichergestellt sein, das der äußerste Container des Elements ausgewählt wird, hier
<cms-accept-tags> - Danach findet sich im Abschnitt Styles das CSS für das Element
In dem CSS finden sich verschiedene CSS-Variablen.
Diese CSS-Variablen beginnen immer mit -- und werden hier für das Farbschema des Elements (Cookie-Consent) genutzt.
Um beispielsweise den Button "Bestätigen" umzufärben, müsste folgende Zeile in das Stylesheet unseres Layouts hinzugefügt werden:
:root cms-accept-tags {
--btn-accept-text-color: #fff;
--btn-accept-bg-color: #f47c00;
}
Ergebnis: Der Bestätigen-Button erhält einen orangefarbenen Hintergrund sowie weißen Text.
Das gesamte Styling individuell gestalten - CI umsetzen
Wer völlig individuell sein möchte, kann den oben erwähnten Haken "Standarddarstellung nutzen / anpassen" abwählen und ein eigenes Styling für das gesamte Marketing Suite Element hinterlegen. So kann auch eine CI-Vorgabe umgesetzt werden.