Come attivare le transizioni delle immagini con le opzioni adesive di Divi

La versatilità delle opzioni adesive di Divi va oltre il semplice utilizzo delle impostazioni per un'intestazione adesiva. Puoi usarlo anche per attivare cambiamenti nel tuo design. In questo tutorial, ad esempio, utilizzeremo le opzioni adesive di Divi per attivare la transizione dell'immagine. Le transizioni dell'immagine avvengono non appena i visitatori si avvicinano all'immagine sullo scorrimento. Ricreeremo due diversi esempi da zero, ma una volta ottenuto l'approccio, sarai in grado di creare le tue transizioni di immagini uniche utilizzando solo le opzioni integrate di Divi. Potrai anche scaricare gratuitamente il file JSON!

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo un'ultima 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 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. Passaggi generali

Aggiungi la sezione n. 1

Spaziatura

Nella prima parte del tutorial, creeremo le basi del nostro design. Una volta che questo è a posto, possiamo concentrarci sull'applicazione delle giuste impostazioni per ottenere i due esempi nell'anteprima di questo post. Aggiungi una nuova sezione alla pagina su cui stai lavorando, spostati nella scheda di progettazione della sezione e rimuovi tutti i padding superiore e inferiore predefiniti.

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

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:

• Larghezza massima: 1480 px
• Allineamento righe: Centro

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Indice Z

E imposta l'indice az nelle impostazioni della posizione. Questo ci aiuterà a garantire che la riga rimanga al di sotto della riga successiva che aggiungeremo in seguito nel tutorial.

• Indice Z: 1

Overflow di colonna

Quindi, apri le impostazioni della colonna e imposta gli overflow su nascosti.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Aggiungi modulo immagine alla colonna

Lascia la casella immagine vuota

L'unico modulo di cui abbiamo bisogno in questa riga è un modulo immagine. Lascia vuota la casella dell'immagine.

Immagine di sfondo

E usa invece un'immagine di sfondo a tua scelta.

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

Spaziatura

Per consentire la visualizzazione dell'immagine, utilizzeremo alcuni valori di riempimento personalizzati su schermi di diverse dimensioni.

• Imbottitura superiore:
  • Desktop: 300 px
  • Tablet e telefono: 150px
• Imbottitura inferiore:
  • Desktop: 300 px
  • Tablet e telefono: 150 px

Aggiungi sezione #2

Spaziatura

Aggiungi un'altra sezione proprio sotto la precedente. Apri le impostazioni della sezione e rimuovi l'imbottitura superiore predefinita nelle impostazioni di spaziatura.

• Imbottitura superiore: 0px

Aggiungi nuova riga

Struttura della colonna

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

Indice Z

Aggiungi anche l'indice az per questa riga.

• Indice Z: 2

Aggiungi il modulo di invito all'azione alla colonna

Aggiungi contenuto

In questa riga, l'unico modulo di cui abbiamo bisogno è un modulo di invito all'azione. Aggiungi il contenuto che preferisci.

Aggiungi collegamento pulsante

Insieme a un collegamento a pulsante.

Colore di sfondo

Quindi, aggiungi un colore di sfondo bianco.

• Colore di sfondo: #ffffff

Impostazioni testo

Passa alla scheda Design e modifica le impostazioni del testo.

• Allineamento del testo: a sinistra
• Colore del testo: scuro

Impostazioni del testo del titolo

Stile anche il testo del titolo.

• Carattere del titolo: Display Playfair
• Stile carattere del titolo: corsivo
• Dimensione del testo del titolo
  • Desktop: 45px
  • Tablet: 40px
  • Telefono: 35px
• Spaziatura tra lettere del titolo: 1px

Impostazioni del corpo del testo

Così come il corpo del testo.

• Carattere del corpo: Karla
• Altezza della linea del corpo: 2em

Impostazioni dei pulsanti

Quindi, modella il pulsante.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 18px
• Colore del testo del pulsante: #000000
• Colore sfumato 1: #ffffff
• Colore sfumatura 2: #ffdc91
• Tipo di gradiente: lineare
• Posizione di partenza: 50%
• Posizione finale: 50%

• Larghezza bordo pulsante: 0px
• Raggio bordo pulsante: 0px
• Carattere pulsante: Karla
• Stile carattere pulsante: maiuscolo
• Mostra pulsante: Sì

• Posizionamento dell'icona del pulsante: a sinistra
• Mostra solo l'icona al passaggio del mouse per il pulsante: No
• Imbottitura superiore: 10px
• Imbottitura inferiore: 10px
• Imbottitura sinistra: 15%
• Imbottitura destra: 15%

Dimensionamento

Stiamo modificando anche le impostazioni di dimensionamento su schermi di diverse dimensioni.

• Larghezza:
  • Scrivania: 65%
  • Compressa: 80%
  • Telefono: 100%
• Allineamento del modulo: Centro

Spaziatura

