Il Loop Builder è una delle funzionalità più potenti di Elementor Pro, introdotta per rivoluzionare il modo in cui visualizzi contenuti dinamici sul tuo sito WordPress. Con il Loop Builder puoi creare template personalizzati per post, prodotti WooCommerce, custom post type e qualsiasi tipo di contenuto, e poi visualizzarli in griglie, elenchi o caroselli completamente personalizzabili.
Cos’è il Loop Builder di Elementor
Il Loop Builder è un sistema di template riutilizzabili che ti permette di definire l’aspetto di ogni singolo elemento all’interno di un elenco o griglia di contenuti. Invece di essere limitato ai layout predefiniti dei widget Archive Posts o Posts, puoi progettare da zero come ogni “card” di contenuto deve apparire, con pieno controllo su ogni dettaglio.
Prima del Loop Builder, per ottenere griglie personalizzate di contenuti dovevi ricorrere a codice PHP custom, plugin aggiuntivi o accontentarti dei layout standard. Ora, tutto avviene visualmente nell’editor di Elementor, con la stessa semplicità con cui progetti qualsiasi altra pagina.
Differenza tra Loop Builder e Posts Widget
Il widget Posts classico di Elementor offre alcuni skin predefiniti (Classic, Cards, Full Content) con opzioni di personalizzazione limitate. Il Loop Builder, invece, ti dà un canvas completamente vuoto dove costruire il layout della card usando qualsiasi widget Elementor e tag dinamico. La differenza è paragonabile a usare un template PowerPoint prefatto rispetto a creare una presentazione da zero in un editor professionale.
Come Creare un Loop Template
Per iniziare a usare il Loop Builder, segui questi passaggi:
Step 1: Creare il Template del Loop
- Vai su Template → Aggiungi Nuovo nella dashboard WordPress
- Seleziona Loop Item come tipo di template
- Scegli il tipo di contenuto per cui stai creando il template (Post, Pagina, Prodotto o un custom post type)
- Clicca su Crea Template per aprire l’editor
Step 2: Progettare la Card
All’interno dell’editor del Loop Item, lavori su una singola card che verrà replicata per ogni elemento. Puoi usare qualsiasi widget di Elementor e collegarlo ai dati dinamici:
- Featured Image – Widget Image con tag dinamico “Featured Image” per l’immagine in evidenza del post
- Titolo – Widget Heading con tag dinamico “Post Title”, collegato con un link al post
- Excerpt – Widget Text Editor con tag dinamico “Post Excerpt” per mostrare un’anteprima del contenuto
- Data – Widget Text con tag dinamico “Post Date” per la data di pubblicazione
- Autore – Widget con tag dinamico “Author Name” e avatar
- Categoria – Widget con tag dinamico “Post Terms” per mostrare le categorie
- Pulsante “Leggi di più” – Widget Button con link dinamico al post
Step 3: Styling della Card
Ogni card può avere il suo design unico. Alcune idee di layout:
- Card con immagine in alto – Layout verticale classico con immagine, titolo, excerpt e pulsante
- Card orizzontale – Immagine a sinistra, contenuto a destra (perfetto per elenchi)
- Card overlay – Testo sovrapposto all’immagine con gradiente scuro
- Card minimal – Solo titolo e data, senza immagine, per archivi compatti
Visualizzare il Loop nella Pagina
Una volta creato il Loop Template, devi inserirlo in una pagina usando il widget Loop Grid:
- Apri la pagina dove vuoi visualizzare la griglia nell’editor Elementor
- Cerca e trascina il widget Loop Grid nella pagina
- Nel pannello delle impostazioni, seleziona il Loop Template che hai creato
- Configura il Layout: numero di colonne (2, 3, 4), gap tra le card, items per pagina
- Configura la Query: tipo di post, categorie, tag, ordinamento, numero di risultati
Paginazione e Caricamento
Il widget Loop Grid supporta diversi tipi di paginazione:
- Numeri – Classica paginazione numerica con link alle pagine successive
- Precedente/Successivo – Navigazione semplice avanti/indietro
- Load More – Pulsante “Carica altri” che aggiunge contenuti via AJAX senza ricaricare la pagina
- Infinite Scroll – Caricamento automatico quando l’utente raggiunge il fondo della griglia
Per blog con molti contenuti, il Load More è spesso la scelta migliore: mantiene la pagina veloce inizialmente e permette all’utente di caricare altri contenuti quando lo desidera, migliorando sia l’esperienza utente che le performance del sito.
Filtraggio dei Contenuti
Una delle funzionalità più richieste per le griglie di contenuti è il filtro per categoria o tassonomia. Con Elementor Pro puoi aggiungere il widget Taxonomy Filter sopra la tua Loop Grid per consentire agli utenti di filtrare i contenuti dinamicamente.
Il filtro funziona via AJAX, aggiornando la griglia senza ricaricare la pagina. Puoi personalizzare l’aspetto dei filtri (pulsanti, dropdown, checkbox) e scegliere quali tassonomie mostrare. Questa funzionalità è particolarmente utile per portfolio, cataloghi prodotti e blog multi-categoria.
Layout Alternati e Masonry
Per rendere la griglia più interessante visivamente, puoi creare layout alternati:
- Masonry – Le card hanno altezze diverse basate sul contenuto, creando un layout “a mattoncini” simile a Pinterest. Attiva l’opzione Masonry nelle impostazioni del Loop Grid
- Layout con card in evidenza – Crea due Loop Template diversi: uno grande per il primo post e uno standard per gli altri. Usa due widget Loop Grid con query diverse (offset 0 + limit 1 per il featured, offset 1 per il resto)
- Alternanza colonne – Alterna griglie a 2 e 3 colonne in sezioni diverse per creare ritmo visivo nella pagina
Casi d’Uso Pratici del Loop Builder
Blog Grid Personalizzata
Crea una griglia di articoli con card che mostrano immagine, categoria con colore diverso per ogni term, titolo, excerpt troncato e tempo di lettura stimato. Perfetto per magazine e blog editoriali.
Portfolio con Filtri
Visualizza i progetti del tuo portfolio con filtri per tipologia (web design, branding, app), miniatura hover con overlay e link al case study. Ideale per freelancer e agenzie creative.
Team Members
Mostra i membri del team usando un custom post type “Team” con campi personalizzati per ruolo, bio, foto e link social. Il Loop Builder visualizza ogni membro come una card elegante con hover effects.
Griglia Prodotti WooCommerce
Personalizza completamente l’aspetto delle card prodotto nel tuo negozio WooCommerce: immagine, nome prodotto, prezzo, badge sconto, valutazione stelle e pulsante aggiungi al carrello.
Testimonial Grid
Crea un custom post type “Testimonials” e usa il Loop Builder per mostrarli in una griglia elegante con foto del cliente, citazione, nome, azienda e valutazione. Molto più flessibile del widget Testimonial standard.
Tag Dinamici nel Loop
All’interno del Loop Template, i tag dinamici sono la chiave per collegare i widget ai dati reali. Ogni widget supporta tag dinamici in posizioni diverse:
- Testo – Post Title, Post Excerpt, Post Date, Author Name, Custom Field
- Immagine – Featured Image, ACF Image Field, Author Avatar
- Link – Post URL, Custom Field URL, Author URL
- Colore – ACF Color Picker per colorare dinamicamente elementi basati sul contenuto
Best Practice per il Loop Builder
- Ottimizza le immagini – Usa dimensioni appropriate per le thumbnail nelle card (medium o medium_large), non le immagini full size
- Limita i widget – Ogni widget nel loop viene moltiplicato per il numero di card. Mantieni il template leggero per non impattare le performance
- Testa su mobile – Verifica che la griglia passi correttamente a 1-2 colonne su smartphone
- Usa il caching – Le pagine con Loop Grid beneficiano particolarmente dal caching di pagina
- Dai un nome chiaro ai template – Nomina i Loop Template in modo descrittivo (“Blog Card – Image Top”, “Product Card – Minimal”) per trovarli facilmente
Conclusione
Il Loop Builder di Elementor Pro è uno strumento game-changer per chi vuole pieno controllo sulla visualizzazione dei contenuti dinamici. Che tu stia creando un blog, un portfolio, un catalogo prodotti o qualsiasi griglia di contenuti, il Loop Builder ti offre la flessibilità di un tema custom con la semplicità dell’editor visuale. Inizia con un layout semplice e sperimenta progressivamente con design più complessi.
Hai bisogno di aiuto per configurare griglie dinamiche avanzate sul tuo sito? Contatta G Tech Group per una consulenza specializzata su Elementor e WordPress. Realizziamo siti web professionali con contenuti dinamici che si aggiornano automaticamente.
Guide Correlate della Serie Elementor
Continua a esplorare Elementor con le nostre guide: