{"id":166460,"date":"2024-11-04T09:00:00","date_gmt":"2024-11-04T08:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/elementor-loop-builder-griglie-dinamiche-contenuti\/"},"modified":"2026-05-25T12:21:12","modified_gmt":"2026-05-25T10:21:12","slug":"elementor-loop-builder-griglie-dinamiche-contenuti","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/elementor-loop-builder-griglie-dinamiche-contenuti\/","title":{"rendered":"Elementor Loop Builder: Creare Griglie Dinamiche di Contenuti"},"content":{"rendered":"<p>Il <strong>Loop Builder<\/strong> \u00e8 una delle funzionalit\u00e0 pi\u00f9 potenti di <strong>Elementor Pro<\/strong>, 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.<\/p>\n<h2>Cos&#8217;\u00e8 il Loop Builder di Elementor<\/h2>\n<p>Il Loop Builder \u00e8 un sistema di <strong>template riutilizzabili<\/strong> che ti permette di definire l&#8217;aspetto di ogni singolo elemento all&#8217;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 &#8220;card&#8221; di contenuto deve apparire, con pieno controllo su ogni dettaglio.<\/p>\n<p>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&#8217;editor di Elementor, con la stessa semplicit\u00e0 con cui progetti qualsiasi altra pagina.<\/p>\n<h3>Differenza tra Loop Builder e Posts Widget<\/h3>\n<p>Il widget <strong>Posts<\/strong> classico di Elementor offre alcuni skin predefiniti (Classic, Cards, Full Content) con opzioni di personalizzazione limitate. Il Loop Builder, invece, ti d\u00e0 un <strong>canvas completamente vuoto<\/strong> dove costruire il layout della card usando qualsiasi widget Elementor e tag dinamico. La differenza \u00e8 paragonabile a usare un template PowerPoint prefatto rispetto a creare una presentazione da zero in un editor professionale.<\/p>\n<h2>Come Creare un Loop Template<\/h2>\n<p>Per iniziare a usare il Loop Builder, segui questi passaggi:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/editor-widgets.png\" alt=\"Widget Loop Grid nell'editor\" width=\"1400\" height=\"900\" class=\"alignnone size-full\" \/><\/p>\n<h3>Step 1: Creare il Template del Loop<\/h3>\n<ol>\n<li>Vai su <strong>Template \u2192 Aggiungi Nuovo<\/strong> nella dashboard WordPress<\/li>\n<li>Seleziona <strong>Loop Item<\/strong> come tipo di template<\/li>\n<li>Scegli il tipo di contenuto per cui stai creando il template (Post, Pagina, Prodotto o un custom post type)<\/li>\n<li>Clicca su <strong>Crea Template<\/strong> per aprire l&#8217;editor<\/li>\n<\/ol>\n<h3>Step 2: Progettare la Card<\/h3>\n<p>All&#8217;interno dell&#8217;editor del Loop Item, lavori su una <strong>singola card<\/strong> che verr\u00e0 replicata per ogni elemento. Puoi usare qualsiasi widget di Elementor e collegarlo ai dati dinamici:<\/p>\n<ul>\n<li><strong>Featured Image<\/strong> \u2013 Widget Image con tag dinamico &#8220;Featured Image&#8221; per l&#8217;immagine in evidenza del post<\/li>\n<li><strong>Titolo<\/strong> \u2013 Widget Heading con tag dinamico &#8220;Post Title&#8221;, collegato con un link al post<\/li>\n<li><strong>Excerpt<\/strong> \u2013 Widget Text Editor con tag dinamico &#8220;Post Excerpt&#8221; per mostrare un&#8217;anteprima del contenuto<\/li>\n<li><strong>Data<\/strong> \u2013 Widget Text con tag dinamico &#8220;Post Date&#8221; per la data di pubblicazione<\/li>\n<li><strong>Autore<\/strong> \u2013 Widget con tag dinamico &#8220;Author Name&#8221; e avatar<\/li>\n<li><strong>Categoria<\/strong> \u2013 Widget con tag dinamico &#8220;Post Terms&#8221; per mostrare le categorie<\/li>\n<li><strong>Pulsante &#8220;Leggi di pi\u00f9&#8221;<\/strong> \u2013 Widget Button con link dinamico al post<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/elementor-loop-builder-template.webp\" alt=\"Editor del Loop Builder di Elementor con card personalizzata\" \/><\/p>\n<h3>Step 3: Styling della Card<\/h3>\n<p>Ogni card pu\u00f2 avere il suo design unico. Alcune idee di layout:<\/p>\n<ul>\n<li><strong>Card con immagine in alto<\/strong> \u2013 Layout verticale classico con immagine, titolo, excerpt e pulsante<\/li>\n<li><strong>Card orizzontale<\/strong> \u2013 Immagine a sinistra, contenuto a destra (perfetto per elenchi)<\/li>\n<li><strong>Card overlay<\/strong> \u2013 Testo sovrapposto all&#8217;immagine con gradiente scuro<\/li>\n<li><strong>Card minimal<\/strong> \u2013 Solo titolo e data, senza immagine, per archivi compatti<\/li>\n<\/ul>\n<h2>Visualizzare il Loop nella Pagina<\/h2>\n<p>Una volta creato il Loop Template, devi inserirlo in una pagina usando il widget <strong>Loop Grid<\/strong>:<\/p>\n<ol>\n<li>Apri la pagina dove vuoi visualizzare la griglia nell&#8217;editor Elementor<\/li>\n<li>Cerca e trascina il widget <strong>Loop Grid<\/strong> nella pagina<\/li>\n<li>Nel pannello delle impostazioni, seleziona il Loop Template che hai creato<\/li>\n<li>Configura il <strong>Layout<\/strong>: numero di colonne (2, 3, 4), gap tra le card, items per pagina<\/li>\n<li>Configura la <strong>Query<\/strong>: tipo di post, categorie, tag, ordinamento, numero di risultati<\/li>\n<\/ol>\n<h2>Paginazione e Caricamento<\/h2>\n<p>Il widget Loop Grid supporta diversi tipi di paginazione:<\/p>\n<ul>\n<li><strong>Numeri<\/strong> \u2013 Classica paginazione numerica con link alle pagine successive<\/li>\n<li><strong>Precedente\/Successivo<\/strong> \u2013 Navigazione semplice avanti\/indietro<\/li>\n<li><strong>Load More<\/strong> \u2013 Pulsante &#8220;Carica altri&#8221; che aggiunge contenuti via AJAX senza ricaricare la pagina<\/li>\n<li><strong>Infinite Scroll<\/strong> \u2013 Caricamento automatico quando l&#8217;utente raggiunge il fondo della griglia<\/li>\n<\/ul>\n<p>Per blog con molti contenuti, il <strong>Load More<\/strong> \u00e8 spesso la scelta migliore: mantiene la pagina veloce inizialmente e permette all&#8217;utente di caricare altri contenuti quando lo desidera, migliorando sia l&#8217;esperienza utente che le <a href=\"https:\/\/gtechgroup.it\/blog\/elementor-performance-velocita-caricamento\/\">performance del sito<\/a>.<\/p>\n<h2>Filtraggio dei Contenuti<\/h2>\n<p>Una delle funzionalit\u00e0 pi\u00f9 richieste per le griglie di contenuti \u00e8 il <strong>filtro per categoria<\/strong> o tassonomia. Con Elementor Pro puoi aggiungere il widget <strong>Taxonomy Filter<\/strong> sopra la tua Loop Grid per consentire agli utenti di filtrare i contenuti dinamicamente.<\/p>\n<p>Il filtro funziona via AJAX, aggiornando la griglia senza ricaricare la pagina. Puoi personalizzare l&#8217;aspetto dei filtri (pulsanti, dropdown, checkbox) e scegliere quali tassonomie mostrare. Questa funzionalit\u00e0 \u00e8 particolarmente utile per portfolio, cataloghi prodotti e blog multi-categoria.<\/p>\n<h2>Layout Alternati e Masonry<\/h2>\n<p>Per rendere la griglia pi\u00f9 interessante visivamente, puoi creare <strong>layout alternati<\/strong>:<\/p>\n<ul>\n<li><strong>Masonry<\/strong> \u2013 Le card hanno altezze diverse basate sul contenuto, creando un layout &#8220;a mattoncini&#8221; simile a Pinterest. Attiva l&#8217;opzione Masonry nelle impostazioni del Loop Grid<\/li>\n<li><strong>Layout con card in evidenza<\/strong> \u2013 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)<\/li>\n<li><strong>Alternanza colonne<\/strong> \u2013 Alterna griglie a 2 e 3 colonne in sezioni diverse per creare ritmo visivo nella pagina<\/li>\n<\/ul>\n<h2>Casi d&#8217;Uso Pratici del Loop Builder<\/h2>\n<h3>Blog Grid Personalizzata<\/h3>\n<p>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.<\/p>\n<h3>Portfolio con Filtri<\/h3>\n<p>Visualizza i progetti del tuo <a href=\"https:\/\/gtechgroup.it\/blog\/elementor-portfolio-professionale-galleria-filtri\/\">portfolio<\/a> con filtri per tipologia (web design, branding, app), miniatura hover con overlay e link al case study. Ideale per freelancer e agenzie creative.<\/p>\n<h3>Team Members<\/h3>\n<p>Mostra i membri del team usando un custom post type &#8220;Team&#8221; con campi personalizzati per ruolo, bio, foto e link social. Il Loop Builder visualizza ogni membro come una card elegante con hover effects.<\/p>\n<h3>Griglia Prodotti WooCommerce<\/h3>\n<p>Personalizza completamente l&#8217;aspetto delle card prodotto nel tuo <a href=\"https:\/\/gtechgroup.it\/blog\/elementor-woocommerce-negozio-online\/\">negozio WooCommerce<\/a>: immagine, nome prodotto, prezzo, badge sconto, valutazione stelle e pulsante aggiungi al carrello.<\/p>\n<h3>Testimonial Grid<\/h3>\n<p>Crea un custom post type &#8220;Testimonials&#8221; e usa il Loop Builder per mostrarli in una griglia elegante con foto del cliente, citazione, nome, azienda e valutazione. Molto pi\u00f9 flessibile del widget Testimonial standard.<\/p>\n<h2>Tag Dinamici nel Loop<\/h2>\n<p>All&#8217;interno del Loop Template, i <a href=\"https:\/\/gtechgroup.it\/blog\/elementor-dynamic-content-tag-dinamici-acf-campi\/\">tag dinamici<\/a> sono la chiave per collegare i widget ai dati reali. Ogni widget supporta tag dinamici in posizioni diverse:<\/p>\n<ul>\n<li><strong>Testo<\/strong> \u2013 Post Title, Post Excerpt, Post Date, Author Name, Custom Field<\/li>\n<li><strong>Immagine<\/strong> \u2013 Featured Image, ACF Image Field, Author Avatar<\/li>\n<li><strong>Link<\/strong> \u2013 Post URL, Custom Field URL, Author URL<\/li>\n<li><strong>Colore<\/strong> \u2013 ACF Color Picker per colorare dinamicamente elementi basati sul contenuto<\/li>\n<\/ul>\n<h2>Best Practice per il Loop Builder<\/h2>\n<ul>\n<li><strong>Ottimizza le immagini<\/strong> \u2013 Usa dimensioni appropriate per le thumbnail nelle card (medium o medium_large), non le immagini full size<\/li>\n<li><strong>Limita i widget<\/strong> \u2013 Ogni widget nel loop viene moltiplicato per il numero di card. Mantieni il template leggero per non impattare le performance<\/li>\n<li><strong>Testa su mobile<\/strong> \u2013 Verifica che la griglia passi correttamente a 1-2 colonne su smartphone<\/li>\n<li><strong>Usa il caching<\/strong> \u2013 Le pagine con Loop Grid beneficiano particolarmente dal caching di pagina<\/li>\n<li><strong>Dai un nome chiaro ai template<\/strong> \u2013 Nomina i Loop Template in modo descrittivo (&#8220;Blog Card &#8211; Image Top&#8221;, &#8220;Product Card &#8211; Minimal&#8221;) per trovarli facilmente<\/li>\n<\/ul>\n<h2>Conclusione<\/h2>\n<p>Il Loop Builder di Elementor Pro \u00e8 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\u00e0 di un tema custom con la semplicit\u00e0 dell&#8217;editor visuale. Inizia con un layout semplice e sperimenta progressivamente con design pi\u00f9 complessi.<\/p>\n<p>Hai bisogno di aiuto per configurare griglie dinamiche avanzate sul tuo sito? <a href=\"https:\/\/gtechgroup.it\/contatti\/\">Contatta G Tech Group<\/a> per una consulenza specializzata su Elementor e WordPress. Realizziamo siti web professionali con contenuti dinamici che si aggiornano automaticamente.<\/p>\n<h2>Guide Correlate della Serie Elementor<\/h2>\n<p>Continua a esplorare Elementor con le nostre guide:<\/p>\n<ul>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/widget-elementor-guida-completa-esempi\/\">Tutti i Widget<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/elementor-theme-builder-header-footer-template-personalizzati\/\">Theme Builder<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/woocommerce-elementor-personalizzare-ecommerce\/\">WooCommerce con Elementor<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/elementor-performance-velocita-ottimizzazione\/\">Performance e Velocita<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Il Loop Builder \u00e8 una delle funzionalit\u00e0 pi\u00f9 potenti di Elementor Pro, introdotta per rivoluzionare il modo in cui visualizzi contenuti dinamici sul tuo sito&hellip;<\/p>\n","protected":false},"author":2,"featured_media":166404,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"Elementor Loop Builder: Griglie Dinamiche di Contenuti","_seopress_titles_desc":"Come usare il Loop Builder di Elementor Pro per creare griglie dinamiche di post, prodotti e contenuti personalizzati con template riutilizzabili.","_seopress_robots_index":"","footnotes":""},"categories":[61],"tags":[2601,2599,2567,2600,492],"class_list":["post-166460","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-dynamic-content","tag-elementor","tag-elementor-pro","tag-loop-builder","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166460","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=166460"}],"version-history":[{"count":2,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166460\/revisions"}],"predecessor-version":[{"id":166509,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166460\/revisions\/166509"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/166404"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=166460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=166460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=166460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}