Een FAQ widget voor Elementor maak je gewoon zelf!

Een FAQ widget voor Elementor maak je zelf in een handomdraai!

Voor het maken van een WordPress website heb je eigenlijk vandaag de dag niet zo gek veel plugins meer nodig. Eigenlijk heb je aan de combinatie Elementor, Elementor Pro en Unlimited Elements alles bij de hand wat je nodig hebt voor de presentatie van je website. Met name Unlimited Elements speelt hier een belangrijke rol, omdat je met behulp van deze plugin alle widgets die nog ontbreken in Elementor / Elementor Pro helemaal zelf kan bouwen.

Nog niet zo gek lang geleden heb ik je laten zien hoe je relatief eenvoudig een ‘Gallery Widget’ kan maken met behulp van Unlimited Elements.

En vandaag gaan we nog een stapje verder. Want nu gaan we een ‘FAQ widget’ maken die de informatie haalt uit de database… en deze FAQ Widget kan op veel verschillende manieren worden ingezet binnen je website.

Overigens is de term ‘FAQ Widget’ niet helemaal juist, omdat je hier diverse functies binnen Unlimited Elements gaan samenvoegen tot een compleet nieuw iets… En daarmee laten we ook precies zien, wat de werkelijke kracht van deze plugin is.

Wat heb je nodig?

Om mee te kunnen doen met dit voorbeeld heb je een viertal plugins nodig. Voor de gallery hadden we uitsluitend Elementor en de gratis versie van Unlimited Elements nodig, maar voor dit voorbeeld hebben we ook Elementor Pro nodig. En in plaats van de gratis versie van Unlimited Elements, gaan we hier voor de betaalde versie.

Naast deze plugins hebben we nog een vierde plugin nodig. Een plugin die ik ook al meer dan eens besproken heb, CPT-UI, ofwel Custom Post Type UI. Voor meer informatie over zowel custom post types als deze plugin verwijs ik je graag naar mijn uitgebreide artikel over custom post types.

Met behulp hiervan gaan we onze FAQ en de bijbehorende taxonomie definiëren. Zit je er klaar voor? Dan gaan we nu aan de slag.

Wil je zelf nog extra velden toevoegen aan de FAQ (dit is niet strikt noodzakelijk), dan kan je eventueel Advanced Custom Fields (ACF) ook gebruiken.

De basis: Het FAQ custom post type

Het eerste wat we moeten doen is een custom post type voor de FAQ aanmaken. We gaan daarvoor in het dashboard naar het item ‘CPT UI’ in het beheerdersmenu en klikken op ‘CPT-UI -> Toevoegen / Bewerken berichttypes’. Hier zien we een enorme lijst met velden die we in moeten vullen, de meeste staan echter al vooraf ingevuld, en feitelijk hoef je maar een paar dingen in te vullen / aan te passen.

De pagina bestaat uit drie secties: Basis instellingen, Extra labels en Instellingen. Wat dat allemaal wil zeggen gaan we nu niet verder op in, in mijn eerdergenoemde uitgebreide artikel over Custom Post Types kan je dit allemaal nalezen als je dat wilt.

In de sectie ‘Basis instellingen’ vullen we de volgende velden in:

• Berichttype Slug : Hier vul je faq in. In kleine letters. Je mag het ook in grote letters doen als je wilt, maar die worden vanzelf toch naar kleine letters geconverteerd.
• Label Meervoud : FAQ of FAQ’s… zelf vind ik FAQ’s een beetje onzinnig klinken, want de Q van Questions staat al voor meervoud.
• Label Enkelvoud : FAQ

Daarna klikken we op de link ‘Vul extra labels in op basis van gekozen labels’ om de volgende sectie in één klik te vullen en gaan we door naar de sectie ‘Instellingen’.

De meeste velden mogen we hier laten voor wat het is. Wat wel belangrijk is, is dat we voor het veld ‘Archief’ de waarde ‘Ja’ invullen, want in onze FAQ widget willen we natuurlijk wel een overzicht van de vragen kunnen presenteren.

