Come creare transizioni di copia parallasse con le opzioni adesive di Divi
Pubblicato: 2021-03-12Quando cerchi modi creativi per ravvivare il design delle tue pagine, gli effetti di parallasse possono tornare utili. Portano quell'interazione extra sullo scorrimento senza essere troppo invasivi. Se stai cercando un modo per estendere quell'effetto di parallasse a più sezioni della tua pagina, adorerai questo tutorial. Oggi ti mostreremo come creare transizioni di copia parallasse con le opzioni adesive di Divi. Non appena i visitatori scorrono oltre una determinata sezione, la copia scorre verso il basso con l'immagine di sfondo parallasse, che dà un effetto davvero accurato. Non appena si raggiunge la sezione successiva della riga, la copia viene quindi sostituita con un altro titolo. Il risultato che stiamo cercando sembra fantastico su tutte le dimensioni dello schermo 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 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!
https://youtu.be/uZCD0__Apjk
Iscriviti al nostro canale Youtube
1. Crea la struttura dell'elemento
Aggiungi nuova sezione
Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Questo effetto funzionerà particolarmente bene se hai contenuti sopra e sotto il layout che stiamo per creare.
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Dimensionamento
Senza ancora aggiungere moduli, apri le impostazioni di riga e modifica le impostazioni di dimensionamento come segue:
- Equalizza le altezze delle colonne: Sì
- Larghezza: 95%
- Larghezza massima: 100%
Spaziatura
Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Immagine di sfondo della colonna
Ora che abbiamo modificato le impostazioni generali della riga, applicheremo alcune impostazioni personalizzate anche alla colonna all'interno della nostra riga. Inizia aprendo le impostazioni della colonna.
Carica un'immagine di sfondo e abilita un effetto di parallasse su di essa.
- Usa effetto parallasse: Sì
- Metodo di parallasse: CSS
Spaziatura delle colonne
Quindi, vai alla scheda Design e applica un'imbottitura inferiore personalizzata.
- Imbottitura inferiore: 50vh
Aggiungi il modulo di testo n. 1 alla colonna 1
Aggiungi contenuto H2
È ora di aggiungere moduli, iniziando con un modulo di testo contenente alcuni contenuti H2 di tua scelta.
Impostazioni testo H2
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H2 di conseguenza:
- Intestazione 2 Carattere: Montserrat
- Intestazione 2 Peso del carattere: grassetto
- Stile carattere titolo 2: maiuscolo
- Colore testo titolo 2: #ffffff
- Intestazione 2 Dimensione del testo:
- Desktop: 9vw
- Tablet: 14vw
- Telefono: 15vw
Filtri
Stiamo anche abilitando una modalità di fusione nelle impostazioni dei filtri.
- Modalità di fusione: sovrapposizione
Aggiungi modulo pulsante alla colonna 1
Aggiungi copia
Il modulo successivo e ultimo di cui abbiamo bisogno in questa colonna è un modulo pulsante. Aggiungi una copia a tua scelta.
Aggiungi collegamento
Quindi, inserisci un collegamento.
Impostazioni dei pulsanti
Quindi, passa alla scheda di progettazione del modulo e modifica le impostazioni del pulsante di conseguenza:
- Usa stili personalizzati per pulsante: Sì
- Dimensione del testo del pulsante:
- Desktop: 2vw
- Tablet e telefono: 7vw
- Colore del testo del pulsante: #ffffff
- Larghezza bordo pulsante: 0px
- Spaziatura delle lettere dei pulsanti: 0.06vw
- Carattere pulsante: Karla
- Mostra icona pulsante: Sì
- Posizionamento dell'icona del pulsante: a sinistra
- Mostra solo l'icona al passaggio del mouse per il pulsante: No
Spaziatura
Aggiungi anche un'imbottitura personalizzata in alto e in basso.
- Imbottitura superiore: 8%
- Imbottitura inferiore: 8%
Posizione
E completa le impostazioni del modulo riposizionando il modulo nell'angolo in basso a destra della colonna.
- Posizione: Assoluta
- Posizione: in basso a destra
2. Passaggi necessari per l'effetto
Attiva modulo testo appiccicoso
Ora che abbiamo impostato le basi del nostro design con tutti gli elementi necessari, è il momento di abilitare la transizione di copia con parallasse. Per fare ciò, utilizzeremo le opzioni adesive integrate di Divi sul modulo di testo. Apri le impostazioni del modulo, vai alla scheda Avanzate e applica le seguenti impostazioni permanenti:
- Posizione appiccicosa: bastone in alto
- Offset superiore appiccicoso: 150 px
- Limite appiccicoso inferiore: sezione
- Offset da elementi appiccicosi circostanti: Sì
- Stili di transizione predefiniti e permanenti: Sì
Modifica la spaziatura del modulo di testo
Predefinito
Ora che abbiamo abilitato le opzioni permanenti su questo modulo, possiamo applicare stili permanenti. Per impostazione predefinita, il modulo verrà posizionato sopra la colonna stessa. E a causa del colore del testo bianco del modulo, si fonderà con il colore di sfondo della sezione e sembrerà che non ci sia alcun testo. Per creare questo posizionamento, utilizzeremo un margine superiore negativo su diverse dimensioni dello schermo.
- Margine superiore:
- Desktop: -10vw
- Tablet: -14vw
- Telefono: -15vw
Appiccicoso
Una volta che il modulo di testo è diventato appiccicoso, vogliamo che torni in vista. Per assicurarci che ciò accada, riporteremo questo margine superiore a "0vh" in uno stato permanente.
- Margine superiore permanente: 0vh
Spaziatura delle sezioni
Avremo anche bisogno di spazio nella parte superiore e inferiore della nostra sezione, in modo che lo sfondo e il modulo di testo possano fondersi a colori. Per farlo, riapriremo le impostazioni della sezione e applicheremo un'imbottitura personalizzata in alto e in basso.
- Imbottitura superiore: 10vh
- Imbottitura inferiore: 10vh
Clona l'intera sezione tutte le volte che vuoi
Una volta completato il design della sezione, puoi clonarlo tutte le volte che vuoi.
Modifica contenuto e collegamenti
Assicurati di modificare il contenuto e i collegamenti per ogni modulo all'interno delle sezioni duplicate 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 essere creativo con le opzioni adesive di Divi. Più precisamente, ti abbiamo mostrato come creare transizioni di copia di parallasse che ti consentono di estendere l'effetto di parallasse in più sezioni della tua pagina. 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.