Come rivelare una griglia di immagini sottostante nel tuo eroe con le opzioni adesive di Divi

Creare una sezione degli eroi che attiri l'attenzione dei tuoi visitatori può dare il tono al resto del sito web. Se stai cercando un modo creativo per utilizzare le opzioni adesive di Divi per aiutarti ad arrivarci, adorerai questo tutorial. Oggi ti mostriamo come rivelare una griglia di immagini sottostante nel tuo eroe con le opzioni adesive di Divi. Stiamo includendo una transizione molto fluida da predefinita a permanente e potrai anche scaricare il file JSON gratuitamente!

Andiamo ad esso.

Anteprima

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

Desktop

Mobile

Scarica il layout GRATUITAMENTE

Per mettere le mani sul layout gratuito, 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!

1. Crea un design da eroe

Aggiungi nuova sezione

Colore di sfondo

Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e aggiungi un colore di sfondo.

• Colore di sfondo: #111111

Spaziatura

Vai alla scheda design della sezione e aggiungi un po' di imbottitura inferiore. Questo riempimento inferiore ci darà spazio sufficiente per creare l'esperienza di scorrimento.

• Imbottitura inferiore: 120vh

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza ancora aggiungere moduli, apri le impostazioni della riga, vai alla scheda design e modifica le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 2
• Larghezza: 100%
• Larghezza massima: 2580 px

Spaziatura

Aggiungi successivamente un margine superiore reattivo.

• Margine superiore:
  • Desktop: 10vh
  • Tablet e telefono: 5vh

Indice Z

E per assicurarci che questa riga rimanga al di sotto della seconda riga, aggiungeremo a questa sezione, in seguito, utilizzeremo l'indice az di 10 nella scheda avanzata.

• Indice Z: 10

Tutte le impostazioni della colonna

Una volta eseguite le impostazioni generali delle righe, apri ciascuna delle colonne singolarmente.

Elemento principale CSS

In ciascuna delle colonne, applica le seguenti righe di codice CSS all'elemento principale sul telefono:

Solo telefono:

width: 50% !important;
margin: 0 !important;

Impostazioni colonna 2

Quindi, apri le impostazioni della colonna 2.

Indice Z

E aumenta l'indice Z a 12. Questo metterà questa colonna sopra la terza colonna.

• Indice Z: 12

Aggiungi modulo immagine alla colonna 1

Carica immagine

È ora di aggiungere moduli, iniziando con un modulo immagine nella colonna 1. Carica un'immagine a tua scelta.

Spaziatura

Passa alla scheda di progettazione del modulo e modifica le impostazioni di spaziatura come segue:

• Margine inferiore:
  • Tablet e telefono: 10px
• Margine destro:
  • Tablet e telefono: 2%

Clona modulo immagine tre volte e posiziona i duplicati nelle colonne rimanenti

Una volta completate le impostazioni del modulo, puoi clonare l'intero modulo tre volte e posizionare i duplicati nelle colonne rimanenti della riga.

Cambia immagini

Assicurati di cambiare l'immagine in ogni modulo duplicato.

Cambia la spaziatura dei moduli n. 2 e n. 4 dell'immagine

Quindi, apri le impostazioni dei moduli immagine nelle colonne 2 e 4 e applica loro i seguenti valori di spaziatura:

• Margine inferiore:
  • Tablet e telefono: 10px
• Margine sinistro:
  • Tablet e telefono: 2%
• Margine destro: /

Aggiungi riga #2

Struttura della colonna

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

Sfondo sfumato

Apri le impostazioni della riga e applica il seguente sfondo sfumato:

• Colore 1: #111111
• Colore 2: RGB (255,255,255,0)

Dimensionamento

Modificare le impostazioni di dimensionamento successivamente.

• Larghezza: 100%
• Larghezza massima: 2580 px

Spaziatura

Quindi, applica un po 'di imbottitura superiore e inferiore.

• Imbottitura superiore: 20vh
• Imbottitura inferiore: 20vh

Posizione

Per posizionare questa riga sopra la griglia dell'immagine, utilizzeremo le impostazioni di posizione di conseguenza:

• Posizione: Assoluta
• Posizione: in alto al centro
• Indice Z: 12

Aggiungi modulo di testo alla colonna

Aggiungi contenuto H1

Aggiungi un primo modulo di testo a questa riga utilizzando alcuni contenuti H1 di tua scelta.

Impostazioni testo H1

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H1 di conseguenza:

