Bij het bouwen van een website 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 kunt organiseren is door de Elementor Tabs widget te gebruiken.
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.
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.
Laten we beginnen!
Een overzicht van Elementor
Elementor is een populaire en krachtige websitebuilderplugin:
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.
Het is belangrijk op te merken dat er een gratis en een betaalde versie van Elementor is. Met de gratis Elementor plugin kun je standaard pagina’s en berichten maken.
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.
Zo maak je Elementor Tabs (Tabs widget)
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ïnstalleerd en geactiveerd hebt op je WordPress site.
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:
Hierdoor wordt de Elementor editor-interface gestart. Zoek en selecteer in het linkerpaneel, onder Elements, de widget Tabs:
Je kunt de widget naar een paginasectie slepen. Zodra je de widget Tabs plaatst, verschijnt er een nieuw dashboard met de instellingen ervan:
Je kunt voor elk tabblad de titel en content invoeren. Je kunt ook op de knop + Add Item klikken om nog een tabblad in te voegen. Kies onder Type of je de tabbladen horizontaal of verticaal wilt weergeven.
Zo kun je Elementor tabbladen aanpassen
Zodra je tekst hebt toegevoegd aan de tabbladen, kun je de algemene widget-instellingen aanpassen. Er zijn een paar verschillende opties.
Selecteer elk aangepast tabblad om de eigenschappen aan te passen, waaronder de titel, de content van het vak en het pictogram. Je kunt ook de positie en uitlijning veranderen:
Vervolgens vind je onder het tabblad Style veel opties om het ontwerp en uiterlijk van de widget Elementor Tabs aan te passen. Je kunt de tekstkleur en schaduw, typografie, spatiëring en meer aanpassen:
Je kunt de randkleur en breedte die de tabbladen omgeeft veranderen. Deze ontwerpfeature kan helpen de afzonderlijke secties te onderscheiden.
Onder Title kun je de tekstkleur van de tabbladtitels aanpassen. Je kunt ook het lettertype en de tekstgrootte veranderen door te klikken op Typography:
Als je klaar bent, sla dan je wijzigingen op. Er zijn ook enkele geavanceerde instellingen die je kunt overwegen te gebruiken om je content met tabbladen geavanceerder te maken.
Geavanceerde instellingen voor Elementor Tabs
Onder het tabblad Advanced in het widget instellingenpaneel vind je een groot aantal extra opties:
Laten we deze instellingen eens nader bekijken:
- Advanced: Verander de marges en vullingen van de tabbladen.
- Motion Effects: Voeg scrollen en muiseffecten toe om de widget interactiever te maken en voeg een entree-animatie toe.
- Transform: Draai, roteer en schaal je widget.
- Background: Kies tussen een standaard achtergrond of zweef erover om een overgang in te voegen.
- Border: Kies het type rand, zoals een effen of stippellijn.
- Mask: Kies een stijlvol ontwerpmasker en pas het toe op de widget.
- Positioning: Pas de breedte en positie van de widget aan.
- Responsive: Wijzig de responsieve zichtbaarheid die van invloed zal zijn op preview of live pagina’s.
- Attributes: Stel aangepaste attributen in voor de elementwrapper.
- Custom CSS: Voeg je aangepaste CSS in.
Het is belangrijk op te merken dat als je de gratis versie van Elementor gebruikt, je geen toegang hebt tot al deze geavanceerde instellingen. Je kunt bijvoorbeeld geen aangepaste attributen, scrolling-effecten of je CSS toevoegen.
Zo voeg je een element toe aan de Tabs widget
Met Elementor Pro kun je ook een ander element toevoegen binnen de widget Tabs. Stel bijvoorbeeld dat je de widget Maps wilt toevoegen onder een tabblad Locations.
Maak daarvoor de kaart die je wilt gebruiken en sla hem dan op als Global Widget door met de rechtermuisknop op het potloodicoontje te klikken en Save as a Global te kiezen:
Navigeer vervolgens naar je Template Library (vanuit je WordPress dashboard) en kopieer de shortcode van de Global Widget die je zojuist hebt gemaakt.
Klik dan binnen de widget Tabs en selecteer de knop + Add Item om een nieuw tabblad toe te voegen. Plak in het tekstgebied van de container de shortcode die je zojuist hebt gekopieerd:
Als je klaar bent, klik je onderaan op UPDATE of PUBLISH. Dan kun je een preview bekijken hoe de widget er op de front-end van je site uitziet:
Dat was het! Je bent helemaal klaar.
8 top plugins voor Elementor Tabs
Elementor is een robuuste tool met alle functionaliteit en mogelijkheden die je nodig hebt om mooie, functionele content met tabbladen te maken.
Maar misschien wil je verder gaan met je ontwerp of geavanceerde mogelijkheden gebruiken. In dat geval kun je ook overwegen om Elementor te koppelen aan een andere externe tool.
Laten we eens kijken naar enkele van de beste plugins voor Elementor Tabs, gerangschikt in willekeurige volgorde.
1. ElementsKit Elementor Tabel Widget
ElementsKit Addon for Elementor is een populaire extensie:
Met zijn Table Widget kun je een grote hoeveelheid niet gesynchroniseerde gegevens overzichtelijk tonen. Je kunt een aanpasbare tabel bouwen, bodycontent toevoegen en afbeeldingen en navigatie-elementen invoegen.
De features van ElementsKit zijn:
- Vergelijkingstabellen
- Schema’s en kalenders
- Projectbeheer
- Menu’s
- 500+ blokken
- 70+ add-ons
- Een mega menubuilder
- Parallaxeffecten
- Een pop-up modalbuilder
De prijzen voor ElementsKit beginnen bij $39 per jaar voor een enkele site. Dit abonnement is inclusief één jaar updates en ondersteuning.
2. Elegant Tabs for Elementor
Elegant Tabs for Elementor is een intuïtieve tool waarmee je dynamische tabbladen kunt maken en aanpassen:
Deze add-on kan een solide keuze zijn als je op zoek bent naar een extensie met veel ontwerpaanpassingsmogelijkheden. Je kunt aangepaste kleuren, pictogrammen en lettertypen toevoegen. Je kunt Elegant Tabs ook gebruiken om een auto-switch feature toe te voegen aan je tabbladen en ze te koppelen aan andere content op je site.
De belangrijkste features van Elegant Tabs zijn:
- Geavanceerde stylingopties
- Een auto-switchfeature
- De optie om elk tabblad actief te maken bij het laden
- Gestileerde en verticale tabbladen
- Deep linking
- Ondersteuning van tabbladuitlijning
De prijzen voor Elegant Tabs beginnen bij $19 per jaar. Dit abonnement is inclusief zes maanden updates.
3. Livemesh Addons
Livemesh Addons for Elementor bevat een overvloed aan kant-en-klare elementen waarmee je je content met tabbladen gemakkelijk kunt stylen en structureren:
Je kunt kiezen uit lichte en donkere tabbladtypes, meer dan 10 tabbladontwerpen, en horizontale en verticale lay-outopties. Livemesh Addons is eenvoudig te gebruiken, wat uitstekend is als je nieuw bent met WordPress of Elementor.
De belangrijkste features van Livemesh zijn:
- 10 lichte tabbladontwerpen en 10 donkere tabbladontwerpen
- Verticale en horizontale opties
- Aanpasbare mobiele resolutie
- 25+ add-ons
- Ondersteuning voor pictogrammen
Livemesh Addons abonnementen beginnen bij $37 per jaar. Dit abonnement is inclusief updates en ondersteuning voor een jaar.
4. Elementor Addons
Elementor Addons, van het populaire PowerPack, is een featurerijke plugin om zowel het ontwerp als de functionaliteit van je Elementor Tabs widget te verbeteren:
Met deze plugin kun je tekst en afbeeldingen toevoegen aan je tabbladen en zes stijlen toepassen voor de Advanced Tabs widget. Het is gebruiksvriendelijk en gemakkelijk te begrijpen. Bovendien is Elementor Addons ook lichtgewicht, zodat je je geen zorgen hoeft te maken over het vertragen van je site.
De belangrijkste features van Elementor Addons by PowerPack zijn:
- Een snelle en lichte interface
- Vooraf gebouwde templates
- Aangepaste contentweergave
- Geavanceerde tabbladstijlen
Met een prijs van(af) $44 per jaar is deze plugin duurder dan sommige andere opties op deze lijst. Het heeft echter een volledig pakket widgets om alle aspecten van je site aan te passen, niet alleen je content in tabbladen.
5. JetElements
JetElements biedt een Responsive Tables widget die ideaal kan zijn als je een snelle en eenvoudige manier zoekt om je content te groeperen:
Hiermee kun je ongestructureerde gegevens op een schone, moderne manier laten zien. JetElements biedt ook een Pricing Table widget om je prijsgegevens op acht verschillende manieren aan te passen en te stylen.
De belangrijkste features van JetElements zijn:
- 45 widgets
- CSV import naar tabelinstellingen
- 8 stylingopties
- Ondersteuning voor alle contenttypen
- Volledig aanpasbaar
Een JetElements abonnement begint bij $24 per jaar. Crocoblock biedt ook een all-inclusive pakket voor $130 per jaar, met meer dan 150 widgets.
6. Essential Addons
Een andere populaire plugin die je zou kunnen overwegen te gebruiken voor je Elementor Tabs is Essential Addons:
Het is een van de populairste Elementor widget plugins. Het bevat meer dan 100 kant-en-klare blokken en meer dan 80 elementen voor het uitbreiden en verbeteren van de websitebuilder.
Een van de beste elementen die je kunt inzetten voor je content met tabbladen is de Data Table van de plugin. Met deze tool kun je naadloos bijna elk type tabel ontwerpen en pictogrammen, filters en meer toevoegen.
De belangrijkste features van Essential Addons zijn:
- CSV import naar tabel instellingen
- Filteropties
- Volledig aanpasbare instellingen
- Geavanceerde stylingopties
- Geavanceerde tabbladen en accordeon elementen
- Prijstabellen
De prijs voor Essential Addons begint bij $39,97 per jaar voor één website. Het wordt geleverd met één jaar updates en ondersteuning.
7. Premium Addons
Premium Addons is een zeer aanpasbare tool voor Elementor die wordt geleverd met een breed scala aan gratis en premium widgets:
Onder de vele krachtige widgets die bij deze add-on horen is de Elementor Pricing Table. Deze wordt geleverd met een sorteerfeature, live zoeken, en de mogelijkheid om artikelen in oplopende of aflopende volgorde te rangschikken.
De belangrijkste features van Premium Addons zijn:
- De mogelijkheid om CSV-bestanden te importeren
- URL’s toevoegen aan tabelcellen
- Live zoeken en sorteren
- Aanpassings- en stylingopties
- Lottie animaties
Je kunt de Premium Addons Elementor Table Widget gratis downloaden en gebruiken. Er is ook een premiumversie, vanaf 39 dollar per jaar.
8. Element Pack
Een laatste add-on die je zou kunnen overwegen te gebruiken bij je Elementor Tabs widget is Element Pack:
Deze bundel Elementor extensies bevat een Table widget die je content op een boeiende en stijlvolle manier kan presenteren. Je kunt verschillende tabellen maken binnen je content met tabbladen, waaronder tabellen met prijzen, content en cryptovaluta.
De belangrijkste features van Element Pack zijn:
- CSV import naar tabelinstellingen
- Drie-tabel elementen
- Aanpassings- en stylingopties
- Een filterfeature
- Live zoeken
Een single-sitelicentie voor Element Pack kost $29,25 per jaar en is daarmee een van de goedkopere opties op deze lijst. Het plan bevat ook een 20 dagen niet-goed-geld-teruggarantie.
Samenvatting
Elementor is een uitstekende tool waarmee je moeiteloos je website kunt ontwerpen en bouwen. Als je je content op een aantrekkelijke manier wilt groeperen en organiseren, kun je overwegen de Elementor Tabs widget te gebruiken.
Zoals we in dit artikel hebben besproken, kun je deze widget eenvoudig via de Elementor editor in elke pagina of artikel invoegen. Vervolgens kun je je content toevoegen en de stijl aanpassen aan je huisstijl. Om de functionaliteit van de widget uit te breiden kun je hem ook koppelen aan een externe plugin van, zoals ElementsKit.
Een gebruiksvriendelijk en aantrekkelijk ontwerp is essentieel voor het succes van een site.
Je moet daarnaast samenwerken met een krachtige Application Hosting, Database Hosting en Managed WordPress Hostingprovider.
Bekijk onze hostingpakketten om te zien hoe Kinsta je website naar een hoger niveau kan tillen!
Laat een reactie achter