Come creare sovrapposizioni di moduli su Scroll con Divi's Scroll Effects

L'uso di sovrapposizioni nel tuo design è diventato sempre più popolare negli ultimi anni. Dà al tuo design un aspetto più astratto. Allo stesso tempo, ti aiuta a risparmiare spazio, il che a sua volta limita lo scorrimento verticale richiesto. All'interno di Divi, ci sono un paio di modi per aggiungere facilmente sovrapposizioni ai moduli. Puoi anche fare il possibile e aggiungere un po' di interazione di scorrimento! Nel tutorial Divi di oggi, ti mostreremo come creare sottili sovrapposizioni di moduli sullo scorrimento utilizzando il margine negativo e l'effetto di scorrimento del movimento verticale di Divi. Il design che stiamo ricreando include una bellissima sovrapposizione di immagini 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 GRATUITAMENTE le sovrapposizioni del modulo sul layout di scorrimento

Per mettere le mani sulle sovrapposizioni del modulo gratuito sul layout di scorrimento, 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!

Passaggi generali

Aggiungi nuova sezione

Spaziatura

Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e includi un riempimento personalizzato in alto e in basso.

• Imbottitura superiore: 10%
• Imbottitura fondo: 10%

Aggiungi riga n. 1

Struttura della colonna

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

Spaziatura

Senza aggiungere ancora alcun modulo, apri le impostazioni di riga e aggiungi un margine inferiore alle impostazioni di spaziatura.

• Margine inferiore: 100 px

Aggiungi il modulo di testo n. 1 alla colonna

Aggiungi contenuto H2

È ora di aggiungere moduli, iniziando con un primo modulo di testo contenente alcuni contenuti H2 di tua scelta.

Intestazione 2 Impostazioni testo

Modificare le impostazioni del testo H2 del modulo come segue:

• Carattere titolo 2: Abril Fatface
• Titolo 2: Dimensione testo: 100 px (desktop), 70 px (tablet), 60 px (telefono)

Aggiungi modulo divisore alla colonna

Visibilità

Il modulo successivo di cui abbiamo bisogno è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Linea

Passa alla scheda Progettazione e modifica le impostazioni della linea come segue:

• Colore linea: #333333
• Stile linea: solido
• Posizione della linea: in alto

Dimensionamento

Modifica anche le impostazioni di dimensionamento.

• Peso del divisore: 6px
• Larghezza: 10% (Desktop), 20% (Tablet), 30% (Telefono)

Aggiungi il modulo di testo n. 2 alla colonna

Aggiungi contenuto

L'ultimo modulo di cui abbiamo bisogno in questa riga è un altro modulo di testo con un contenuto descrittivo.

Impostazioni testo

Modifica le impostazioni del testo del modulo di conseguenza:

• Carattere del testo: Karla
• Dimensione del testo: 18px
• Altezza riga di testo: 2,2 em

Aggiungi riga #2

Struttura della colonna

Alla riga successiva, che utilizza la seguente struttura a colonne:

Dimensionamento

Apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:

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

Aggiungi modulo immagine alla colonna 1

Carica sovrapposizione

Nella colonna 1, il primo modulo di cui abbiamo bisogno è un modulo immagine. Carica il file dell'immagine di sovrapposizione che puoi trovare nella cartella di download che hai potuto scaricare all'inizio di questo post.

Immagine di sfondo

Quindi, carica un'immagine di sfondo a tua scelta.

• Dimensione immagine di sfondo: copertina
• Posizione immagine di sfondo: Centro

Dimensionamento

Forza la larghezza intera sul modulo immagine successivo.

• Forza intera larghezza: Sì

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto H3 e descrizione

Passa al modulo successivo, che è un modulo di testo contenente alcuni contenuti H3 e descrittivi a tua scelta.

Colore di sfondo

Cambia il colore di sfondo del modulo.

• Colore di sfondo: #333333

Impostazioni testo

Quindi, passa alla scheda Progettazione e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Karla
• Dimensione del testo: 18px
• Altezza riga di testo: 2,2 em
• Colore del testo: chiaro

Impostazioni testo H3

Apporta anche alcune modifiche alle impostazioni del testo di H3.

• Intestazione 3 Font: Abril Fatface
• Intestazione 3 Peso del carattere: grassetto
• Intestazione 3 Dimensioni del testo: 50 px

Dimensionamento

Quindi, vai alle impostazioni di dimensionamento e modifica la larghezza su diverse dimensioni dello schermo.

• Larghezza: 70% (Desktop), 80% (Tablet), 100% (Telefono)
• Allineamento del modulo: Centro

Spaziatura

Utilizziamo anche margini personalizzati e valori di riempimento.

• Margine superiore: -26%
• Imbottitura superiore: 15%
• Imbottitura inferiore: 15%
• Imbottitura sinistra: 10%
• Imbottitura destra: 10%

Effetto scorrimento movimento orizzontale

E completeremo le impostazioni del modulo aggiungendo un po' di movimento orizzontale agli effetti di scorrimento nella scheda Avanzate.

• Abilita movimento verticale: Sì
• Compensazione iniziale: 4
• Compensazione media: 4 (al 5%)
• Scostamento finale: 0 (al 10%)
• Attivazione effetto movimento: mezzo dell'elemento

Aggiungi modulo pulsante alla colonna 1

Aggiungi copia

L'ultimo modulo di cui abbiamo bisogno nella colonna 1 è un modulo pulsante. Inserisci una copia a tua scelta.

Allineamento

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

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

Successivamente, modelleremo il pulsante di conseguenza:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 20 px
• Colore del testo del pulsante: #333333
• Colore di sfondo del pulsante: #ffffff
• Larghezza bordo pulsante: 0px
• Raggio del bordo del pulsante: 1px

• Carattere pulsante: Karla
• Peso del carattere del pulsante: grassetto

Spaziatura

E completeremo le impostazioni del modulo aggiungendo alcuni margini personalizzati e valori di riempimento alle impostazioni di spaziatura del modulo.

• Margine superiore: -4%
• Imbottitura superiore: 2%
• Imbottitura inferiore: 2%
• Imbottitura sinistra: 7%
• Imbottitura destra: 7%

Clona moduli nella colonna 1 e posiziona i duplicati nella colonna 2

Una volta completati i moduli nella colonna 1, puoi clonare tutti i moduli e posizionare i duplicati nella seconda colonna della riga.

Cambia immagine di sfondo e contenuto

Assicurati di cambiare l'immagine di sfondo e il contenuto.

Clona intera riga

Quindi, clona l'intera riga fino a tutte le volte che desideri.

Cambia immagini di sfondo e contenuto

Cambia anche qui le immagini di sfondo e il contenuto e il gioco è fatto!

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 sottili sovrapposizioni di moduli sullo scorrimento con i nuovi effetti di scorrimento di Divi. Abbiamo efficacemente combinato il margine superiore negativo con l'effetto di scorrimento del movimento verticale integrato di Divi per elevare l'aspetto generale del nostro design. Il design che abbiamo ricreato includeva una bellissima sovrapposizione di immagini e 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.