DSGVO PIXELMATE

Design-Einstellungen

Auf einen Blick: Pixelmate lässt sich komplett an das Design deiner Website anpassen – von der Banner-Form über Farben und Schriftgrößen bis hin zu Animationen. Hier erfährst du, welche Einstellungen es gibt, was sie bewirken und wie du deinen Banner am besten einrichtest.

Wo findest du die Design-Einstellungen?

WordPress Admin → Pixelmate → Design

Ganz oben findest du eine Template-Leiste mit vier Buttons:

Button Funktion
Template wählen Eines der vier Vorlagen-Designs laden
Export Aktuelle Einstellungen als JSON herunterladen
Import Gespeichertes Design aus JSON-Datei laden
Speichern Aktuelles Design als eigenes Template sichern
Vorschau Banner-Vorschau anzeigen

Tipp: Fang immer mit einem der vier Vorlagen-Templates an – das spart Zeit und gibt dir eine gute Basis zum Anpassen.

Templates (Vorlagen)

Pixelmate kommt mit vier fertigen Designs, die du als Startpunkt verwenden kannst:

Template Beschreibung
Standard Klassischer Banner mit mittlerer Breite, leicht abgerundeten Ecken
Minimal Light Helles, dezentes Design – passt zu hellen Websites
Minimal Dark Dunkles Design für Websites mit dunklem Look
Leiste unten Schmale Banner-Leiste am unteren Bildschirmrand

Nach dem Laden eines Templates kannst du alles weiter anpassen.

Wähle die grundlegende Form deines Banners:

Style Was passiert
Fullscreen Banner überlagert die gesamte Seite mit einem Overlay
Leiste unten Schmale Leiste am unteren Rand der Seite
Minimal Kleines Fenster – positionierbar in einer von vier Ecken

Der Minimal-Style ist am häufigsten im Einsatz: er stört am wenigsten und gibt Nutzern trotzdem die Wahl.

Wenn du den Minimal-Style verwendest, kannst du die Position wählen:

  • Unten links
  • Unten rechts (Standard)
  • Oben links
  • Oben rechts

Animationen

Der Banner kann beim Erscheinen und Verschwinden animiert werden. Das macht das Ganze etwas lebendiger – übertreib es aber nicht, zu viel Bewegung lenkt ab.

Eingangsanimation

Animation Effekt
Keine Sofort sichtbar
Einblenden Sanftes Einblenden (Fade In)
Von unten einschieben Gleitet von unten ins Bild (Standard)
Von oben/links/rechts Gleitet aus der jeweiligen Richtung
Einspringen Leichter Bounce-Effekt
Einzoomen Vergrößert sich beim Erscheinen
Horizontal/Vertikal umklappen Flip-Effekt

Ausgangsanimation

Gleiche Optionen wie oben, nur in die andere Richtung.

Dauer & Easing

  • Dauer: 100–2000 ms (Standard 300 ms). Kurz halten – 200–400 ms wirkt natürlich.
  • Easing: Bestimmt den Verlauf der Animation.
  • Ease Out (Standard): schnell starten, sanft stoppen → wirkt natürlich
  • Linear: gleichmäßige Geschwindigkeit
  • Bounce: leichter Aufprall-Effekt am Ende

Responsive Design: Desktop / Tablet / Mobil

Die Design-Einstellungen sind nach Gerät getrennt. Wechsle zwischen den drei Tabs:

  • Desktop – ab ca. 1024px
  • Tablet – ca. 768–1023px
  • Mobil – unter 768px

Für jede Gerätegröße kannst du unabhängig einstellen: - Banner-Größe (Breite, Höhe, Max-Werte) - Abstände (Padding, Margin) - Schriftgrößen

Feld Beschreibung
Width Breite des Banners (z.B. 500px, 90vw, 100%)
Height Höhe – meistens auto lassen
Max Width Maximale Breite
Max Height Maximale Höhe

Bei erweiterbaren Banner-Modi (eingestellt unter Allgemein) gibt es zusätzliche Felder für den kollabierten Zustand (also wie der Banner aussieht, bevor er aufgeklappt wird).

Abstände (Padding & Margin)

Padding = Innenabstand (zwischen Banner-Rand und Inhalt) Margin = Außenabstand (Abstand zum Bildschirmrand)

Alle vier Seiten lassen sich einzeln einstellen. CSS-Werte wie 20px, 1rem, 5%, oder auto sind möglich.

Schriftgrößen

Für Überschrift, Text und Buttons kannst du die Schriftgröße pro Gerät festlegen. Sinnvoll, wenn der Banner auf Mobilgeräten etwas kleiner sein soll.

