Inhoudsopgave toevoegen aan je WordPress blog met Elementor

Share on facebook
Share on whatsapp
Share on linkedin
Share on twitter
Share on email

Wil jij weten hoe je een inhoudsopgave toevoegt aan je blog of webpagina?

Een inhoudsopgave, ook wel TOC genoemd. TOC is een afkorting voor Table of Content. Simpelweg de Engelse vertaling van ‘inhoudsopgave’. Een inhoudsopgave vindt je in boeken, tijdschriften maar ook op stream diensten zoals Netflix. 

Ook op een website kan een inhoudsopgave goed te pas komen. Kijk maar naar Wikipedia. 

Het kan zorgen voor meer overzicht voor de lezer, het zorgt voor een betere verdeling, het biedt voordelen in zoekmachines zoals Google en daarnaast geeft het ook nog eens een professionele uitstraling. 

De voordelen van een inhoudsopgave zijn dus eindeloos. 

 – Maar Matthijs, “Hoe zet je zoiets op je website?”

Gelukkig sta je daar niet alleen voor. Zo ga ik je hierbij helpen en zijn er tal van andere Tools. 

Eén van die tools die er met kop en schouders boven alle andere uitsteekt is: Elementor.

Hieronder vind je de stappen hoe je met Elementor een perfecte inhoudsopgave aan je website of blog toevoegt.

Inhoud

Bekijk je liever de video?

Wat is Elementor?

Elementor is er om het gemakkelijk te maken om je eigen website te bouwen. Door gebruik te maken van Elementor kun je live pagina’s bouwen, je ziet dus direct wat je doet. Dit maakt het bouwen van een website overzichtelijker, elke aanpassing is direct visueel zichtbaar.

Naast het feit dat je websites live kunt bouwen biedt Elementor ook een breed assortiment aan templates. Dit zijn kant-en-klare pagina’s die je met één klik kunt toevoegen aan je website. Dit geeft de website al direct een professionele uitstraling. 

Om het alsnog je eigen te maken kun je het aanpassen in jouw stijl en aanvullen met je eigen inhoud.

Om gebruik te maken van Elementor moet je deze plugin downloaden, dat kun je gemakkelijk doen via onderstaande link.

Daarnaast beschikt Elementor over allerlei “elementen” die je zo in je website kunt slepen. Eén daarvan is een inhoudsopgave.

Inhoudsopgave toevoegen Elementor

Het toevoegen van een TOC is ook één van de vele dingen die je kunt doen met behulp van Elementor. Om dit te doen moet je ervoor zorgen dat je in het bezit bent van de Pro versie van Elementor.

Je hebt als het ware twee manieren om een TOC toe te voegen aan je website met Elementor. Je kunt ervoor kiezen om deze tussen de content te zetten, hierdoor kom je de inhoudsopgave tegen als je door de pagina heen scrolt. 

Een andere mogelijkheid is dat je de inhoudsopgave aan de zijkant van de website plaatst. Hierbij kun je kiezen om deze bovenaan de pagina te laten staan of ervoor zorgen dat deze mee scrolt met de lezer die over de pagina heen gaat.

Beide mogelijkheden staan hieronder in stappen uitgelegd.

Inhoudsopgave toevoegen WordPress tussen content

Stap 1: Plek bepalen inhoudsopgave

Eerst kies je de plek waar je de TOC WordPress wilt plaatsen. Het is bijvoorbeeld mooi om de inhoudsopgave te plaatsen tussen de titel en het eerste kopje van de website. 

Hierdoor staat deze vrijwel bovenaan de website en is deze makkelijk te vinden voor de bezoeker. Hierin kan de bezoeker direct zien waar ze kunnen vinden waar ze naar zoeken. 

In de HTML code is de titel te herkennen aan H1. De tussenkopjes zijn te herkenen aan het HTML element H2, H3, H4, H5 of H6

Hoe hoger het nummer hoe kleiner het lettertype zal zijn. Daarnaast is het zo dat H1 altijd staat voor de titel, de andere h elementen zijn voor tussenkopjes.

Gelukkig heb je als je Elementor gebruikt helemaal geen HTML code nodig, maar dit is wel handig om te weten.

