Met de Diavoorstelling widget kun je een slider maken met meerdere afbeeldingen. Deze widget is ideaal om producten, acties of campagnes op een opvallende manier te presenteren. Wanneer je slechts één afbeelding toevoegt, wordt er geen slider geladen en gebruik je de widget als banner, mét alle bijbehorende instelmogelijkheden.


Beschikbare opties en toelichting:

  • Maximale hoogte van de diavoorstelling:
    Bepaal hoe hoog de diavoorstelling getoond wordt, afzonderlijk instelbaar voor desktop en mobiel. Dit geeft je controle over hoe prominent de slider of banner in beeld komt.
    Beschikbare opties:
    • Small (300px): Compacte hoogte, geschikt voor subtiele banners of wanneer de slider weinig ruimte mag innemen.
    • Normaal (500px): Standaardhoogte, geschikt voor de meeste situaties.
    • Large (700px): Grotere hoogte voor een meer opvallende presentatie van afbeeldingen en teksten.
    • Gehele scherm hoogte: De slider neemt de volledige hoogte van het scherm in. Ideaal voor fullscreen visuals.
    • Automatische hoogte: De hoogte wordt automatisch bepaald op basis van de verhoudingen van de gebruikte afbeeldingen. Deze optie is standaard geselecteerd.
    • Zelf instellen: Vul zelf een pixelwaarde in om de hoogte precies naar wens aan te passen.
  • Aantal dia’s:
    Bepaal hoeveel dia’s (afbeeldingen) je wilt gebruiken, met een maximum van 6.
  • Link per dia instellen:
    Wanneer je Geen button hebt gekozen en meer dan één dia gebruikt, kun je deze optie inschakelen om per dia een aparte link in te stellen.
  • Dia afbeeldingen op mobiel aanpassen:
    Bepaal of je per dia aparte afbeeldingen voor mobiel wilt instellen.
  • Afbeeldingen per taal kunnen aanpassen:
         Hiermee kun je per taal een afbeelding instellen, handig voor meertalige webshops.
  • Dia’s configureren:
    Voor elke dia (1 t/m 6) zijn de volgende opties beschikbaar:

    • Dia x – Afbeelding: Upload de afbeelding voor deze dia.

    • Dia x – Afbeelding Alt tekst: Voeg een beschrijving toe voor toegankelijkheid en SEO.

    • Wanneer Dia afbeeldingen op mobiel aanpassen is ingeschakeld:

      • Dia x – Afbeelding mobiel

      • Dia x – Afbeelding Alt tekst mobiel

    • Wanneer Link per dia instellen is ingeschakeld:

      • Dia x – Link URL

    • Wanneer Afbeeldingen per taal kunnen aanpassen is ingeschakeld:

      • Dia x – Afbeelding (per taal)

  • Titel:
    Voeg een titel toe die boven de tekst en knoppen op de kaart verschijnt. Dit kan een korte wervende kop zijn, zoals “Populaire producten” of “Nieuwe collectie”.
  • Titel settings:
    Onder deze optie pas je de stijl en structuur van de titel aan:
    • Semantische tag instellen: Kies of de tekst een gewone paragraaf is (p) of een titel (h1 t/m h6). Dit is belangrijk voor de structuur en vindbaarheid van je pagina.
    • Stijl (class): Bepaal de visuele opmaak van de tekst. Je kunt kiezen uit verschillende stijlen zoals:
      • Body text (van XS tot XL) — voor gewone tekstgrootten
      • Heading (1 t/m 6) — standaard kopteksten
      • Display heading (1 t/m 6) — grotere, opvallendere koppen

  • Alinea (optioneel):

    Hier kun je een korte toelichtende tekst onder de titel plaatsen. Bijvoorbeeld een uitleg of call-to-action. Dit veld is optioneel.
  • Tekst op mobiel aanpassen: 
    Activeer deze optie om aparte titel-, titel settings- en alinea-opties voor mobiel te krijgen.
  • Achtergrond van tekstkaart:
    Kies hoe de achtergrond van de tekstkaart op de dia eruitziet:

    • Normaal (transparant)

    • Licht

    • Donker

  • Tekstkleur:
         Kies uit vooraf ingestelde kleuren (afgeleid van de instellingen onder "Website uiterlijk > Algemeen > Stijl") of stel handmatig een kleur in.
  • Kleuren op mobiel aanpassen:
    Activeer dit om een afwijkende tekstkleur en achtergrond voor de tekstkaart op mobiel te kiezen.
  • Knop toevoegen:
    Je kunt ervoor kiezen om één of twee knoppen aan de kaart toe te voegen. Als je een knop activeert, krijg je toegang tot de volgende instellingen:
  • Button type
    Kies een buttonstijl uit de beschikbare button presets (zoals primair, secundair, info, enz.). Deze zijn afgestemd op je website-ontwerp.
  • Button breedte
    • Desktop: Kies uit:
      • Normaal
      • Ruimte opvullen (neemt beschikbare ruimte tussen knoppen in)
      • Gehele breedte innemen (knoppen worden onder elkaar geplaatst)
    • Mobiel: Zelfde opties, geoptimaliseerd voor kleinere schermen.
  • Uitlijning van de button(s)
    • Desktop & mobiel: Kies hoe de knoppen worden gepositioneerd binnen de kaart:
      • Links
      • Midden
      • Rechts
      • Links en rechts (verdeeld over de volledige breedte)
  • Button tekst
    Vul hier de tekst in die op de knop moet staan, bijvoorbeeld “Bekijk nu” of “Meer info”.
  • Button URL
    Voer hier de link in waarnaar de knop moet verwijzen.
  • Link openen in nieuw tabblad
    Met deze switch geef je aan of de link in een nieuw browservenster moet openen.
  • Button met icon
    Wil je een icoon naast je knoptekst tonen? Zet deze optie aan en kies vervolgens het gewenste icoon:
    • Arrow right
    • Arrow left
    • Envelop
    • Phone
  • Tweede button toevoegen
    Wil je nog een extra knop toevoegen? Dat kan. Deze tweede knop krijgt dezelfde instelmogelijkheden als hierboven beschreven.
  • Link zonder button:
    Wanneer je Geen button hebt gekozen, kun je één algemene Link URL instellen. De gehele dia verwijst dan naar deze link (tenzij je Link per dia instellen hebt ingeschakeld).
  • Gehele dia clickable maken:
    Wanneer je een button hebt toegevoegd, kun je ervoor kiezen de hele dia klikbaar te maken. Dit is niet beschikbaar wanneer je twee knoppen gebruikt.
  • Uitlijning van tekstkaart op dia:

    • Tekst in kaart uitlijnen: links, midden of rechts

    • Horizontale uitlijning van kaart: links, midden of rechts

    • Verticale uitlijning van kaart: boven, midden of onder

  • Maximale breedte van kaart op dia (in pixels):
    Stel in hoe breed de tekstkaart maximaal mag zijn, afzonderlijk voor desktop en mobiel.
  • Kaart gedeeltelijk van de dia af tonen:
     Maak de tekstkaart visueel speelser door deze gedeeltelijk buiten de dia te laten vallen, instelbaar voor zowel desktop als mobiel.
  • CSS classes:
    Met deze optie kun je specifieke CSS classes aan de afbeelding toevoegen voor maatwerk styling. Dit geeft je de mogelijkheid om aangepaste stijlen toe te passen via "Website uiterlijk > CSS aanpassen" in de backoffice, waardoor je de afbeelding verder kunt aanpassen aan je ontwerpbehoeften.