6 nuove gallerie di immagini costruite con righe nidificate di Divi 5 (download gratuito)

Se hai mai provato a costruire una galleria di immagini manualmente, sai quanto velocemente le cose diventano disordinate. Le immagini irregolari, le file disallineate e i disegni non rispondenti trasformano una semplice galleria in un incubo di layout.

Anche in Divi 4, strutture di immagini complesse spesso significavano impilare più file e sezioni speciali, la spaziatura di modifica e le ore di personalizzazione manuale. Ma con Divi 5, puoi saltare tutto questo.

Grazie alla sua nuova funzione di righe nidificate, puoi costruire strutture di galleria di immagini più avanzate. In questo post, ti mostreremo come e ti forniremo design di layout a 6 gallerie per darti un vantaggio.

Divi 5 è pronto per essere utilizzato su nuovi siti Web, ma attendere un po 'prima di migrare quelli esistenti.

Utilizzo di righe nidificate per costruire layout complessi

Divi 4 aveva già tutto il necessario per costruire gallerie di immagini, ma la creazione di layout complessi spesso sembrava goffo. Divi 5 introduce righe nidificate che ti danno un modo più veloce e più pulito per costruire visivamente layout di gallerie avanzate, senza hack.

Iscriviti al nostro canale YouTube

Quali sono le file nidificate?

Le righe nidificate sono una nuova potente funzionalità di layout in Divi 5 che ti consente di posizionare una riga all'interno di un'altra, dandoti un maggiore controllo su come strutturare la tua pagina. Ciò consente di progettare sezioni complesse direttamente all'interno del Visual Builder senza la necessità di scrivere codice o fare affidamento su soluzioni alternative.

Nidificare una riga è come aggiungere un altro modulo. Devi solo passare il mouse sull'elemento in cui si desidera posizionare la riga e fare clic sul pulsante Plus per scegliere una nuova riga. Quindi puoi scegliere tra tutti questi layout di riga, che sono perfetti per varie strutture della galleria.

Questa fila nidificata si comporta esattamente come una fila normale. Puoi scegliere una struttura a colonna, aggiungere moduli e nidificare un'altra riga se necessario, grazie alla sua infinita nidibilità. Puoi anche ridimensionare le colonne trascinando, quindi la regolazione delle larghezze sembra intuitiva e non coinvolge hack matematici o spaziati.

Anche le righe nidificate sono pienamente reattive per impostazione predefinita. Dal costruttore, puoi modificare il layout su vari schermi. Dal momento che fa parte del framework Divi 5, funziona perfettamente con altre funzionalità come i preimpostazioni del gruppo di opzioni e le variabili di design. Condivideremo anche suggerimenti per combinare righe nidificate con le funzionalità avanzate di Divi 5 per ottimizzare il flusso di lavoro di progettazione della galleria.

Impara tutto sulle file nidificate di Divi 5

Cosa rende le file nidificate diverse?

In Divi 4, la costruzione di layout della galleria di immagini personalizzati riguardava in modo creativo l'uso di righe, sezioni speciali e layout per ottenere progetti più avanzati. Ciò significava che sarebbe impegnativo se non avessi il know-how del design. E anche se hai avuto l'esperienza, eri limitato ad alcune strutture di layout.

Le righe nidificate offrono un approccio più intuitivo. Non devi più fare affidamento su righe separate o sezioni speciali. Puoi facilmente nidificare le righe e mescolarle e abbinarle a moduli per creare modelli di progettazione illimitati. Vuoi creare una vetrina di prodotti? Crea una riga a due colonne, aggiungi l'immagine in primo piano a sinistra e la descrizione a destra, nidifica una riga a tre colonne sotto l'immagine a sinistra e aggiungi immagini di supporto. La tua immaginazione è il limite!

6 Layout della galleria di immagini che puoi costruire con righe nidificate

Per darti un'idea di ciò che è possibile, abbiamo creato sei progetti di layout della galleria di immagini con istruzioni su come sono state utilizzate le righe nidificate per progettarle. Andiamo oltre loro.

Layout 1: Galleria CTA in linea

