Met de Afbeelding widget kun je eenvoudig afbeeldingen toevoegen aan een pagina. Dit is handig wanneer je visuele elementen zoals productfoto's, banners of iconen wilt plaatsen die je pagina aantrekkelijker maken.


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:

  • Afbeelding de volledige hoogte en breedte laten 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.

  • Dynamische border radius op afbeelding:
    Met deze optie kun je de hoeken van je afbeelding afronden, wat zorgt voor een strakkere en modernere uitstraling. De dynamische border radius betekent dat de afronding van de hoeken automatisch wordt aangepast op basis van de instellingen voor de knophoeken die je hebt gekozen onder "Website uiterlijk > Algemeen > Buttons > Globale button opties" bij de optie "Button soort hoeken".

  • 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.

  • 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.

  • 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.