Successivamente, aggiungeremo alcuni margini personalizzati e valori di riempimento alle impostazioni di spaziatura.

• Margine superiore:
  • Desktop: -150 px
  • Tablet: -50px
  • Telefono: 0px
• Margine inferiore: 50 px
• Imbottitura superiore: 150 px
• Imbottitura inferiore: 150 px

Scatola ombra

E completeremo le impostazioni del modulo aggiungendo un'ombra sottile.

• Forza sfocatura Box Shadwo: 30px
• Colore ombra: rgba(0,0,0,0.11)

2. Applica l'effetto appiccicoso alla riga

Apri riga nella sezione #1

Ora che abbiamo posto le basi del nostro design, è il momento di applicare l'effetto adesivo. Questo effetto appiccicoso ci aiuterà a cambiare gli stili mentre le persone scorrono oltre l'elemento. L'elemento a cui aggiungeremo il nostro effetto adesivo è la riga nella prima sezione che contiene l'immagine.

Applica effetto appiccicoso

È importante assicurarsi che il limite appiccicoso inferiore sia impostato su sezione. L'inizio e il punto finale della nostra riga sono gli stessi della sezione, il che assicura che la riga non diventi effettivamente appiccicosa, ma vengono applicati stili appiccicosi. L'offset superiore adesivo determina il punto in cui inizia la transizione. Se questo valore fosse zero, ad esempio, significherebbe che la parte superiore del browser dovrebbe toccare la parte superiore della riga per avviare la transizione. Impostando l'offset superiore appiccicoso su "300 px", creiamo quella transizione in precedenza.

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

Assicurati che ci sia un offset superiore uguale sopra la prima sezione

Poiché abbiamo impostato l'offset superiore appiccicoso su "300px", abbiamo bisogno dello spazio nella parte superiore della nostra pagina per farlo accadere. Se stai usando questo design da qualche parte a metà della tua pagina, non devi preoccuparti di questo passaggio. Tuttavia, se stai utilizzando questo approccio nella parte superiore della pagina, dovrai modificare l'offset superiore adesivo o aggiungere spazio sufficiente nella parte superiore. Aggiungeremo un margine superiore alla nostra prima sezione per generare quello spazio.

• Margine superiore: 400 px

3. Applicare l'effetto Ken Burn al modulo immagine

Ora che la nostra riga è diventata appiccicosa, possiamo iniziare ad applicare stili permanenti alla riga e a tutti i suoi elementi figlio. Sebbene le possibilità siano infinite, ti stiamo mostrando due diversi esempi e come realizzarli. Per rendere più facile giocare con i due diversi esempi, cloneremo entrambe le sezioni una volta e le posizioneremo sotto le prime.

Esempio 1

Impostazioni riga appiccicosa

Scatola ombra

Per ricreare l'esempio n. 1, che hai potuto vedere nell'anteprima di questo post, apri le impostazioni della riga e applica le seguenti impostazioni dell'ombra della casella:

• Posizione verticale dell'ombra del riquadro: 0px
• Forza di diffusione dell'ombra della scatola: 0px
• Colore ombra: rgba(0,0,0,0)

• Posizione verticale fissa: 100 px
• Colore ombra appiccicoso: #ffdc91

Transizione

Includi anche una transizione graduale nella scheda Avanzate.

• Durata della transizione: 500 ms
• Curva di velocità di transizione: facilità

Impostazioni modulo immagine adesiva

Trasforma scala

Quindi, apri il Modulo immagine e applica un effetto scala di trasformazione in uno stato appiccicoso.

• Entrambi: 100%

• Appiccicoso entrambi: 130%

Transizione

Garantire una transizione graduale modificando di conseguenza le impostazioni di transizione del modulo:

• Durata della transizione: 1200 ms
• Curva di velocità di transizione: facilità

Esempio #2

Impostazioni riga appiccicosa

Trasforma Traduci

Al secondo esempio! Apri le impostazioni di riga e applica le seguenti impostazioni di conversione di trasformazione:

• Destra: 20%

• Appiccicoso a destra: 0%

Transizione

Modifica anche le impostazioni di transizione della riga.

• Durata della transizione: 500 ms
• Curva di velocità di transizione: facilità

Impostazioni modulo immagine adesiva

Filtri

Quindi, apri il Modulo immagine e gioca con i filtri in stato predefinito e permanente.

• Saturazione: 0%
• Luminosità: 50%

• Saturazione appiccicosa: 100%
• Luminosità appiccicosa: 100%

Transizione

Completa le impostazioni del modulo e questo tutorial modificando le impostazioni di transizione come segue:

• Durata della transizione: 500 ms
• Curva di velocità di transizione: facilità

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ù specificamente, ti abbiamo mostrato come attivare le transizioni delle immagini. Non appena le persone scorrono oltre l'immagine, gli stili dell'immagine cambiano, il che si traduce in una bella transizione. Abbiamo trattato due esempi diversi, ma le possibilità sono infinite. 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.