Een table of contents automatisch tonen op je WordPress website? Dat kan met de nieuwe table of contents widget van Elementor Pro. Daarmee heb je weer een plugin minder nodig voor je WordPress website. In dit artikel leg ik je uit wat de mogelijkheden zijn! En uiteraard gebruiken we de table of contents widget zelf ook (zie bovenaan in dit artikel).
Wat is een table of contents?
Een table of contents is een inhoudsopgave van je webpagina. Het geeft je bezoeker een beter overzicht van de content op je webpagina. Zo kan je bezoeker direct naar de juiste sectie / inhoud scrollen. Daarnaast zijn table of contents goed voor je vindbaarheid in Google. Alle reden dus om deze nieuwe widget van Elementor uit te proberen.
De 7 mogelijkheden
1. Bepaal zelf welke subtitels je wilt opnemen
Met de table of contents widget van Elementor Pro bepaal je zelf welke subtitels (headings) je wilt tonen in de inhoudsopgave. Zo kun je er bijvoorbeeld voor kiezen om alleen alle H2 koppen te tonen of ook alle andere subtitels (zoals h3 en h4). Ook is het mogelijk om bepaalde koppen uit te sluiten door middels van HTML selectors. Je kunt de table of content widget per pagina instellen, maar als je werkt met een single blog template, stel je de table of contents in voor al je blogartikelen.
2. Sticky table of content en gearceerde titels
Om de table of contents nog iets gebruiksvriendelijker te maken, kun je deze ook sticky instellen. Hiermee zet je de table of contents vast, zodat deze in beeld blijft bij het scrollen. Een ander voordeel is dat de table of content widget ook toont waar de bezoeker zich bevindt op de pagina. Zo kun je zelf een actieve kleur instellen (voor als de bezoeker naar een bepaald punt is gescrold). Deze optie is handig wanneer je veel content op een pagina hebt staan.
3. Unieke opsommingsstijlen
Met de table of contents widgets kun je kiezen tussen een genummerde lijst of een bullet lijst. Kies je voor de bullet, dan kun je ieder gewenste icoon instellen voor de widget. Het is ook mogelijk om geen bullets te gebruiken.
4. Tal van design opties
Zoals je gewend bent van alle Elementor widgets, zijn er ook bij de table of content widget tal van stylingsmogelijkheden. Zo kun je de afstand tussen de lijst items verkleinen, meer of minder padding voor de box gebruiken, achtergrondkleuren instellen etc. Zo maak je de table of content passend voor jouw website.
5. Table of contents inklappen
Op kleinere schermen kan een table of contents veel ruimte innemen. Daar heeft Elementor ook iets op bedacht: je kunt namelijk de table of content minimaliseren voor tablet en mobiel. Op die manier neemt de inhoudsopgave niet teveel ruimte in en kan de bezoeker zelf kiezen om er gebruik van te maken of niet.
Wil je de table of contents ook ingeklapt houden op desktop? Plaats dan de onderstaande code in een html widget. Deze kun je op iedere willekeurige plek op de website plaatsen:
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.elementor-toc__toggle-button').click();
});
});
</script>
6. Table of contents selectief toepassen
Meestal kun je met table of content plugins voor WordPress de table of contents instellen voor bijvoorbeeld alle blogpagina’s. Als je al werkt met de Theme Builder van Elementor, kun je de table of content widget toevoegen aan je single templates. Vervolgens kun je met de publicatie condities instellen op welke pagina’s of categorieën de inhoudsopgave getoond moet worden. Heel fijn!
7. SEO, Google Schema & Rich Snippets
Tot slot is de table of content widget goed voor je vindbaarheid in Google. Het verbetert namelijk de pagina structuur en de mogelijkheid voor rich snippets in Google.
Table of content plaatsen
Als we dan toch nog een klein minpunt moeten noemen: als je de table of contents widgets wilt gebruiken voor je single template voor je blogartikelen, dan kun je deze alleen boven, onder of naast de content plaatsen. Bij andere table of contents plugins voor WordPress kun je bijvoorbeeld instellen dat je de inhoudsopgave na de intro / eerste alinea wilt tonen. Jammer, maar geen must.
2 Responses
Hallo,
Bedankt voor de info!
Is het ook mogelijk om een table of contents te plaatsen via shortcode?
Alternatief: is er een optie (CSS code) om de table of contents standaard ingeklapt te laten?
Groeten,
Ruben
Hoi Ruben,
Excuus voor de late reactie. Als je een table of contents maakt en deze opslaat als elementor template, dan kun je de shortcode van het template toevoegen aan je artikelen.
Om de table of contents ingeklapt te houden, kun je onderstaande code toevoegen aan een html widget (deze kun je plaatsen op een willekeurige plek op de pagina):