Elementor loop grid: de complete gids voor templates, search results en troubleshooting

De Elementor loop grid is zonder twijfel een van de krachtigste features die de populaire page builder in jaren heeft toegevoegd. Het stelt je in staat om de volledige controle te nemen over de weergave van dynamische content. Geen gedoe meer met standaard, rigide post-rasters. Welkom in een wereld van volledig aanpasbare, pixel-perfecte grids voor je blog, portfolio, webshop of zoekresultaten.

Maar wat is het precies? En hoe zet je het effectief in? Veel gebruikers lopen vast bij het configureren van de query, het stylen van het loop item, of erger nog: de beruchte paginatie-bug op de zoekresultatenpagina. Geen zorgen. In deze complete gids duiken we diep in de wereld van de Elementor loop grid. We behandelen alles, van de absolute basis tot geavanceerde troubleshooting, zodat jij straks als een pro dynamische en professionele layouts bouwt.

Wat is de Elementor loop grid precies?

Om de loop grid te begrijpen, moeten we het opsplitsen in twee componenten: het loop item en de loop grid widget zelf.

• Het loop item: Dit is een mini-template dat je ontwerpt voor één enkel item in je grid. Denk aan één blogpost-kaart, één product in je webshop, of één portfolio-item. Binnen dit template bepaal je welke informatie wordt getoond (uitgelichte afbeelding, titel, prijs, custom fields) en hoe het eruitziet.
• De loop grid widget: Dit is de container waarin je de loop items laadt. Met deze widget bepaal je hoeveel kolommen de grid heeft, welke content er wordt ingeladen (de ‘query’), en hoe de paginatie werkt. De widget pakt vervolgens het door jou ontworpen loop item en herhaalt (loopt) dit voor elk item in de query.

Deze combinatie geeft je ongekende vrijheid. Je ontwerpt één keer een item en Elementor vult de rest van de grid automatisch en dynamisch voor je.

Het verschil met de posts, archive posts en products widgets

Was dit niet al mogelijk? Ja en nee. De standaard widgets (Posts, Archive Posts, Products) bieden ook grids, maar met beperkte aanpassingsmogelijkheden. Je bent vaak gebonden aan een vaste set met ‘skins’ en hebt weinig controle over de individuele elementen. De loop grid breekt radicaal met deze beperking.

• Posts/Products Widget: Biedt vooraf gedefinieerde layouts (skins) met beperkte controle over de meta-data en structuur. Je kunt de volgorde van titel/afbeelding/tekst niet volledig vrij bepalen.
• Archive Posts Widget: Specifiek voor archiefpagina’s (categorie, tag, etc.). De stylingmogelijkheden zijn vergelijkbaar met de Posts widget; je zit vast aan de ingebouwde structuren.
• Loop Grid Widget: 100% designvrijheid. Je bouwt de lay-out van je kaart (het loop item) vanaf nul met Elementor-widgets. Wil je een custom field boven de titel? Een knop naast de afbeelding? Twee verschillende taxonomieën tonen? Het kan allemaal.

Je eigen loop item template maken: de basis

Alles begint met een goed ontworpen loop item. Dit is de fundering van je grid. Laten we stap voor stap bekijken hoe je dit aanpakt.

Hoe maak je een nieuw loop item template aan?

Volg deze simpele stappen om je eerste template te creëren:

1. Ga in je WordPress dashboard naar Templates > Loop Item.
2. Klik op de knop ‘Nieuwe toevoegen’.
3. Zorg dat het template type op ‘Loop Item’ staat, geef het een duidelijke naam (bijv. ‘Blog Post Card’) en klik op ‘Template aanmaken’.
4. Elementor opent nu een speciale, smalle editor. Dit representeert de ruimte van één item in je grid. Je kunt nu beginnen met bouwen.

De kracht van dynamic tags en conditions

Dit is waar de magie gebeurt. In plaats van statische content, gebruik je ‘dynamic tags’ om de content van elke post of product automatisch in te laden.

• Featured Image: Gebruik de ‘Uitgelichte afbeelding’ widget. Deze pakt automatisch de juiste afbeelding.
• Post Title: Voeg een ‘Koptekst’ widget toe en klik op het database-icoontje (Dynamic Tags). Kies hier voor ‘Post Title’.
• Post Excerpt: Gebruik de ‘Post Excerpt’ widget of een tekst-editor met de dynamic tag ‘Post Excerpt’.
• Custom Fields (ACF/MetaBox): Heb je extra velden, zoals een leestijd of een subtitel? Voeg een widget toe (bijv. tekst-editor) en kies via dynamic tags voor ‘ACF Field’ of een ander custom field type.

Met Display Conditions (te vinden onder het ‘Advanced’ tabblad van een element) kun je elementen conditioneel tonen. Toon bijvoorbeeld een ‘Nieuw!’ label alleen als een product minder dan 7 dagen oud is, of verberg de categorie-badge als er geen categorie is toegewezen.

Design en interactie: klikbare kaarten en hover-effecten

Een veelgevraagde feature is een kaart die in zijn geheel klikbaar is. Dit is verrassend eenvoudig te realiseren zonder dubbele links (wat slecht is voor SEO).

1. Selecteer de hoofdcontainer van je loop item.
2. Ga naar Geavanceerd > Layout en zet de ‘HTML Tag’ op ‘div’.
3. Ga terug naar de ‘Layout’ tab van de container.
4. Bij Aanvullende opties, klik op het Dynamic Tags icoontje naast de ‘Link’ optie.
5. Kies ‘Post URL’.

De gehele container is nu een link naar de desbetreffende post. Voeg hier een subtiel hover-effect aan toe (bijv. een box-shadow of een lichte ‘transform: scale(1.02)’) en je hebt een professionele en interactieve kaart.

De loop grid widget configureren: alle instellingen

Met je loop item template klaar, is het tijd om de grid zelf te configureren op een pagina, in een archief-template of waar je maar wilt.

De loop grid toevoegen en je template kiezen

Sleep de ‘Loop Grid’ widget naar je canvas. Het eerste wat je doet, is je zojuist gemaakte template selecteren. Zoek in het ‘Layout’ paneel naar ‘Choose a template’ en typ de naam van je loop item.

De query instellen: welke content wil je tonen?

De ‘Query’ sectie is het brein van je grid. Hier vertel je WordPress exact welke content het moet ophalen.

• Source: Dit is de belangrijkste instelling. Kies je voor ‘Posts’, ‘Products’, ‘Pagina’s’ of een custom post type? Voor een archiefpagina of zoekresultatenpagina kies je hier vaak voor ‘Current Query’. Elementor gebruikt dan de context van de pagina (bijv. de categorie ‘Nieuws’ of de zoekterm van de bezoeker) om de resultaten te bepalen.
• Include / Exclude: Wil je specifieke items altijd tonen of juist verbergen? Gebruik dan ‘Include by Term’ of ‘Manual Selection’.
• Date: Toon content van de afgelopen dag, week, maand of een specifieke periode.
• Order By: Sorteer op datum, titel, menu-volgorde of zelfs op een custom field (numeriek of alfabetisch).

Layout, kolommen en responsive design

In de ‘Layout’ sectie bepaal je de visuele weergave van de grid:

• Items per Page: Hoeveel items worden er per pagina getoond?
• Columns: Stel het aantal kolommen in voor desktop, tablet en mobiel. Voor mobiel is 1 of 2 kolommen vaak het beste.
• Masonry: Activeer dit om een ‘Pinterest-stijl’ grid te krijgen waarbij items van verschillende hoogtes netjes in elkaar vallen.
• Equal Height: Zorgt ervoor dat alle kaarten in een rij dezelfde hoogte hebben, wat zorgt voor een strakke uitlijning.

Paginatie: van ‘load more’ tot ‘infinite scroll’

Bij meer items dan wat je per pagina toont, heb je paginatie nodig. De loop grid biedt diverse opties:

• Numbers: De klassieke [1] [2] [3] paginatie.
• Previous/Next: Simpele ‘Vorige’ en ‘Volgende’ knoppen.
• Load More Button: Een knop die meer items laadt zonder de pagina te herladen. Goed voor de gebruikerservaring.
• Infinite Scroll: Laadt automatisch meer items wanneer de gebruiker naar beneden scrollt. Kan impact hebben op de performance en SEO als het niet goed wordt geïmplementeerd.

