Come costruire una griglia di portafoglio con il costruttore di loop di Divi 5

Una griglia del portfolio è un modo semplice ed efficace per mostrare il tuo lavoro. Con Loop Builder di Divi 5, è possibile progettare un layout della scheda riutilizzabile e lasciarlo auto-popolare dai tuoi contenuti direttamente nel Visual Builder.

A differenza dei moduli monouso, Loop Builder consente di utilizzare qualsiasi elemento Divi, impostare una query per post o tipi di post personalizzati e produrre una griglia reattiva che eredita i tuoi stili globali. In questo tutorial, creeremo una griglia di portafoglio passo dopo passo utilizzando il tipo di post personalizzato dei progetti.

Comprensione del costruttore di loop di Divi 5

Loop Builder di Divi 5 è una nuova funzionalità che ti consente di creare facilmente layout di contenuti dinamici e looping. A differenza del blog o dei moduli di portafoglio, Loop Builder consente di lottare facilmente qualsiasi elemento Divi per visualizzare post, termini o utenti. Ciò significa che puoi creare un singolo modello che popola automaticamente con contenuti dal tuo sito WordPress.

Loop Builder supporta vari tipi di contenuti, inclusi tipi di post personalizzati (CPTS), prodotti WooCommerce e Field personalizzati avanzati (ACF), consentendo di visualizzare il tuo portafoglio esattamente come si desidera.

Vantaggi chiave del Builder Loop

Grazie alle sue solide opzioni di personalizzazione, Loop Builder è perfetto per la creazione di griglie del portfolio. Ecco le sue caratteristiche straordinarie:

• Flessibilità nel progettare modelli di loop personalizzati: con Loop Builder, non sei limitato a layout predefiniti. È possibile utilizzare qualsiasi modulo Divi per progettare un modello unico per ciascun elemento del portfolio.
• Queries personalizzabili: Loop Builder ti consente di perfezionare il contenuto appare nella tua griglia. Filtra per categoria, tipo di post o campi personalizzati per visualizzare solo gli elementi desiderati nell'ordine preferito.
• Integrazione di contenuti dinamici: inserire perfettamente dati di contenuti dinamici come titoli di progetto, immagini in primo piano, descrizioni o metadati personalizzati per rendere coinvolgente ciascun elemento del portafoglio.

Queste caratteristiche rendono il costruttore di loop di Divi 5 uno strumento ideale per creare un portafoglio lucido e professionale che è completamente personalizzabile e facile da navigare.

Costruire un portafoglio con loop builder

Useremo i progetti integrati di Divi Type Post (CPT) per creare un portafoglio con il costruttore Loop. I progetti CPT sono progettati per mostrare contenuti in stile portafoglio, rendendolo una scelta ideale per il nostro layout. Mentre Divi offre un modulo portafoglio, useremo il costruttore Loop perché ci offre opzioni illimitate per la creazione di un portafoglio unico.

Inizia aggiungendo una nuova riga alla tua pagina. Per questo, useremo un layout a 3 colonne .

Aggiungeremo un modulo di intestazione alla prima colonna .

Inserisci un titolo o usa Divi Ai per generarne uno per te.

Passare alla scheda Design , scegliere l'Inter per il carattere dell'intestazione , luce per il peso del carattere di intestazione , impostare la dimensione del testo dell'intestazione su 2em e assegnare un'altezza della linea di intestazione di 1,3em .

Ora, costruiamo il nostro ciclo. Passare alla seconda colonna della nostra riga.

Individuare la scheda Loop , espanderla e abilitare l' elemento loop .

Quindi, scegli il tipo di query . Per questo tutorial, utilizzeremo i progetti integrati di Divi. In fase di post , selezionare progetti . Vogliamo mostrare tutti i progetti, quindi lasceremo tutto così com'è.

Puoi scegliere l' ordine per impostazioni, post per pagina e pubblicare offset . Poiché la nostra prima colonna contiene un modulo di intestazione , imposteremo i post per pagina su 8 . In questo modo, l'output sarà persino attraverso la nostra riga a tre colonne .

Noterai che il nostro ciclo sta cercando di impilare tutte le colonne. Per risolvere questo problema, dobbiamo andare alle impostazioni della riga. Passare alla riga a 3 colonne , fare clic sulla scheda Design e individuare le impostazioni di layout .

Espandi la scheda Impostazioni di layout . Individua l'impostazione di avvolgimento del layout e seleziona avvolgimento . Questo avvolgerà il nostro ciclo in 3 colonne.

Styling La colonna del loop

Ora che le impostazioni del ciclo sono in atto, è tempo di modellare le nostre colonne. Le impostazioni di stile che scegliamo qui influenzeranno le colonne rimanenti nel ciclo. Nella riga a 3 colonne , fare clic nella 2a colonna e fare clic sulla scheda Design . Passare al menu a discesa del bordo e assegnare un raggio di bordo 15px alla colonna. Sotto gli stili di bordo , aggiungere una larghezza del bordo 1px e utilizzare #000000 come colore del bordo .

Aggiungi contenuto al loop

Possiamo iniziare ad aggiungere contenuti al loop con gli stili della colonna assegnati. Fare clic per aggiungere un modulo immagine nella 2a colonna . Una volta aggiunta, ogni colonna all'interno del ciclo mostrerà un segnaposto dell'immagine.

Useremo il potere di contenuto dinamico di Divi 5 per attirare l'immagine in primo piano del nostro progetto. Abbassando l'immagine per rivelare le icone. Fai clic sull'icona del contenuto dinamico per continuare.

Scegli l'immagine in primo piano loop quando vengono visualizzate le opzioni.

Il nostro loop posizionerà l' immagine in primo piano di ciascun progetto direttamente nel nostro loop del portfolio.

Quindi, aggiungi un modulo di intestazione alla seconda colonna sotto l' immagine in primo piano . Questo verrà utilizzato per il titolo del progetto . Ripeti i passaggi sopra per aggiungere il titolo . Tuttavia, scegli il titolo del post Loop questa volta.

Nella scheda Design , selezionare H3 per il livello di intestazione , Inter per il carattere dell'intestazione , centro per l'allineamento del testo di intestazione e 20px per la dimensione del testo di intestazione.

Infine, aggiungeremo un pulsante che si collega a ogni progetto . Aggiungi un modulo pulsante alla 2a colonna sotto il titolo post . Fare clic sull'icona del contenuto dinamico nell'URL del collegamento pulsante e selezionare Link Loop .

Passare alla scheda Design e impostare l' allineamento sul centro .

Espandi le impostazioni a discesa del pulsante e abilita l'utilizzo di stili personalizzati per il pulsante . Immettere le seguenti impostazioni di progettazione:

• Sfondo del pulsante: #000000
• PULLA BORDINE RAGGIO: 15px
• Pulsante Larghezza del bordo: 0px
• FONT BOCHNO: inter
• Pulsante Testo Colore: #FFFFFF
• Pulsante Dimensione del testo: 16px
• Margine: 15px Bottom
• Imbottitura: 15px superiore e basso, 35px sinistra e destra

Questo è tutto! Come puoi vedere, la creazione di un ciclo con Divi 5 è un processo semplice.

Cambiare gli stili con loop builder

La modifica degli stili del tuo loop è semplice come creare il ciclo stesso. Supponiamo che tu voglia scambiare da una luce a un tema oscuro per il tuo ciclo. Apportare modifiche al design richiede solo un paio di secondi. È possibile modificare il colore di sfondo della sezione e quindi apportare modifiche ai singoli elementi del ciclo con un paio di clic.

Non è necessario modificare gli elementi loop individualmente. Dal momento che sono tutti connessi, devi modificare i moduli solo una volta e Divi 5 applicherà automaticamente gli stili aggiornati su tutti i moduli nel ciclo.

Puoi aggiungere altri moduli al loop, come l' estratto del progetto , la data di pubblicazione, il conteggio dei commenti , la biografia dell'autore , i campi personalizzati e altro ancora.

Se si desidera stringere lo spazio attorno agli oggetti all'interno del tuo loop, è possibile regolare il divario verticale nelle impostazioni di riga e colonna . Ciò controlla la quantità di spazio tra ogni riga e singoli moduli utilizzando il sistema di layout Flexbox di Divi 5, permettendoti di perfezionare l'aspetto del tuo ciclo.

