Vorlage: Produktempfehlungs-Slider Dark Premium Cards

Produktempfehlungs-Slider — Dark Premium Cards

Aktionstyp: Produktempfehlungen. Konfiguriert über: das Aktionsmenü — kein Code nötig.

Der Slider Dark Premium zeigt Empfehlungen auf fast schwarzen Karten mit randlosen Produktfotos, heller Schrift und goldenen Akzenten — Preis, aktiver Paginierungspunkt und der Button „Add to Cart“ greifen das Gold auf. Beim Hovern hebt sich eine Karte mit einem tiefen Leuchtschatten an. Er passt zu Elektronik, Luxusgütern, Mode, Gaming und jeder Website mit dunklem oder kontrastreichem Design.

Der Empfehlungs-Slider Dark Premium Cards: fast schwarze Karten mit randlosen Produktfotos, heller Schrift, goldenen Preisen und kräftigen Badges — Dark Premium Cards: fast schwarze Flächen, goldener Preis und kräftige Badges, die auf dem dunklen Hintergrund gut lesbar bleiben.

Diese Vorlage läuft auf derselben Engine wie der Overlay-Card-Slider — alle Optionen für Slider, Pfeile, Punkte, Autoplay, Badges und Demomodus funktionieren identisch. Diese Seite behandelt, was für diesen Look spezifisch ist. Die vollständige Referenz der Optionen finden Sie im Leitfaden zum Overlay Card Recommendations Slider.

Was diesen Look ausmacht

Dunkle Kartenflächen (#16181d, Radius 12px, dezenter Rahmen), bei denen das Foto die Oberkante randlos füllt (background-size: cover — funktioniert mit jedem Fotostil, auch mit Lifestyle-Aufnahmen).
Helle Schrift auf Dunkel unter dem Bild: Titel in fast Weiß, gedämpfte Zeile mit Ansichten/Verkäufen mit der Verkaufszahl in Gold und der Preis in fettem Gold (#d4af6a). Die Abschnitte Product Title, Site Statistics und Pricing sind standardmäßig aktiv.
Goldener Button „Add to Cart“ mit dunkler Schrift, standardmäßig aktiv, eingeblendet beim Hovern, während sich die Karte mit einem Leuchtschatten anhebt.
Kräftige Badges — das orange Best Seller, das blaue Popular/New und die roten Badges für Bestand/Rabatt bleiben bewusst leuchtend; sie heben sich stark von den dunklen Karten ab.
Dunkle Kreispfeile mit goldenen Winkeln, die beim Hovern zu vollem Gold wechseln, dazu ein goldener aktiver Paginierungspunkt und eine dunkle Scrollleiste — der gesamte Steuerungssatz passt zum Theme.

Der goldene Akzent

Das Gold (#d4af6a) erscheint an fünf Stellen, jeweils mit eigenem Menüfeld; den Akzent auf Ihre Farbe umzustellen, erfordert also nur wenige Änderungen:

Sale / Regular Price Style — Pricing
Purchases Icon Style — Site Statistics
Button Style + Hover — Add to Cart
Active Dot Style — Pagination Dots
Side Arrow Custom Style + Hover — Slider Arrows

Ersetzen Sie #d4af6a in diesen Feldern durch Ihre Markenfarbe, und das Theme folgt.

Schnellstart

Fügen Sie die Aktion hinzu und wählen Sie die Slider-Vorlage Dark Premium Cards.
Richten Sie Main Product Image Column (Card Image Style) auf das Bildfeld Ihres Katalogs aus. Solange noch kein Katalog verbunden ist, erscheinen im Editor sechs Demoprodukte mit einem Hinweisbanner — Besucher sehen sie nie, und sie verschwinden, sobald Ihr Katalog geladen ist.
Legen Sie die Anzahl sichtbarer Artikel für Desktop / Tablet / Smartphone unter Slider & Items Per View fest.
Prüfen Sie das Widget vor dem Hintergrund Ihrer Seite: Die dunklen Karten funktionieren auf hellen und dunklen Seiten, auf einer dunklen Seite möchten Sie aber vielleicht Card Border Color aufhellen oder einen Hintergrund unter Container Style hinzufügen, um die Karten abzuheben.
Prüfen Sie die Vorschau in allen drei Gerätegrößen und veröffentlichen Sie.

Arbeiten im Editor

Die Vorlage Dark Premium Cards im Personyze-Editor mit Optionsleiste, Hinweis auf Demoprodukte, Klick-zum-Bearbeiten-Tooltip und Badges — 1 Die Optionsleiste — jeder Teil des Widgets hat hier einen Abschnitt. Klicken Sie auf einen, um seine Einstellungen aufzuklappen.
2 Der **Hinweis auf Demoprodukte**, nur sichtbar, solange kein Katalog verbunden ist. Echte Besucher sehen weder die Demokarten noch dieses Banner.
3 **Click to edit** — ein Klick auf ein beliebiges Element in der Vorschau springt direkt zu dessen Option, sodass Sie die Seitenleiste nicht durchsuchen müssen.
4 und 5 Badges stapeln sich automatisch in Eckplätze, ohne sich zu überlappen — hier Popular und eine rote Warnung zu niedrigem Bestand auf derselben Karte.

Optionen erreichen Sie auf zwei Wegen: Wählen Sie einen Abschnitt in der Seitenleiste, oder klicken Sie direkt auf das Element in der Vorschau, und seine Einstellungen klappen auf. Für Entwickler öffnet sich unten HTML Source (advanced). Prüfen Sie die Vorschau als Phone, Tablet oder Desktop, um jeden Breakpoint vor dem Veröffentlichen zu kontrollieren.

Stile wechseln, ohne die Vorlage zu wechseln

Die drei Slider-Vorlagen unterscheiden sich nur in ihren Standardwerten; diese hier lässt sich also über das Menü umgestalten:

Färben Sie die Karten weiß mit dunkler Schrift, und Sie haben den Look Clean Catalog.
Aktivieren Sie Show Text on Image sowie das Gradient Overlay und deaktivieren Sie die Blöcke unter dem Bild für den Look Overlay.

Nehmen Sie die Vorlage, die Ihrem Ziel am nächsten kommt — das ist weniger Arbeit, als eine weit entfernte umzugestalten.

FAQ

Der Titeltext ist unsichtbar.
Wahrscheinlich sehen Sie die Vorschau, nachdem Sie den Kartenhintergrund auf eine helle Farbe geändert haben — die Standardschrift ist hell auf dunkel. Färben Sie Title Text Style, die Statistikzeile und die Preisstile zusammen mit dem Kartenhintergrund um.

Fotos mit weißem Hintergrund wirken auf der dunklen Karte wie weiße Kästen.
Das liegt in der Natur freigestellter Produktfotos auf dunklen Flächen. Verwenden Sie entweder Lifestyle- oder Stimmungsfotos, oder stellen Sie Card Box Style auf background-size: contain mit background-color: #ffffff um, für einen gerahmten Foto-Look innerhalb der dunklen Karte.

Kann ich einen anderen Akzent als Gold verwenden?
Ja — siehe Der goldene Akzent oben; es sind fünf Menüfelder.

Sehen echte Besucher jemals die Demoprodukte?
Nein. Sie werden nur im Editor und in Vorschaulinks dargestellt, und nur, solange kein Katalog verbunden ist.