Come creare un collage di immagini interattivo utilizzando le opzioni di posizione di Divi

Le nuove opzioni di posizione di Divi aprono la porta alla creazione di layout di collage di immagini unici utilizzando la proprietà di posizione assoluta. Ciò ti consente di effettuare posizionamenti più precisi per ogni elemento del tuo design. E una volta che lo combini con le innumerevoli combinazioni di impostazioni di design all'interno di Divi, puoi progettare dei collage di immagini piuttosto sorprendenti.

In questo tutorial, ti mostrerò come utilizzare le opzioni di posizione integrate di Divi per creare un bellissimo collage di immagini interattivo per il tuo sito Web Divi in ​​pochi minuti.

Iniziamo!

Sbirciata

Ecco una rapida occhiata al layout del collage di immagini interattivo che creeremo in questo tutorial.

Scarica il layout GRATUITAMENTE

Per mettere le mani sul layout del collage di immagini 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 i file

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.

SCARICA

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 nella tua pagina, estrai semplicemente il file zip e trascina il file JSON nel Divi Builder.

Passiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea da zero".

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Creazione del collage di immagini interattivo con le opzioni di posizione di Divi

Ottimizzazione della riga e della colonna

Per iniziare, crea una riga a una colonna.

Impostazioni riga

Successivamente, dobbiamo aggiornare la riga in modo che non ci sia spazio extra tra i moduli (tramite la larghezza della grondaia) in modo da impostare la larghezza della grondaia su 1. Dobbiamo anche assicurarci che la riga occupi l'intera larghezza della finestra del browser quindi possiamo sfruttare le unità di lunghezza vw per posizionare le nostre immagini (l'unità di lunghezza vw (larghezza della finestra) è correlata alla larghezza della finestra del browser). Con la larghezza impostata su 100%, possiamo utilizzare le unità di lunghezza vw per posizionare le nostre immagini all'interno della riga/colonna in modo che la posizione rimanga intatta su tutte le larghezze del browser per un design reattivo senza interruzioni. E per nascondere qualsiasi overflow di immagine al di fuori della riga, dobbiamo impostare l'overflow su nascosto.

Per fare ciò, ottimizza le impostazioni della riga come segue:

Impostazione dell'altezza della colonna

Per impostazione predefinita, l'altezza della colonna è determinata dall'altezza del contenuto (o dei moduli Divi) che contiene. I moduli Divi (come tutti i div in HTML) avranno una posizione statica per impostazione predefinita, il che significa che aggiungeranno spazio/altezza effettivi alla colonna padre perché è posizionata nel flusso normale della pagina. Tuttavia, i moduli Divi che hanno una posizione assoluta, escono dal flusso normale e non creeranno spazio/altezza effettivi per la colonna. Per questo motivo, dobbiamo aggiungere un'altezza specifica per la colonna in modo da poter posizionare le immagini all'interno di uno spazio predeterminato.

Per fare ciò, apri le impostazioni della riga e aggiorna le impostazioni della colonna aggiungendo il seguente CSS personalizzato all'elemento principale.

height: 40vw;

Nella scheda del telefono, ripristina l'altezza al suo stato predefinito poiché stiamo anche riportando le immagini in una posizione statica sul telefono. Aggiungi il seguente CSS personalizzato alla scheda del telefono:

height: auto !important;

Aggiunta del testo del titolo

Con l'altezza della colonna impostata, possiamo iniziare ad aggiungere i nostri elementi posizionati assoluti alla colonna. Iniziamo aggiungendo un modulo di testo per il titolo del nostro layout di collage di immagini.

Contenuto del modulo di testo

Quindi aggiorna il testo con il seguente contenuto:

<h2>Recent Work</h2>

Impostazioni del modulo di testo

Quindi aggiorna le impostazioni del modulo di testo come segue:

• Intestazione 2 Font: Limelight
• Intestazione 2 Allineamento del testo: centro
• Colore testo titolo 2: #24005b
• Titolo 2: Dimensione testo: 5vw (desktop e tablet), 50px (telefono)
• Larghezza: 100%
• Larghezza massima: 35vw (desktop e tablet), 100% (telefono)
• Posizione: assoluta (desktop), predefinita (telefono)
• Offset orizzontale (desktop): 35vw

Creazione e posizionamento delle immagini

Ora che il titolo è a posto, creiamo la prima immagine per il nostro collage di immagini interattivo. L'idea è di creare il primo con tutte le ottimizzazioni in atto in modo da poterlo duplicare per semplificare la creazione e posizionare il resto delle immagini per il collage.

Ottimizzazione della prima immagine con effetti al passaggio del mouse, lightbox e posizionamento assoluto.

Innanzitutto, aggiungi un modulo immagine sotto il modulo testo.

Quindi carica un'immagine nel modulo e scegli l'opzione per aprire l'immagine in un lightbox. Ora l'immagine verrà mostrata in una lightbox al clic.

Ridimensiona l'immagine al passaggio del mouse

Oltre all'interazione lightbox, aggiungi un effetto al passaggio del mouse che ingrandisce leggermente l'immagine. Per fare ciò, aggiorna la seguente opzione di trasformazione:

• Scala di trasformazione (hover): 115%

