Samenvatting
Met het icoon element voeg je een vectorafbeelding (SVG) toe als icoon op je pagina. SVG-iconen zijn ideaal omdat ze scherp blijven op elk schermformaat, of het nu een klein telefoonscherm is of een groot desktopscherm. Je kiest een icoon uit het bestandsbeheer of upload er zelf een.
Hoe werkt het
Een icoon kiezen
Klik op het icoon element om het te selecteren. In het tabblad Opmaak zie je het afbeeldingveld. Klik hierop om het bestandsbeheer te openen. Upload een SVG-bestand of kies er een uit je bestanden.
De grootte instellen
Stel de breedte en/of hoogte in van het icoon. Je kiest uit vaste pixelwaarden of Geen voor de originele afmeting. Net als bij afbeeldingen kun je per schermformaat een andere grootte instellen.
Vulkleur (icoonkleur)
Met de afbeelding vulkleur geef je het icoon een eigen kleur: de kleuren van het SVG-icoon worden vervangen door de kleur die je kiest.
Een link toevoegen
In het tabblad Instellingen kun je het icoon klikbaar maken. Je kiest het linktype (bijvoorbeeld een pagina binnen je website, een extern webadres, een e-mailadres of telefoonnummer) en of de link in hetzelfde venster of in een nieuw tabblad opent.
Beschrijving voor toegankelijkheid (aria label)
Vul een beschrijvend aria label in. Omdat een icoon geen zichtbare tekst heeft, is dit extra belangrijk voor toegankelijkheid. Bezoekers die een schermlezer gebruiken horen deze beschrijving voorgelezen. Voorbeeld: "Link naar ons Instagram-profiel" of "E-mail ons".
Verbergen op bepaalde schermformaten
Met de instelling Verbergen kun je het icoon verbergen op specifieke apparaten: Desktop, Laptop, Tablet, Telefoon liggend of Telefoon staand.
Scroll-animatie
In het tabblad Instellingen kun je een animatie instellen die afspeelt wanneer de bezoeker naar het icoon scrollt:
| Instelling | Opties |
|---|---|
| Effect | Geen, Infaden, Inschuiven, Inzoomen of Uitzoomen |
| Effect start | Bij welk percentage van de pagina het effect begint |
| Effect terugkeren | Of het effect opnieuw afspeelt bij omhoog scrollen |
Wanneer gebruik je dit?
- Je wilt een visueel icoon toevoegen (bijvoorbeeld social media-iconen of feature-iconen)
- Je wilt een icoon klikbaar maken met een link
- Je wilt een icoon verbergen op bepaalde schermformaten