Stap 2: Inhoudsopgave toevoegen

Als volgt zoek je in Elementor het blokje waarop staat Table of Contents. Deze klik je aan en sleep je als volgt naar de plek waar je de inhoudsopgave wilt plaatsen. Hierdoor is deze gelijk te zien.

Selecteer table of contents

Stap 3: Titel van de inhoud zelf toevoegen

in hetzelfde vak van Elementor zie je bovenaan ‘titel’ staan. Hier kun je zelf invullen welke titel je boven aan de inhoudsopgave wilt hebben staan.

Stap 4: Welke titels toevoegen (Include) 

Na het slepen van de inhoudsopgave naar de juiste plek zie je in het instellingen vak van Elementor meerdere opties rondom inhoudsopgave verschijnen. 

Een van de mogelijkheden om aanpassingen in te maken is het kiezen van elementen die je wilt betrekken in de inhoudsopgave van de website. Je kunt hierin bepalen welke titels zoals H1 tot en met H6 je wilt tonen binnen de inhoudsopgave.

Je kunt degenden die je niet wilt tonen simpelweg wegklikken door op het kruisje te klikken, of weer toevoegen door in het vak te klikken en de gewenste H tag te selecteren.

Selecteer inhoudsopgave h tag

Stap 5: Stijl inhoudsopgave aanpassen

Om de stijl van de inhoudsopgave aan te passen is ook te vinden in het Elementor inhoudsopgave settings. Uit de drie tabjes aan de bovenkant van dit vak is dit het middelste tabje; ‘stijl’. 

Op het gebied van stijl kun je aanpassingen maken zoals de achtergrondkleur, het toevoegen of verwijderen van een rand, het aanpassen van de header, tekst kleur, afronden van de hoeken en het kiezen van een kleur als je met je muis over een gedeelte tekst heen gaat. 

Op deze manier zorg je ervoor dat de inhoudsopgave mooi aansluit op de stijl waarin de rest van de website is ingericht.

Stap 6: Bewerken opsomming icoontjes of nummering

als je werkt met een opsomming kun je kiezen om te werken met het nummeren van de opsomming of bullets points. Om hierin een wijziging te maken ga je naar het tabje ‘inhoud’ en klik je op Table of Contents’.

Onderaan vind je hier Marker View’, als je dit keuze menu uitklapt kun je kiezen tussen numbers of bullets. Als je kiest voor bullets is er een ruim aanbod aan icoontjes waaruit je kunt kiezen.

Als je gekozen hebt kun je naar het kopje stijl gaan, hierbij kun je het formaat en de kleur veranderen van de icoontjes. Op deze manier maak je deze ook weer helemaal eigen voor de website die je ontwerpt.

Icoon toevoegen WordPress inhoudsopgave-blog

Als je al deze stappen hebt doorlopen heb je als het goed is nu een mooie inhoudsopgave kunnen maken. Het enige wat je moet doen is drukken op bijwerken. Hierdoor wordt je pagina opgeslagen en is de inhoudsopgave toevoegen Elementor compleet.

Als tweede is er nog de mogelijkheid om een inhoudsopgave te plaatsen aan de zijkant. Deze blijft altijd op de pagina staan en beweegt mee met het scrollen van de bezoeker van de pagina. Om dit te creëren moet je het onderstaande stappenplan volgen.

Inhoudsopgave toevoegen WordPress aan de zijkant

Sticky inhoudopgave sidebar

Stap 1: Aanmaken sidebar

Allereerst moet je zorgen dat je een sidebar element hebt. Deze is makkelijk aan te maken door een extra kolom toe te voegen. Dit doe je door op het donkere blokje in de linker bovenhoek van je content te drukken. 

Hierdoor verschijnt er een klein menu met meerdere opties, waaronder kolom toevoegen. Ook kun je het formaat van de kolom aanpassen per kolom. Zo kun je ervoor zorgen dat de inhoudsopgave zowel groter of kleiner wordt.

inhoudsopgave slepen sidebar

Stap 2: Inhoud toevoegen

