WordPress & Elementor kennisbank

Elementor loop builder: 10 praktische voorbeelden

Inhoud van dit artikel:

De Elementor loop builder is een theme builder feature van Elementor Pro, die je sinds november 2022 kunt gebruiken. En daar hebben we lang op moeten wachten! De wens voor een dergelijke ‘loop builder’ is al een paar jaar oud. Niet alleen bij mij, maar ik denk ook bij vele andere gebruikers. In ieder geval kan de champagne nu eindelijk worden ontkurkt! In dit artikel 10 praktische voorbeelden waarvoor je de loop builder kunt gebruiken.

Waarom Elementor loop builder gebruiken?

De Elementor loop builder is aanvulling op de Posts widget. Met de posts widget kun je berichten of pagina’s inladen van een specifieke taxonomie of custom post type. Alleen had die widget beperkingen in de lay-out. Tot op de dag van vandaag herken ik Elementor websites nog steeds direct aan de ‘cards lay-out’ die in posts widget zit. Niets mis mee, maar soms wil je toch iets meer vrijheid in het designen van je website. Je wilt bijvoorbeeld meer informatie inladen in het overzicht of net iets andere vormgeving gebruiken. Daarvoor gebruik je nu de loop builder!

Goed om te weten: ‘loops’ is de term die Elementor hiervoor gebruikt. Maar andere aanbieders spreken ook wel van een ‘custom skin’, ‘listing’ of ‘post overview’.

Onderdeel van het thema

De loop builder is onderdeel van de Elementor theme builder. Via de thema builder stel je lay-outs in voor onderdelen die op meerdere plekken terugkomen op je site. Zoals de header en footer, die je op elke pagina ziet. Maar ook voor het maken van single templates, archiefpagina’s of de 404 pagina. En nu dus ook voor het maken van loops!

Wat zijn de voordelen van de loop builder?

Het voordelen van het gebruik van de loop builder:

  • Je kunt meer informatie kwijt op een post overview
  • Je hebt meer vrijheid in het design van de loop
  • Je hebt een vast template dat je vanuit één plek kunt aanpassen en beheren (met een omweg kan dit ook met posts widget, maar ik vind deze optie persoonlijk beter)

10 voorbeelden van loops

In de loop der jaren maakte ik heel wat loops voor verschillende websites. Destijds maakte ik daarvoor nog veelvuldig gebruik van JetEngine listings (die ik nog steeds aanbeveel, lees onderaan dit artikel waarom). Hieronder 10 voorbeelden waarvoor je de loop builder kunt inzetten.

Let op: in de meeste gevallen maak je eerst een Custom Post type (CPT) of extra velden in je cms.

Voorbeeld 1: Blogs

In onderstaande loop zie je de categorie bovenaan de titel en de naam van de auteur onder de titel.

Voorbeeld 2: Cases

Onderstaande loop wijkt af van de standaard posts widget door het icoontje rechtsonderin. Op basis van de geselecteerde categorie (aan de achterkant) wordt een ander icoontje getoond.

Voorbeeld 3: Reviews

Voor deze lay-out is de testimonial widget van Elementor gebruikt.

Voorbeeld 4: Vacatures

Deze vacature loop toont naast de functie ook de locatie en afdeling van de vacature.

Voorbeeld 5: Producten (bv. voor een webshop)

In deze loop zie je direct of het product ook op voorraad is.

Voorbeeld 6: Webinars

De sprekers van het webinar worden ook getoond. Nadat het webinar is geweest verandert de knop naar ‘watch recording’ in plaats van ‘sign up’.

Voorbeeld 7: hotelkamers

Deze loop voor een hotelkamer toont ook de vanaf prijs, capaciteit en grootte van de kamer.

Voorbeeld 8: Whitepapers

Deze loop heeft een eigen achtergrondkleur die via de achterkant kan worden ingesteld.

Voorbeeld 9: Auto’s

Deze loop voor tweedehands auto’s toont de kilometerstand, bouwjaar en de prijs.

Voorbeeld 10: video’s

Deze loop heeft in de afbeelding ook een play button zitten en het logo van de klant wordt ingeladen.

Hoe maak je een loop?

Wil je ook een loop maken? Je kunt op twee manieren een loop maken:

  1. Voeg de Elementor loop builder widget toe aan je pagina en maak vanuit daar een template

2. Ga naar de theme builder en maak vanuit daar een nieuwe loop

Een loop kun je maken met de bekende lay-out en design mogelijkheden die je kent van Elementor. Je maakt een ontwerp voor één tegel die de loop builder vervolgens hergebruikt voor alle pagina’s.

Als je de loop klaar hebt, laad je deze in via de loop builder (of je gaat automatisch terug naar de pagina waar je deze hebt ingeladen). Selecteer het template dat je hebt ontworpen en kies vervolgens de query die je wilt gebruiken (post type en/of taxonomie).

Elementor Loop Builder of JetEngine listings?

Bovengenoemde voorbeelden heb ik gemaakt met JetEngine listings, een Elementor-addon. Dit is voor mij nog steeds de beste manier om loops / listings te maken. Dat zit hem in twee dingen:

  • JetEngine listings biedt een geavanceerde query builder
  • JetEngine listings biedt een slider mogelijkheid

Daarnaast combineer ik de JetEngine listings vaak met de dynamic visibilities van JetEngine. Daarmee kun je instellen dat je bepaald informatie wel of niet in de loop / listing wilt tonen.

Jetengine listings

Maar de Elementor loop builder is zeker handig bij de wat simpelere sites waar je wel graag een uniek design wilt gebruiken.

Al met al is de Elementor loop builder echt een hele fijne toevoeging als je meer wilt doen met het design van je website. Een aanrader om in te zetten dus!

Sanne IJspeerd

Sanne IJspeerd

Eigenaar SIJ Web | WordPress & Elementor Specialist
Website Strateeg | Marketing Manager in de IT

Ook bloggen op
SIJ Web?
Vergroot je zichtbaarheid en meld je aan als partner!

Populaire plugins

4/5
5/5
4.5/5
Meer doen met Elementor?
Schrijf je in voor de nieuwsbrief
No worries. Ik ga je niet spammen. Je ontvangt max. 2 keer per maand een nieuwsbrief.

Ook interessant voor jou

Transparante header WordPress maken met Elementor

Inzendingen Elementor formulier opslaan in WordPress

Review JetEngine: de beste Elementor add-on voor listings

Mis geen updates

Blijf op de hoogte van de laatste
Elementor Trends & Ontwikkelingen!

No worries, je ontvangt max. 2 keer per maand een mailing.