• Carattere dell'intestazione: Kumbh Sans
• Peso del carattere dell'intestazione: grassetto
• Stile carattere intestazione: maiuscolo
• Allineamento del testo dell'intestazione: al centro
• Colore del testo dell'intestazione: #ffdbaa
• Dimensione del testo dell'intestazione:
  • Desktop: 120 pixel
  • Tablet: 60px
  • Telefono: 40px
• Spaziatura delle lettere dell'intestazione
  • Desktop: -3px
  • Tablet e telefono: 0px
• Ombra del testo dell'intestazione:
  • Seleziona: Terza Opzione
  • Colore ombra testo titolo: rgba(0,0,0,0.4)

Dimensionamento

Modificare le impostazioni di dimensionamento successivamente.

• Larghezza massima: 900 px
• Allineamento del modulo: Centro

Aggiungi modulo pulsante alla colonna

Aggiungi copia

Il modulo successivo e ultimo di cui abbiamo bisogno in questa riga è un modulo pulsante. Aggiungi una copia a tua scelta.

Allineamento dei pulsanti

Passa alla scheda Design e modifica l'allineamento del pulsante.

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

Quindi, modella il pulsante.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante:
  • Desktop: 20px
  • Tablet: 16px
  • Telefono: 14px
• Dimensione del testo del pulsante: #111111
• Colore di sfondo del pulsante: #ffffff
• Larghezza bordo pulsante: 0px
• Raggio del bordo del pulsante: 100 px

• Carattere pulsante: Kumbh Sans
• Peso del carattere del pulsante: grassetto

Spaziatura

E usa alcuni valori di riempimento reattivo nelle impostazioni di spaziatura.

• Imbottitura superiore:
  • Desktop e tablet: 20px
  • Telefono: 15px
• Imbottitura inferiore:
  • Desktop e tablet: 20px
  • Telefono: 15px
• Imbottitura sinistra:
  • Desktop e tablet: 50 pixel
  • Telefono: 40px
• Imbottitura destra:
  • Desktop e tablet: 50 pixel
  • Telefono: 40px

2. Applica impostazioni permanenti

Gira la riga n. 1 appiccicosa

Ora che abbiamo tutti gli elementi a posto, possiamo concentrarci sulle impostazioni permanenti. Apri le impostazioni della prima riga e applica le seguenti impostazioni permanenti:

• Posizione appiccicosa: bastone in alto
• Limite appiccicoso inferiore: sezione
• Offset da elementi appiccicosi circostanti: Sì
• Stili di transizione predefiniti e permanenti: Sì

Opacità appiccicosa

Quindi, modifica l'opacità nelle impostazioni dei filtri.

• Predefinito: 20%
• Appiccicoso: 100%

Modulo immagine n. 1 Impostazioni permanenti

Spaziatura

Quindi, apri le impostazioni del Modulo immagine nella colonna 1. Passa alla scheda Design e aggiungi un margine adesivo superiore e destro.

• Margine superiore permanente: -20%
• Margine destro fisso: -20%

Transizione

Aumenta anche la durata della transizione.

• Durata della transizione: 700 ms

Modulo immagine n. 2 Spaziatura adesiva

Spaziatura

Passa al Modulo immagine nella colonna 2 e utilizza le seguenti impostazioni di spaziatura adesiva:

• Margine superiore permanente: 20%
• Margine sinistro permanente: -30%

Transizione

Aumenta anche qui la durata della transizione.

• Durata della transizione: 1000 ms

Modulo immagine n. 3 Spaziatura adesiva

Spaziatura

Successivamente, abbiamo il Modulo immagine nella colonna 3. Usa i seguenti valori di spaziatura adesiva:

• Margine superiore permanente: -10%
• Margine sinistro permanente: -25%
• Margine destro fisso: -25%

Transizione

Modificare la durata della transizione di conseguenza:

• Durata della transizione: 700 ms

Modulo immagine #4 Spaziatura adesiva

Spaziatura

E infine, apri il Modulo immagine nella colonna 4. Applica i seguenti valori di spaziatura adesiva:

• Margine superiore permanente: -20%
• Margine sinistro permanente: -30%

Transizione

Completa le impostazioni del modulo e questo tutorial aumentando la durata della transizione. Questo è tutto! Salva ed esci dalla pagina per vedere il risultato.

• Durata della transizione: 1000 ms

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 essere creativo con la tua sezione eroe in Divi. Più specificamente, ti abbiamo mostrato come rivelare una griglia di immagini sullo scorrimento usando le sezioni adesive di Divi. Sei stato anche in grado di scaricare il file JSON gratuitamente. Se hai domande o suggerimenti, non esitare a 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.