Come dividere a ventaglio le immagini su Scroll per promuovere una galleria di immagini in Divi
Pubblicato: 2020-05-08Sapere come distribuire a ventaglio le immagini con gli effetti di scorrimento di Divi può essere un elemento di design sottile e impressionante per aiutare a promuovere una galleria di immagini su una pagina di destinazione. L'idea è di coinvolgere gli utenti mentre scorrono verso il basso la pagina allargando le immagini come una mano di carte da gioco.
In questo tutorial, creeremo un layout di sezione pulito per promuovere una galleria di immagini che include una raccolta di immagini che si aprono a ventaglio sullo scorrimento. Puoi utilizzare tutte le immagini che desideri con questo design e sarebbe una bella aggiunta a qualsiasi pagina di destinazione.
Sbirciata
Ecco una rapida occhiata al design che costruiremo in questo tutorial.
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.
Parte 1: Creazione del layout e contenuto fittizio
Per questa prima parte del tutorial, costruiremo il layout della sezione con una riga a due colonne che ha un titolo e un pulsante nella colonna di sinistra. Nella seconda parte, aggiungeremo le immagini a ventaglio nella colonna di destra.
Impostazioni della sezione
Prima di aggiungere qualsiasi cosa al layout, aggiorna le impostazioni per la sezione predefinita come segue:
- Imbottitura: 10vw superiore, 10vw inferiore
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
Aggiunta della riga
Quindi, aggiungi una nuova riga con una struttura di colonne per due terzi e un terzo.
Impostazioni riga
Quindi aggiorna le impostazioni della riga con un'immagine di sfondo personalizzata. Sto usando uno dal layout predefinito della pagina di destinazione del negozio di cancelleria. Dopo quell'aggiornamento quanto segue:
- Dimensione dell'immagine di sfondo: dimensione reale
- Posizione immagine di sfondo: in alto a sinistra
- Larghezza massima: 900 px
Aggiunta del modulo di testo per creare il titolo
Una volta che la riga è pronta, aggiungi un nuovo modulo di testo alla colonna 1 per creare il titolo.
Contenuto del testo
Aggiungi la seguente intestazione H1 al contenuto del corpo:
<h1>Our Gallery</h1>
Impostazioni testo
Quindi aggiorna le impostazioni del testo come segue:
- Carattere dell'intestazione: Bellefair
- Allineamento del testo dell'intestazione (tablet e telefono): a destra
- Dimensione del testo dell'intestazione: 150 px (desktop e tablet), 110 px (telefono)
Aggiunta del pulsante
Sotto il modulo di testo, aggiungi un nuovo modulo pulsante.
Testo del pulsante
Aggiorna il testo del pulsante con "Visualizza galleria".
Impostazioni dei pulsanti
Nella scheda Progettazione, aggiorna quanto segue:
- Allineamento (tablet e telefono): a destra
- Dimensione del testo del pulsante: 14px
- Colore del testo del pulsante: #ffffff
- Colore di sfondo del pulsante: #121212
- Larghezza bordo pulsante: 0px
- Spaziatura delle lettere dei pulsanti: 3px
- Carattere pulsante: Montserrat
- Stile carattere pulsante: TT
- Margine: 7vw in alto
Parte 2: Creazione delle immagini con l'effetto di scorrimento a ventaglio
In questa seconda parte del tutorial, creeremo le immagini con l'effetto di scorrimento a ventaglio. Inizieremo con l'immagine centrale. Sto usando le immagini dal layout predefinito della pagina della galleria di moda. Dovrebbero essere tutti della stessa dimensione per un design coerente. Quelli che sto usando sono 400px per 600px.
Creare l'immagine centrale
Aggiungi un nuovo modulo immagine alla colonna di destra.
Quindi carica un'immagine nel modulo.
Impostazioni immagine
Aggiorna la larghezza massima e il margine per i display mobili come segue:
- Larghezza massima (tablet e telefono): 200 px
- Margine (tablet e telefono): 0px sinistro
Creare l'immagine in mezzo a destra
Per creare la seconda immagine (o l'immagine in mezzo a destra), duplica il primo modulo immagine.
Impostazioni immagine
Quindi apri le impostazioni per il modulo immagine duplicata e aggiorna quanto segue:
Posizione
- Posizione: Assoluta
Trasforma origine
- Trasforma Origine: in basso al centro
Effetti di scorrimento
In Movimento orizzontale, aggiorna quanto segue:
- Abilita movimento orizzontale: S
- Scostamento iniziale: 0 (al 20%)
- Scostamento medio: 0,5 (al 50%)
- Scostamento finale: 0,5 (al 100%)
In Rotazione, aggiorna quanto segue:
- Abilita rotazione: SI
- Rotazione iniziale: 0 gradi (al 20%)
- Rotazione media: 20 gradi (al 50%)
- Rotazione finale: 20 gradi (al 100%)
Creare l'immagine giusta
Per creare la terza immagine che si aprirà a ventaglio all'estrema destra, duplica la seconda immagine che abbiamo creato.
Aggiorna effetti di scorrimento
In Movimento orizzontale, aggiorna quanto segue:
- Compensazione media: 1
- Scostamento finale: 1
In Rotazione, aggiorna quanto segue:
- Rotazione media: 40 gradi
- Rotazione finale: 40 gradi
Se non l'hai notato, stiamo essenzialmente aumentando l'offset orizzontale di 0,5 incrementi e l'offset rotante di incrementi di 20 gradi con ciascuna immagine. Questo creerà una spaziatura uguale tra le immagini. E poiché l'animazione dell'effetto di scorrimento si basa sull'origine della trasformazione in basso al centro, darà l'impressione che le immagini si stiano allargando a ventaglio come una mano di carte da gioco.
Etichetta le immagini nella casella dei livelli
Prima di creare le ultime due immagini, aggiorniamo le etichette delle immagini correnti in modo da non confonderci.
Creazione dell'immagine in mezzo a sinistra
Per creare l'immagine al centro a sinistra, possiamo duplicare l'immagine al centro a destra.
Quindi trascinalo sopra l'immagine centrale nella parte superiore della colonna.
Puoi anche aggiornare l'etichetta dell'immagine.
Aggiorna effetti di scorrimento
Apri le impostazioni per l'immagine in mezzo a sinistra e aggiorna i seguenti effetti di scorrimento:
Sotto movimento orizzontale...
- Compensazione media: -0,5
- Scostamento finale: -0,5
NOTA: Tutto ciò che stiamo facendo è cambiare il valore di offset su un valore negativo.
In Rotazione...
- Rotazione media: -20 gradi
- Rotazione finale: -20 gradi
Creazione dell'immagine a sinistra
Infine, creiamo l'immagine sinistra finale duplicando l'immagine destra e trascinandola nella parte superiore della colonna.
Puoi anche aggiornare l'etichetta.
Aggiorna effetti di scorrimento
Apri le impostazioni per l'immagine a sinistra e aggiorna gli effetti di scorrimento:
In movimento orizzontale:
- Compensazione media: -1
- Scostamento finale: -1
In Rotazione...
- Rotazione media: -40 gradi
- Rotazione finale: -40 gradi
Indice Z della colonna 1
In questo momento le immagini nella colonna a si sovrapporranno al contenuto nella colonna 1. Per cambiarlo, apri le impostazioni per la colonna 1 e aggiorna l'indice z come segue:
- Indice Z: 10
Aggiunta di nuove immagini e filtri
Ora, tutto ciò che dobbiamo fare è aggiornare ciascuna delle immagini con altre nuove/diverse.
Per un effetto unico, aggiungi i seguenti filtri a tutte le immagini (usando la selezione multipla) tranne l'immagine a destra.
- Saturazione: 20%
- Opacità: 85%
Risultato
Ecco il risultato fino ad ora...
Rotazione della colonna
Per cambiare un po' il design, possiamo ruotare la raccolta di immagini ruotando la colonna principale.
Per fare ciò, apri le impostazioni per la colonna 2 e aggiungi la seguente opzione di trasformazione:
- Trasforma Ruota asse Z: 40 gradi
Risultato finale
Questo è il risultato finale.
Desktop
Tavoletta
Telefono
Pensieri finali
In questo tutorial, abbiamo imparato a dividere le immagini usando gli effetti di scorrimento di Divi, ma non devi fermarti qui! Puoi facilmente usare questa stessa tecnica per distribuire a ventaglio qualsiasi raccolta di moduli (sto pensando ai blurbs). Ho limitato la distanza di offset con gli effetti di scorrimento di ogni immagine in modo che il design non sia realmente funzionale (cioè non puoi davvero vedere ogni immagine nella sua interezza). Tuttavia, se lo desideri, puoi aumentare gli offset per rendere le immagini più visibili.
Non vedo l'ora di sentirti nei commenti.
Saluti!