Come creare un mockup di galleria di scorrimento con le nuove opzioni di overflow di Divi

Cerchi un modo creativo per visualizzare le immagini sul tuo sito web? Assicurati di continuare a leggere perché, in questo post, ti mostreremo come creare un mockup di una galleria di scorrimento utilizzando solo le opzioni integrate di Divi. Concretamente, trasformeremo una sezione in un mockup e tutte le righe della sezione faranno parte del mockup. Una volta ottenuta la tecnica, sarai in grado di presentare qualsiasi tipo di contenuto desideri in un mockup mobile e aggiungere interazione alle tue pagine in pochissimo tempo.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il design del mockup della galleria di scorrimento

Per mettere le mani sul design del mockup della galleria a scorrimento gratuito, devi 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!

Iniziamo a ricreare!

Iscriviti al nostro canale Youtube

Aggiungi nuova sezione

Dimensionamento

Inizia creando una nuova pagina o aprendone una esistente e aggiungi una sezione normale. Apri le impostazioni della sezione e modifica la larghezza e la larghezza massima nelle impostazioni di dimensionamento.

• Larghezza: 25vw (desktop), 60vw (tablet), 80vw (telefono)
• Larghezza massima: 25vw (desktop), 60vw (tablet), 80vw (telefono)

Spaziatura

Quindi, vai alle impostazioni di spaziatura, rimuovi tutto il riempimento superiore e inferiore predefinito e aggiungi un margine superiore e inferiore per creare spazio.

• Margine superiore: 9vw
• In basso: 9vw
• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Frontiera

Continua andando alle impostazioni del bordo della sezione e crea la forma di un mockup mobile aggiungendo "30px" a ciascuno degli angoli.

Scatola ombra

Aggiungi un'ombra sottile per consentire alla forma di uscire.

• Forza sfocatura dell'ombra della scatola: 100 px
• Colore ombra: rgba(0,0,0,0.18)

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo la prima riga alla sezione utilizzando la seguente struttura a colonne:

Colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e cambia il colore di sfondo.

• Colore di sfondo: #ffffff

Dimensionamento

Quindi, vai alle impostazioni di dimensionamento e consenti alla riga di occupare l'intera larghezza della sezione.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Successivamente, rimuovi l'imbottitura superiore e inferiore predefinita.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Scatola ombra

E aggiungi anche un'ombra di scatola.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.92)

Indice Z

Ultimo ma non meno importante, ci assicureremo che la riga (e in particolare la sua ombra del riquadro) si sovrapponga alla riga successiva aumentando l'indice Z nelle impostazioni di visibilità.

• Indice Z: 99

Aggiungi modulo di testo alla colonna

Aggiungi contenuto H2

L'unico modulo di cui abbiamo bisogno in questa riga è un modulo di testo con alcuni contenuti H2.

Impostazioni testo H2

Dopo aver aggiunto la copia H2, vai alle impostazioni del testo H2 e apporta alcune modifiche.

• Carattere titolo 2: Abril Fatface
• Intestazione 2 Allineamento del testo: Centro
• Colore testo titolo 2: #000000
• Titolo 2: Dimensione testo: 1.5vw (desktop), 3.5vw (tablet), 5vw (telefono)

Spaziatura

Aggiungi successivamente un margine superiore e inferiore personalizzato.

• Margine superiore: 1.5vw (desktop e tablet), 3.5vw (telefono)
• Margine inferiore: 1.5vw (desktop e tablet), 3.5vw (telefono)

Aggiungi riga #2

Struttura della colonna

In seconda fila! Qui, stiamo usando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza della sezione. Stiamo anche modificando l'altezza e l'altezza massima per creare un effetto di scorrimento verticale nei prossimi passaggi.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%
• Altezza: 38vw (desktop), 100vw (tablet), 120vw (telefono)
• Altezza massima: 38vw (desktop), 100vw (tablet), 120vw (telefono)

Spaziatura

Quindi, vai alle impostazioni di spaziatura e rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Trabocco verticale

Come accennato in precedenza, stiamo rendendo questa riga scorrevole verticalmente. Per fare ciò, dovremo modificare l'overflow verticale nelle impostazioni di visibilità della riga.