Il layout della griglia a strati utilizza una moderna griglia in stile caricatore che mette in evidenza un progetto con una combinazione di immagini di grandi dimensioni, scatti di supporto e testo accuratamente posizionato. La prima sezione è una riga nidificata a 2 colonne (nidificata in un'altra riga di 2 colonne) con due immagini e la prossima è un'altra grande immagine. Un banner di testo orizzontale rompe la griglia, aggiungendo un contesto e un invito all'azione. La sezione inferiore porta un altro layout a tre colonne per continuare la storia, ma con spazio per una descrizione del testo più lunga.

Questo design è perfetto per portafogli, showcase immobiliari o layout editoriali che richiedono ritmo visivo e gerarchia di contenuti chiari. Funziona magnificamente attraverso le dimensioni dello schermo pur sentendo strutturato e intenzionale.

Come costruirlo

Inizia con una fila a due colonne. Aggiungi un'immagine a destra e nidifica un'altra riga nella colonna sinistra. Aggiungi immagini a tutti. Quindi, un'altra riga nidificata viene posizionata sotto un banner per tenere un paragrafo di testo accanto a un'altra serie di elementi visivi. Ripeti l'intera struttura o apporta alcune modifiche, come mettere la riga di testo sulle immagini nidificate.

Questo layout è unico nel modo in cui le righe nidificate vengono utilizzate all'interno di ciascuna sezione visiva. Le righe nidificate di Divi 5 consentono la flessibilità strutturale, mescolando formati di riga all'interno di una singola colonna e stratificandole in elementi contestuali.

Layout 2: Galleria di messa a fuoco divisa

Un layout a due colonne in cui la colonna sinistra impila un'immagine verticale sopra un breve blocco di testo e la colonna destra presenta una grande immagine seguita da una riga di tre immagini di supporto più piccole. Questa disposizione mette in evidenza un momento visivo principale consentendo spazio sia per il contesto scritto che per una striscia di immagine secondaria all'interno dello stesso layout.

Il layout della galleria di messa a fuoco divisa è perfetto per matrimoni, eventi o gallerie floreali in cui ogni blocco visivo cattura un singolo momento o emozione. Funziona anche bene quando si desidera combinare un'immagine focale audace con le miniature di supporto e una piccola citazione, testimonianza o messaggio introduttivo.

Come costruirlo

Crea una riga a 2 colonne. Nella colonna sinistra, impilare un'immagine verticale in alto e un modulo di testo sotto di essa usando due righe separate. Nella colonna destra, inserire un singolo modulo di immagine nella parte superiore per la foto in primo piano, quindi aggiungere una riga nidificata con tre colonne direttamente sotto di essa per contenere immagini di supporto più piccole.

La chiave è la regolazione dell'imbottitura e l'impostazione della larghezza della grondaia su 1 nella riga nidificata per mantenere tutto stretto e pulito. Più tardi, quando hai aggiunto le immagini, crea un preset di bordo (imposta la larghezza del bordo su 2 e il colore del bordo bianco ) e applicalo a tutti gli elementi.

Layout 3: Galleria Spotlight Project

Questo layout trasforma la tua galleria di immagini in una vetrina di singoli progetti o offerte. Invece di visualizzare basi, ogni elemento ottiene la propria etichetta e invito all'azione, rendendolo ideale per portafogli, ricette, punti salienti del prodotto o casi studio.

Una breve riga a due colonne segue ogni immagine. Il lato sinistro contiene una rapida descrizione o un nome di progetto e il lato destro presenta un pulsante che invita l'utente ad agire, come Order Now . Il layout della Galleria Spotlight del progetto porta più scopo e interazione nella tua galleria.

Come costruirlo

Sotto ogni immagine, abbiamo aggiunto una riga nidificata a due colonne. Abbiamo usato la colonna sinistra per una breve descrizione e la colonna destra per un pulsante di invito all'azione. Quindi abbiamo disegnato il pulsante usando stili globali e abbiamo ripetuto questa struttura per ciascun elemento della galleria per mantenere la coerenza. Per rendere la riga di sovrapporre l'immagine, abbiamo impostato la posizione su Absolute con offset verticale 40px e Z INDICE 1000.

Abbiamo anche aggiunto un preimpostazione ombra a tutte le immagini, che non solo hanno dato alla galleria un look lucido, ma mi ha anche risparmiato tempo permettendomi di applicare il marchio coerente su più moduli in pochi clic.

Layout 4: Galleria di scorrimento di scorrimento

Il layout della Galleria di Scroll rivela è progettato per lo storytelling visivo che si svolge mentre gli utenti scorrono. Ogni sezione presenta un'immagine di grandi dimensioni abbinata a visioni di supporto più piccole (creata tramite più file più file).

È perfetto per le gallerie editoriali, le vetrine delle ricette (evidenziazioni o gli ingredienti) o le pagine del team aziendale che vogliono catturare i momenti di gruppo in modo interattivo. Invece di spettatori schiaccianti, li guida attraverso ogni storia visivamente, un blocco alla volta.

Come costruirlo

La struttura è semplice: creare una riga a due colonne. Aggiungi un modulo di immagine, intestazione, testo e un pulsante a sinistra. A destra, nidifica una nuova riga con due colonne e inserisci i moduli di immagine in ciascuna per supportare la grafica. Quindi, è possibile impilare alternativamente file singole e due colonne per creare una griglia simile a una muratura.

Il giocatore chiave di questo layout è la sezione sinistra, che si attacca. Per rendere la tua sezione in primo piano, è necessario creare un gruppo di moduli e abilitare le impostazioni degli effetti di scorrimento . Fai clic sul tuo gruppo di moduli e vai su Impostazioni> Avanzate> Effetti di scorrimento.

Fai attaccare il gruppo del tuo modulo e imposta il limite appiccicoso inferiore all'area del corpo. Mentre gli utenti scorrono verso il basso, l'immagine in primo piano si attaccherà, mentre le altre immagini continuano a salire.

Layout 5: galleria di prodotti sfalsati

Non tutte le gallerie hanno bisogno di un'immagine focale o di una struttura complessa. A volte, tutto ciò di cui hai bisogno è un insieme di immagini disposte in una struttura sfalsata, ed è qui che brillano le file nidificate.

Questo layout è ideale per i siti di e-commerce o focalizzati sul prodotto in cui si desidera evidenziare una collezione senza renderla come una griglia tipica. Utilizza un sacco di spazio bianco e file nidificate per rompere la monotonia visiva mescolando le file di immagini di una, due e tre colonne all'interno di una singola sezione. Il risultato è un layout ben bilanciato che si sente artigianale e editoriale, perfetto per mostrare dettagli sul prodotto, chiusura dei materiali o articoli complementari.

Funziona particolarmente bene per i marchi con prodotti tattili o di lusso come articoli in pelle, ceramiche o articoli fatti a mano in cui è importante narrare visivo.

Come costruirlo

Crea una riga a due colonne. Aggiungi un layout impilato di immagini usando righe nidificate nella colonna sinistra. Una riga ha due piccole foto fianco a fianco e l'altra ha un'immagine verticale. Nella colonna di destra, nidificare una nuova riga con tre colonne e inserire immagini di prodotti. Sotto questo, posiziona il testo e il pulsante.

Per creare l'effetto della borsette sovrapposti (come nella sezione realizzata a mano) , aggiungi un modulo immagine nella sua riga e usa il posizionamento assoluto (avanzato> posizione> assoluto ). Quindi utilizzare i cursori di offset e l'indice Z per stratificarlo tra le due sezioni. Questo ti consente di creare layout in stile rivista in cui le immagini rompono la griglia per un ulteriore interesse visivo.

Layout 6: Grid del portfolio asimmetrico

Il layout della griglia del portfolio asimmetrico combina narrazione e immagini in un formato pulito in due colonne. Utilizzare la colonna sinistra per introdurre un progetto con un'intestazione, una descrizione breve e CTA. Nella colonna di destra, una riga nidificata a tre colonne si trova sopra una grande immagine in primo piano, offrendo un'opportunità perfetta per mostrare visioni chiave con scatti di supporto.

Questo design è ideale per designer, fotografi o agenzie che presentano casi di studio o portafogli curati. Mantiene l'attenzione focalizzata pur offrendo un ritmo di scorrimento naturale e un flusso per dispositivi mobili.

Come costruirlo

Inizia con una fila a due colonne. Nella colonna sinistra, aggiungi un modulo di testo per il tuo titolo e descrizione, seguito da un modulo pulsante (se si desidera).

Aggiungi una riga nidificata nella colonna di destra. Scegli il layout a tre colonne e impila un altro modulo di immagine. Inserire tre immagini di supporto nella riga nidificata e una grande immagine nel modulo immagine impilato. Usa altre strutture di riga per creare più schemi.

Per mantenere tutto allineato, imposta la larghezza della grondaia su 1 e ritaglia le tue foto su altezze coerenti prima di caricare. Usa un preimpostazione di immagini globali (come un bordo morbido o ombra) e gli effetti del bordo per mantenere le cose interattive ma raffinate.

Noteresti anche un'altra riga nidificata che si sovrappone all'immagine. Abbiamo impostato la posizione in assoluto per creare l'effetto di sovrapposizione .

Suggerimenti migliori per creare gallerie di immagini interattive

Una volta che il layout è in atto, cospargi alcuni dettagli extra per rendere le tue gallerie più lucidate. Ecco come:

1. Crea effetti di mouse

L'aggiunta di effetti hover è uno dei modi più semplici per rendere le gallerie di immagini più dinamiche. Aggiunge l'interattività senza distrarre dal contenuto e aiuta le immagini a sentirsi vive quando gli utenti si impegnano con loro.

In Divi 5, aggiungere effetti a bordo alle tue immagini è facile. Durante la modifica, puoi facilmente passare a moli (e modalità reattive) e personalizzare le tue impostazioni.

Non è necessario passare al mouse per ogni immagine o opzione di impostazione diversa; Cambia una volta, apporta modifiche a tutti gli elementi che si desidera personalizzare e salvare. Abbiamo cambiato il colore del bordo, ma puoi anche provare i filtri, trasformare, aggiungere ombra e più facilmente.

Puoi applicarlo alle singole immagini o salvarlo come preset se vuoi che tutte le tue immagini si comportino allo stesso modo. È un piccolo dettaglio, ma fa sentire la tua galleria ponderata e interattiva e Divi la rende senza sforzo.

2. Usa gli attributi Copia/Incolla per applicare gli stili alle immagini rapidamente

La personalizzazione manuale di ogni immagine in una galleria può richiedere molto tempo, soprattutto quando si applicano stili coerenti come bordi, ombre o effetti hover. Mentre i preset sono ottimi per gli stili globali, potresti non voler creare una nuova preset per ogni adeguamento minore.

Il sistema di gestione degli attributi di Divi 5 offre una soluzione semplificata. Con pochi clic, puoi copiare gli stili da un'immagine e applicarli ad altri. Non è necessario ripetere manualmente lo stesso processo di personalizzazione per ogni immagine. Puoi semplicemente copiare, incollare e mantenere coerenza.

Ad esempio, personalizza un elemento e copia e incolla i suoi attributi agli altri elementi per replicare lo stile.

Divi 5 consente anche un maggiore controllo granulare. Ad esempio, è possibile copiare e incollare gruppi di attributi specifici, come solo le impostazioni di progettazione o solo gli effetti del mouse. Questo rende il tuo flusso di lavoro efficiente e coeso.

3. Usa il morsetto per creare immagini fluide e reattive

In un moderno layout della galleria, le tue immagini non dovrebbero semplicemente scalare ma anche rispondere in modo intelligente alle diverse dimensioni dello schermo. Questo è esattamente ciò che la funzione clump () ti aiuta a raggiungere.

Divi 5 supporta Clamp () e molte altre unità avanzate che consentono di inserire manualmente i valori delle dimensioni ovunque, inclusi larghezza dell'immagine, imbottitura e campi di margine. Clamp () è ideale per la reattività. Ti consente di impostare un valore minimo, ideale e massimo, tutto in una riga.

Ad esempio, un morsetto (1200px, 30vw, 1400px) dice a Divi di non andare mai al di sotto di 1200px, bilanciare fino al 30% della larghezza della vista, ma limitarlo a 1400px.

Ciò è particolarmente utile per strisce di immagine o layout sfalsati in cui si desidera una griglia più fluida senza punti di interruzione. Se combinato con righe nidificate, il clamp () aiuta ogni blocco ad adattarsi naturalmente senza bisogno di regolazioni mobili separate.

4. Anteprima e modifica per diversi dispositivi

Una volta che il layout ha un bell'aspetto su desktop, è facile da perfezionare per tablet e dispositivi mobili utilizzando gli strumenti di editing reattivo integrati di Divi. Attiva alterni tra le viste del dispositivo e regola le impostazioni come dimensione dell'immagine, spaziatura e allineamento di testo per ogni schermata.

Ad esempio, potresti voler ridurre l'imbottitura tra le righe su colonne mobili o stack in modo diverso per una migliore esperienza di scorrimento. Prendere qualche minuto per regolare queste impostazioni può far sentire la tua galleria pulita e professionale su ogni schermo.

Scarica i layout della galleria gratuitamente

Vuoi iniziare a utilizzare i layout della galleria all'interno di Divi 5? Iscriviti di seguito per ottenere l'accesso ai file JSON. Puoi caricarli nella tua libreria Divi e importarli in seguito alle tue pagine.

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 gallerie di immagini nidificate (e altro) con Divi 5

Le righe nidificate di Divi 5 semplificano i layout complessi consentendo di posizionare le righe all'interno delle righe. Offrono anche il nido infinito e il controllo preciso sui tuoi progetti.

Le righe nidificate sono solo una delle caratteristiche esclusive di Divi 5. Fai attenzione al nuovo sistema di layout basato su Flexbox di Divi, che introduce anche una vasta gamma di nuovi modelli di riga e controlli Flexbox per offrirti tutti gli strumenti e la semplicità per elaborare qualsiasi layout che puoi immaginare.

Mentre continuiamo a migliorare Divi 5, puoi aspettarti ancora più funzionalità che migliorano le tue capacità di progettazione e semplificano il flusso di lavoro.

Se hai costruito gallerie nel modo più duro, ora è il momento perfetto per provare Divi 5 e sperimentare come le righe nidificate e gli strumenti di layout visivo possono semplificare tutto.

Divi 5 è pronto per essere utilizzato su nuovi siti Web, ma attendere un po 'prima di migrare quelli esistenti.