De ultieme gids: een custom search results pagina met de loop grid

Een van de meest krachtige toepassingen van de loop grid is het creëren van een volledig op maat gemaakte zoekresultatenpagina. Weg met de saaie, standaard lijst van WordPress.

Stap 1: je search results template aanmaken in de theme builder

Eerst maken we een template dat specifiek voor zoekopdrachten wordt gebruikt.

1. Ga naar Templates > Theme Builder.
2. Klik op ‘Search Results’ en vervolgens op ‘Voeg nieuwe toe’.
3. Je komt in de Elementor editor. Hier gaan we het design van de pagina bouwen.

Stap 2: de loop grid gebruiken voor je zoekresultaten

Voeg een ‘Loop Grid’ widget toe aan je template. Nu komt de cruciale stap: de query correct instellen.

• Zet de Query Source op ‘Current Query’.
• Selecteer je op maat gemaakte loop item template.

Elementor begrijpt nu dat het de resultaten moet tonen die horen bij de zoekopdracht van de bezoeker. Je kunt de preview-instellingen (linksonder, oog-icoontje) gebruiken om een zoekterm in te vullen en live te zien hoe het eruitziet.

Stap 3: een ‘geen resultaten’ melding configureren

Wat als een zoekopdracht niets oplevert? Standaard toont je loop grid dan niets. Dit is een gemiste kans. Een goede ‘geen resultaten’ pagina helpt de gebruiker verder.

Je kunt dit oplossen door een alternatieve sectie te maken. Een eenvoudige manier is om ook de ‘Archive Posts’ widget te gebruiken, de posts per pagina op 0 te zetten en alleen de ‘Nothing Found Message’ aan te passen naar iets behulpzaams zoals: “Helaas, we vonden geen resultaten voor uw zoekopdracht. Probeer het opnieuw met een andere term of bekijk onze populaire categorieën.”

Troubleshooting: veelvoorkomende loop grid problemen opgelost

De loop grid is krachtig, maar kan soms voor hoofdbrekens zorgen. Hier zijn de oplossingen voor de meest voorkomende problemen.

Opgelost: loop grid paginatie werkt niet op de search results pagina

Dit is dé klassieke bug waar veel ontwikkelaars tegenaan lopen. Je stelt de loop grid in op 9 items per pagina, maar op de zoekresultatenpagina toont het er toch 10 (of de standaard WordPress-instelling). De paginatie lijkt volledig genegeerd te worden.

Het probleem: WordPress forceert zijn eigen ‘posts_per_page’ instelling op de hoofdquery van de zoekpagina. Deze overschrijft de instelling van jouw Elementor loop grid widget.

De oplossing: We moeten met een klein stukje code aan WordPress vertellen dat het de instellingen van Elementor moet respecteren. Dit doe je met een `pre_get_posts` filter. Voeg onderstaande code toe aan het `functions.php` bestand van je (child) thema of, nog beter, via een code snippets plugin.

add_action( 'elementor/query/my_search_query', function( $query ) {
    // Alleen uitvoeren op de zoekpagina
    if ( ! is_search() ) {
        return;
    }

    // Haal de ingestelde waarde op uit de widget
    $posts_per_page = $query->get( 'posts_per_page' );

    // Override de hoofdquery van WordPress
    $query->set( 'paged', ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1 );
    if ( $posts_per_page ) {
        $query->set( 'posts_per_page', $posts_per_page );
    }
});

add_filter( 'elementor/theme/posts_widget/query_posts_args', function ( $query_args, $widget ) {
    if ( 'search-results' === $widget->get_name() ) {
        $query_args['paged'] = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
    }
    return $query_args;
}, 10, 2 );

Vergeet niet om in de geavanceerde instellingen van je Loop Grid widget, onder ‘Query ID’, de waarde `my_search_query` in te vullen. Deze ID koppelt de widget aan bovenstaande code.

Probleem: posts of producten ontbreken in de grid

Zie je niet de content die je verwacht? Controleer deze zaken:

