Come creare un ciclo post blog personalizzato con il costruttore di loop di Divi 5

Il tuo marchio non dovrebbe essere vincolato da un layout statico, quindi miriamo a fornirti la piena flessibilità mentre Divi 5 continua a svilupparsi. Il nuovo costruttore di loop di Divi 5 è un grande passo in quella direzione; Ti consente di progettare un elemento una volta e di analizzarlo in griglie o elenchi dinamici.

In questo tutorial, ti mostreremo come impostare un ciclo di post sul blog personalizzato. Progetteremo l'elenco, collegheremo i campi dinamici, imposteremo la query e perfezioneremo il layout per una griglia o un elenco pulito. Ci arriviamo!

Cos'è il costruttore di loop di Divi 5

Con Loop Builder di Divi 5, si progetta un singolo layout "Card" nel Visual Builder utilizzando tutti i moduli Divi che desideri, quindi Divi lo rimpicca per ogni articolo che scegli di visualizzare.

Iscriviti al nostro canale YouTube

Abilita l'elemento Loop su una colonna, imposta una query (post, tipi di post personalizzati come progetti, termini o utenti) e campi dinamici di mappa come titoli, immagini in primo piano, categorie, campi personalizzati e pulsanti. Puoi riordinare elementi, controllare la spaziatura e lasciare che tutto eredita i tuoi stili globali.

Il risultato è un elenco reattivo e riutilizzabile che corrisponde al sistema senza la necessità di plug -in extra o codice personalizzato.

Come funziona il costruttore di loop

È possibile attivare la modalità Loop in qualsiasi sezione, riga, colonna o modulo aprendo la scheda Contenuto e abilitando il loop.

Da quel momento, Divi ripete automaticamente l'elemento per ogni post che corrisponde alle tue impostazioni.

Ecco dove arriva il vero controllo. Nelle impostazioni del loop, puoi:

• Tipo di query: scegli tra una query post di base o una meta query, filtro per categorie, tag, campi personalizzati o altri metadati.
• Tipo di post: selezionare il tipo di contenuto da visualizzare, dai post del blog ai prodotti a qualsiasi tipo di post personalizzato.
• Includi solo post con termini specifici: mostra solo post che corrispondono a determinate categorie, tag o altri termini di tassonomia.
• Escludi i post con termini specifici: rimuovere i post che corrispondono a categorie, tag o termini selezionati.
• Includi solo post specifici: selezionare singoli post da includere.
• Escludi post specifici: nascondi i singoli post che non desideri nel ciclo.
• Meta query: aggiungi le condizioni del campo personalizzate per controllare ciò che appare.
• Ordine per: selezionare Se i risultati vengono ordinati per data, titolo, ordine di menu o valore di campo personalizzato.
• Ordine: mostra i risultati in ordine crescente o discendente.
• Post per pagina: decidere quanti post vengono visualizzati prima della paginazione.
• Post Offset: salta un certo numero di post dall'inizio, utile per evitare duplicati con sezioni in primo piano.
• Ignora i post appiccicosi: scegli se i post appiccicosi ottengono priorità o sono trattati come post normali.

Dopo aver definito la domanda, Divi riempie automaticamente ogni cartolina con il giusto contenuto mantenendo il layout e lo styling identico. Ti concentri interamente su come appare la carta e Divi gestisce la popolazione e la ripetizione. Con tutto controllato da un singolo pannello, alcune impostazioni sono tutto ciò che serve per mantenere aggiornato il tuo blog senza modifiche manuali.

Impara tutto sul costruttore di loop di Divi 5

Creazione di un ciclo di post sul blog personalizzato con Divi 5

La creazione di un ciclo di post sul blog personalizzato con Loop Builder ha due parti. Innanzitutto, progetti il ​​layout delle post card, scegliendo esattamente cosa appare il contenuto e come appare. Quindi, metti quel design all'interno di un ciclo in modo che Divi lo ripeta automaticamente per ogni post che vuoi mostrare.

Lo esamineremo passo dopo passo, a partire dal layout della scheda e quindi impostare il loop.

Prima di iniziare

Se ti stai spostando dal modulo blog a Loop Builder e hai già una pagina di elenchi di blog, puoi saltare nella creazione del layout del loop. In caso contrario, ecco la configurazione rapida:

1. Aggiungi una pagina del blog

Dalla tua dashboard di WordPress, vai a pagine> Aggiungi nuovo , nomina "Blog" e pubblicalo.

Questa pagina sarà l'hub principale per i tuoi post.

2. Imposta la pagina del tuo blog nelle impostazioni di WordPress

In Impostazioni> Lettura , scegli una pagina statica . Assegna la tua homepage a casa e la pagina del tuo nuovo blog alla pagina post.

Questo è necessario solo se si utilizza una pagina di homepage e elenco dei blog separata.

3. Crea un modello di costruttore di temi

Successivamente, creerai un nuovo modello per la pagina del tuo elenco di blog. Se ne hai già uno, puoi personalizzarlo. Assicurati di utilizzare l'ultima versione Divi 5 per accedere a Loop Builder.