Hebben we dat gedaan, dan mogen we helemaal naar de onderkant van de sectie ‘Instellingen’ door scrollen voor de laatste stappen.

Welke standaard velden moeten in onze custom post type ‘FAQ’ voorkomen?

Bij ‘Ondersteunt’ kunnen we aangeven welke van de standaard velden en standaard functionaliteiten in onze custom post type FAQ voor moeten komen. Ofwel, welke informatie willen we straks in onze FAQ widget laten zien? Natuurlijk willen we een titel (de vraag) en de content (het antwoord) laten zien, maar wellicht willen we meer meenemen in onze FAQ. In de voorbeelden in dit artikel laat ik ook nog zien hoe je je FAQ van een afbeelding en een samenvatting (de samenvatting is een kort antwoord, met een knop om door te linken naar een langer antwoord) kan laten zien.

Heb je aan die extra’s geen behoefte in jouw FAQ widget, maar ik heb in ieder geval gekozen voor de volgende velden :

Titel en Editor moet je aanvinken, Uitgelichte Afbeelding en Samenvatting zijn optioneel.

Wanneer we dit allemaal hebben ingevuld, dan kunnen we dit Custom Post Type opslaan.

Taxonomieën

In ons voorbeeld willen we onze FAQ ook kunnen filteren op basis van tags en categorieën. En om dit mogelijk te maken, maken we ook een tweetal ‘custom taxonomies‘ aan. FAQ Categories en FAQ Tags.

De tags gebruiken we voor een ‘fijnmazige filtering’, de categorieën voor een grove indeling. De tag indeling kan je bijvoorbeeld goed gebruiken om aan de product pagina van je WooCommerce webshop een FAQ toe te voegen met betrekking tot een specifiek product. Veel vragen en antwoorden zijn echter voor meerdere producten van toepassing. Stel je hierbij een volgende vraag voor: ‘Wat wil het zeggen, dat mijn camera een full frame sensor heeft’. Deze vraag is natuurlijk van toepassing voor alle camera’s met een full frame sensor, en het is handig wanneer je zo een product can ’taggen’ voor de soorten vragen en antwoorden die op de productpagina moeten verschijnen.

Maar laten we nu de beide taxonomieën die we nodig hebben voor onze FAQ Widget eerst eens aanmaken.

We beginnen met de ‘FAQ Categorieën’. We gaan opnieuw naar de CPT UI menu optie, maar ditmaal kiezen we CPT UI -> Toevoegen / Bewerken Taxonomieën.

En omdat we één ’tag style’ taxonomie willen hebben en één ‘category style’, moeten we er twee aanmaken. Deze taxonomieën zullen enigszins van elkaar verschillen. Laten we met de categorie-achtige beginnen.

Bij ‘Basisinstellingen’ vullen we het volgende in:

• Taxonomie slug: faq_category
• Label meervoud: FAQ Categorieën
• Label enkelvoud: FAQ Categorie

Ook hier klikken we de link ‘Vul extra labels in op basis van gekozen labels’ aan om de labels te vullen.

Onder deze link zie je nog een lijst staan met de aanwezige post types. Je vinkt hier ‘FAQ’ aan, omdat je de taxonomie wilt gebruiken bij de FAQ.

Nu scroll je helemaal door naar ‘Instellingen’ en bij ‘Hiërarchie’ kies je voor ‘Ja’.

Daarna mag je helemaal naar beneden scrollen om op de knop ‘Voeg taxonomie toe’ te klikken.

Voor het toevoegen van de FAQ tags voegen we opnieuw een taxonomie toe. Het zal je weinig verbazen, dat dit vrijwel hetzelfde gaat, maar dit keer vullen we bij de Basisinstellingen’ respectievelijk faq_tag, FAQ Tags en FAQ Tag in. En bij ‘Instellingen’ passen we helemaal niets aan.

De widgets activeren

