Met de Card widget kun je een afbeelding combineren met tekst en knoppen, weergegeven in een mooi vormgegeven kader (de “card”). Deze widget is handig om bijvoorbeeld een categorie, actie of product uit te lichten op een visueel aantrekkelijke manier.


Beschikbare opties en toelichting:

  • Afbeeldingen per taal aanpassen:
    Je kunt verschillende afbeeldingen instellen voor verschillende talen van je webshop. Dit is ideaal voor meertalige webshops, waarbij je wilt dat de afbeelding aangepast wordt op basis van de taalinstellingen van de gebruiker.
  • Afbeelding:
    Je kunt de afbeelding die je wilt weergeven eenvoudig kiezen door op de tekst "Klik hier om een afbeelding te uploaden" te klikken. Hierdoor kun je direct een afbeelding van je computer uploaden.
    Als je een afbeelding wilt selecteren die je al eerder hebt geüpload via de builder, klik dan op de knop "Browse filemanager". De map "homepage" in de filemanager wordt dan geopend. Op deze manier kun je afbeeldingen selecteren zonder elke keer een bestand van je computer te hoeven kiezen. Houd er wel rekening mee dat je de afbeeldingen eerst naar de "homepage" map in de filemanager moet uploaden via de backoffice onder "Tools > Filemanager, voordat je ze kunt selecteren in de builder. Wanneer je een afbeelding upload via de builder, komt deze automatisch in deze map in de filemanager.
    Wil je de afbeelding in de widget verwijderen? Klik dan simpelweg op het kruisje achter het invoerveld.
  • Afbeelding Alt-tekst:
    Vul een beschrijving in voor de afbeelding. De Alt-tekst is essentieel voor zowel toegankelijkheid als SEO (zoekmachineoptimalisatie). Het helpt zoekmachines de inhoud van de afbeelding te begrijpen en wordt door schermlezers (screenreaders) gebruikt om de afbeelding te beschrijven voor gebruikers met een visuele beperking. Wil je meer leren over het schrijven van effectieve Alt-tekst? Lees deze artikelen:
  • 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 uitlijning:
    Bepaal de uitlijning van zowel de titel als de alineatekst: links, gecentreerd of rechts.
  • Card thema:
    Kies hier het kleurthema voor de kaart. Dit bepaalt onder andere de achtergrondkleur en stijl. De opties zijn gebaseerd op de kleurinstellingen van je webshop onder Website uiterlijk > Algemeen.
  • 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.
  • Volledige card klikbaar maken:
    Activeer deze optie als je wilt dat niet alleen de knop, maar de hele kaart klikbaar is. Handig wanneer je één duidelijke link hebt, zodat de hele kaart als één grote knop werkt.
  • Volledige hoogte innemen:
    Met deze optie kun je de card automatisch de volledige beschikbare hoogte in de rij laten innemen. Dit is handig als je meerdere cards naast elkaar wilt plaatsen en ze allemaal dezelfde hoogte wilt geven. Houd er echter rekening mee dat dit kan leiden tot meer witruimte in de card om de ruimte te vullen.
  • Afbeelding hover effect:
    Met deze optie kun je een effect instellen dat geactiveerd wordt wanneer de gebruiker de muis over de afbeelding in de card beweegt (hover). Dit effect kan variëren van een lichte vergroting van de afbeelding tot het veranderen van de kleur. Het hover-effect maakt je pagina interactiever en kan de aandacht van de bezoeker trekken. Houd er echter rekening mee dat dergelijke effecten voor mensen met een beperking storend kunnen zijn. Wees dus voorzichtig met het gebruik ervan en zorg ervoor dat het de gebruikerservaring niet negatief beïnvloedt.
  • 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.