Als je de inhoud al in de content hebt staan kun je deze simpelweg slepen naar de nieuwe kolom. De inhoud zal zich hierdoor al op de juiste manier vertonen in de kolom, hierop kun je nog wat aanpassingen doen zodat het past bij de stijl van de website. 

Je kunt bijvoorbeeld aanpassingen maken in de grootte van de letters of de regelhoogte aanpassen. Hier kom ik later nog op terug.

Stap 3: Meescrollen (Sticky inhoudsopgave)

Om ervoor te zorgen dat de inhoud mee scrolt met de de pagina ga je naar bewerken. Dit is het lichtblauwe blokje in de rechter bovenhoek van de content die je wilt aanpassen. 

Aan de linkerkant van de pagina komt er dan weer een vak tevoorschijn met de bewerkings mogelijkheden. 

Om de inhoud mee te laten scrollen ga je naar geavanceerd en kies je voor bewegingseffecten, deze zet je op “Sticky”. Hierdoor zal de inhoudsopgave mee gaan met het scrollen.

Inhoud sticky maken elementor

Stap 4: Stijl aanpassen

Door de grote van de letters aan te passen kun je ervoor zorgen dat de inhoudsopgave in zijn geheel groter of kleiner wordt. Als je de letters kleiner maakt kan het er soms voor zorgen dat de hele inhoud zichtbaar word in plaats van een klein gedeelte. 

Het kleiner maken van letters doe je door naar het kopje “List” te gaan en hier te klikken op “typografie”. Hier is de mogelijkheid van het aanpassen van de grote van letters te vinden. 

Een andere oplossing om te zorgen dat een langere inhoudsopgave in het scherm past is door de regelhoogte aan te passen. Hoe minder ruimte tussen de regels hoe meer tekst er in beeld kan komen. 

Ook het aanpassen van de “Marker Size” kan helpen om de inhoudsopgave zo klein mogelijk te maken, door deze kleiner te maken kunnen de regels vaak dichter op elkaar komen te staan. 

Het zorgen voor een kleine inhoudsopgave is belangrijk aangezien alle inhoud ook zichtbaar moet zijn op kleinere schermen

Als de inhoud mee scrolled met de bezoeker kan het niet zo zijn dat de onderste twee of drie inhoud elementen niet zichtbaar zijn in de inhoudsopgave.

Ook hier moet je ervoor zorgen dat je deze op het eind opslaat. Hierna kun je pagina nogmaals bezoeken en checken of hij zo mee scrolt en of er eventueel nog iets moet worden veranderd.

Check ook vooral even op verschillende schermen of de inhoudsopgave volledig zichtbaar is.

Het volgen van een van de bovenstaande stappenplannen zorgt ervoor dat je een website pagina hebt met een goede interface. Beide mogelijkheden zijn zeer overzichtelijk en geven de website een professionele en afgewerkte look.

Rich snippet toc goolge

Google geeft voorkeur aan inhoudsopgave websites

Het gebruik maken van een inhoudsopgave op een website zorgt niet alleen voor overzicht voor de bezoeker. Ook kan google in je voordeel werken op zijn tijd. Dit door gebruik te maken van google zoektermen in de inhoudsopgave. 

Als iemand dan de zoekterm intypt op google die matched met een term in de inhoudsopgave van je website zorgt dit ervoor dat deze opduikt in de Google Search. 

Bij het kopje spring naar: is dan de mogelijkheid om via de inhoudsopgave direct naar dat deel van jouw website te gaan. Hierdoor krijg je meer bezoekers zonder dat je hier veel voor hoeft te doen. 

Slim omgaan met zoek termen in je inhoudsopgave is dus een slimme manier van het optimaliseren van je website.

Met deze tips en tricks kun je nu zelf (samen met Elementor) aan de slag om je eigen gestijlde inhoudsopgave te maken op WordPress. 

Een belangrijk aspect van een goede website!

Share on facebook
Share on whatsapp
Share on linkedin
Share on twitter
Share on email

Laat een reactie achter

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

Scroll naar top
Basis stappenplan snel website maken WordPress download

Dit wordt super leuk!!

Waar mag ik het stappenplan naartoe sturen?