Nu beschikt de Unlimited Elements add-on voor Elementor werkelijk een enorme hoeveelheid widgets die je kan gebruiken. Eén van de mooie dingen van deze plugin is echter dat deze niet allemaal direct geladen worden en je systeem daardoor onnodig vertragen en zorgen voor een onoverzichtelijk widget panel binnen Elementor.

Gaan we in het menu naar ‘Unlimited Elements’ dan zien we een pagina met links de widget categorieën, rechts de widgets binnen deze categorie. Om de eerste widget die we nodig hebben voor onze ‘FAQ widget’ toe te voegen klikken we op de categorie Dynamic Loops.

Binnen deze categorie gaan we met de muis over de ‘Dynamic Template Accordeon’. Nu zien we als we daar overheen gaan een tweetal knoppen verschijnen, ‘Install’ en ‘Preview’. We klikken hier op ‘Install’ en de widget wordt geïnstalleerd. Je ziet nu dat het woordje ‘web’ op de afbeelding is verdwenen. Op deze manier kun je zien welke widgets je wel of niet al geïnstalleerd hebt.

Een volgende widget die je toe zal willen voegen is de ‘Tabs filter’ die je onder de categorie ‘Post Filters’ kan vinden.

We zijn klaar met de voorbereidingen. Nu aan de slag!

Om een FAQ te tonen, moeten we natuurlijk eerst de FAQ vullen… want een FAQ widget zonder inhoud lijkt nergens op!

Het mooist is natuurlijk wanneer je begint je daadwerkelijke FAQ in te vullen, maar in het voorbeeld hier gebruik ik even lorum ipsum tekst. Voor het voorbeeld heb ik twee categorieën en drie vragen met antwoorden.

Zoals eerder aangegeven gebruiken we hier de ‘Dynamic Template Accordeon‘.

Wat deze plugin simpelweg doet is een custom post type zichtbaar maken binnen een WordPress Query loop. Maar dat gebeurt wel heel wat uitgebreider dan het met de standaard Elementor Widgets kan.

Elementor Pro 3.8+

Het werd hoog tijd, maar sinds Elementor Pro 3.8 heb je extra mogelijkheden om de post types te tonen in de loop widgets. Met behulp van add ons was dit al lang mogelijk en plugins als Dynamic.ooo, Elementor Custom Skin en natuurlijk Unlimited Elements was dit al lang mogelijk. Nu is het ook mogelijk met Elementor Pro zelf, maar hier schuilen echter wel twee addertjes onder het gras.

Allereerst, deze nieuwe functionaliteit is alleen beschikbaar wanneer je in Elementor het Flexbox layout systeem gebruikt, in plaats van het traditionele ‘Rijen- en kolommen systeem’. Werken met Flexbox is echter een totaal andere manier van werken, zoals uit mijn hierboven aangehaalde blogartikel ook mag blijken. Je gebruikt het dus niet ‘zomaar’.

In vergelijking met de Dynamic Loop Widgets van Unlimited Elements (waar de Dynamic Template Accordeon er één van is) is er een tweede voordeel wat voor de oplossing van Unlimited Elements pleit. De ‘eigen’ loop widgets hebben veel meer filtermogelijkheden dan de standaard Elementor Pro filtermogelijkheden.

Dus ondanks het feit dat er inmiddels in Elementor Pro ook de functionaliteiten beschikbaar zijn om ‘maatwerk skins’ te maken, gebruiken we hiervoor Unlimited Elements in dit voorbeeld.

Wat de Unlimited Elements add-on ook interessant maakt is het feit, dat de ‘dynamic loop’ widgets binnenkort uitgebreid gaan worden met meerdere data sources dan custom post types alleen. Maar dat is eigenlijk een heel ander verhaal.

Template loops

Op dit moment zijn er vijf ‘Dynamic Loop’ widgets. Wat al deze widgets gemeenschappelijk hebben is dat ze uitgaan van een Elementor single post (of single product) template voor het presenteren van die gegevens.

Ik ga daarom eerst naar de Elementor Pro Theme Builder en kies voor een nieuwe ‘Single Post’. Na deze aangemaakt te hebben, gaan we eerst naar het tandwieltje links onder de pagina en klikken daarop om een aantal gegevens in te stellen.