In Divi> Tema Builder , fai clic su Aggiungi nuovo modello> Crea nuovo modello.

Assegnalo alla pagina del tuo blog e fai clic su Crea modello.

Per progettare la pagina dell'elenco dei post sul blog, fare clic su Aggiungi corpo personalizzato> crea un corpo personalizzato.

Ora entrerai nel Builder Divi, dove inizieremo a costruire il layout del loop.

1. Importa un layout

A partire da un layout può farti risparmiare molto tempo e aiutarti a mantenere un design coerente dall'inizio. Per questo tutorial, sto usando il layout della pagina del blog dell'agenzia di marketing per il marchio.

Puoi scegliere lo stesso o importare qualsiasi layout che ti dia una buona base da cui lavorare. Una volta che è nel tuo modello, avrai una struttura pronta che puoi adattarti alle tue esigenze invece di costruire tutto da zero.

2. Design One Blog Post Card

È qui che arriva davvero la flessibilità di Loop Builder. Invece di essere bloccato nel layout fisso del modulo del blog, decidi esattamente cosa succede sulla tua cartolina e come è organizzata.

Aggiungi una nuova sezione al tuo modello. Puoi scegliere dalle strutture pre-progettate o crearne una propria utilizzando l'opzione a una colonna.

Per questo esempio, scegliamo una sezione struttura a tre colonne .

Nella prima colonna, creeremo la nostra cartolina postale. Useremo un gruppo di moduli per contenere tutti gli elementi.

Quindi aggiungi un modulo immagine per l'immagine in primo piano, un modulo di testa per il titolo post e un modulo di testo per l'estratto. Aggiungeremo anche meta informazioni e un pulsante di lettura in modo che i visitatori possano fare clic sul post completo.

Una volta che la struttura di base è lì, personalizza il design della carta in modo che si adatti al tuo marchio. Modifica colori, caratteri, spaziatura e eventuali dettagli visivi unici che lo rendono tuo.

3. Abilita avvolgimento delle righe

Per assicurarti che le tue carte vengano visualizzate ordinatamente in righe su diverse dimensioni dello schermo, ti consigliamo di abilitare il confezionamento di Flex. Seleziona la riga principale e apri la scheda Design .

Vai al layout. Assicurati che lo stile di layout sia impostato su Flex.

Abilita la confezione di layout in modo che le carte possano passare a una nuova linea quando necessario, quindi scegli l' allineamento di avvolgimento che si adatta meglio al tuo design.

4. Accendi il ciclo

Ora arriva il passo che rende tutto automatico. Seleziona la colonna della scheda.

Quindi, accendi l'opzione Loop nella scheda Contenuto . Una volta che loop è abilitato, Divi ripeterà il design della tua carta per ogni post che soddisfa le impostazioni della query.

Per questo layout, ho impostato:

