Met de Afbeelding Card widget plaats je een afbeelding op je pagina, waar je vervolgens tekst en/of een knop bovenop kunt zetten. Deze widget is ideaal voor banners, aankondigingen of visueel aantrekkelijke call-to-action-blokken. Je combineert beeld, tekst en interactie in één element.
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 hier een titel toe die bovenop de afbeelding wordt getoond. Dit kan een wervende tekst zijn zoals “Nieuw in de collectie” of “Ontdek onze aanbiedingen”, maar ook een product- of categorienaam als je ervoor kiest om een specifiek product of categorie op deze manier uit te lichten. - 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
- Visuele knop toevoegen:
Als je een knop bovenop de afbeelding wilt tonen (bijvoorbeeld “Bekijk nu” of “Meer info”), zet je deze optie aan. Je krijgt dan deze extra instellingen:- Button type: Kies de stijl van de knop (bijv. primair, secundair, transparant).
- Button tekst: De tekst die op de knop zelf komt te staan.
- Link URL:
Hier kun je een link toevoegen aan de afbeelding. Wanneer de afbeelding wordt aangeklikt, wordt de gebruiker naar de opgegeven URL geleid. Dit is handig als je de afbeelding wilt laten fungeren als een knop of een verwijzing naar een andere pagina. - Link openen in nieuw tabblad:
Als je deze optie inschakelt, wordt de link die je aan de afbeelding hebt toegevoegd in een nieuw tabblad geopend, zodat gebruikers niet hun huidige pagina verlaten. Dit is vooral handig voor externe links of wanneer je wilt dat de gebruiker op de pagina blijft terwijl ze naar een andere bestemming gaan. - Overlay en tekst kleur:
Bij deze optie stel je in of je een overlay (semi-transparante kleurlaag) over de afbeelding wilt tonen, en wat de kleur van de overlay en de tekst moet zijn. Dit zorgt voor voldoende contrast zodat je tekst altijd goed leesbaar blijft, ongeacht de afbeelding. - Volledige hoogte innemen:
Met deze optie kun je de afbeelding automatisch de volledige beschikbare ruimte in de rij laten innemen. Dit is handig als je meerdere afbeeldingen naast elkaar wilt plaatsen en ze allemaal dezelfde hoogte wilt geven, zonder gebruik te maken van een bewerkingsprogramma. Houd er echter rekening mee dat dit kan leiden tot inzoomen van de afbeelding om de ruimte te vullen, waardoor bepaalde delen van de afbeelding mogelijk niet zichtbaar zijn. - Afbeelding hover effect:
Met deze optie kun je een effect instellen dat geactiveerd wordt wanneer de gebruiker de muis over de afbeelding 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.