Come utilizzare insieme il modulo Loop Builder e il modulo di paginazione di Divi 5

Gli elenchi statici del contenuto post vanno bene se stai mostrando un set selezionato e limitato di tali post. Ma spesso si desidera che gli utenti accedano più contenuti rispetto ai tuoi loop originali. Vuoi decidere quanti contenuti si carica inizialmente e offri ai lettori un modo chiaro per spostarsi tra i lotti. Ecco dove il costruttore di loop di Divi 5 e il modulo di impaginazione creano una coppia perfetta.

Questo post ti guiderà attraverso come funziona ciascuno, quindi ti mostrerà come collegarli. Alla fine, saprai come costruire layout in loop con una corretta paginazione.

Incontra il costruttore di loop di Divi 5

Il costruttore di loop è uno dei maggiori aggiornamenti di Divi 5. Ti dà la libertà che il vecchio modulo blog non potrebbe mai. Qualsiasi elemento può diventare un contenitore "ad anello". Ciò significa che Divi lo ripeterà automaticamente per ogni post, prodotto o tipo di post personalizzato che corrisponde alla tua query.

Invece di essere bloccato con un elenco pre-progettato di post, si progetta un elemento "modello" come loop. Divi lo usa per ciascun risultato, scambiare contenuti dinamici dalla query del loop. Questo potrebbe essere:

• Titoli estratti dai dati post
• Immagini in primo piano
• Campi personalizzati
• Collegamenti a post o prodotti completi

È possibile utilizzare qualsiasi modulo per visualizzare questi dati, non solo uno specifico del blog. Vuoi un modulo Blurb di fantasia che mostra i tuoi ultimi elenchi di corsi? Fatto. Hai bisogno di un layout della scheda di prodotto personalizzato per gli articoli WooCommerce? Anche fatto.

È flessibile perché stai costruendo tu stesso il design e la struttura dei contenuti. Divi gestisce la ripetizione.

Il passaggio dal modulo blog al costruttore di loop significa passare da un modello standard a un sistema di layout completamente personalizzabile. Mi è davvero piaciuto costruirlo e so che lo farai anche tu!

Incontra il modulo di impaginazione

La paginazione è un modo elegante per dire "Dividi i risultati in pagine". Invece di scaricare tutti gli elementi in una singola pagina, li rompi in set più piccoli. Che aiuta con:

• Tempi di caricamento della pagina
• Leggibilità
• Scansione

Il modulo di impaginazione in Divi 5 fa esattamente questo, ma con una certa integrazione intelligente. Non è legato solo ai post del blog. Invece, può connettersi a qualsiasi ciclo che hai costruito sulla pagina.

Funziona aggiungendo due elementi di navigazione - collegamenti preventivi e successivi - i quali etichette puoi personalizzare. Se ci sono articoli più vecchi oltre il set corrente, "Old" (o il testo scelto) sarà attivo. Se ci sono articoli più recenti, "più recenti" sarà attivo.

Costruire un loop + layout di impaginazione

Eseguiamo l'installazione completa. Questo esempio presuppone che tu voglia un ciclo personalizzato con impaginazione sotto di esso. Ecco il layout Flex che ho creato che visualizzerà il nostro ciclo. Di seguito puoi scaricare il layout completamente costruito.

Si noti che la scheda è impostata su una larghezza del ~ 50% e la crescita flessibile, quindi quando una scheda ad anello si trova in una fila flessibile da sola, diventerà piena larghezza all'interno del suo contenitore.

Passaggio 1: creare il contenitore loop

Aggiungi una sezione alla tua pagina. Al suo interno, aggiungi i moduli che si desidera ripetere. Questo potrebbe essere un singolo modulo (come un blurb) o un layout più complesso di più moduli in una colonna o un gruppo.

Con il contenitore selezionato, apri le sue impostazioni e abilita l'opzione Loop .

Scegli la tua fonte di dati. Questa è la "query" che il ciclo funzionerà.

Innanzitutto, scegli il tipo di query. A seconda della configurazione del tuo sito Web, potresti vedere queste opzioni:

• Pubblica tipo (come i tuoi post sul blog o tipi di post personalizzati come "progetti")
• Termini (categorie e tassonomie)
• Utenti (restituisci un elenco di utenti del sito, come gli autori)
• Campo ripetitore (un campo personalizzato creato da un plug -in per la creazione di un loop all'interno di un loop)

Successivamente, a seconda del tipo di domanda che hai scelto sopra, avrai la possibilità di essere più specifico. La selezione del "tipo di post" potrebbe consentire di utilizzare tipi di post come:

• Post di blog
• Progetti
• Prodotti
• Qualunque CPT hai costruito su misura per te stesso

Da lì, puoi essere ancora più specifico con ciò che dovrebbe apparire nel tuo ciclo. Puoi:

• Includi articoli con una categoria o un tag specifico
• Escludere gli articoli con una categoria o un tag specifico
• Includere elementi specifici (per post ID)
• Escludere elementi specifici (per post ID)
• Costruisci la tua meta query (utile per creare inclusioni/esclusioni in base ai dati di campo personalizzati)
• Imposta l'ordine delle query corrispondenti (come alfabetico e discendente)
• Articoli per pagina Valore controlla quanti vengono visualizzati nel loop
• Posta offset, nel caso in cui desideri iniziare il tuo ciclo più avanti nel ciclo
• Ignora i post appiccicosi

Ecco come guarda il nostro esempio a questo punto. Abbiamo creato il ciclo e assegnato al nostro tipo di post sul post sul blog. Ho impostato il limite di visualizzazione su 3.

Ora, dobbiamo assegnare i vari campi di testo e gli elementi che desideriamo ipertestuali con contenuto di anello dinamico.

Passaggio 2: aggiungere contenuti dinamici all'interno del loop

La nostra prossima attività è fare clic su ciascuno dei moduli del loop e sostituire il testo o le immagini statiche con campi di contenuto dinamici. Per esempio:

• In un modulo di testo, scegli "Posta titolo" da Dynamic Content Picker
• In un modulo immagine, puoi scegliere "immagine in primo piano"
• In un modulo pulsante, imposta il collegamento su "Posta URL"
• Sull'intero contenitore ad anello, impostare anche il collegamento su "post URL"

Questo dice a Divi di estrarre il giusto contenuto per ciascun articolo ad anello.

Ricorda: tutto all'interno del ciclo viene ripetuto per ogni risultato. Mantieni il contenuto non loop (come titoli, annunci o CTA) al di fuori di esso. Se si dispone di un contenuto nel ciclo che non è collegato a dati dinamici, ogni elemento nel ciclo visualizzerà così come è (come il testo "Leggi →" in basso a destra della scheda di esempio).

Passaggio 3: aggiungi il modulo di impaginazione

Sotto la sezione Loop, aggiungi una nuova riga. Inserire il modulo di impaginazione . Nelle impostazioni del modulo, individuare il campo di destinazione . Usalo per selezionare il tuo loop da un elenco a discesa di loop nella pagina. Questo collega i controlli di impaginazione a quel ciclo specifico. Suggerimento professionale: se si utilizza etichette di amministrazione, è più facile selezionare il target giusto. Questo vale anche per le interazioni.

Personalizza le etichette per "precedente" e "Next". Potresti usare "Post più vecchi / post più recenti", "Back / Forward" o persino "← / →" per uno stile minimo.

La chiave è che il modulo di impaginazione deve sedersi fuori dal ciclo che controlla. Questo e assicurarsi che sia assegnato al target giusto (se si dispone di più loop sulla stessa pagina/modello).

Passaggio 4: testare l'interazione

Salva la tua pagina e prevedila in anteprima. Fai clic su "Old" per andare al set successivo di elementi loop.

Nota come l'URL cambia con un parametro di query che identifica la pagina del loop. Si noti inoltre che solo il contenuto del loop mescola/modifiche: testatori, piè di pagina e barre laterali dovrebbero rimanere gli stessi.

Ottieni questo layout del loop

Vuoi sezionare questo layout e vedere come vengono costruite le cose per te stesso? Scaricalo qui!

Una volta decomprimente la cartella, vai alla libreria Divi per caricare il file. Una volta caricato, sarai in grado di aggiungere la sezione a qualsiasi pagina su cui stai lavorando.

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!

Goditi una divisione più dinamica

Il costruttore di loop e il modulo di impaginazione di Divi 5 sono un grande salto in avanti nella flessibilità. Il Loop Builder ti libera dai design rigidi di moduli più vecchi, permettendoti di creare i tuoi layout ripetuti con contenuti dinamici. Il modulo di impaginazione mantiene quei layout veloci e gestibili rompendoli in blocchi intuitivi.

Il costruttore di loop e il modulo di impaginazione, abbinato ad altre nuove funzionalità Divi 5 (Flexbox, interazioni, controlli di colore HSL), è più potente che mai. Puoi realizzare alcuni incredibili progetti di pagine con tutto questo.

Una volta che hai costruito il tuo primo ciclo paginato, vedrai quanto sia facile riutilizzare l'approccio tra blog, griglie di prodotto, portafogli o qualsiasi tipo di contenuto che devi organizzare.