• Tipo di post: post
• Post per pagina: 10
• Ordine per: data
• Ordine: discendente (primo primo)
• Offset post: 0 (mostra tutti a partire dall'ultimo)
• Ignora i post appiccicosi: sì

Queste piccole regolazioni assicurano che la griglia mostri esattamente i post che desideri, nell'ordine desiderato. Puoi modificare questi valori in qualsiasi momento per adattare il layout a diverse esigenze.

5. Aggiungi contenuto dinamico

L'ultimo passo per dare vita al ciclo è collegare ciascun modulo nella tua scheda per vivere i dati post. Questo è ciò che trasforma una scheda statica in un elenco automatizzato e sempre aggiornato. Per esempio:

• Collega il modulo immagine all'immagine in primo piano del post.
• Collegare il modulo di intestazione al titolo post.
• Collegare il modulo di testo all'estratto post.
• Collega il pulsante Leggi Altre al post URL.

Se loopato, Divi sostituirà il contenuto di segnaposto con i dati corretti per ciascun post nel ciclo.

Per impostare l'immagine in primo piano, aprire il modulo immagine, passare il mouse sopra l'opzione immagine e fare clic sull'icona del contenuto dinamico . Seleziona l'immagine in primo piano e tutte le immagini pertinenti popoleranno istantaneamente.

Ripeti il ​​titolo per il titolo post, la data pubblicata, l'estratto e qualsiasi altro campo che desideri visualizzare.

Quando fai clic sull'icona del contenuto dinamico per un modulo, vedrai l'intera gamma di opzioni specifiche per loop. Non sei limitato a titoli e immagini; È inoltre possibile visualizzare date di pubblicazione, date modificate, nomi degli autori, conteggi dei commenti, categorie, tag e persino campi personalizzati.

Ciò significa che la tua cartolina postale può essere minima o dettagliata che desideri. Costruisci una griglia pulita e focalizzata sull'immagine, un layout ricco di contenuti o persino evidenzia i campi di tipo Post personalizzato di nicchia. Progettalo una volta e Divi lo mantiene accurato e coerente nell'intero ciclo.

6. Salva il modello e l'anteprima

Una volta che tutto sembra giusto, apporta qualsiasi modifica finale e salva le modifiche sia nel Builder Divi che nel Tema Builder.

Anteprima la tua pagina per vedere il loop in azione. Ecco la pagina dell'elenco del blog finito:

Il modulo del blog aveva limiti, loop builder no

Il modulo del blog funzionava bene, quindi perché stiamo spingendo per il costruttore di loop? Perché "bene" significava fisso. Il modulo del blog ti ha bloccato nel suo modello, ma il costruttore di loop ti dà una tela vuota. Scegli il layout, l'ordine, lo stile e la Divi loops automaticamente.

Questo è il vero turno: non stai regolando il modello di qualcun altro, stai progettando il tuo. Mettiamolo in pratica e progettiamo un layout diverso da una tipica struttura del modulo del blog.

Innanzitutto, aggiungi una riga e una sezione a una colonna. Regola il dimensionamento e assicurati che Flex e Flex Wrapping siano abilitati per la riga.

Questa riga conterrà le tue carte del blog. Ora, aggiungi un'altra riga nidificata all'interno della colonna per creare la struttura della tua carta, con l'immagine a sinistra e i metadati del post sulla destra.

Progetta la tua struttura esattamente come vuoi, non è necessario seguire la sequenza del modulo blog. Lascia la colonna sinistra vuota per ora. Aggiungeremo l'immagine in primo piano come immagine di sfondo della colonna.

Personalizza la scheda di quotazione del blog.

È inoltre possibile modificare il divario verticale del gruppo di moduli nella colonna di destra in Design> Layout> Opzione Gap verticale .

Successivamente, abilitiamo l'opzione Loop . Seleziona la prima colonna dalla riga principale.

Ancora una volta, loviamo il contenuto dinamico. A partire dall'immagine, vai all'opzione di sfondo della colonna sinistra e il resto sarà lo stesso.

Questo è il tuo ciclo di blog in stile elenco. Ora, se vuoi convertirlo in una griglia, cambia semplicemente la larghezza della colonna. Poiché abbiamo l' avvolgimento flessibile abilitato nella riga, le carte si avvolgeranno da sole mentre cambiamo le loro dimensioni.

Se questo rende le tue immagini troppo grandi, è possibile rimuovere l'estratto, cambiare la struttura della colonna della riga e persino regolare lo spazio orizzontale a zero.

E proprio così anche la tua griglia è pronta.

Questo esempio è solo uno sguardo a ciò che il costruttore di loop rende possibile. Il vero asporto è che non sei più limitato a una manciata di layout preimpostati. Ogni parte della cartolina è tuo per organizzare, stile e reinventare e Divi si occupa di ripeterlo automaticamente. Questa flessibilità è ciò che trasforma un semplice elenco di blog in qualcosa che sembra progettato per il tuo sito.

Usa il modulo di impaginazione

Se limiti i post per pagina nella tua query ad anello, probabilmente vorrai un modo per i lettori di vedere il resto. Aggiungi il modulo di impaginazione sotto la griglia e imposta il suo ciclo target sull'elemento in cui è stato abilitato il ciclo. Per una procedura dettagliata completa, vedere come utilizzare insieme il costruttore e il modulo di impaginazione di Divi 5: leggi il tutorial.

Scarica i modelli di blog

Se vuoi sperimentare le griglie all'interno di un modello di blog, scarica i modelli utilizzati in questo tutorial di seguito. Per importarli, vai al tuo costruttore di temi Divi. Sarai in grado di importarli utilizzando l'icona di importazione/esportazione nell'angolo destro.

Scarica i file

Scarica gratuitamente

Unisciti alla newsletter Divi e ti invieremo una copia del pacchetto di layout della pagina di destinazione di Divi, oltre a tonnellate di altre risorse, suggerimenti e trucchi di Divi straordinari e gratuiti. Segui e sarai un Master Divi in ​​pochissimo tempo. Se sei già sottoscritto, digita semplicemente il tuo indirizzo email di seguito e fai clic su Download per accedere al pacchetto di layout.

SCARICAMENTO

Ti sei iscritto con successo. Controlla il tuo indirizzo email per confermare l'abbonamento e accedere ai pacchetti di layout Divi settimanali gratuiti!

Costruisci il tuo ciclo di post sul blog personalizzato in Divi 5 oggi

Prima del costruttore di loop di Divi 5, la creazione di un post sul blog veramente personalizzato significava spesso lottare con modelli rigidi o scrivere codice personalizzato per ogni piccolo cambiamento. Ora, è un processo visivo dall'inizio alla fine. Progetti una scheda una volta, collega i suoi moduli per vivere i dati post e lascia che Divi gestisca il resto.

Se hai lavorato sui limiti del modulo del blog, Loop Builder è l'aggiornamento che stavi aspettando. Provalo nel tuo prossimo progetto e guarda quanto è più facile creare un blog (o prodotto, evento o elenco) che sembra esattamente come vuoi!