{"id":46240,"date":"2022-09-30T10:34:39","date_gmt":"2022-09-30T08:34:39","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=46240&preview=true&preview_id=46240"},"modified":"2023-06-09T09:06:54","modified_gmt":"2023-06-09T07:06:54","slug":"elementor-tabs","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/elementor-tabs\/","title":{"rendered":"Zo maak en gebruik je Elementor Tabs"},"content":{"rendered":"

Bij het bouwen van een website<\/a> is het essentieel dat je content goed georganiseerd is. Het netjes ordenen van je pagina’s kan de gebruikerservaring (UX) helpen verbeteren en de tekst beter verteerbaar maken. Een van de manieren waarop je je content\u00a0kunt organiseren is door de Elementor Tabs widget te gebruiken.<\/p>\n

Content met tabbladen laat je gebruikers wisselen tussen verschillende contentsecties. Door deze feature hoeven bezoekers niet meer naar verschillende delen van pagina’s te navigeren. Het groeperen van verwante content in containers met tabbladen kan het uiterlijk en de bruikbaarheid van je site verbeteren. Bovendien kun je dit alles instellen zonder enige ervaring met WordPress ontwikkeling<\/a>.<\/p>\n

In dit artikel introduceren we Elementor en zijn verschillende versies. Daarna laten we je zien hoe je Elementor Tabs kunt maken en aanpassen, en wat externe tools kunt gebruiken om de standaardfunctionaliteit van de widget te verbeteren.<\/p>\n

Laten we beginnen!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Een overzicht van Elementor<\/h2>\n

Elementor<\/a> is een populaire en krachtige websitebuilderplugin:<\/a><\/p>\n

\"Elementor
Elementor paginabuilder.<\/figcaption><\/figure>\n

Je kunt de paginabuilder gebruiken om prachtige pagina’s voor je website te maken, vanaf nul of met behulp van voorgemaakte templates. Elementor heeft een drag-and-drop editor, zodat je geen regel code hoeft aan te raken<\/a>.<\/p>\n

Het is belangrijk op te merken dat er een gratis<\/a> en een betaalde versie van Elementor is<\/a>. Met de gratis Elementor plugin kun je standaard pagina’s en berichten maken.<\/p>\n

De mogelijkheden en functionaliteit kunnen echter beperkend zijn. Om het volledige pakket aan tools te ontgrendelen, raden we je aan te upgraden naar Elementor Pro. In dit artikel wijzen we op de verschillen tussen het gratis en het pro-abonnement bij het werken met de widget Tabs.<\/p>\n\n

Zo maak je Elementor Tabs (Tabs widget)<\/h2>\n

Nu we meer begrijpen van Elementor, laten we eens kijken hoe je de Tabs widget kunt gebruiken. Merk op dat we voor de volgende tutorial aannemen dat je Elementor al ge\u00efnstalleerd en geactiveerd<\/a> hebt op je WordPress site.<\/p>\n

Om te beginnen navigeer je naar het WordPress artikel of pagina waar je de content met tabbladen wilt toevoegen en kies je Edit with Elementor<\/strong>:<\/p>\n

\"Selecteer
Selecteer “Edit with Elementor”.<\/figcaption><\/figure>\n

Hierdoor wordt de Elementor editor-interface gestart. Zoek en selecteer in het linkerpaneel, onder Elements<\/strong>, de widget Tabs<\/strong>:<\/p>\n

\"Zoek
Zoek en selecteer de widget “Tabs”.<\/figcaption><\/figure>\n

Je kunt de widget naar een paginasectie slepen. Zodra je de widget Tabs plaatst, verschijnt er een nieuw dashboard met de instellingen ervan:<\/p>\n

\"Sleep
Sleep de widget naar je pagina.<\/figcaption><\/figure>\n

Je kunt voor elk tabblad de titel en content invoeren. Je kunt ook op de knop + Add Item<\/strong>\u00a0<\/strong>klikken om nog een tabblad in te voegen. Kies onder Type<\/strong> of je de tabbladen horizontaal of verticaal wilt weergeven.<\/p>\n

Zo kun je Elementor tabbladen aanpassen<\/h2>\n

Zodra je tekst hebt toegevoegd aan de tabbladen, kun je de algemene widget-instellingen aanpassen. Er zijn een paar verschillende opties.<\/p>\n

Selecteer elk aangepast tabblad om de eigenschappen aan te passen<\/a>, waaronder de titel, de content van het vak en het pictogram. Je kunt ook de positie en uitlijning veranderen:<\/p>\n

\"Tabbladen
Tabbladen naar behoefte wijzigen.<\/figcaption><\/figure>\n

Vervolgens vind je onder het tabblad Style<\/strong>\u00a0<\/strong>veel opties om het ontwerp en uiterlijk van de widget Elementor Tabs aan te passen. Je kunt de tekstkleur en schaduw, typografie, spati\u00ebring en meer aanpassen:<\/p>\n

\"Pas
Stijlen en spati\u00ebring aanpassen.<\/figcaption><\/figure>\n

Je kunt de randkleur en breedte die de tabbladen omgeeft veranderen. Deze ontwerpfeature\u00a0 kan helpen de afzonderlijke secties te onderscheiden.<\/p>\n

Onder Title <\/strong>kun je de tekstkleur van de tabbladtitels aanpassen. Je kunt ook het lettertype en de tekstgrootte veranderen door te klikken op Typography<\/strong>:<\/p>\n

\"Meer
Meer wijzigingsmogelijkheden.<\/figcaption><\/figure>\n

Als je klaar bent, sla dan je wijzigingen op. Er zijn ook enkele geavanceerde instellingen die je kunt overwegen te gebruiken om je content\u00a0met tabbladen geavanceerder te maken.<\/p>\n

Geavanceerde instellingen voor Elementor Tabs<\/h2>\n

Onder het tabblad Advanced<\/strong>\u00a0in het widget instellingenpaneel vind je een groot aantal extra opties<\/a>:<\/p>\n

\"Meer
Geavanceerde tabbladopties.<\/figcaption><\/figure>\n

Laten we deze instellingen eens nader bekijken:<\/p>\n