Posizionamento assoluto con priorità Z Index su Hover

Per posizionare la nostra immagine, utilizzeremo una posizione assoluta con unità di lunghezza vw. Aggiorna le opzioni di posizione come segue:

Su desktop (e tablet)

• Posizione: assoluta
• Posizione: in alto a sinistra
• Offset verticale: 5vw
• Offset orizzontale: -2vw

Al telefono

• Posizione: predefinita

Al passaggio del mouse

• Indice Z: 2

Progettazione dell'immagine e impostazioni reattive

Quindi aggiorna quanto segue:

• Allineamento immagine: sinistra (desktop), centro (telefono)
• Larghezza: 75% (telefono)
• Larghezza massima: 20vw (desktop e tablet), 100% (telefono)
• Margine (telefono): 30px in basso
• Box Shadow: vedi screenshot
• Saturazione: 0% (desktop), 100% (hover)

Utilizzo della prima immagine come modello per creare e posizionare rapidamente le altre immagini

Una volta completata la prima immagine, è davvero facile creare nuove immagini per costruire il collage di immagini interattivo. È anche un potente strumento di progettazione perché sarai in grado di trascinare le immagini sul posto e regolare le dimensioni mentre visualizzi il progetto in tempo reale.

Ecco il processo...

1. Duplica l'immagine facendo clic sull'icona duplicata. L'immagine duplicata verrà posizionata assolutamente nello stesso punto direttamente sopra l'immagine che stai duplicando.
2. Trascina l'immagine in posizione. Poiché l'immagine duplicata eredita l'unità di lunghezza vw dell'immagine precedente, è possibile utilizzare l'icona di trascinamento per posizionare l'immagine esattamente dove si desidera all'interno della riga.
3. Aggiorna l'immagine con una nuova.
4. Regola la dimensione dell'immagine utilizzando le opzioni di dimensione integrate.

Ecco un'illustrazione di come sarebbe quando si crea la seconda immagine.

La parte interessante di questo processo è che la posizione (offset verticale e orizzontale) verrà determinata ogni volta che trascini l'immagine in posizione. Non è necessario aggiornare manualmente le posizioni di offset nelle impostazioni.

Ma, così puoi vedere gli offset che ho usato per questo esempio, li includerò per ogni immagine qui sotto insieme alle regolazioni delle dimensioni.

Aggiornamenti immagine n. 2

• Offset verticale: 10.06 vw
• Offset orizzontale: 16,51 vw
• Larghezza massima: 18 vw

Aggiornamenti immagine #3

• Offset verticale: 24,25 vw
• Offset orizzontale: 7,13 vw
• Larghezza massima: 20vw

Aggiornamenti immagine #4

• Offset verticale: 17,69 vw
• Offset orizzontale: 31,91 vw
• Larghezza massima: 18vw

Aggiornamenti immagine #5

• Offset verticale: 12vw
• Offset orizzontale: 46,82 vw
• Larghezza massima: 15vw

Aggiornamenti immagine n. 6

• Offset verticale: 19,13 vw
• Offset orizzontale: 58,84 vw
• Larghezza massima: 12vw

Aggiornamenti immagine n. 7

• Offset verticale: 28,24 vw
• Offset orizzontale: 54,2 vw
• Larghezza massima: 10vw

Aggiornamenti immagine #8

• Offset verticale: 32,5 vw
• Offset orizzontale: 74.04vw
• Larghezza massima: 8vw

Aggiornamenti immagine #9

• Offset verticale: 1.01vw
• Offset orizzontale: 75,5 vw
• Larghezza: 27vw
• Larghezza massima: 27vw

Aggiungi immagine di sfondo

Per un tocco finale, aggiungi un'immagine di sfondo alla sezione e il gioco è fatto!

Risultato finale

Ecco come apparirà la galleria di immagini interattiva su desktop e tablet. Nota gli effetti al passaggio del mouse che portano l'immagine in primo piano, mostrano la versione a colori dell'immagine e ingrandiscono l'immagine. Quindi puoi fare clic sull'immagine per mostrare l'effetto lightbox.

Ecco il design sul display del telefono.

Modifica del punto di posizione per le immagini per diversi progetti di layout

Poiché gli offset per ciascuna delle immagini sono relativi al punto di posizione, possiamo cambiare il punto di posizione originale per le immagini per vedere il nostro design proveniente da direzioni diverse in pochi secondi.

Per fare ciò, usa la funzione di selezione multipla di Divi per selezionare tutti i moduli immagine. Quindi apri una delle impostazioni del modulo immagine per visualizzare le impostazioni modali dell'elemento.

Quindi puoi modificare la posizione di ciascuno dei quattro angoli per diverse strutture del layout.

Posizione nell'angolo in alto a destra

Posizione angolo in basso a sinistra

Posizione angolo in basso a destra

Pensieri finali

Le nuove opzioni di posizione di Divi sono sia potenti che convenienti. E come abbiamo sperimentato in questo tutorial, ci forniscono alcuni meravigliosi strumenti di progettazione per la progettazione di layout unici per le nostre immagini. Si spera che questo collage di immagini interattivo serva da ispirazione per il tuo prossimo progetto.

Non vedo l'ora di sentirti nei commenti.

Saluti!