Productaanbevelingsslider — Dark Premium Cards

Actietype: Productaanbevelingen. Ingesteld via: het actiemenu — geen code nodig.

De Dark Premium-slider toont aanbevelingen op bijna zwarte kaarten met productfoto’s tot aan de rand, lichte tekst en gouden accenten — de prijs, het actieve paginabolletje en de knop Add to Cart nemen allemaal het goud over. Als je over een kaart zweeft, komt die omhoog met een diepe gloedschaduw. Het past bij elektronica, luxegoederen, mode, gaming en elke site met een donker of contrastrijk ontwerp.

De aanbevelingsslider Dark Premium Cards: bijna zwarte kaarten met productfoto's tot aan de rand, lichte tekst, gouden prijzen en felle badges — Dark Premium Cards: bijna zwarte panelen, een gouden prijs en felle badges die leesbaar blijven tegen de donkere ondergrond.

Deze template draait op dezelfde engine als de Overlay Card-slider — elke optie voor slider, pijlen, bolletjes, autoplay, badges en demomodus werkt precies hetzelfde. Deze pagina behandelt wat specifiek is voor deze look. Zie voor de volledige referentie van de opties de handleiding voor de Overlay Card Recommendations Slider.

Wat deze look bepaalt

Donkere kaartpanelen (#16181d, radius van 12px, subtiele rand) met de foto die de bovenkant van rand tot rand vult (background-size: cover — werkt met elke fotostijl, ook lifestylefoto’s).
Lichte tekst op donker onder de afbeelding: de titel in bijna wit, een gedempte rij met weergaven/verkopen met het aantal verkopen in goud, en de prijs in vet goud (#d4af6a). De secties Product Title, Site Statistics en Pricing staan standaard aan.
Gouden Add to Cart met donkere tekst, standaard aan, zichtbaar bij hover terwijl de kaart omhoogkomt met een gloedschaduw.
Felle badges — de oranje Best Seller, de blauwe Popular/New en de rode badges voor voorraad/korting zijn bewust fel gehouden; ze vallen sterk op tegen de donkere kaarten.
Donkere ronde pijlen met gouden chevrons die bij hover omslaan naar massief goud, plus een gouden actief paginabolletje en een donkere scrollbalk — de hele set bedieningselementen past bij het thema.

Het gouden accent

Het goud (#d4af6a) komt op vijf plekken terug, elk met een eigen menuveld, dus het accent omzetten naar je eigen kleur kost maar een paar aanpassingen:

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

Vervang #d4af6a in die velden door je merkkleur en het thema volgt.

Snel aan de slag

Voeg de actie toe en kies de slidertemplate Dark Premium Cards.
Wijs de Main Product Image Column (Card Image Style) naar het afbeeldingsveld van je catalogus. Is er nog geen catalogus gekoppeld, dan verschijnen in de editor zes demoproducten met een melding — bezoekers zien ze nooit, en ze verdwijnen zodra je catalogus laadt.
Stel in Slider & Items Per View het aantal zichtbare items in voor desktop / tablet / mobiel.
Controleer de widget tegen de achtergrond van je pagina: de donkere kaarten werken op zowel lichte als donkere pagina’s, maar op een donkere pagina wil je misschien de Card Border Color lichter maken of een achtergrond in Container Style toevoegen voor meer scheiding.
Bekijk een voorbeeld op alle drie de apparaatformaten en publiceer.

Werken in de editor

De template Dark Premium Cards geopend in de Personyze-editor, met de zijbalk met opties, de melding over demoproducten, de tooltip klik-om-te-bewerken en badges — 1 De zijbalk met opties — elk onderdeel van de widget heeft hier een sectie. Klik op een sectie om de instellingen uit te klappen.
2 De **melding over demoproducten**, alleen zichtbaar zolang er geen catalogus is gekoppeld. Echte bezoekers zien de demokaarten en deze banner nooit.
3 **Click to edit** — klikken op een element in het voorbeeld springt direct naar de bijbehorende optie, zodat je niet in de zijbalk hoeft te zoeken.
4 en 5 Badges stapelen zich automatisch in hoekplekken zonder te overlappen — hier Popular en een rode waarschuwing voor lage voorraad op dezelfde kaart.

Opties bereik je op twee manieren: kies een sectie in de zijbalk, of klik direct op het element in het voorbeeld en de instellingen klappen uit. Voor developers opent HTML Source (advanced) onderaan. Bekijk een voorbeeld als Phone, Tablet of Desktop om elk breakpoint te controleren voordat je publiceert.

Van stijl wisselen zonder van template te wisselen

De drie slidertemplates verschillen alleen in hun standaardwaarden, dus deze kun je via het menu omvormen:

Kleur de kaarten wit met donkere tekst en je hebt de look van Clean Catalog.
Zet Show Text on Image en de Gradient Overlay aan en zet de blokken onder de afbeelding uit voor de look van Overlay.

Gebruik de template die het dichtst bij je doel begint — dat is minder werk dan een template omvormen die ver weg begint.

Veelgestelde vragen

De titeltekst is onzichtbaar.
Je bekijkt waarschijnlijk een voorbeeld nadat je de kaartachtergrond een lichte kleur hebt gegeven — de standaardtekst is licht op donker. Kleur Title Text Style, de rij met statistieken en de prijsstijlen samen met de kaartachtergrond om.

Foto’s met een witte achtergrond lijken witte blokken op de donkere kaart.
Dat is eigen aan vrijstaande productfoto’s op donkere oppervlakken. Gebruik lifestyle- of sfeerfoto’s, of zet Card Box Style op background-size: contain met background-color: #ffffff voor een ingelijste foto binnen de donkere kaart.

Kan ik een ander accent dan goud gebruiken?
Ja — zie Het gouden accent hierboven; het zijn vijf menuvelden.

Worden de demoproducten ooit aan echte bezoekers getoond?
Nee. Ze worden alleen in de editor en op voorbeeldlinks weergegeven, en alleen zolang er geen catalogus is gekoppeld.

Gerelateerd

Overlay Card Recommendations Slider — de volledige optiereferentie voor de gedeelde engine.
Clean Catalog Cards — de lichte tegenhanger.
Alle templates
De productfeed instellen