Il modulo Blog è rapido: lo inserisci, scegli qualche opzione e ottieni una lista di articoli. Ma quando vuoi cambiare davvero la struttura della card, mostrare campi diversi o usare lo stesso meccanismo per prodotti, eventi e portfolio, quella comodità comincia a stare un po’ stretta.

In questa parte usiamo il Loop Builder di Divi 5 per costruire una pagina blog personalizzata. Progetteremo un solo elemento, lo collegheremo ai contenuti dinamici e lasceremo che WordPress lo ripeta in base alla query.

Se devi ancora installare Divi, trovi la sezione dedicata nella pagina. Se vuoi capire subito quale strada scegliere, leggi il confronto fra modulo Blog e Loop Builder.

Capire cosa ripete il Loop Builder

Il Loop di WordPress recupera una raccolta di contenuti e li mostra uno dopo l’altro. Il Loop Builder porta questa logica nel Visual Builder: una riga, una colonna, un gruppo o un modulo supportato diventa l’elemento ripetuto. Tu controlli query e design; i campi dinamici forniscono i dati.

Prima prepara una pagina Blog vuota e una sezione con titolo e introduzione. Aggiungi poi un contenitore per la griglia e abilita il Loop Builder. Scegli come tipo di contenuto i post e imposta numero, ordine e filtri. Evita di partire dal design senza sapere quali dati devono comparire.

La query è parte del progetto. Una griglia “ultimi articoli” ha bisogno di un ordine cronologico; una sezione correlata può filtrare per categoria; un archivio deve rispettare il contesto corrente. Se la query è sbagliata, una card bellissima continuerà a mostrare i contenuti sbagliati con grande coerenza.

Progettare l’elemento ripetuto con contenuti dinamici

Dentro l’elemento del loop inserisci immagine, titolo, estratto, metadati e pulsante. Collega ogni modulo al campo dinamico corretto: immagine in evidenza, titolo del post, data, autore, categorie, estratto e URL. Non scrivere testi dimostrativi che rischiano di restare pubblicati.

Usa Flexbox o Grid per la struttura e applica variabili e preset. La guida su Flexbox e Loop Builder in Divi 5 mostra come ottenere layout avanzati senza dipendere dalla struttura fissa del modulo Blog. Controlla inoltre cosa accade quando l’estratto manca o il titolo occupa tre righe.

Decidi se l’intera card deve essere cliccabile o se basta un collegamento chiaro su titolo e pulsante. Evita link sovrapposti e mantieni una gerarchia di heading corretta. Per ecommerce e overlay puoi prendere spunto dalle schede prodotto interattive con Loop Builder, adattando però comportamento e contenuti al tuo caso.

Aggiungere paginazione e comportamento responsive

Inserisci il modulo Pagination e collegalo al loop della pagina. Verifica che la query abbia un limite coerente e che la navigazione aggiorni davvero i risultati. Testa pagine successive, ritorno alla precedente e URL generati; una paginazione che esiste soltanto nell’anteprima non aiuta nessuno.

Su desktop puoi usare una griglia a tre colonne; su tablet ridurla a due e su telefono a una. Collega gap e spaziature alle variabili di design. Se usi offset o pattern masonry, neutralizzali nei breakpoint in cui rendono la lettura meno prevedibile.

I contenuti dinamici non hanno una lunghezza educata. Prova titoli lunghi, estratti brevi, immagini verticali e post senza categoria secondaria. Verifica allineamento dei pulsanti, altezza delle card e crop delle immagini. Non usare un’altezza fissa soltanto per nascondere il problema.

Controlla la griglia anche con un numero di risultati inferiore al limite e con nessun risultato. L’ultima riga non deve sembrare spezzata e lo stato vuoto deve spiegare cosa può fare il visitatore. Se il loop dipende da filtri o categorie, prova combinazioni che restituiscono un solo elemento: sono proprio questi casi a rivelare larghezze e allineamenti troppo rigidi.

Riutilizzare i loop nel Theme Builder

Lo stesso elemento può essere salvato nella Libreria e usato in template per categorie, tag, autori, risultati di ricerca o archivi di custom post type. Nel Theme Builder imposta la query su Posts for Current Page quando vuoi rispettare il contesto dell’archivio.

Questo è il punto in cui Loop Builder, Theme Builder e sistema di design si incontrano. Una modifica al preset aggiorna tutte le card; una modifica alla query cambia quali elementi compaiono; una modifica al template decide dove il loop viene usato. Tenere distinti questi livelli rende il sito più gestibile.

Prima di salvare una struttura nella Libreria, ripulisci nomi amministrativi e valori locali non necessari. Poi controllala con l’Editor Responsive dentro il contesto reale del template. Un componente riutilizzabile dovrebbe richiedere nuovi contenuti e una query, non una lunga operazione di bonifica ogni volta che viene importato.

Concludi controllando accessibilità, focus, testo alternativo delle immagini e paginazione da tastiera. Poi salva ed esporta il layout riutilizzabile. Nella parte 15 non aggiungeremo una nuova funzione: metteremo in ordine il workflow per costruire più velocemente senza accumulare correzioni e duplicati.

Se il sito dispone di cache, svuotala e prova una pagina successiva del loop da utente non autenticato. Verifica anche che nuovi articoli o prodotti compaiano senza dover modificare il layout. È il test definitivo della separazione fra struttura e contenuto: pubblicare un nuovo elemento dovrebbe aggiornare la raccolta, non costringerti a duplicare manualmente una card.

Controlla infine la query dopo aver cambiato categoria, autore e data di un contenuto di prova. Il loop deve reagire secondo le regole dichiarate e la paginazione deve mantenere gli stessi filtri. Se il risultato cambia in modo inatteso, correggi prima la query e soltanto dopo il design.

Questo articolo è una rielaborazione originale in italiano basata sull’articolo originale di Elegant Themes, a cui va il credito per il tutorial di partenza.