Bij de Algemene instellingen geef ik allereerst de naam aan. Ik noem het een ‘FAQ Item’.

Vervolgens ga ik naar de preview settings, en kies daar onder de ‘Preview Dynamic Content as’ voor FAQ en kies in het veld daaronder een FAQ item uit, die ik wil gebruiken in het voorbeeld.

We hebben nu gegevens om te tonen, wanneer we de widgets in het template plaatsen. In eerste instantie (we gaan zo meer complexe zaken bouwen) kunnen we volstaan met een tweetal widgets. De ‘post title’ en de ‘post content’ widget.

Natuurlijk stel je wat fraaiere kleuren in dan in het voorbeeld hierboven, maar nog veel belangrijker is, dat je bij de ‘Post Title’ de HTML tag van H1 een H2 tag maakt. Deze template gaat immers meerdere malen op een pagina getoond worden en meerdere H1’s op één pagina is niet gunstig voor je positionering in de zoekmachines.

Pas op bij het opslaan van je template!

Wanneer je probeert dit template op te slaan, zal Elementor altijd vragen om de display rules. Het is niet de bedoeling dat je bij dit soort templates display rules invult! Doe je dat wel, dan zal het template ook de presentatie van een single post verzorgen. Dat wil je niet. Je wilt dit alleen in loops gebruiken.

Dus hier slaan we netjes de knop ‘Add Condition’ over en klikken gelijk op ‘Save en Close’.

Eindelijk… de accordeon!

De hebben nu alle voorbereidingen getroffen voor onze FAQ Widget, dus nu kunnen we deze daadwerkelijk op gaan bouwen.

We gaan dus naar de pagina waar we de FAQ widget willen hebben en positioneren hem daar. In mijn voorbeeld is dit een blanco pagina, maar in de praktijk zal dat zelden het geval zijn.

Wanneer we de widget hebben geplaatst is het nog niet echt interessant. Het enige wat we zien is ‘Hallo Wereld’. Om dit te corrigeren gaan we eerst naar de sectie ‘Items Post Query’

We kiezen hier voor FAQ. En vervolgens krijgen we de titels van de Frequently Asked Questions te zien… maar niet te antwoorden!

Dat komt, omdat we nog geen template hebben gekoppeld. En dat kunnen we ook eenvoudig doen. In de sectie ‘General’ kiezen we in het ‘Items Item Template’ voor de naam van het template wat we gemaakt hebben. In ons geval dus ‘FAQ item’.

Twee andere instellingen die hier van belang zijn zijn ‘Posts’, waarmee je aangeeft dat het een ‘gewoon’ post type is. Wanneer je aangeeft, dat het ‘Products’ zijn, dan wordt er rekening gehouden met de interne structuur van WooCommerce posts.

Max, de lead developer van Unlimited Elements en ik hebben regelmatig contact over ‘wat mooi zou zijn’ in Unlimited Elements en over enige tijd kunnen we hier ook andere ‘gegevensbronnen’ onder verwachten zoals bijvoorbeeld ‘Instagram’, de inhoud van een CSV bestand of het resultaat van een SQL statement.

En met ‘First Item Open’ geven we aan of het eerste item in de FAQ Widget wel of niet uitgeklapt moet zijn. In ons geval wel dus.

En het resultaat wat we hiermee krijgen ziet er ongeveer uit als onderstaande:

Natuurlijk kunnen we dit nog helemaal stylen met behulp van het style tabblad van de widget.

Ik heb nu drie vragen die in totaal twee categorieën staan. Ik heb hier categorieën aangegeven, omdat ik centraal de vragen bij wil kunnen houden, maar deze vragen wel -gefilterd- op aparte pagina’s wil kunnen tonen.

Dit is in de praktijk makkelijk voorstelbaar. Stel je voor, dat ik op mijn site een dergelijke FAQ zou willen implementeren (spoiler, dat gaat ook gebeuren), dan heb ik natuurlijk een aantal verschillende dingen waarover vragen gesteld kunnen worden.