• Query Source: Staat deze correct (bijv. Posts, Products)?
• Include/Exclude: Heb je per ongeluk filters ingesteld die de content uitsluiten?
• Post Status: De grid toont standaard alleen gepubliceerde posts. Staan je items misschien nog op ‘concept’?
• Cache: Leeg de cache van je website en je browser. Soms zie je een verouderde versie.

Probleem: de loop grid is traag (performance optimalisatie)

Een complexe grid kan een website vertragen. Optimaliseer met deze tips:

• Afbeeldingen: Zorg dat je afbeeldingen gecomprimeerd zijn en het juiste formaat hebben. Gebruik moderne formaten zoals WebP.
• Lazy Loading: Elementor past standaard lazy loading toe, maar controleer of dit werkt. Afbeeldingen die niet in beeld zijn, worden dan later geladen.
• Query Optimalisatie: Vermijd extreem complexe queries met veel meta-query filters als het niet nodig is.
• Paginatie: Gebruik ‘Load More’ of paginanummers in plaats van ‘Infinite Scroll’ om de initiële laadtijd te beperken.

Conclusie: neem de volledige controle met de Elementor loop grid

De Elementor loop grid is meer dan zomaar een widget; het is een complete toolkit voor het bouwen van dynamische, op maat gemaakte content-layouts. Het vergt even wat studie, vooral de query-instellingen en de logica achter het loop item, maar de beloning is enorm. Je bent niet langer gebonden aan de beperkingen van standaard thema’s of rigide widgets.

Of je nu een verbluffend portfolio, een conversiegericht productraster, of een gebruiksvriendelijke zoekresultatenpagina wilt bouwen, de loop grid geeft je de creatieve vrijheid om je visie tot leven te brengen. Door de veelvoorkomende problemen, zoals de paginatie-bug, te begrijpen en op te lossen, onderscheid je je van de massa en lever je een technisch superieure en professionele website op.

Wat is het verschil tussen de loop grid en de archive posts widget?

De Archive Posts widget heeft een aantal vooraf ingestelde layouts (skins) met beperkte aanpassingsmogelijkheden. De Loop Grid geeft je 100% designvrijheid. Je ontwerpt de layout voor een enkel item (het loop item) volledig zelf met standaard Elementor widgets, en de Loop Grid herhaalt dat design voor alle items in de query.

Kan ik custom fields van ACF of MetaBox gebruiken in mijn loop item?

Jazeker. Dit is een van de krachtigste features. Voeg een widget toe (zoals een Tekst-editor of Koptekst) en selecteer via de ‘Dynamic Tags’ optie het specifieke ACF- of MetaBox-veld dat je wilt tonen. Zo kun je eenvoudig unieke data zoals leestijd, subtitels of productspecificaties in je grid tonen.

Hoe maak ik een WooCommerce productgrid met de loop grid?

Stel de ‘Source’ in de Query-instellingen van de Loop Grid widget in op ‘Products’. Maak vervolgens een loop item template aan met product-specifieke dynamic tags, zoals ‘Product Title’, ‘Product Price’, ‘Product Rating’ en de ‘Add to Cart’ widget.

Waarom toont mijn loop grid geen paginatie?

Controleer eerst of je onder de ‘Pagination’ instellingen een type hebt geselecteerd (bijv. Numbers, Load More). Als de paginatie nog steeds niet verschijnt, komt dat vaak doordat het totale aantal posts in je query kleiner is dan het aantal dat je hebt ingesteld bij ‘Items per Page’. Is dat niet het geval en sta je op een zoekresultatenpagina? Dan loop je waarschijnlijk tegen de bekende paginatie-bug aan, waarvoor je de code snippet uit dit artikel nodig hebt.

Hoe combineer ik de loop grid met een live-search plugin zoals Ajax Search Pro?

De meeste live-search plugins werken door de resultaten te injecteren in een specifieke container op de pagina. Om dit te koppelen, geef je de Loop Grid widget een unieke CSS ID of Class (bijv. `mijn-resultaten-grid`) in de Geavanceerd-tab. Vervolgens stel je in de Ajax-plugin in dat de resultaten in de container met die ID of class geladen moeten worden.