Vuoi visualizzare contenuti dinamici come post di blog, prodotti o tipi di post personalizzati in layout completamente personalizzati, senza toccare una riga di codice? Il modulo Loop in Beaver Builder lo rende possibile.

Introdotto in Beaver Themer 1.5 e Beaver Builder 2.9, il modulo Loop è uno strumento potente che consente di progettare layout ripetibili utilizzando i moduli standard Beaver Builder. Sia che tu stia costruendo un blog, un portafoglio, un elenco di eventi o un negozio WooCommerce, questo modulo ti dà il controllo del design completo con contenuti dinamici al centro.

In questa guida, distruggeremo come utilizzare il modulo Loop per costruire layout moderni e dinamici che migliorano il design, le prestazioni e la flessibilità del tuo sito.

Qual è il modulo Loop?

Il modulo Loop è un contenitore flessibile che si avvicina attraverso il contenuto interrogato e lo visualizza utilizzando un layout creato. Invece di fare affidamento su modelli WordPress predefiniti, è possibile creare i tuoi progetti personalizzati, completa con moduli, connessioni sul campo e logica condizionale.

Il modulo Loop non è limitato ai post sul blog o ai tipi di post personalizzati: può gestire una vasta gamma di contenuti dinamici. Ecco alcuni modi potenti in cui puoi usarlo per creare layout personalizzati e migliorare il tuo sito:

• Categorie o tag WooCommerce - Visualizza categorie o tag relative ai prodotti sulle singole pagine di prodotto utilizzando la fonte di query delle tassonomie.
• Grid di contenuti personalizzati : mostra contenuti dinamici come membri del team o testimonianze utilizzando la fonte di query ACF Repeater in pagine come "Meet the Team" o elenchi di servizi.
• Post correlati - Funzionalità di contenuto del blog pertinenti su singoli post pagine con la fonte di query per le relazioni ACF, aiutando a aumentare il coinvolgimento e ridurre le velocità di rimbalzo.

Ogni elemento nel loop utilizza il tuo design personalizzato e attira dati dinamici come il titolo post, l'immagine in primo piano, l'estratto e altro ancora.

Caratteristiche chiave del modulo Loop

Il modulo Loop è pieno di funzionalità che lo rendono ideale per la costruzione di pagine flessibili e ricche di contenuti:

• Contenuto dinamico di query da qualsiasi tipo di post (standard o personalizzato)
• Usa qualsiasi modulo Beaver Builder all'interno del layout del loop
• Connect Fields dinamicamente (ad esempio, titolo, immagine in primo piano, post meta)
• Scegli tra più tipi di layout come griglia, elenco o giostra
• Aggiungi filtri e impaginazione per migliorare l'esperienza dell'utente

Questa combinazione di personalizzazione e automazione consente di creare layout avanzati senza scrivere HTML, PHP o CSS.

Come creare un ciclo personalizzato

La creazione di un layout di contenuto personalizzato con il modulo Loop è semplice, flessibile e non richiede codice. Sia che tu voglia iniziare con un layout pronto o costruire il tuo da zero, il modulo Loop ti dà il pieno controllo su come viene visualizzato il tuo contenuto dinamico.

Opzioni di layout preimpostazione del modulo Loop

Quando si trascina per la prima volta il modulo Loop sulla tua pagina, ti verrà richiesto di scegliere tra i seguenti layout preimpostati: elenco, colonne, categorie e categorie di prodotti.

I layout preimpostati ti danno un vantaggio offrendo moduli pre-organizzati che puoi personalizzare completamente. Regola le impostazioni del loop per soddisfare le tue esigenze, riorganizzare o rimuovere i moduli esistenti e aggiungerne di nuovi per perfezionare il layout. Questi design pronti ti aiutano a creare contenuti lucidati e reattivi visualizzati più velocemente.

Costruisci da zero con un layout vuoto

Preferisci creare qualcosa di totalmente personalizzato? Scegli l'opzione di layout vuoto e segui questi passaggi:

1. Aggiungi il modulo Loop alla tua pagina o pubblica nell'editor Beaver Builder.
   
2. Seleziona il layout vuoto per iniziare con un contenitore ad anello vuoto.
   
3. Configurare le impostazioni del loop per definire quali contenuti si desidera visualizzare, come post sul blog, prodotti WooCommerce, campi ripetitori ACF o tipi di post personalizzati.
   
4. Trascina i moduli nel contenitore loop per costruire il layout da zero. Aggiungi tutti i moduli Beaver Builder di cui hai bisogno, come intestazioni, foto, icone, pulsanti e altro ancora.
   
5. Utilizzare le connessioni di campo per attirare contenuti dinamici come titoli, immagini, prezzi o campi personalizzati per ciascun elemento loop.
   
6. Organizza e modella i moduli usando gli strumenti di trascinamento di Beaver Builder.

Questa configurazione funziona perfettamente per utenti avanzati o designer che desiderano il controllo totale.
Usalo per creare layout di blog personalizzati, griglie del prodotto o directory di team, senza codice richiesto.

Utilizzare il modulo Box per il controllo del layout

Il modulo Box è un compagno essenziale per il modulo ad anello quando si tratta di precisione del layout e flessibilità di styling.