Mensen hebben vragen hoe de strippenkaart werkt. Mensen hebben vragen over hoe het nu zit met het WordXPression WP XPress programma en over nog veel meer verschillende zaken. Dus op dit soort pagina’s zou ik dan ook graag een FAQ widget willen, met alleen de vragen die voor die specifieke dienst of dat specifieke product van toepassing zijn.

Ik kan dan gewoon een kopie van de widget plaatsen op die andere pagina, maar hier maak ik een kleine verandering aan. Ik ga de posts namelijk op categorie filteren.

En omdat mijn FAQ nog niet bestaat, gaan we maar weer even uit van onze voorbeeld FAQ. We keren terug naar de sectie met de ‘Items Post Query’.

Daar vinden we een veld ‘include by terms’.

Klik ik daarop krijg ik een lijst met alle taxonomieën en taxonomie waarden die er voor dit Custom Post Type beschikbaar zijn. Ik kies voor ‘Over FAQ’s’.

En zoals je ziet, is nu de vraag over de widgets verdwenen!

Onze FAQ widget op een FAQ pagina

Nu is een specifieke FAQ op iedere relevante pagina natuurlijk heel handig, maar een ‘centrale’ FAQ pagina, waar je alle vragen en antwoorden op kan vinden is natuurlijk ook heel handig.

Maar wanneer je heel veel vragen hebt, dan kan een FAQ enorm onoverzichtelijk worden. In deze paragraaf wil ik dus samen met jou kijken naar hoe je een FAQ kan filteren.

We verwijderen dus weer het filter we voor de post terms hadden ingegeven en we hebben nu alle drie de vragen terug.

Wat we willen is boven deze vragen een balk met een aantal termen om op de filteren. Gelukkig kan dit ook met Unlimited Elements.

De resultaten filteren

Hiervoor importeer je het ‘Tabs’ filter wat je in de categorie ‘Post Filters’ bij de dashboard menu optie ‘Unlimited Elements’ kan vinden. Je sleept deze vervolgens naar de pagina (boven de FAQ widget is de meest logische plaats) en we gaan de widget verder instellen.

We beginnen met de ‘Terms selection’ sectie. Bij ‘Select Post Type’ kiezen we voor ‘FAQ’. Nu krijgen we de taxonomieën van FAQ te zien en kiezen hier voor ‘FAQ Categorie’.

Laten we nu ook eens naar een aantal andere instellingen kijken. Hiervoor gaan we naar de sectie ‘Filter Settings’.

De eerste vraag is of we een selectiemogelijkheid voor ‘Alle items’ toe willen voegen. Dat is natuurlijk wel handig, dus we kiezen hier voor ‘Ja’, maar de omschrijving ‘All’ klinkt natuurlijk niet erg Nederlands. Hier maken we ‘Alle Vragen’ van.

Met de ‘Sync to Post Widget’ zorgen we ervoor, dat alleen de categorieën die ook daadwerkelijk posts gekoppeld hebben worden getoond.

De andere opties hebben betrekking op het wel of niet voorkomen van child categories. Aangezien we die niet hebben, slaan we dit verder over.

Het enige wat we nu nog moeten doen is ervoor zorgen, dat onze FAQ widget weet dat er een filter is. En daarvoor gaan we even terug naar de Dynamic Template Accordeon en daarbinnen naar de sectie ‘Post Pagination and Filtering’. We zetten hier de ‘Enable Post Filtering’ aan en kiezen ervoor dat ‘Filters Behaviour’ op ‘Ajax’ staat.

We slaan nu alles op en openen een preview in een nieuwe pagina. De filter zelf zal namelijk niet werken in de editor.

En hier zien we het volgende:

Ofwel, de vragen veranderen, wanneer je een ander (categorie) filter kiest.

Een stapje mooier?

