WordPress - Wetenswaardigheden

Anker (Anchor) Instellingen

Het aanmaken en gebruik van een anker-link hebben we beschreven in ons artikel: WordPress Anker Link. Echter, bij het aanmaken en gebruik van ankers (anchors) kunnen er een tweetal minder “mooie” effecten ontstaan:

  1. het scrollen naar het anker op de pagina gaat super snel, wat een minder mooi visueel effect geeft;
  2. bij het gebruik van een Sticky Menu kan een gedeelte van de content achter het menu geplaatst worden.

Het eerste effect (te snel scrollen) is een puur visueel effect en is eventueel te accepteren. Naar onze mening, maar smaken verschillen. Het tweede effect wat ontstaat indien er gebruik wordt gemaakt van een Sticky Menu kan erg verwarrend zijn voor de bezoeker, doordat een gedeelte van de content niet zichtbaar is doordat dat gedeelte achter het menu geplaatst wordt.

Beide effecten zijn op te lossen door gebruik te maken van een plugin.

Voor beide “problemen” zijn er diverse plugins verkrijgbaar via WordPress.org. Het eerste effect is op te lossen door een plugin te zoeken door te zoeken op: “easy scroll anchor”, de tweede door te zoeken op: “anchor offset”.

Een derde bijkomend effect kan zijn, dat wanneer er gebruik wordt gemaakt van content-elementen als bijvoorbeeld “Tabbladen”, welke beschikbaar zijn in de meeste page-builders als WPBakery en Elementor, maar ook als seperate plugin dat die tabbladen ook gebruik maken van een anker-link in de vorm van “ID=…” om het tabblad te definiëren.

Het gebruik van een “anchor offset” plugin om dan de scroll-afstand in te stellen om het te ver door scrollen bij gebruik van een Sticky-Menu op te heffen, gooit dan roet in het eten. De ingestelde “offset” wordt dan ook toegepast op de tabbladen en dat willen we dan ook weer niet…

Dan zouden we weer een plugin moeten zoeken die dat effect weer op heft, of een plugin die dat de drie hiervoor genoemde effecten in zich kan beheren.

We hebben een tweetal plugins gevonden die dat kunnen.


Plugin “Easy Smooth Scroll Links”

De volgende twee plugins hebben we gevonden die de hiervoor beschreven effecten kunnen oplossen:

WordPress Anker Link Instellingen

Anchor Link Plugins

Zowel de plugin “Page Scroll to ID” als de plugin “Easy Smooth Scroll Links” hebben we beide getest (in combinatie met WordPress 5.1 en WPBakery) en zijn grofweg  hetzelfde.

De plugin “Page Scroll to ID” is op het eerste gezicht beter onderhouden, maar schijn bedriegt in dit geval. Het verschil is dat de plugin-ontwikkelaar van “Page Scroll to ID” de WordPress.org pagina beter bij houdt en zo dus de indruk wekt dat de plugin is bijgewerkt tot versie 5.1 van WordPress, terwijl bij de plugin “Easy Smooth Scroll Links” de ontwikkelaar tot versie WordPress 4.8 heeft bijgewerkt.

De ontwikkelaar van “Page Scroll to ID” is echter wel actiever aangaande het reageren op support vragen.

Gezien de wat meer eenvoudigere instellingen van de plugin “Easy Smooth Scroll Links” hebben we deze als eerste getest en onze bevindingen zijn meer dan prima.


“Easy Smooth Scroll Links”

Eenmaal deze plugin geïnstalleerd en geactiveerd zijn de instellingen terug te vinden onder “Instellingen -> ESSL”:

WordPress Anker Instellingen

ESSL Instellingen

De instellingen zijn onder te verdelen in 4 groepen:

  1. “Scroll Speed” – hiermee is de scroll-snelheid in te stellen;
  2. “Offset” – bij gebruik van een “Sticky Menu”, waarbij het menu dus altijd zichtbaar is en dan een gedeelte van het scherm in beslag neemt is die ruimte op te heffen door een offset in pixels op te geven. Bij een grotere waarde zal de anker-link dan verder onder het menu-stoppen;
  3. “Scroll Animatie” – hiermee is een effect in te stellen, welke zichtbaar is tijdens het automatisch scrollen naar de anker-link;
  4. “Exclude Anchors” – maken we gebruik van bijvoorbeeld tabbladen, dan kunnen we hier aan geven welke tabblad-elementen (of andere elementen welke we uit willen sluiten) en zo de offset en scroll -effect instellingen voor die anker-id’s uit schakelen.

Tabbladen & Accordions

Via optie 4 van de instellingen bij deze plugin kunnen we dus het scroll-effect (offset en snelheid) wat normaal ook toegepast zou worden bij pagebuilder elementen als tabbladen en accordions uitschakelen.

Bij gebruik van die elementen moeten we dan aangeven met welke benaming (ID) die elementen beginnen. Die benaming geven we dan op bij bijvoorbeeld het tabblad-element op de pagina waar we die gebruiken en bij de plugin-instellingen geven we dan aan om de elementen met die beginnen met dat specifieke ID te negeren.

In dit voorbeeld hebben we tabbladen gebruikt met de benaming “algemene-“.


Samenvatting

Met deze redelijk eenvoudige instellingen zijn nu de bijkomende “storende” effecten van een anker-link opgelost. In een volgend artikel zullen we de plugin “Page Scroll to ID” beschrijven welke dezelfde instellingen kent, met nog veel meer fine-tune mogelijkheden.

Deze plugin is door de meer basis instellingen minder gevoelig voor updates.

Vragen & Info

Heb je vragen naar aanleiding van dit artikel, stuur ons dan een mail op: info@qwain.nl of geef een reactie via onderstaand reactie-formulier.

We verzorgen ook trainingen speciaal voor WordPress Design en WPBakery. Voor meer info, bekijk dan deze pagina: WordPress Trainingen.

Op de hoogte blijven van alle WordPress Nieuwtjes, Tips & Tricks… volg ons dan op Facebook .

 

Overige Artikelen


Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *