Personyze Wiki Personyze Wiki docs
Deutsch
Open Personyze
Docs/ Vorlage: Overlay-Slider

Vorlage: Overlay-Slider

Ein randloses Bildkarussell mit Name, Untertitel und Preis direkt auf dem Foto, für Mode-, Wohn- und Lifestyle-Kataloge.

3 min read Updated 3 Stunden ago

Ein randloses Bildkarussell, bei dem Produktname, Untertitel und Preis direkt auf dem Foto über einem Lesbarkeitsverlauf erscheinen — ein hochwertiger, redaktioneller Look für Mode-, Wohn- und Lifestyle-Kataloge.

Es teilt sich den Motor mit dem Product Slider: dieselben vier Style accents, Badges, Hover-Effekte, Autoplay, Bildzoom, zweites Bild beim Überfahren sowie das zentrale Preisformat und die Währungseinstellungen. Zwei Einstellungen prägen seine Identität: Show Text on Image und Show Gradient Overlay, beide standardmäßig an, mit einer höheren Fotofläche und drei Karten pro Ansicht. Schalten Sie Text on Image aus, wird er zu einem klassischen Karten-Slider mit Text unter dem Bild.

So funktioniert diese Vorlage

Diese Vorlagenfamilie beruht auf vier Ideen:

  • Style accents. Die erste Einstellung, Style accent (light, gold, bold, ocean), färbt Karten, Badges, Buttons, Preise, Punkte und Scrollleisten mit einem Klick gemeinsam um. Jede Farbe lässt sich danach weiterhin einzeln in ihrem eigenen Stilfeld überschreiben.
  • Catalog Fields an einer Stelle. Der Bereich Catalog Fields (der zweite im Menü) ordnet jede Produktspalte zu, die die Vorlage nutzt — Bilder, URL, Titel, Marke, beide Preisspalten, Bewertung, Beschreibung, Bestand, Rabattprozent, Datumsangaben und eigene Felder. Die Zuordnungen gelten global: Eine dort gesetzte Spalte aktualisiert jedes Element, das sie verwendet. Shops mit vollständig eigenen Feeds können das ganze Widget über diesen einen Bereich neu verdrahten.
  • Live-Demomodus. Beim Gestalten erscheinen automatisch realistische Demoprodukte (Besucher sehen sie nie). Die erste Demokarte ist ein Live-Schaufenster: Klicken Sie auf ein beliebiges Element darauf, um es zu gestalten, und jeder Schalter — Badges, Add to Cart, Overlays, Statistiken, Beschreibung, Grundpreis — wirkt sich sichtbar darauf aus.
  • Zentrale Preisdarstellung. Der Bereich Pricing hat eine Auswahl Price Format (standard / european / rounded / rounded-european) und ein Paar Felder für Währungssymbole, die überall gelten, wo Preise erscheinen, auch im Overlay auf dem Bild. Produkte ohne Preis zeigen nichts an — keine verwaisten Währungssymbole.

Gut zu wissen

  • Die Artikel pro Gerät richten sich nach dem Container, nicht nur nach dem Bildschirm. Die sichtbaren Artikelzahlen (Desktop / Tablet / Mobil) werden aus der eigenen Breite des Widgets abgeleitet und funktionieren daher in der Gerätevorschau des Editors, auf echten Smartphones und sogar in schmalen Seitenleisten korrekt.
  • Text on Image entfernt Doppelungen automatisch. Solange das Overlay aktiv ist, blenden sich Titel, Markenzeile und Preis unter dem Foto von selbst aus.
  • Hover-Stile sind eigene Felder. Wenn Sie die Grundfarbe eines Buttons ändern, übernehmen Sie sie im passenden Feld Hover Style, damit der Hover-Effekt einheitlich bleibt.
  • Gespeicherte Vorlagenkarten frieren ihren Code ein. Wenn Sie eine eigene Kopie unter Your templates behalten, verwenden die daraus erstellten Aktionen den Code im Zustand beim Speichern — speichern Sie die Karte nach größeren Updates erneut.
Did this page answer your question?
Thank you — that goes to whoever maintains this page.