Come utilizzare le opzioni di posizione di Divi per creare pacchetti di immagini
Pubblicato: 2020-06-18Che tu stia cercando un nuovo look per una galleria di immagini o desideri semplicemente un bel display per le immagini dei prodotti, questo tutorial dovrebbe aiutarti. Normalmente, quando aggiungiamo immagini a un sito Web Divi, possiamo limitare il design a un'immagine per colonna. Sebbene questo sia tradizionalmente un design sicuro e pulito, potresti scoprire che il raggruppamento di immagini all'interno della stessa colonna può creare bellissimi design di bundle di immagini che sembrano fantastici in layout a colonna singola o multipla.
In questo tutorial, ti mostreremo come utilizzare le opzioni di posizione integrate di Divi per progettare 3 pacchetti di immagini creative che puoi utilizzare per il tuo sito Web in tutti i modi.
Iniziamo.
Sbirciata
Ecco una rapida occhiata ai design che costruiremo in questo tutorial.
Design del pacchetto di immagini n. 1
Inizia a costruire il design n. 1
Design del pacchetto di immagini n. 2
Inizia a costruire il design #2
Design del pacchetto di immagini n. 3
Inizia a costruire il progetto n. 3
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.
Fare clic sul pulsante Importa.
Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Progettazione del pacchetto di immagini n. 1
Per questo primo progetto di bundle di immagini, posizioneremo due immagini (leggermente ruotate) su ciascun lato di un'immagine centrale.
Inizia aggiungendo una riga di una colonna a una sezione normale.
Aggiungi immagine centrale
All'interno della colonna, aggiungi un modulo immagine.
Quindi carica un'immagine nel modulo.
Per queste immagini, utilizzeremo gli screenshot del Fitness Coach Layout Pack. Ciascuno di essi dovrebbe essere 880 px per 1200 px.
Apri le impostazioni dell'immagine e aggiorna quanto segue:
- Larghezza: 50%
- Allineamento del modulo: centro
Aggiungi un'ombra di scatola come segue:
- box Shadow: vedi screenshot
- Posizione verticale dell'ombra del riquadro: 0px
- Forza sfocatura dell'ombra della scatola: 38 px
- Forza di diffusione dell'ombra della scatola: 5px
- Colore ombra: rgba(0,0,0,0.2)
Quindi imposta l'indice Z su 1 in modo che rimanga al di sopra delle altre immagini nel pacchetto.
- Indice Z: 1
Aggiungi immagine a sinistra
Per creare l'immagine a sinistra nel pacchetto, aggiungi una nuova immagine sotto l'immagine centrale.
Aggiorna l'immagine con una nuova (assicurati che abbiano tutte le stesse dimensioni per ottenere i migliori risultati).
Nella scheda Design, aggiorna la larghezza come segue:
- larghezza: 30%
Quindi aggiungi l'ombra della scatola come segue:
- Box Shadow: vedi screenshot
- Colore ombra: rgba(0,0,0,0.2)
Quindi, dai all'immagine una posizione assoluta nella posizione centrale sinistra in modo che si trovi adiacente all'immagine centrale sul lato sinistro.
- posizione: assoluta
- Posizione: centro sinistra
Per dare all'immagine una piccola rotazione, aggiorna l'opzione di rotazione della trasformazione come segue:
Trasforma Ruota asse Z: -10 gradi
Aggiungi l'immagine giusta
Per creare l'immagine giusta, apri la casella Livelli e duplica l'immagine sinistra.
Etichetta i moduli immagine (immagine sinistra, immagine destra, ecc.) in modo da poterli identificare facilmente in seguito. Quindi apri le impostazioni per l'immagine duplicata e regola la posizione come segue:
- posizione: centro destra
Quindi regolare l'opzione di rotazione della trasformazione come segue:
- Trasforma Ruota Indice Z: 10deg
Non dimenticare di scambiare l'immagine duplicata con una nuova.
Ora controlla il risultato finora.
Aggiunta di un pacchetto di immagini a più colonne
Poiché le immagini sono posizionate all'interno di una colonna, puoi facilmente aggiungere questo design di bundle di immagini a più layout di colonne.
Per aggiungere il gruppo di immagini a più colonne, duplica la riga contenente il gruppo di immagini corrente.
Nella riga duplicata, duplica la colonna per creare un'altra colonna con il pacchetto di immagini incluso. Questo creerà i bundle di immagini in un layout a due colonne.
Per creare una riga di tre gruppi di immagini, duplica la riga a due colonne, quindi duplica una delle colonne nella riga duplicata. Questo ti darà un layout a tre colonne.
Risultato finale
Ecco il design finale per il pacchetto di immagini n. 1.
Progettazione del pacchetto di immagini n. 2
Questo prossimo design presenta un pacchetto di immagini con cinque immagini: un'immagine al centro e quattro su ciascun angolo della colonna.
Per iniziare, crea una nuova sezione regolare con una riga di un quarto e mezzo quarto di colonna.
Aggiungi immagine centrale
Nella colonna centrale, aggiungi un modulo immagine.
Quindi carica un'immagine nel modulo. Utilizziamo immagini dal pacchetto di layout del negozio di mobili (ognuna da 800 pixel per 1200).
Nella scheda Progettazione, aggiorna quanto segue:
- Colore di sfondo: #f7f3ec
- Larghezza: 55%
- Allineamento del modulo: centro
- Margine: 0px
- Imbottitura: 5% sopra, 5% sotto, 5% sinistra, 5% destra
Nella scheda Avanzate, aumenta l'Indice Z di 1 per assicurarti che l'immagine rimanga sopra le altre immagini nello spazio Z.
- Indice Z: 1
Aggiungi immagine in alto a sinistra
Per aggiungere l'immagine in alto a sinistra, aggiungi un nuovo modulo immagine sotto l'immagine centrale nella colonna centrale.
Carica una nuova immagine nel modulo.
Quindi aggiorna le impostazioni di progettazione come segue:
- Larghezza: 40%
- Margine: 0px in basso
Spaziatura delle colonne
L'altezza della colonna è determinata dall'altezza dell'immagine centrale e dalla quantità di riempimento superiore e inferiore che aggiungiamo. Quindi, per dare alle nostre immagini posizionate in modo assoluto la spaziatura corretta, dobbiamo aumentare l'altezza della colonna aumentando l'imbottitura superiore e inferiore.
- Imbottitura (desktop): 12% in alto, 12% in basso
- Imbottitura (tablet): 24% in alto, 24% in basso
Quindi, dai all'immagine in alto a sinistra una posizione assoluta come segue:
- Posizione: Assoluta
- Posizione: in alto a sinistra
Aggiungi immagine in alto a destra
Ora che l'immagine in alto a sinistra è a posto, duplica l'immagine per creare l'immagine in alto a destra.
(A questo punto, è una buona idea aggiungere etichette a ciascuna delle immagini per una facile identificazione in seguito.)
Apri l'immagine duplicata (in alto a destra) e aggiorna la posizione della posizione assoluta:
- Posizione: in alto a destra
Aggiungi immagine in basso a sinistra
Per creare l'immagine in basso a sinistra, duplica l'immagine in alto a destra e aggiorna le etichette secondo necessità.
Apri le impostazioni per l'immagine duplicata (in basso a sinistra) e aggiorna la posizione della posizione assoluta:
- Posizione: in basso a sinistra
Aggiungi immagine in basso a destra
Per creare l'immagine in basso a destra, duplica l'immagine in basso a sinistra e aggiorna l'etichetta secondo necessità. Quindi aggiorna l'immagine e assegnale una nuova posizione:
- Posizione: in basso a destra
Aggiungi l'accento del design dell'ombra della scatola
Per aggiungere un bel tocco di design, possiamo aggiungere un'ombra di scatola all'immagine in alto a sinistra come segue:
- Box Shadow: vedi screenshot
- Posizione orizzontale dell'ombra del riquadro: -170 px
- Posizione verticale dell'ombra del riquadro: 170 px
- Colore dell'ombra: rgba (36,57,74,0,07)
Aggiungi un accento di design box-shadow gratuito all'immagine in alto a destra come segue:
- Box Shadow: vedi screenshot
- Posizione orizzontale dell'ombra del riquadro: 170 px
- Posizione verticale dell'ombra del riquadro: 170 px
- Colore dell'ombra: rgba (36,57,74,0,07)
Aggiungi testo alla colonna sinistra
Per aggiungere del testo al disegno, aggiungi un nuovo modulo di testo alla colonna di sinistra.
Contenuto
Quindi aggiorna il contenuto con quanto segue:
<h2>Image Bundle</h2>
Progettazione del testo
Nella scheda Progettazione, aggiorna quanto segue:
- Intestazione 2 Carattere: Montserrat
- Stile carattere titolo 2: TT
- Intestazione 2 Allineamento del testo: a destra
- Colore testo titolo 2: #24394a
- Intestazione 2 Dimensioni del testo: 34 px
- Intestazione 2 Spaziatura lettere: 4px
- Altezza riga intestazione 2: 1,3 em
Imbottitura colonna sinistra
Per ridurre un po' il testo, apri le impostazioni per la colonna di sinistra e aggiorna il seguente riempimento:
- Imbottitura: 20% rimasto
Aggiungi testo alla colonna di destra
Per creare il testo della colonna di destra, copia il modulo di testo nella colonna di sinistra e incollalo nella colonna di destra. Quindi apri le impostazioni del testo e aggiorna quanto segue:
- Intestazione 2 Allineamento del testo: a sinistra
Imbottitura colonna destra
Proprio come abbiamo fatto per la colonna di sinistra, aggiungi il seguente riempimento alla colonna di destra (colonna 3) per far cadere il modulo di testo.
- Imbottitura: 33% superiore
Sfondo della sezione
Per completare il disegno, apri le impostazioni della sezione e aggiungi il seguente colore di sfondo:
- Colore di sfondo: #f7f3ec
Ecco il risultato finora. 
Aggiunta di un pacchetto di immagini a più colonne
Per aggiungere questo gruppo di immagini a più colonne, duplica la riga e quindi elimina le colonne sinistra e destra nella riga duplicata, lasciando solo la colonna con il gruppo di immagini.
Utilizzando la selezione multipla, seleziona l'immagine in alto a sinistra e l'immagine in alto a destra. Apri le impostazioni ed elimina l'ombra della scatola.
Quindi duplica la colonna una o due volte per creare più colonne con i gruppi di immagini inclusi.
Se stai creando un layout a tre colonne per il tuo pacchetto di immagini, apri le impostazioni di colonna per ciascuna colonna e aggiorna il riempimento come segue:
- imbottitura: 8% sopra, 8% sotto
Risultato finale
Questo è il risultato finale.
Ed eccolo sul cellulare.
Design del pacchetto di immagini n. 3
Per quest'ultimo progetto di bundle di immagini, posizioneremo 5 immagini fianco a fianco con una sottile rotazione 3D per creare un bel display per cose come temi per bambini o pacchetti di layout.
Aggiungi riga
Per iniziare, aggiungi una riga a una colonna a una sezione normale.
Aggiungi immagine centrale
All'interno della riga, aggiungi un modulo immagine.
Quindi carica un'immagine nel modulo immagine. Utilizziamo gli stessi screenshot di 880 x 1200 pixel del Fitness Coach Layout Pack che abbiamo usato per il design n.
Nella scheda Design, aggiorna le opzioni di dimensionamento come segue:
- Larghezza: 30%
- Allineamento del modulo: centro
Quindi dai all'immagine una sottile ombra di scatola:
- Box Shadow: vedi screenshot
- Posizione verticale dell'ombra del riquadro: -12px
- Forza sfocatura ombra scatola: 28 px
- Colore ombra: rgba(0,0,0,0.11)
Quindi, elimina il margine inferiore predefinito impostandolo su 0px.
- Margine: 0px in basso
Per assicurarti che l'immagine rimanga al di sopra delle altre immagini quando si sovrappongono, regola l'Indice Z.
- Indice Z: 2
Aggiungi prospettiva colonna
Prima di aggiungere il resto delle immagini al pacchetto di immagini, dobbiamo aggiungere CSS personalizzato alla colonna che aggiungerà prospettiva alle immagini quando le ruoti usando le opzioni di trasformazione. Questo crea un effetto 3D realistico.
Aggiungi immagine in mezzo a sinistra
Ora che abbiamo la nostra prospettiva a posto, possiamo iniziare ad aggiungere le altre immagini.
Per creare l'immagine al centro a sinistra, duplica l'immagine al centro.
Aggiorna le etichette dell'immagine nella casella Livelli secondo necessità, quindi aggiorna il modulo immagine duplicata con una nuova immagine.
Apri le impostazioni per l'immagine e aggiorna la posizione della posizione assoluta e l'indice Z come segue:
- Posizione: in basso a sinistra
- Indice Z: 1
Quindi aggiungi le seguenti opzioni di trasformazione per posizionare e ruotare l'immagine.
- Trasforma Trasla asse X: 75%
- Trasforma Ruota asse X: 30 gradi
Aggiungi immagine a sinistra
Per creare l'immagine a sinistra, duplica l'immagine in mezzo a sinistra che abbiamo appena creato.
Apri le impostazioni per la nuova immagine e aggiorna la larghezza:
- Larghezza: 20%
Quindi regolare l'opzione di conversione di trasformazione come segue:
- Trasforma Traduci asse X: 0px
Quindi regolare l'indice Z in modo che l'immagine rimanga dietro l'immagine al centro a sinistra.
- Indice Z: 0
Aggiungi immagine al centro a destra
Successivamente, aggiungeremo un'immagine in mezzo a destra al pacchetto di immagini.
Per creare l'immagine, apri il popup Livelli. Quindi duplica l'immagine al centro a sinistra, trascina l'immagine duplicata sotto l'immagine a sinistra, quindi etichettala di conseguenza (es. "immagine a metà destra").
Apri le impostazioni per l'immagine in centro a destra e modifica la posizione della posizione assoluta come segue:
- Posizione: in basso a destra
Quindi regolare le opzioni di trasformazione come segue:
- Trasforma Trasla asse X: -75%
- Trasforma Ruota Asse X: -30deg
Aggiungi immagine a destra
Per creare l'immagine di destra (l'ultima), possiamo duplicare l'immagine di sinistra. Quindi trascina l'immagine duplicata sotto l'immagine al centro a destra ed etichettala come "immagine giusta".
Apri le impostazioni dell'immagine corrette e aggiorna la posizione della posizione assoluta come segue:
- Posizione: in basso a destra
Quindi, regola la rotazione della trasformazione.
- Trasforma Ruota Asse X: -30deg
Controlla il risultato finora.
Ed ecco lo stesso pacchetto di immagini aggiunto a più colonne.
Pensieri finali
Una volta compreso come funziona l'opzione di posizione assoluta di Divi, possiamo usarla per creare dei fantastici progetti di bundle di immagini. La parte migliore di questi bundle di immagini è che esistono all'interno di una singola colonna in modo che abbiano un bell'aspetto su più colonne e si ridimensionino perfettamente anche sui dispositivi mobili.
Spero che questo ti dia un po' di ispirazione per creare fantastici display di immagini per il tuo prossimo progetto.
Non vedo l'ora di sentirti nei commenti.
Saluti!