Studio Editor: Een aangepaste cursor toevoegen

Leestijd 4 minuten
Een aangepaste cursor voegt een uniek vleugje branding toe aan je website. Pas een aangepaste cursor toe op een pagina, onderdeel of een specifiek element waarmee bezoekers interactie hebben (zoals een container, afbeelding, enzovoort). Gebruik een van onze vele suggesties of upload je eigen cursor en stel de grootte in die aan jouw behoeften voldoet.
Tip:
Je kunt elk JPG-, PNG- of SVG-bestand gebruiken. Om ervoor te zorgen dat de cursor zichtbaar is, controleer je of deze een gedefinieerde rand heeft, in een kleur die contrasteert met de achtergrond. 
Een voorbeeld van een website met aangepaste cursors toegepast op verschillende gedeelten van de pagina
In dit artikel lees je hoe je:
Tip:
Je kunt verschillende cursors toevoegen aan een parent-element en zijn child-element om de ervaring nog persoonlijker te maken. Wanneer bezoekers interactie hebben met het child-element, zien ze de specifieke cursor – niet de cursor die je op het parent-element hebt toegepast.  

Een aangepaste cursor toevoegen

Wijzig de cursor die verschijnt wanneer bezoekers interactie hebben met een pagina, onderdeel of element. Je kunt kiezen uit veel verschillende ontwerpen of je eigen afbeeldingsbestand uploaden (zoals JPG, PNG, SVG). 
Let op:
Wijzigingen die je aan de cursor aanbrengt, worden niet op het canvas weergegeven terwijl je de website bewerkt. Om je cursor in actie te zien, ga je naar Voorbeeld of bekijk je je live website.

Om een aangepaste cursor toe te voegen:

  1. Selecteer de relevante pagina, het onderdeel of het element.
  2. Klik rechtsboven in de Editor op de Inspector-pijl.
  3. Scrol omlaag naar Cursor.
  4. Voeg je cursor toe:
    1. Klik onder Media op + Afbeelding of .svg toevoegen.
    2. (In de Media Manager) Kies een van de voorgestelde cursors of upload een eigen bestand. 
    3. Wanneer je klaar bent, klik je op Toevoegen.
  5. (Optioneel) Bekijk een voorbeeld van de website om te zien hoe de cursor er live uitziet. 
Een screenshot van het Cursor-onderdeel in het Inspector-paneel, met al een cursor geselecteerd voor de pagina
En nu?
  • Wanneer je een cursor op een pagina toepast, kun je op Op meer pagina's toepassen klikken om deze snel aan andere websitepagina's toe te voegen.
  • Je kunt de cursor per breekpunt aanpassen door een andere afbeelding of grootte te kiezen.

De grootte van de aangepaste cursor wijzigen

Wijzig de grootte van de cursor zodat deze er ideaal uitziet op de website die je ontwerpt.
We raden aan om de cursorgrootte tussen 16x16 en 128x128 pixels te houden. Als de cursor groter is dan de aanbevolen grootte, wordt deze mogelijk helemaal niet weergegeven. Als het kleiner is, kunnen bezoekers het zien, maar niet duidelijk.
Tip:
Het voorbeeld dat je onder Media ziet, is hoe je cursor eruitziet op je live website, in de werkelijke grootte die je definieert. 

Om het formaat van de aangepaste cursor te wijzigen:

  1. Selecteer de relevante pagina, het onderdeel of het element.
  2. Klik rechtsboven in de Editor op de Inspector-pijl.
  3. Scrol omlaag naar Cursor.
  4. Sleep de schuifregelaar onder Grootte.
Een screenshot van het Cursor-gedeelte in het Inspector-paneel, door de schuifregelaar onder Grootte te slepen

De aangepaste cursor wijzigen

Je kunt een eerder toegevoegde aangepaste cursor altijd vervangen. Kies een van onze suggesties of upload een nieuw bestand. 

Om de aangepaste cursor te wijzigen:

  1. Selecteer de relevante pagina, het onderdeel of het element.
  2. Klik rechtsboven in de Editor op de Inspector-pijl.
  3. Scrol omlaag naar Cursor.
  4. Klik op Media wijzigen.
  5. (In de Media Manager) Kies of upload een nieuwe cursor.
  6. Klik op Bijwerken.
Een screenshot van het Cursor-gedeelte in het Inspector-paneel, waar je op Media wijzigen klikt om een andere cursor te kiezen

De aangepaste cursor verwijderen

Je kunt altijd van gedachten veranderen en de aangepaste cursor verwijderen. Dit betekent dat bezoekers teruggaan naar de normale, standaardcursor.

Om de aangepaste cursor te verwijderen:

  1. Selecteer de relevante pagina, het onderdeel of het element.
  2. Klik rechtsboven in de Editor op de Inspector-pijl.
  3. Scrol omlaag naar Cursor.
  4. Klik naast Media wijzigen op het Verwijderen-pictogram.
Een screenshot van het cursorgedeelte in het Inspector-paneel, klikken op het Verwijderen-pictogram

Vond je dit artikel nuttig?

|