Naar de hoofdinhoud

Hoe werkt de instelling ‘Ankerpunten voor weergeven knoppen’?

Bepaal met deze instelling waar de Tolkie-knoppen op je website verschijnen, met HTML-classes of CSS-selectors.

Meer dan een week geleden bijgewerkt

Met de instelling ‘Ankerpunten voor weergeven knoppen’ kun je bepalen waar de Losse knoppen of de Leeshulp-knop op de pagina worden weergegeven.
Je doet dit door een CSS-selector op te geven en aan te geven waar de knop ten opzichte van dat element moet worden geplaatst.

Als je deze stap overslaat, worden de knoppen automatisch geplaatst op de plek waar de script-code op de pagina is ingevoegd.

Gebruik je de variant Zwevende knop, dan hoef je deze instelling niet te gebruiken — die knop wordt altijd rechtsonder in beeld weergegeven.

Deze instelling vind je in Mijn Tolkie.
Ben je nog niet ingelogd? Ga naar mijn.tolkie.nl, open de instellingen voor jouw website en kies dan voor Algemene instellingen.

Goed om te weten

De meest betrouwbare manier om te bepalen waar de knoppen verschijnen, is door in de HTML-code classes te gebruiken.
Tolkie herkent de volgende classes:

  • tolkie-buttons-beforebegin: plaatst de knoppen vóór het element

  • tolkie-buttons-afterend: plaatst de knoppen ná het element

  • tolkie-buttons-afterbegin: plaatst de knoppen aan het begin van het element

  • tolkie-buttons-beforeend: plaatst de knoppen aan het einde van het element

Kun je deze classes niet gebruiken? Dan kun je ook een CSS-selector invullen in Mijn Tolkie. Hieronder lees je hoe dat werkt.

Voorbeeld

Stel dat je een pagina hebt met een h1-heading met de class article-header, en je wilt dat de knoppen onder deze heading verschijnen.
Doe dan het volgende:

  1. Klik op ‘Element toevoegen’.

  2. Vul in het veld ‘Selector’ h1.article-header in. Dit verwijst naar het h1-element met de class article-header.

  3. Kies in het veld ‘Positie’ de optie afterend. Dit zorgt ervoor dat de knoppen na het h1-element worden geplaatst.

  4. Klik op ‘Opslaan’.

De knoppen verschijnen nu onder de heading.

Hoe te kiezen

Bij Selector geef je aan waar de knoppen moeten komen (ten opzichte van welk element).
Bij Positie geef je aan waar de knoppen precies moeten verschijnen ten opzichte van dat element.

De mogelijke opties zijn:

  • beforebegin: plaatst de knoppen vóór het element

  • afterbegin: plaatst de knoppen aan het begin van het element

  • beforeend: plaatst de knoppen aan het einde van het element

  • afterend: plaatst de knoppen ná het element

Tips

  • Gebruik stabiele selectors, bijvoorbeeld een container voor titels, navigatiebalk of werkbalk.

  • Als je selector meerdere elementen matcht, worden de knoppen geplaatst bij het eerste (bovenste) HTML-element.

  • Als je de knoppen binnen een element plaatst, controleer dan of dat element deel uitmaakt van de Hoofdelementen waarop de leeshulp actief is.

    In dat geval kan de leeshulp ook op de knoppen zelf worden toegepast, wat hun werking kan verstoren.
    Bijvoorbeeld: als h1.article-header onderdeel is van de Hoofdelementen, plaats de knoppen dan liever met beforebegin of afterend, zodat ze buiten de heading vallen.

Kort samengevat:
Met Ankerpunten voor weergeven knoppen bepaal je precies waar de Tolkie-knoppen verschijnen op je website — via HTML-classes of CSS-selectors, op de plek die het beste bij je ontwerp past.

Was dit een antwoord op uw vraag?