• Avvolgi il modulo Loop all'interno di un modulo Box per gestire la larghezza del contenitore esterno, l'imbottitura, il margine e lo styling di sfondo. Questo ti dà il pieno controllo su come si trova il tuo contenuto in loop all'interno del layout complessivo della pagina.
• Nidificare un modulo box all'interno del loop per raggruppare il contenuto interno di ciascun elemento loop. Questa configurazione consente di sfruttare le tecniche di layout avanzate come la griglia CSS o Flexbox . Ad esempio, è possibile creare un layout a due colonne all'interno di ciascun elemento loop. Posiziona un'immagine a sinistra e testo a destra, con il controllo completo sulla spaziatura e sull'allineamento.

L'uso del modulo Box aiuta strategicamente a mantenere progetti puliti e reattivi migliorando la struttura visiva del contenuto dinamico.

Impostazioni di query: quale contenuto verrà visualizzato?

La scheda Contenuto nel modulo Loop consente di controllare come viene interrogato e visualizzato il contenuto di loop come: ad esempio:

• Scegli il tipo di post (post, pagine, CPT, prodotti, ecc.)
• Filtra per tassonomia, categoria, tag o autore
• Visualizza il contenuto in base allo stato o alla data
• Impostare gli offset, ordinare l'ordine e i limiti

Ciò include la fonte di query, il numero di elementi da mostrare, l'ordinamento e le opzioni di filtro avanzate.

Impaginazione

La scheda Paginazione consente di controllare il modo in cui il contenuto è diviso e visualizzato su più pagine, Ideal per migliorare la navigazione e l'esperienza dell'utente.

• Numeri : visualizza collegamenti numerati sotto i tuoi post. Facendo clic su un numero carica una nuova pagina con il set corrispondente di post.
• Scorri : carica automaticamente ulteriori post come scorrere l'utente, mantenendo i contenuti in una singola pagina.
• Nessuno : disabilita la impaginazione. Utilizzare questa opzione per visualizzare un numero limitato di post, come gli ultimi tre - senza controlli di navigazione.
• Post per pagina : imposta quanti elementi vengono visualizzati per pagina. L'impostazione predefinita è 10.

Queste opzioni aiutano a personalizzare la consegna dei contenuti al layout e agli obiettivi di interazione dell'utente.

Dati dinamici con connessioni sul campo

All'interno del layout del loop, è possibile utilizzare le connessioni di campo per inserire dinamicamente i dati post come:

• Titolo post
• Immagine in primo piano
• Estratto o contenuto completo
• Campi personalizzati
• Autore, data, categoria, tag

Qualsiasi modulo che supporti contenuti dinamici (come intestazione, foto, pulsante, HTML, ecc.) Può essere collegato ai dati post.

Styling avanzato e logica condizionale

Vuoi modellare diversi tipi di post in modo diverso o mostrare/nascondere elementi in base alle condizioni? Il modulo Loop supporta le classi di logica condizionale e CSS personalizzate .

Ad esempio, potresti:

• Nascondi i pulsanti se un campo personalizzato è vuoto
• Aggiungi badge per i post in primo piano
• Applicare colori o stili diversi in base alla categoria post

Ciò ti consente di mettere a punto l'esperienza dell'utente e mantenere il marchio coerente tra i tuoi contenuti.

Caso d'uso del modulo Loop del mondo reale

Il modulo Loop in Beaver Builder è incredibilmente versatile, permettendo di visualizzare contenuti dinamici nei layout che soddisfano le tue esigenze di progettazione. Ecco alcuni modi potenti per usarlo:

• Archivi del blog: crea una griglia visivamente coinvolgente o un elenco dei tuoi ultimi post sul blog con immagini e estratti in primo piano.
• Prodotti WooCommerce: mostra i prodotti WooCommerce in una griglia personalizzabile con prezzi dinamici, immagini e pulsanti aggiuntivi a carrello.
• Portfolio Showcase: evidenzia i tuoi progetti o casi studio con layout flessibili che riflettono il tuo stile di marchio.
• Testimonianze: visualizzare le testimonianze client da un tipo di post personalizzato e modellali per abbinare il design del tuo sito Web.
• Elenchi di eventi: elenca i prossimi eventi o webinar cronologicamente, con date, sedi e descrizioni di eventi.
• Membri del team: presenta al tuo team con foto, nomi, titoli e BIOS: collega ogni elemento a una pagina del profilo dettagliata.
• Elenchi immobiliari: presentare elenchi immobiliari con immagini di proprietà, prezzi e dettagli chiave utilizzando un tipo di post personalizzato.
• Catalogo del corso: visualizzare un catalogo di corsi o seminari online, completo di titoli, descrizioni e collegamenti di iscrizione.
• Elenchi di lavoro: costruire una tavola di lavoro personalizzata con elenchi dinamici che includono titoli, posizioni e brevi riepiloghi di ruolo.
• Indice di ricetta: presenta una raccolta di ricette con immagini, titoli e descrizioni: Ideale per i blogger di cibo.

Questi casi d'uso dimostrano la versatilità del modulo Loop in Beaver Builder. Può essere utilizzato in vari settori e siti Web, aiutandoti a creare layout di contenuti dinamici, coinvolgenti e personalizzati.

Pensieri finali: perché usare il modulo Loop?

Il modulo Loop in Beaver Builder ti offre facilmente la potenza di creare layout dinamici completamente personalizzati e dinamici. Che tu stia costruendo un blog, un negozio o una directory di contenuti complessi, questo modulo ti consente di controllare come vengono visualizzati i tuoi dati, mantenendo il flusso di lavoro visivo e privo di codice.

Se sei serio nel costruire siti WordPress moderni e personalizzati con Beaver Builder, il modulo Loop è un must nel tuo kit di strumenti. Esplora la documentazione del modulo ad anello completo qui.