Element-Attribute

Haben Sie Fragen? Anfrage einreichen

Alle Elemente haben einige Attribute, die Sie ändern können, um das Design des Elements anzupassen. Die Attribute können durch Auswahl eines Elements im mittleren Bildschirm geändert werden. Auf der rechten Seite können die Attribute geändert werden.

Container

Der Container ist der Baustein des Cookie-Banner-Anpassers. Am besten fügen Sie jedes Element in einen Container ein. Sie können weitere Elemente in den Container ziehen und so komplexe Strukturen aufbauen.

  • Abmessungen: Fügen Sie dem Container eine Breite und Höhe hinzu. Mögliche Werte sind Pixel (px), Prozentwerte (%) und auto. Bei auto errechnet der Browser den Wert und er passt meist zu den Elementen im Container.
  • Farben
    • Hintergrund: Ändert die Hintergrundfarbe des Containers. Die Farbe kann im Farbwähler gewählt werden oder es kann ein HEX-, RGBA- oder HSLA-Wert hinzugefügt werden.
    • Text: Ändert die Textfarbe des Containers. Die Farbe kann im Farbwähler ausgewählt oder ein HEX-, RGBA- oder HSLA-Wert kann hinzugefügt werden.
  • Rand: Fügt oben, unten, rechts oder links des Containers einen Rand in Pixeln hinzu.
  • Auffüllung: Fügen Sie oben, unten, rechts oder links des Containers eine Auffüllung in Pixeln hinzu.
  • Dekoration
    • Radius: Fügt dem Container einen Radius in Pixeln hinzu.
    • Schatten: Fügen Sie dem Container einen Schatten in Pixeln hinzu.
  • Ausrichtung
    • Flex-Richtung: Standardmäßig ist die Flex-Richtung eine Säule. Dadurch werden alle Elemente, die dem Container hinzugefügt werden, untereinander angeordnet. Die andere Option ist Zeile, damit werden alle Elemente im Container nebeneinander platziert.
    • Raum füllen: In der Voreinstellung ist dies nein. Der Container hat also die angegebene Breite und Höhe. Wenn Sie dies auf "Ja" ändern, wird der Container um seine Elemente herumgezogen und auf die minimal benötigte Breite und Höhe geändert.
    • Elemente ausrichten: Standardmäßig ist dies Flex start. Flex start richtet alle Elemente innerhalb des Containers nach links aus, Center richtet alle Elemente innerhalb des Containers in der Mitte aus und Flex end richtet alle Elemente innerhalb des Containers nach rechts aus.
    • Inhalt ausrichten: Standardmäßig ist dies Flex start. Flex start beginnt oben mit allen Elementen, Center richtet alle Elemente innerhalb des Containers in der Mitte der Höhe des Containers aus und Flex end richtet alle Elemente bis zum Ende des Containers aus.
  • Sichtbarkeit: Mehr Informationen zur Sichtbarkeit finden Sie hier.

Text

Das Textelement kann natürlich Text enthalten. Sie können den sichtbaren Text ändern, indem Sie auf das Textelement klicken und den Inhalt bearbeiten.

  • Typografie
    • Schriftgröße: Die Größe der Schrift in Pixeln.
    • Ausrichtung: Standardmäßig wird der Text linksbündig ausgerichtet. Andere Optionen sind zentriert oder rechts.
    • Gewicht: Hiermit wird die Fettheit des Textes geändert. Von niedrig bis hoch: Normal (Standard), Mittel, Fett.
  • Rand: Fügt oben, unten, rechts oder links vom Container einen Rand in Pixeln hinzu.
  • Erscheinungsbild
    • Text: Ändert die Textfarbe. Die Farbe kann im Farbwähler gewählt werden oder es kann ein HEX-, RGBA- oder HSLA-Wert hinzugefügt werden.
    • Schatten: Fügt dem Text einen Schatten in Pixeln hinzu.
  • Sichtbarkeit: Weitere Informationen zur Sichtbarkeit finden Sie hier.

Schaltfläche