Nu is zo’n uitklappende FAQ wel mooi, maar het kan nog mooier. Aangezien jouw antwoord op een FAQ een ‘gewone’ Custom Post Type is, kan je alle content die in een Custom Post Type in de content gebruikt kan worden ook daadwerkelijk worden opgenomen.

Dat is een beetje overvloedig misschien om allemaal direct in je FAQ widget op te nemen, maar wat weerhoudt je er eigenlijk van, om vanuit de antwoorden in jouw FAQ door te linken naar een complete pagina met het antwoord. Dat is bovendien ook nog eens gunstig voor je SEO.

Omdat te doen maken we gebruik van het excerpt (de samenvatting), de ‘featured image’ of de ‘uitgelichte afbeelding’ en een knop om door te linken naar de uiteindelijke post.

We gaan dus terug naar onze theme builder en nemen onze FAQ Item Single Post template nogmaals onderhanden.

We hebben hier nu een template met twee kolommen van gemaakt. Rechts staat de featured image. In de linker kolom staan achtereenvolgens (van boven naar beneden) de ‘Post Title’, het ‘Post Excerpt’ en een ‘gewone’ knop.

Omdat we willen dat er -wanneer er op de knop wordt geklikt- naar de complete post (met daarin langere tekst, mogelijk ook met afbeeldingen, video of andere media)- wordt gegaan, willen we dat die knop linkt naar de URL van post. Om dat mogelijk te maken klikken we op de ‘stapel pannenkoeken’ (eigenlijk een disk array) rechts in het veld ‘Link’ voor de instellingen van de knop. Hier zal een lijst open klappen en onder ‘Post’ zien we onder meer de ‘Post URL’ als mogelijke waarde staan. Hier klikken we ook op. De knop zal vanaf nu verder verwijzen naar de ‘post URL’ die hoort bij de FAQ post die op dat moment op het scherm wordt ‘getekend’ (gerenderd).

Vergeet niet een mooie template voor je ‘Single Post FAQ page’ te maken.

De dubbele lijn is er omdat ik een ‘border’ met een dubbele lijn op de linker zijde van de linker kolom tekende in de ‘style’ settings van de kolom.

Pas weer op bij het updaten

Wanneer je nu op de knop ‘Updaten’ klikt wordt opnieuw gevraagd een ‘condition’ toe te voegen. Doe dit niet. Eerder in dit artikel kan je lezen waarom niet. Sla gewoon op door op Save & Close te klikken.

Nog steeds hetzelfde template

Het FAQ template wat je gebruikt is nog steeds hetzelfde template, in die zin, dat de naam ongewijzigd is gebleven (of eigenlijk de ID hiervan). Je hoeft dus niets meer in je accordeon aan te passen. Wanneer je de pagina met je FAQ widget ververst, zie je direct de nieuwe layout.

Mooiere websites maken met Elementor / Unlimited Elements?

Ben jij een WordPress professional en wil jij graag leren hoe je mooiere en ook meer functionele websites kan maken voor jouw klanten, dan is wellicht de cursus ‘Elementor voor Aankomende Experts‘ mogelijk iets voor jou. Er van uitgaand, dat je al een gedegen kennis van Elementor en Elementor Pro hebt, leer ik je hoe je met Unlimited Elements en Elementor Pro het beste uit het websites van je klanten kan halen. Heb je de benodigde kennis nog niet, dan zijn de trainingen Elementor voor Beginners en Elementor voor Gevorderden een goede opstap. Wanneer je geen WordPress professional, dan ben je natuurlijk net zo welkom deze trainingen te volgen!

Spreekt een ‘product’ als de FAQ die hier besproken is je aan, maar zie je zelf niet zitten dit te bouwen, wist je dat dit laten bouwen helemaal niet zo duur hoeft te zijn? Wanneer je op zoek bent naar nieuwe functionaliteiten voor je website, neem eens een keer geheel vrijblijvend contact op.

Heb je nog geen WordPress Elementor Pro website? Het omzetten van jouw bestaande (WordPress of andere) website naar een WordPress Elementor Pro website kan een stuk voordeliger zijn dan je denkt.