Come fondere la copia sullo scorrimento con le impostazioni di posizione di Divi e gli effetti di scorrimento
Pubblicato: 2021-09-08Il modo in cui utilizzi in modo creativo le funzionalità integrate di Divi può fare la differenza nel design della tua pagina. Gli effetti di scorrimento di Divi, ad esempio, ti consentono di creare bellissime interazioni sullo scorrimento. Oggi aggiungiamo un altro tutorial al tuo elenco di cose che puoi fare con gli effetti di scorrimento integrati di Divi. Più specificamente, ti mostreremo come fondere la copia sullo scorrimento. A prima vista, la copia è posizionata sotto l'immagine di accompagnamento. Tuttavia, non appena si scorre fino a un certo punto, la copia apparirà sopra l'immagine del prodotto e inizierà a fondersi con l'immagine. Questo porta a un effetto accattivante che sembra senza sforzo. Potrai anche scaricare gratuitamente il file JSON di layout!
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 scaricarli 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!
Iniziamo a ricreare!
Aggiungi 2x Sezioni segnaposto
Aggiungi nuova sezione
Inizia aggiungendo una sezione segnaposto alla pagina su cui stai lavorando.
Dimensionamento
Apri le impostazioni della sezione e modifica l'altezza nelle impostazioni di dimensionamento.
- Altezza: 50vh
Clona sezione
Clona la sezione una volta. Questo ti lascia con due sezioni segnaposto sulla tua pagina. Queste sezioni segnaposto ti aiuteranno a vedere l'effetto finale dopo aver seguito il tutorial. Su un sito web live, le sezioni segnaposto verranno sostituite con le sezioni normali che utilizzi in tutta la pagina.
Aggiungi una nuova sezione tra le sezioni segnaposto
Una volta posizionate le sezioni segnaposto, aggiungi una nuova sezione tra le sezioni segnaposto.
Colore di sfondo
Apri le impostazioni della sezione e usa un colore di sfondo bianco.
- Colore di sfondo: #ffffff
Spaziatura
Passa alla scheda Progettazione della sezione e modifica di conseguenza i valori di riempimento superiore e inferiore:
- Imbottitura superiore: 10vh
- Imbottitura inferiore: 10vh
Aggiungi riga n. 1
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Dimensionamento
Senza aggiungere ancora moduli, apri le impostazioni di riga, vai alle impostazioni di dimensionamento e modifica i valori di larghezza e larghezza massima.
- Larghezza: 100%
- Larghezza massima: 100%
Aggiungi modulo di testo alla colonna
Aggiungi copia
L'unico modulo di cui abbiamo bisogno per questa riga è un modulo di testo. Aggiungi una copia a tua scelta.
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Montserrat
- Peso del carattere del testo: Ultra grassetto
- Stile del carattere del testo: maiuscolo
- Colore del testo: #fff2ea
- Dimensione del testo: 11vw
- Altezza riga di testo: 1em
- Allineamento del testo: Centro
Aggiungi riga #2
Struttura della colonna
Aggiungi un'altra riga alla sezione utilizzando la seguente struttura di colonne:
Dimensionamento
Senza ancora aggiungere moduli, apri le impostazioni di riga e modifica le impostazioni di dimensionamento come segue:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 2
- Larghezza: 90%
- Allineamento righe: Centro
Aggiungi modulo immagine alla colonna
Carica immagine
Aggiungi un modulo immagine alla colonna della riga. Carica un'immagine a tua scelta.
Allineamento
Passa alla scheda di progettazione del modulo e modifica l'allineamento dell'immagine di conseguenza:
- Allineamento immagine: centro
Dimensionamento
Quindi, vai alle impostazioni di dimensionamento e forza l'intera larghezza sul modulo.
- Forza intera larghezza: Sì
Aggiungi modulo pulsante alla colonna
Aggiungi copia
Il prossimo e ultimo modulo che aggiungeremo alla colonna è un modulo pulsante. Usa una copia a tua scelta.
Allineamento dei pulsanti
Vai alla scheda Design e modifica l'allineamento del pulsante.
- Allineamento dei pulsanti: centro
Impostazioni dei pulsanti
Quindi, modella il pulsante come segue:
- Usa stili personalizzati per pulsante: Sì
- Dimensione del testo del pulsante: 16 px
- Colore del testo del pulsante: #000000
- Colore di sfondo del pulsante: #ffffff
- Larghezza bordo pulsante: 0px
- Spaziatura delle lettere dei pulsanti: 2px
- Carattere pulsante: Montserrat
- Peso del carattere del pulsante: grassetto
- Stile carattere pulsante: maiuscolo
Spaziatura
Usa anche alcuni valori di riempimento personalizzati nelle impostazioni di spaziatura.
- Imbottitura superiore: 20px
- Imbottitura inferiore: 20px
- Imbottitura sinistra: 5%
- Imbottitura destra: 5%
Aggiungi il posizionamento assoluto alla riga n. 1
Una volta completata la seconda riga, torna alla riga n. 1. Apri le impostazioni della riga, vai alla scheda avanzate e trasforma la sezione in assoluto. In questo modo, la riga, e il modulo di testo al suo interno, verranno posizionati sotto la riga contenente il modulo immagine.
- Posizione: Assoluta
- Posizione: Centro
Clona riga n. 1 e posiziona il duplicato sotto la riga n. 2
Per consentire al modulo di testo di apparire sopra l'immagine, avremo bisogno di un'altra riga con un valore di indice z più alto. Clona la prima riga e posiziona il duplicato sotto la seconda riga.
Applica effetti alla riga n. 3
Aumenta indice Z
Apri la riga duplicata e modifica l'indice z nella scheda Avanzate.
- Indice Z: 12
Cambia il colore del testo
Apri il modulo di testo nella riga e cambia il colore del testo.
- Colore del testo: #1e1e1e
Applica la modalità di fusione alla riga
Quindi, apri le impostazioni della riga e modifica la modalità di fusione nelle impostazioni dei filtri.
- Modalità di fusione: sovrapposizione
Usa l'effetto di scorrimento sul modulo di testo nella riga n. 3
Aggiungi effetto dissolvenza in entrata e in uscita
Completa il tutorial aprendo nuovamente il modulo di testo, andando agli effetti di scorrimento e abilitando l'effetto di dissolvenza in entrata e in uscita. Questo è tutto!
- Abilita dissolvenza in entrata e in uscita: Sì
- Opacità iniziale: 0%
- Opacità media: 0% (al 26%)
- Opacità finale: 100% (al 28%)
- Attivazione effetto movimento: mezzo dell'elemento
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 gli effetti di scorrimento incorporati di Divi. Più specificamente, ti abbiamo mostrato come fondere la copia sullo scorrimento. All'inizio, la copia sembra essere sotto l'immagine. Dopo lo scorrimento, la copia si rivela sopra l'immagine e si fonde con l'immagine. 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.