Test e perfezionamento del loop del portafoglio

Una volta che hai costruito un portafoglio, è tempo di testarlo per garantire che tutto funzioni come previsto. Inizia in anteprima la griglia sul front -end utilizzando il collegamento di anteprima nella barra superiore del Visual Builder.

Verificare che il titolo di ciascun progetto, l'immagine , l'estratto e il collegamento Loop stiano traggendo correttamente dai progetti CPT. Assicurarsi che nessun segnaposto sia elementi rotti che appaiono.

Di nuovo nel Visual Builder, controlla per garantire che il layout si adatti correttamente utilizzando i punti di interruzione reattivi personalizzabili di Divi 5. Per impostazione predefinita, Divi 5 offre 3 punti di interruzione - uno per desktop , tablet e telefono - ma è possibile abilitare fino a 7 facendo clic sul menu Ellipsis nel mezzo della barra superiore del Builder Visual.

Passare attraverso ogni punto di interruzione , controllare il layout e apportare le regolazioni se necessario.

Per rendere il layout più adatto ai dispositivi mobili, è possibile utilizzare l'impostazione della struttura della colonna di modifica di Divi 5 per modificare il numero di colonne visualizzate su dispositivi più piccoli.

Best practice e consigli

Per assicurarti di ottenere il massimo da Divi 5 e Loop Builder, ecco alcune migliori pratiche da seguire quando costruisci il tuo portafoglio.

1. Assicurati la coerenza del design con le variabili di progettazione

La funzione Variabili di design di Divi 5 consente di definire una tipografia, colori e spaziatura coerenti attraverso la pagina del portfolio. Nel Visual Builder, imposta le variabili globali per caratteri, colori e imbottitura/margini per garantire che ogni elemento del portfolio sembri uniforme. Per creare variabili , fare clic sull'icona del gestore delle variabili nel menu lato sinistro nel Visual Builder.

Da lì, puoi assegnare caratteri globali , colori e altro, assicurando che i tuoi progetti siano coerenti in tutto il tuo sito Web, non solo alla pagina del portfolio.

2. Prendi in considerazione l'accessibilità

L'accessibilità garantisce che tutti gli utenti, compresi quelli con disabilità, possano navigare e godersi il tuo lavoro. Assicurati di aggiungere un testo alternativo per le immagini mentre le carichi nella galleria multimediale. Questo aiuta i lettori agli schermo a trasmettere il contenuto a utenti con ipotesi visivamente.

È anche bene selezionare colori con rapporti di contrasto sufficienti per garantire la leggibilità per gli utenti con disabilità visive.

3. Salvare e riutilizzare i modelli

Dopo aver perfezionato il modello del tuo costruttore di loop, salvalo nella libreria Divi facendo clic con il pulsante destro del mouse sulla sezione Portfolio e selezionando Salva sulla libreria . Dagli un nome descrittivo per un facile riferimento. Ciò consente di riutilizzare il modello su altre pagine senza ricostruire da zero.

Per utilizzare il modello su altri siti Web, è possibile salvarlo in Divi Cloud e importarlo in altri progetti Web con un clic.

Il salvataggio dei modelli semplifica il flusso di lavoro e ti assicura di poter distribuire rapidamente le reti del portafoglio professionale per progetti futuri.

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!

Prova oggi il costruttore di loop in Divi 5

Loop Builder di Divi 5 semplifica la creazione di griglie di portfolio dinamiche, permettendoti di mostrare il tuo lavoro con stile ed efficienza. Sfruttando i progetti integrati CPT e le potenti funzionalità del Loop Builder, è possibile creare griglie flessibili e completamente personalizzabili che attirano dinamicamente il contenuto del progetto. La sua flessibilità consente di progettare layout unici utilizzando qualsiasi modulo Divi, impostare query per visualizzare progetti specifici e creare griglie reattive che brillano su qualsiasi dispositivo.

Sei pronto a dare vita al tuo portafoglio? Immergiti nell'ultima versione alfa pubblica di Divi 5 e sperimenta il tuo layout del portfolio. Che tu sia un libero professionista che mostra progetti o un'azienda che evidenzia il lavoro dei clienti, Loop Builder ti consente di creare facilmente un display professionale e dinamico.