Sie können bestimmte Aktionen an eine Schaltfläche binden, um alle Cookies zu akzeptieren, alle Cookies abzulehnen usw. Auch der Text innerhalb der Schaltfläche kann durch Anklicken des Textes geändert werden.

  • Farben
    • Hintergrund: Ändert die Hintergrundfarbe der Schaltfläche. Die Farbe kann im Farbwähler ausgewählt werden oder es kann ein HEX-, RGBA- oder HSLA-Wert hinzugefügt werden.
    • Text: Ändert die Textfarbe der Schaltfläche. Die Farbe kann im Farbwähler ausgewählt oder ein HEX-, RGBA- oder HSLA-Wert kann hinzugefügt werden.
    • Hintergrund schweben: Ändert die Hintergrundfarbe der Schaltfläche, wenn der Mauszeiger über die Schaltfläche bewegt wird. Die Farbe kann über den Farbwähler ausgewählt oder ein HEX-, RGBA- oder HSLA-Wert hinzugefügt werden.
  • Rand: Fügt oben, unten, rechts oder links der Schaltfläche einen Rand in Pixel hinzu.
  • Auffüllung: Fügen Sie oben, unten, rechts oder links von der Schaltfläche eine Auffüllung in Pixeln hinzu.
  • Dekoration
    • Stil: Standardmäßig ist der Stil voll, so dass der gesamte Hintergrund die von Ihnen angegebene Farbe hat. Wenn der Stil "outline" ist, wird nur der Rand der Schaltfläche in der gewählten Farbe dargestellt.
    • Rand-Radius: Der Radius in Pixeln der Schaltfläche.
  • Typografie
    • Schriftgröße: Die Größe des Textes in der Schaltfläche in Pixeln.
    • Ausrichten: Standardmäßig wird der Text links von der Schaltfläche ausgerichtet. Andere Optionen sind zentriert oder rechts.
    • Gewicht: Damit wird die Fettheit des Textes in der Schaltfläche geändert. Von niedrig bis hoch: Normal (Standard), Mittel, Fett.
    • Aktion: Mit dieser Option können Sie eine Aktion zu einer Schaltfläche hinzufügen. Die Optionen sind Alle Cookies akzeptieren, Auswahl speichern, Einstellungen anpassen, Alle Cookies verweigern und Keine. Mit "Keine" wird der Schaltfläche keine Aktion hinzugefügt. Die Aktion "Alle Cookies akzeptieren" fügt die Aktion zum Akzeptieren aller Cookies hinzu. Die Aktion "Auswahl speichern" speichert die ausgewählten Schaltflächen. Über die Aktion "Einstellungen anpassen" können Sie in diesem Link hier mehr lesen. Die Aktion "Alle Cookies ablehnen" lehnt alle Cookies ab, außer den notwendigen.
  • Sichtbarkeit: Mehr Informationen zur Sichtbarkeit finden Sie hier.

Bild

Ein Bild, das auf Ihrem benutzerdefinierten Cookie-Banner angezeigt werden soll.

  • Abmessungen: Geben Sie eine Breite und Höhe für das Bild an. Mögliche Werte sind Pixel (px), Prozentwerte (%) und auto. Bei auto errechnet der Browser den Wert und er passt meist zu den Elementen im Container.
  • Bild
    • Bild-Url: Der Link auf das Bild
    • Bild einpassen: Standardmäßig füllen. Fill füllt die Dimensionen des Bildes und wenn nötig wird das Bild gestreckt oder gestaucht, damit es passt. Bei der Option "enthalten" wird das Seitenverhältnis beibehalten und die Größe so angepasst, dass es in die Dimensionen passt.
  • Sichtbarkeit: Weitere Informationen zur Sichtbarkeit finden Sie hier.

Umschalten

Dem Toggle kann eine Cookie-Kategorie hinzugefügt werden, damit die Benutzer ihre Cookie-Präferenz umschalten können. Neben dem Toggle kann ein Text durch Anklicken des Textes geändert werden.

  • Farben
    • Text: Ändert die Textfarbe des Toggles. Die Farbe kann im Farbwähler ausgewählt werden oder es kann ein HEX-, RGBA- oder HSLA-Wert hinzugefügt werden.
    • Kippschalter: Ändert die Farbe der Kugel, wenn der Toggle ausgewählt ist. Die Farbe kann über den Farbwähler ausgewählt oder ein HEX-, RGBA- oder HSLA-Wert hinzugefügt werden.
    • ToggleBar: Ändert die Farbe des Balkens, wenn der Toggle ausgewählt ist. Die Farbe kann über den Farbwähler ausgewählt oder ein HEX-, RGBA- oder HSLA-Wert hinzugefügt werden.
  • Rand: Fügt einen Rand in Pixeln oben, unten, rechts oder links des Umschalters hinzu.
  • Typografie
    • Seite des Textes: Standardmäßig Rechts. Mit der Option Rechts wird der Text rechts vom Umschalter platziert. Die andere Option Links platziert den Text links vom Kippschalter.
    • Schriftgröße: Die Größe des Textes neben dem Kippschalter in Pixeln.
    • Ausrichten: Standardmäßig wird der Text im Textfeld links ausgerichtet. Andere Optionen sind zentriert oder rechts.
    • Gewicht: Dies ändert die Fettheit des Textes neben dem Umschalter. Von niedrig bis hoch: Normal (Standard), Mittel, Fett.
  • Toggle-Gruppe: Zu einem Toggle kann eine Toggle-Gruppe hinzugefügt werden. Dies sind die Cookie-Kategorien. Wenn der Benutzer auf eine Schaltfläche mit der Aktion "Auswahl speichern" klickt, werden die Toggle-Gruppen der ausgewählten Toggles gespeichert. Auch wenn ein Benutzer zurückkehrt und das Cookie-Banner erneut sieht, werden die entsprechenden Toggles zu seiner Zustimmung ausgewählt.
  • Sichtbarkeit: Mehr Informationen zur Sichtbarkeit finden Sie hier.

Beiträge in diesem Abschnitt

War dieser Beitrag hilfreich?
0 von 1 fanden dies hilfreich
Teilen