Personyze Wiki Personyze Wiki docs
Nederlands
Open Personyze
Docs/ Overlayslider met tekst op de foto

Overlayslider met tekst op de foto

Een beeldcarrousel tot aan de rand met naam, ondertitel en prijs op de foto, op dezelfde engine als de Product Slider.

3 min read Updated 2 hours ago

Een beeldcarrousel tot aan de rand met de productnaam, ondertitel en prijs direct op de foto, over een verloop dat de leesbaarheid verbetert — een premium redactionele look voor catalogi in mode, wonen en lifestyle.

Hij deelt zijn engine met de Product Slider: dezelfde vier stijlaccenten, badges, hovereffecten, autoplay, inzoomen op de afbeelding, tweede afbeelding bij hover, en de centrale instellingen voor prijsformaat en valuta. Twee instellingen bepalen zijn identiteit: Show Text on Image en Show Gradient Overlay, beide standaard aan, met een hoger fotovlak en drie kaarten per weergave. Zet Text on Image uit en hij wordt een klassieke kaartslider met tekst onder de afbeelding.

Hoe deze template werkt

Deze templatefamilie is gebouwd rond vier ideeën:

  • Stijlaccenten. De eerste instelling, Style accent (light, gold, bold, ocean), geeft kaarten, badges, knoppen, prijzen, bolletjes en scrollbalken met één klik samen een nieuwe kleur. Elke kleur is daarna nog steeds afzonderlijk te overschrijven in een eigen stijlveld.
  • Catalogusvelden op één plek. De sectie Catalog Fields (tweede in het menu) koppelt elke productkolom die de template gebruikt — afbeeldingen, URL, titel, merk, beide prijskolommen, beoordeling, beschrijving, voorraad, kortingspercentage, datums en eigen velden. De koppelingen zijn globaal: stel je daar een kolom in, dan wordt elk element dat die gebruikt bijgewerkt. Winkels met volledig eigen feeds kunnen de hele widget vanuit deze ene sectie opnieuw bedraden.
  • Live demomodus. Tijdens het ontwerpen verschijnen automatisch realistische demoproducten (bezoekers zien ze nooit). De eerste demokaart is een live etalage: klik op een element erop om het een stijl te geven, en elke schakelaar — badges, Add to Cart, overlays, statistieken, beschrijving, prijs per eenheid — reageert er zichtbaar op.
  • Centrale prijzen. De sectie Pricing heeft één keuzelijst Price Format (standard / european / rounded / rounded-european) en één paar velden voor het valutasymbool die overal gelden waar prijzen verschijnen, ook in de overlay op de afbeelding. Producten zonder prijs tonen niets — geen verweesde valutasymbolen.

Goed om te weten

  • Items per apparaat reageren op de container, niet alleen op het scherm. Het aantal zichtbare items (desktop / tablet / mobiel) wordt afgeleid van de eigen breedte van de widget, dus het werkt correct in het apparaatvoorbeeld van de editor, op echte telefoons en zelfs in smalle zijbalken.
  • Text on Image verwijdert dubbelingen automatisch. Zolang de overlay aan staat, verbergen de titel, de merkregel en de prijs onder de foto zichzelf.
  • Hoverstijlen zijn aparte velden. Verander je de basiskleur van een knop, neem die dan over in het bijbehorende veld Hover Style voor een consistente hover.
  • Opgeslagen templatekaarten bevriezen hun code. Bewaar je een eigen kopie in Your templates, dan gebruiken acties die daaruit worden gemaakt de code zoals die was bij het opslaan — sla de kaart na grote updates opnieuw op.
Did this page answer your question?
Thank you — that goes to whoever maintains this page.