Blogfilters instellen met Elementor; hoe krijg je dat voor elkaar? Als je dit artikel hebt gevonden werk je waarschijnlijk al even met Elementor en zoek je naar de mogelijkheid om een extra functionaliteit toe te voegen. Eerlijk gezegd is het mij een raadsel waarom blogfilters nog niet zijn geïntegreerd voor posts widget, maar wel voor de portfolio widget. Gelukkig zijn er addons beschikbaar waarmee je blogfilters kunt instellen in Elementor. Ook als je gewoon werkt met de post widget van Elementor. Wij werken standaard met JetSmartFilters voor het instellen van filters. Dit hoeft niet perse voor blogartikelen te zijn; de filters kun je gebruiken voor alle post types. In dit artikel leggen we je uit hoe je dit doet voor blogartikelen.
Waarom blogfilters gebruiken?
Blogfilters helpen je bezoekers om sneller blogartikelen te categoriseren. Handig voor bezoekers die alleen willen browsen binnen bepaalde artikelen of als je graag je expertise wat duidelijker op je website wilt tonen.
Naast het werken met filters, zou je ook een ‘filter’ kunnen maken met behulp van archiefpagina’s. Zo hebben wij dat bijvoorbeeld gedaan voor de Elementor handleiding. Hier zie je links een menu waar je doorheen kunt navigeren. Elke keer als je klikt op een onderwerp verandert de permalink en zie je direct de resultaten. Het lijkt dezelfde pagina, maar dat is het niet. Een nadeel van deze manier is dat het iets langer duurt voordat de pagina geladen is. Een voordeel is dat je hierdoor wel alle permalinks van de categorieën kunt gebruiken en optimaliseren. En dat is ook de reden waarom we op deze pagina geen filters gebruiken.
Blogfilters instellen
Stap 1: categorieën instellen voor de blogs
Voordat je gaat werken met blogfilters, moet je eerst weten welke filters je wilt gaan gebruiken. Het meeste gebruikelijke is om hiervoor de standaard WordPress categorieën te gebruiken. Als je blogfilters gaat instellen, is het handig om dit wel alvast gevuld te hebben en blogberichten toe te wijzen aan de artikelen. Op die manier is het makkelijker om straks de filters te testen.
Stap 2: Blogpagina aanmaken
Dit is misschien voor de hand liggend, maar om blogfilters in te stellen heb je wel een blogpagina nodig. Hoe je een blogpagina instelt lees je hier.
Blogpagina met post widget Elementor
Er zijn meerdere manieren waarop je blogberichten kunt inladen met Elementor. De meest standaard manier is om hiervoor gebruik te maken van de Post widget van Elementor Pro. Persoonlijk maak ik hier zelden nog gebruik van, omdat de designs die wij ontvangen vaak vragen om aanpassingen in de styling van de posts die niet mogelijk zijn met Elementor. We maken dan een custom skin / listing voor het inladen van de blogartikelen met behulp van JetEngine Listings. Daarmee hebben we de vrijheid om dit met behulp van Elementor vorm te geven zoals we willen.
Voor het instellen van de filters is het dus niet nodig om een custom listing te maken. Je kunt gewoon de post widget van Elementor gebruiken.
Stap 3: JetSmartfilters instellen
Als je dit allemaal klaar hebt staan kun je JetSmartFilters installeren.
Een blogfilter instellen
Je kunt nu starten met het instellen van de blogfilters. Ga naar Smart filters –> Add new
Filter label:
Hiermee geef je een label aan het blogfilter. Je kunt er straks voor kiezen om deze wel of niet te tonen bij de artikelen.
Active filter label:
Als een bezoeker een filter heeft gekozen kun je bovenaan de artikelen aangeven welk filter ze geselecteerd hebben. Daar kun je een tekst voor plaatsen, bijvoorbeeld ‘Geselecteerd’. Dit is ook optioneel en hoef je straks in de front-end niet te gebruiken / tonen.
Filtertype:
Je kunt kiezen uit verschillende filter types. Voor het instellen van een blogfilter maak je gebruik van een checkbox, select of radio veld:
- Checkbox: geeft je bezoeker de mogelijkheid om meerdere categorieën te selecteren
- Select: dropdown veld waarin alle categorieën staan. Bezoeker kan er één kiezen
- Radio veld: alle categorieën worden getoond. Bezoeker kan er maar één kiezen.
In ons voorbeeld maken we gebruik van de checkbox filter. We willen de bezoeker de mogelijkheid geven om meerdere categorieën in te stellen.
Datasource:
Hier geef je aan welke bron je wilt gebruiken voor het instellen van de filters. Voor de blogartikelen maak je gebruik van een taxonomie (zoals categorieën of tags).
Taxonomy:
Vervolgens kun je aangeven welke taxonomie je wilt gebruiken voor de filters. Kies hier voor ‘Categorieën’.
Relation operator:
Geef aan welke relatie je wilt gebruiken tussen de termen. Je unt deze op Union laten staan.
Show empy terms:
Eigen keuze of je ook lege termen wilt tonen of niet. Advies zou zijn om dit niet te doen, maar als je nog niet zoveel blogartikelen hebt gepubliceerd kun je deze voor testdoeleinden even aanzetten.
Show only childs of current term:
Dit is relevant als je het blogfilter gebruik op archiefpagina’s. Je hebt bijvoorbeeld een hoofdcategorie B2B. Als je bezoeker op de archiefpagina zit voor b2b (dus /categorie/b2b/ worden daar alleen de filter getoond van de subcategorieën die je daar onder hebt vallen. Maak je daar geen gebruik van dan laat je dit uit staan.
Group terms by parents:
Als je gebruikt maakt van veel subcategorieeën kun je ervoor kiezen om deze niet allemaal te tonen, maar alleen de hoofdcategorie.
Is Checkbox Meta Field:
Alleen relevant als je werkt met JetEngine. Uit laten staan dus.
Exclude / include:
Biedt je de mogelijkheid om bepaalde termen uit of in te sluiten.
Als je alle instellingen hebt ingesteld klik je op ‘Publiceren’.
Stap 4: Een blogfilter toevoegen aan de blogpagina
Als je het blogfilter hebt aangemaakt, ga je naar de blogpagina waarvoor je een blogfilter wilt instellen. Het kan ook zijn dat je deze hebt ingesteld als archiefpagina.
- Open het template
- Zoek ‘Checkbox filter’ (als je voor een ander filter hebt gekozen, zoek je op ‘Radio’ of ‘Select’)
- Voeg de widget toe en selecteer het blogfilter
- Geef aan op welke widget je het het filter wilt toepassen. Als je de posts widget van Elementor gebruikt, selecteer je deze.
- Apply type kun je laten staan op Ajax. Dit is het meeste gebruiksvriendelijk.
- Apply on laat je ook staan op Value change. Zodat je geen apply button hoeft te gebruiken.
- Daarnaast kun je nog het filter label tonen.
Gebruik je meerdere posts widget op de pagina? Dan kun je met behulp van query ID het filter toepassen op de juiste widget. Ook is het mogelijk om het filter te gebruiken voor meerdere posts widgets op de pagina. Daarvoor kun je gebruik maken van de ‘Additional Providers’ optie.
Stap 5: Blogfilter Elementor stijlen
Nu het blogfilter functioneel werkt kun je verder met de styling. De belangrijkste stijlopties voor een blogfilter:
Filter horizontaal weergeven
Als je het blogfilter hebt toegevoegd met de checkbox filter, staan de termen standaard onder elkaar. Voor een blogpagina is het meestal mooier om de filters naast elkaar, boven de de artikelen te tonen.
- Ga naar tabblad ‘Stijl’ en kies voor filter position ‘Inline’
Checkboxes uitschakelen
Bij blogartikelen is het meestal ook niet heel gebruikelijk om checkboxes daadwerkelijk te tonen. Deze kun je verbergen door de checkbox uit te zetten. Vervolgens kun je ook de filters verder stijlen, zodat het ze er ook meer als filters uitzien. Bijvoorbeeld door het instellen van een achtergrondkleur en/of het aanpassen van de paddings. Vergeet niet om ook de ‘Checked’ kleuren aan te passen.
De overige styling voor het label, de button en grouped filters gebruik je alleen als je deze functionaliteiten ook gebruikt. In principe hoef je hier (op basis van bovenstaande) niets mee te doen.
Je hebt nu blogfilters ingesteld met behulp van JetSmartFilters. Tip: probeer ook eens de andere filteropties! Ook handig als je een webshop hebt gemaakt met Elementor.
