
Klikbaar overzicht categorieën creëren m.b.v. Elementor
1. Inleiding
1.1. Begeleidende tekst
Niet alle in deze handleiding besproken stappen zijn beslist noodzakelijk. De meeste stappen zijn alleen nodig als je het ontwerpen volledig in de hand wilt houden. Wil je de ontwerpen van de pagina’s waarbij de inhoud automatisch gegenereerd wordt, aan het gekozen thema overlaten? Dan hoef je alleen de stappen van hoofdstuk 5 t/m 7 te volgen.
Bovendien zijn er meerdere wegen die naar Rome leiden. Aan het eind van deze pagina vind je één van de alternatieve methoden.
In de handleiding wordt alleen de inhoud van het overzicht met de categorieën/taxonomieën handmatig ingevuld. De inhoud van de overige pagina’s wordt automatisch gegenereerd:
- Overzicht categorieën/taxonomieën: handmatig
- Overzicht berichten die bij geselecteerde categorie of taxonomie horen: automatisch
- Inhoud uit overzicht geselecteerd bericht: automatisch
Op de pagina wordt begonnen met het resultaat. Hierdoor kun je zien wat de bedoeling is. Verderop in de pagina wordt naar dit resultaat toegewerkt.
1.2 Over templates page builder
Normaal gesproken wordt het ontwerp van overzicht pagina’s bepaalt door het gekozen thema. Het thema selecteert hiervoor een sjabloon. Dit is vergelijkbaar met een sjabloon voor een pagina. Het verschil is dat je bij een pagina vaak een sjabloon kunt kiezen. Het sjabloon voor een overzicht pagina kun je echter niet kiezen en wordt voor je door het thema bepaald.
Wil je wel zelf aan de slag met de styling en de lay-out van een pagina met een overzicht van berichten, dan kan dat. Hierbij “overrule” je het sjabloon van het thema. Daartoe kun je in Elementor eigen sjablonen/templates aanmaken.
In Elementor Pro kun je met de Theme Builder meerdere templates aanmaken waarmee je ontwerp van het thema als het ware overschrijft.
De volgende templates kun je met de Theme builder creëren:
- Header
- Footer
- Archive (overzicht van berichten)
- Single (enkelvoudig bericht)
- Foutmeldingspagina (wanneer een pagina niet gevonden kan worden bijvoorbeeld)
- Zoekresultaten pagina
Daarnaast kun je bij iedere template aangeven voor welke pagina’s je deze wilt gebruiken. Dat doe je met behulp van voorwaarden.
Het template voor een overzichtspagina is een zgn. archief template.
In hoofdstuk 8 ( Ontwerpen overzicht categorieën / taxonomieën in Elementor) t/m 11 ( Custom posttype archief (overzicht alle berichten die bij custom posttype horen )vind je (beknopte) uitleg over het bouwen van eigen templates met de Theme builder van Elementor Pro.
1.3. Over taxonomieën
Binnen standaard WordPress heb je categorieën en tags (trefwoorden) om:
- Berichten in te delen naar een bepaalde soort of type
- Berichten te groeperen
P.S. in sommige thema’s kun je ook pagina’s categoriseren.
Categorieën en tags behoren in WordPress tot de groep taxonomieën.
Je echter ook eigen taxonomieën aanmaken. Deze koppel je aan de eigen berichttypes (custom posttypes). Eigen taxonomieën zijn eigenlijk categorieën die je aan je eigen bericht types koppelt.
En bij berichttypes kun je bijvoorbeeld weer denken aan het volgende:
- Portfolio
- Producten
- Vacatures
- Films
- Sport types
Dit zijn berichten die je naast de gewone berichten van WordPress laat bestaan.
Taxonomieën is dus een verzamelnaam voor de volgende items:
- Categorieën
- Tags
- Categorieën voor zelf aangemaakte berichten (custom posttypes)
Deze geeft je alleen niet de naam categorie want deze is al vergeven voor berichten. Meer informatie over de naamgeving vind je in paragraaf 5.1 (Nieuwe categorie/taxonomie aanmaken)
Met andere woorden: een categorie is een taxonomie, maar een taxonomie hoeft geen categorie te zijn.
Taxonomieën is de verzamelnaam voor alles waarmee je berichten in kunt delen.
Let op! Een taxonomie item (b.v. categorie) heeft in eerste instantie nog geen betekenis / waarde. Deze geef je later een waarde (b.v. mode, eten, uitgaan enz. wanneer je een “lifestyle” blog op je website hebt. Zodoende kunnen bezoekers van de website bijvoorbeeld op de categorie eten klikken, waarna ze alleen berichten met de categorie eten te zien krijgen).
Waarschijnlijk wordt het e.e.a. na het zien van de voorbeelden duidelijker.
2. Resultaat
2.1 Samenvatting
In het voorbeeld een custom posttype portfolio met 3 bijbehorende categorieën aangemaakt: grafisch, fotografie en schilderkunst.
Vanuit deze categorieën kun je doorklikken naar een overzicht van de bijbehorende portfolio berichten. Vanuit dit overzicht kun je weer doorklikken op een gewenst bericht. Zodoende kun je dit bericht bekijken.
2.2. Overzicht categorieën / taxonomieën

2.3. Overzicht berichten behorende tot categorie / taxonomie

2.4. Uit overzicht berichten gekozen bericht

3. Benodigdheden
- Custom Post Type UI (om eigen berichttypes te kunnen maken)
- Elementor (pagebuilder plug-in)
- Make Column Clickable Elementor plug-in (kolommen Elementor klikbaar maken)
- Elementor PRO (betaalde aanvulling op Elementor.
Gewenst wanneer je ook de pagina met het overzicht van de berichten zelf wilt vormgeven.
En ook gewenst wanneer je een enkelvoudig bericht zelf naar eigen inzicht wilt vormgeven.

4. Over templates pagebuilder
Normaal gesproken wordt het ontwerp van overzicht pagina’s bepaalt door het gekozen thema. Het thema selecteert hiervoor een sjabloon. Dit is vergelijkbaar met een sjabloon voor een pagina. Het verschil is dat je bij een pagina vaak een sjabloon kunt kiezen. Het sjabloon voor een overzicht pagina kun je echter niet kiezen en wordt voor je door het thema bepaald.
Wil je wel zelf aan de slag met de styling en de lay-out van een pagina met een overzicht van berichten, dan kan dat. Hierbij “overrule” je het sjabloon van het thema. Daartoe kun je in Elementor eigen sjablonen / templates aanmaken.
In Elementor Pro kun je met de Theme Builder meerdere templates aanmaken waarmee je ontwerp van het thema als het ware overschrijft.
De volgende templates kun je met de Theme builder creëren:
- Header
- Footer
- Archive (overzicht van berichten)
- Single (enkelvoudig bericht)
- Foutmeldingspagina (wanneer een pagina niet gevonden kan worden bijvoorbeeld)
- Zoekresultaten pagina
Daarnaast kun je bij iedere template aangeven voor welke pagina’s je deze wilt gebruiken. Dat doe je met behulp van voorwaarden.
Het template voor een overzichtspagina is een zgn. archief template.
In hoofdstuk 8 (Ontwerpen overzicht categorieën / taxonomieën in Elementor) t/m 11 (Custom posttype archief (overzicht alle berichten die bij custom posttype horen) vind je (beknopte) uitleg over het bouwen van eigen templates met de Theme builder van Elementor Pro.
5. Eigen berichttypes maken
5.1. Nieuw berichttype aanmaken

Nadat de CPT UI plug-in is geactiveerd kun je in de linker kolom van het WordPress dashboard nieuwe berichttypes aanmaken:
CPT UI > Toevoegen /bewerken berichttypes
Nadat je op dit menu item hebt geklikt kom je in het dialoogvenster Toevoegen bewerken / berichttypes.

In dit dialoogvenster vul je in het veld Berichttype Slug de naam van je berichttype in. In het voorbeeld is dit portfolio. Deze naam is ook in het internetadres verwerkt wanneer je dit berichttype bekijkt:
- In het overzicht van berichten van dit berichttype
- In het enkelvoudig bericht van dit berichttype.
De label velden zijn van belang voor de naamgeving van het berichttype in de diverse menu’s van het dashboard.
Voor de diverse menu’s gelden specifieke labels (b.v. voeg nieuw item toe, zie onderstaande figuur). Deze kun je automatisch laten invullen door op de knop Vul extra labels in op basis van gekozen labels te klikken.

Figuur 7: automatisch vullen labels na klikken op ” Vul labels in op basis van gekozen labels”
In het dialoogvenster vind je ook de instellingen die bij het nieuwe berichttype horen.

De meeste instellingen staan standaard goed. Wil je echter zelf de overzichtspagina’s van het berichttype kunnen ontwerpen dan moet je de optie Archief op ja zetten.(zie Figuur 8: instellingen nieuwe berichttype)
Tot slot vind je in het dialoogvenster de sectie Ondersteunt.
Hier vink je hetgeen je in een bericht wilt kunnen bewerken aan.
Het is aan te bevelen om de opties zoals in onderstaande figuur zijn aangevinkt aan te vinken. Op die manier kun je eigen berichten op dezelfde manier aanmaken en bewerken als de standaard berichten van WordPress.

5.2. Nieuwe categorie/taxonomie aanmaken
Een nieuwe taxonomie voor een eigen berichttype aanmaken gaat op een soortgelijke manier als het aanmaken van een nieuw berichttype.
In de meeste gevallen hoef je maar 1 taxonomie per berichttype aan te maken.
Bij de basis berichten volstaat immers ook 1 taxonomie, n.l. de taxonomie categorie.
WordPress dashboard nieuwe taxonomieën aanmaken:
CPT UI > Toevoegen /bewerken taxonomieën

Figuur 10: menu toevoegen/bewerken taxonomieën
Het dialoogvenster Basisinstellingen wordt geopend.
In het veld Taxonomy-slug vul je de naam van de taxonomie in. Ook deze naam komt terug in het internetadres: in dit geval op de pagina met het overzicht van de berichten behorende bij een taxonomie / categorie waarde. En bij het bekijken van een enkelvoudig bericht met de taxonomie / categorie waarde
Wat namen voor een taxonomie betreft geldt het volgende:
- De naam categorie mag je niet gebruiken, deze is immers al vergeven voor de standaard berichten.
Suggesties voor namen:
- Categorie_berichttypenaam. (b.v. categorie_portfolio)
- Taxonomie_berichttypenaam (b.v. taxonomie_portfolio)
- Berichttypenaam_type (b.v. portfolio_type) o.i.d. afhankelijk van het “doel” van de categorie/taxonomie. Deze naamgeving heeft wat SEO betreft de voorkeur omdat hiermee meteen de functie van de taxonomie duidelijk is.
In het voorbeeld duidt portfolio_type op het type werk:
Grafisch, fotografie of schilderkunst.
Een ander voorbeeld is sports_type: de taxonomie wordt in dit geval gebruikt om verschillende typen sporten te groeperen. Je zou dan bijvoorbeeld ook een taxonomie met de naam sports_level aan kunnen maken. Hiermee groepeer je dan weer de verschillende sport niveaus.
Voor de label velden geldt hetzelfde verhaal als bij het aanmaken van een nieuw bericht type.

In het veld Koppel aan berichttype geef je het berichttype op waarin je deze taxonomie / categorie wilt gebruiken.

In de sectie instellingen taxonomie zet je de volgende opties op ja:
- Toon in admin-kolom
(in het overzicht van berichten van de bijbehorende berichttype wordt nu de waarde van de taxonomie weergegeven. Net als bij het overzicht van de standaard berichten, de bij de berichten behorende categorieën worden getoond). - Weergeven in snel / bulk bewerkingsvenster
Nu kun je b.v. via het snel bewerken van een bericht van het berichttype, taxonomie waarden aan het bericht toekennen. Ook kun je nu aan meerdere berichten tegelijkertijd taxonomie waarden toekennen.
6. Waarden aan eigen taxonomie toekennen
6.1. Nieuwe taxonomie waarde aanmaken
Het toekennen van taxonomie waarden gaat op dezelfde manier als het toekennen van waarden aan categorieën.
In de linker kolom van het dashboard van WordPress is nu een menu voor het nieuwe berichttype zichtbaar. In het voorbeeld Mijn portfolio’s.
(De naam van het menu kun je evt. in de sectie Extra labels van het bewerkingsvenster van een berichttype aanpassen. Je wijzigt dan in het veld Menunaam, de naam van het menu).

In het voorbeeld zijn de volgende taxonomie waarden ingevuld:
- Grafisch
- Fotografie
- Schilderkunst
7. Nieuwe berichten van het eigen berichttype aanmaken
7.1. Nieuw bericht van het berichttype aanmaken
Ook het aanmaken van een nieuw bericht van het nieuwe berichttype gaat op dezelfde manier als het aanmaken van een standaard bericht.
(Via de de linker kolom van het dashboard van WordPress m.b.v. het menu voor het nieuwe berichttype. In het voorbeeld Mijn portfolio’s).
Nadat de berichten zijn aangemaakt kun je het overzicht van deze berichten bekijken en bewerken.

7.2. Taxonomie waarden aan aangemaakte berichten toekennen
Via de bulkactie bewerken in het overzicht kun je o.a. dezelfde taxonomie waarden aan meerdere berichten toekennen.

8. Ontwerpen overzicht categorieën / taxonomieën in Elementor
8.1. Grafisch ontwerp

In het voorbeeld zijn handmatig m.b.v. Elementor 3 kolommen aangemaakt. Het betreft kolommen voor 3 categorieën die bij een custom posttype (portfolio) horen:
- Grafisch
- Fotografie
- Schilderkunst
De kolommen kunnen naar eigen inzicht worden ingedeeld en opgemaakt.
Zonder te veel in detail te treden zijn de kolommen als volgt gecreëerd:
- Kopteksten en paragrafen zijn platte teksten (d.w.z. handmatig ingevoerd)
- Het icoon widget is tussen de koptekst en de paragraaf geplaatst
- Ieder kolom krijgt een achtergrondafbeelding
- Bij de achtergrondafbeelding van een kolom hoort ook een zgn. overlay color. Dit is de kleur die over de achtergrond afbeelding wordt geplaatst.
Hier is dat mede gedaan om de teksten in de kolom goed zichtbaar te houden.
Iedere kolom is klikbaar. Wanneer je op een kolom klikt kom je op de pagina met het overzicht van de berichten die bij de categorie of taxonomie horen, terecht.

N.B. . er bestaan ook (betaalde) plug-ins waarmee je automatisch een overzicht van categorieën/ taxonomieën kunt genereren. Hierbij krijgt iedere categorie / taxonomie bijvoorbeeld ook een afbeelding.
Zie o.a. hoofdstuk 12 over de alternatieve methode.
8.2. Links naar categorie/ taxonomie plaatsen
Nu ga je aan iedere kolom een link koppelen:
het betreft telkens een link naar de pagina met het overzicht van berichten met de geselecteerde taxonomie waarde.
Voor dat de links worden geplaatst, achterhaal je eerst de internetadressen van de aangemaakte taxonomie waarden. Dit zijn de internetadressen die bij de link horen.
Daartoe ga je naar het overzicht van de aangemaakte taxonomie waarden.

In dit overzicht klik je bij iedere taxonomie waarde op bekijken.
Nu zie je in de balk van het internetadres van je browser het internetadres van deze taxonomie waarde.

Deze internetadressen ga je als link verwerken in het ontwerp van het Overzicht taxonomieën / categorieën van je berichttype (Figuur 20: Link naar taxonomie in kolom plaatsen).
In het veld Kolom link van de kolom behorende tot de taxonomie waarde vul je telkens het gevonden internet adres in.

9. Ontwerpen overzicht berichten behorende tot categorie / taxonomie in Elementor
9.1. Grafisch ontwerp

Zoals gezegd kun je met de Theme builder van Elementor pro zelf templates aanmaken. In dit voorbeeld is een template aangemaakt voor het overzicht van berichten. Deze berichten behoren tot de geselecteerde taxonomie waarde en tot het nieuwe berichttype.
Je opent de Theme builder via het Theme builder menu:
(Elementor)Templates > Theme Builder

Het Thema bouwer dialoogvenster wordt geopend.

In het thema bouwer dialoogvenster klik je op de tab Archive omdat we een sjabloon/template voor een overzicht willen gaan maken.

In het dialoogvenster Nieuwe Template vul je een logische naam voor het sjabloon in (in het voorbeeld portfolio archief).
Daarna klik je op de knop Template aanmaken om daadwerkelijk het template te gaan ontwerpen.

In het voorbeeld is een kant elkaar sjabloon ingevoegd en gekozen. Uiteraard staat het je vrij om het geheel vanaf “scratch” helemaal zelf te ontwerpen.
9.2. Voorwaarden template

In de laatste stap geef je aan wanneer het aangemaakte overzicht moet worden getoond. Dit doe je met zgn. voorwaarden. Laat je dit achterwege dan is de opmaak en de lay-out voor alle overzichtspagina’s waarbij de inhoud automatisch wordt gegenereerd hetzelfde. O.a. de blogpagina met het overzicht van de basis berichten en de pagina met het overzicht van de berichten van het aangemaakte berichttype zien er dan hetzelfde uit
Het menu voor de voorwaarden is een beetje verborgen:
Klik in de linker kolom van Elementor op het pijltje naast de groene Publiceren knop om het menu Display Conditions te tonen.

In het dialoogvenster Where Do You Want to Display Your Template? Kies je in dit geval voor taxonomy berichttype (in het voorbeeld Taxonomy portfolio’s).
Hiermee zorg je ervoor dat in het overzicht alleen de berichten die bij de aangeklikte / geselecteerde taxonomie waarde horen worden getoond. (En niet alle berichten die bij het berichttype horen).

Bij het veld Include laat je de derde kolom op Alle staan, omdat je het ontwerp voor alle taxonomie waarden (in het voorbeeld grafisch, fotografie, schilderkunst) wilt gebruiken.
9.3. Archive widgets
Wanneer je zelf het ontwerp wilt opbouwen, staan er voor een archief template de volgende extra Widgets tot je beschikking:
- Archive posts
- Posts
- Portfolio (anders dan de naam doet vermoeden kun je met deze widget diverse berichttypes weergeven)
Het verschil in de widgets zijn vooral de opmaak en de lay-out mogelijkheden.

Bij de Posts en Portfolio widget moet je nog zelf aangeven welk berichttype je wilt weergeven. Bij de Archive Posts widget gebeurt dit automatisch.
Met alle widgets kun je een overzicht opbouwen. Het verschil zit ‘m dus in het aantal opties en styling en lay-out mogelijkheden.
9.4. Verzoek om juiste berichten op te halen instellen

Figuur 30: het gewenste berichttype selecteren in de Query section
Wanneer je het widget Posts of Portfolio kiest, selecteer je in de Query sectie en het veld Source normaliter het gewenste berichttype. Standaard staat de Query op berichten.
In dit geval selecteer je echter Current Query:
wanneer je nu op een overzichtspagina van berichten van een taxonomie bent, “ziet” WordPress automatisch dat hij de berichten die bij de taxonomie horen moet tonen / ophalen. En dus niet alle berichten. Current duidt nu op de huidige taxonomie waarde van de pagina.

10. Enkelvoudig bericht in Elementor ontwerpen
10.1. Grafisch ontwerp

Het creëren van een template voor een enkelvoudig bericht gaat op een soortgelijke manier als voor een overzichtspagina:
- Open de thema bouwer
- Selecteer de tab Single
- Geef de template een logische naam
- Selecteer één van de voorbeeld ontwerpen, of ga zelf met een eigen ontwerp aan de slag.
- Selecteer in het Publish Settings venster het berichttype waarvoor deze template gebruikt moet worden.


Ook voor de single template heb je extra specifieke widgets tot je beschikking:
(Zie Figuur 34: widgets single template)
Met de min of meer verplichte Post Content widget geef je de totale inhoud van een berichte weer. Deze inhoud kan in dit geval gewoon zijn opgebouwd met de Gutenberg editor. Je hoeft in dit geval in de widget niet meer het juiste berichttype aan te geven. Dat gebeurt automatisch.
11. Custom posttype archief (overzicht alle berichten die bij custom posttype horen
11.1. Posttype archief creëren

Tot slot heb je ook nog de pagina met het overzicht van alle berichten behorende bij een berichttype. Dit is dus ongeacht de categorieën waarin de berichten zijn ingedeeld: alle berichten van alle categorieën worden op deze pagina weergegeven.
Je bereikt deze pagina via het volgende internetadres:
http(s)://domeinnaam.nl/berichttype-slug
b.v.: http(s)://domeinnaam.nl/portfolio
Uiteraard vul je in http(s)://domeinnaam.nl (=internetadres home page) je eigen domeinnaam in
De berichttype-slug is de naam die je aan het berichttype hebt gegeven in het eerste veld bij het aanmaken van een berichttype.
Het creëren van een template voor een posttype archief bericht gaat wederom op een soortgelijke manier als voor een overzichtspagina:
- Open de thema bouwer
- Selecteer de tab Archive (het betreft wederom een overzicht)
- Geef de template een logische naam
- Selecteer één van de voorbeeld ontwerpen, of ga zelf met een eigen ontwerp aan de slag. Je hebt dezelfde extra widgets tot je beschikking als bij het vorige genoemde overzichtstemplate.
- Selecteer in het Publish settings venster het berichttype waarvoor deze template gebruikt moet worden.
11.2. Voorwaarden posttype archief

12. Alternatieve methode
Er bestaan ook betaalde plug-ins waarmee je op een pagina automatisch een overzicht met categorieën kan genereren. Een voorbeeld hiervan vind je op de volgende internetpagina: https://powerpackelements.com/elementor-widgets/categories/
Met deze plug-in kun je een widget op je Elementor pagina plaatsen, waarmee je een overzicht van categorieën kunt maken. Dit is inclusief afbeeldingen.
Op de genoemde internet pagina vind je meteen een demo: de categorie voorbeelden zijn klikbaar. (Helaas zijn de pagina’s waarop je terecht komt wanneer je op een categorie hebt geklikt nog niet goed opgemaakt en gelay-out. Voor het zichtbaar maken van de werking maakt dit echter niet uit).
13. Tot slot
Meer over het werken met Elementor en het “overschrijven” van de styling en de lay-out door het thema vind je op de volgende pagina:
https://viavisiacursussen.nl/tips/wordpress-algemeen/wordpress-thema-kiezen-overbodig/