• Overflow verticale: scorrimento

Aggiungi modulo immagine alla colonna

Carica immagine

Vai avanti e aggiungi un primo modulo immagine alla riga e carica un'immagine a tua scelta. Puoi scaricare le immagini che stiamo usando in questo tutorial andando al post del pacchetto di layout di Wedding Planner.

Dimensionamento

Assicurati di abilitare l'opzione "Forza larghezza intera" nel modulo immagine per garantire un risultato reattivo.

• Forza intera larghezza: Sì

Spaziatura

Vai alle impostazioni di spaziatura successiva e crea uno spazio tra questo e il modulo successivo aggiungendo un margine inferiore.

• Margine inferiore: 1vw

Clona il modulo immagine tutte le volte che vuoi

Una volta che hai finito di modificare il primo modulo immagine, puoi clonarlo tutte le volte che vuoi.

Carica immagini diverse

Ovviamente, vorrai cambiare l'immagine in ciascuno dei duplicati.

Aggiungi riga #3

Struttura della colonna

Alla terza e ultima fila! Utilizziamo la seguente struttura a colonne:

Colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi un colore di sfondo bianco.

• Colore di sfondo: #ffffff

Dimensionamento

Quindi, vai alle impostazioni di dimensionamento e consenti alla riga di occupare l'intera larghezza della sezione.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Aggiungi successivamente alcuni valori di riempimento personalizzati in alto e in basso.

• Imbottitura superiore: 2.1vw (desktop), 3.5vw (tablet), 5vw (telefono)
• Imbottitura inferiore: 2.1vw (desktop), 3.5vw (tablet), 5vw (telefono)

Scatola ombra

E aggiungi un'ombra a scatola per creare profondità.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.92)

Indice Z

Per assicurarci che questa riga (e in particolare la sua ombra del riquadro) si sovrapponga alla riga precedente, aumenteremo l'indice Z.

• Indice Z: 99

Aggiungi modulo pulsante alla colonna

Aggiungi copia

L'unico modulo di cui abbiamo bisogno in questa riga è un modulo pulsante. Aggiungi una copia a tua scelta.

Allineamento

Quindi, vai alla scheda Design e modifica l'allineamento del pulsante.

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

Modifica anche le impostazioni dei pulsanti.

• Usa stili personalizzati per il pulsante: Sì
• Dimensione del testo del pulsante: 1vw (desktop), 2.5vw (tablet), 3.5vw (telefono)
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #000000
• Larghezza bordo pulsante: 1px
• Carattere pulsante: Abril Fatface

Spaziatura

E crea la forma che desideri utilizzando valori di riempimento personalizzati.

• Imbottitura superiore: 0.5vw (desktop), 1vw (tablet), 2vw (telefono)
• Imbottitura inferiore: 0.5vw (desktop), 1vw (tablet), 2vw (telefono)
• Imbottitura sinistra: 3vw (Desktop), 7vw (Tablet), 9vw (Telefono)
• Imbottitura destra: 3vw (Desktop), 7vw (Tablet), 9vw (Telefono)

Stile barra di scorrimento

Aggiungi l'ID CSS alla riga n. 2

Sta a te decidere se vuoi o meno dare uno stile alla barra di scorrimento. Se lo fai, apri la seconda riga e aggiungi una classe CSS.

• Classe CSS: image-scrollbar

Apri le impostazioni della pagina

Quindi, apri le impostazioni della riga.

Stile barra di scorrimento utilizzando CSS

E aggiungi le seguenti righe di codice CSS alla casella CSS personalizzato nella scheda Avanzate:

.image-scrollbar::-webkit-scrollbar {
width: 10px;
}
.image-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.image-scrollbar::-webkit-scrollbar-thumb {
background: #000000;
}

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come creare un bellissimo mockup di galleria di scorrimento solo con le opzioni integrate di Divi. All'inizio di questo post, eri anche in grado di scaricare gratuitamente il layout JSON e utilizzarlo su qualsiasi sito Web su cui stai lavorando. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.