Farben

Hier legst du die Farbpalette des Banners fest:

Farbe Wofür
Hintergrundfarbe Hauptfarbe des Banner-Hintergrunds
Textfarbe Standard-Textfarbe
Linkfarbe Farbe der Links (z.B. Datenschutzlink)
Button "Alle akzeptieren" – Hintergrund Farbe des Akzeptieren-Buttons
Button "Alle akzeptieren" – Text Textfarbe des Akzeptieren-Buttons
Button "Alle ablehnen" – Hintergrund Farbe des Ablehnen-Buttons
Button "Alle ablehnen" – Text Textfarbe des Ablehnen-Buttons
Button "Einstellungen" – Hintergrund Farbe des Einstellungen-Buttons
Button "Einstellungen" – Text Textfarbe des Einstellungen-Buttons

Alle Farbfelder unterstützen Hex-Codes (#3a86ff), RGB, und den visuellen Farbwähler.

Tipp zur Barrierefreiheit: Achte auf ausreichenden Kontrast zwischen Text- und Hintergrundfarbe. Mindest-Kontrastverhältnis laut WCAG: 4,5:1 für normalen Text.

Du kannst ein Logo oder ein benutzerdefiniertes Bild in den Banner einbinden. Das macht den Banner persönlicher und sorgt für Wiedererkennungswert.

Einstellung Beschreibung
Bild hochladen Bild aus der WordPress Media Library wählen
Position Wie das Bild im Banner platziert wird
Größe Breite/Höhe des Bildes (z.B. 80px auto)
Border Radius Abrundung des Bildes (z.B. 50% für rund)

Im "Erweiterbar"-Modus (Banner-Modus unter Allgemein) kannst du das Bild erst nach der Erweiterung anzeigen lassen.

Overlay (nur Fullscreen)

Wenn du den Fullscreen-Style verwendest, kannst du den Hintergrund hinter dem Banner-Fenster gestalten:

Option Effekt
Kein Overlay Keine Überdeckung der Seite
Blur Frosted-Glass-Effekt – Seite ist sichtbar, aber unscharf
Farbe Dunkles oder farbiges Overlay über der Seite

Der Blur-Effekt sieht modern aus, kann aber auf älteren Geräten Performance-Probleme verursachen.

Button-Styling

Zusätzlich zu den Farben kannst du die Form der Buttons anpassen:

Einstellung Beschreibung
Border Width Rahmenbreite (z.B. 0 für keinen Rahmen, 2px für Outline-Style)
Border Radius Abrundung der Ecken (0 = eckig, 999px = Pill-Form)
Padding Innenabstand innerhalb des Buttons
Margin Außenabstand des Buttons

Custom CSS

Ganz unten in den Design-Einstellungen findest du ein Feld für eigenes CSS.

Damit kannst du alles anpassen, was über die Standard-Einstellungen hinausgeht. Der Banner hat die Klasse .pixelmate-banner – darüber kannst du gezielt targeten.

Beispiel: css .pixelmate-banner { border: 2px solid #your-brand-color; box-shadow: 0 8px 32px rgba(0,0,0,0.3); }

Wichtig: Custom CSS wird nach den Standard-Styles geladen und überschreibt diese. Bei Updates des Plugins bleiben deine Anpassungen erhalten.

Export & Import von Design-Templates

Design exportieren

  1. Design fertig einstellen
  2. Oben auf das Download-Symbol klicken
  3. JSON-Datei wird gespeichert → sicher aufbewahren

Design importieren

  1. Auf das Upload-Symbol klicken
  2. Name vergeben (z.B. "Sommer-Kampagne")
  3. JSON-Datei auswählen und importieren

Design als Template speichern

  1. Auf das Cloud-Symbol klicken
  2. Name vergeben
  3. Das Template erscheint dann im Template-Dropdown zur Wiederverwendung

Das ist praktisch, wenn du mehrere Websites verwaltest oder bei Redesigns schnell zwischen Varianten wechseln willst.

Typische Fehler

Banner sieht auf Mobil seltsam aus: → Zum Mobil-Tab wechseln und die Größen separat anpassen.

Farben ändern sich nicht: → Browser-Cache leeren (Strg+Shift+R / Cmd+Shift+R).

Custom CSS wird nicht angewendet: → Selector genauer machen oder !important verwenden (sparsam einsetzen).

Banner ist zu groß / zu klein: → Width und Max-Width überprüfen, ggf. vw- statt px-Werte verwenden.

Inhalt

Menü