3 effetti di movimento di scorrimento senza sforzo che puoi aggiungere ai tuoi titoli con Divi

I nuovi effetti di scorrimento di Divi offrono tantissime nuove possibilità di design alle pagine che crei. Puoi aggiungere un effetto di scorrimento personalizzato a ciascun contenitore e sincronizzare gli effetti di conseguenza. Questa libertà di progettazione ti aiuta facilmente a evidenziare determinati contenuti in modo elegante. In questo tutorial, ti mostreremo come aggiungere effetti di movimento di scorrimento ai titoli. In questo modo, puoi mettere un'enfasi extra sui tuoi titoli e mantenere i tuoi visitatori coinvolti. Potrai anche scaricare i file JSON gratuitamente!

Andiamo ad esso.

Anteprima

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

Esempio 1

Desktop

Mobile

Esempio #2

Desktop

Mobile

Esempio #3

Desktop

Mobile

Scarica GRATUITAMENTE i layout della sezione degli effetti di movimento di scorrimento

Per mettere le mani sui layout delle sezioni gratuite, 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. Costruisci il tuo design di sezione eroe su una pagina nuova o esistente

Aggiungi nuova sezione

Colore di sfondo

Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e cambia il colore di sfondo in bianco.

• Colore di sfondo: #FFFFFF

Spaziatura

Passa alla scheda Progettazione e modifica anche i valori di spaziatura.

• Imbottitura superiore: 15vw (desktop), 20vw (tablet), 25vw (telefono)
• Imbottitura inferiore: 0vw

straripamenti

E per assicurarci che gli effetti di scorrimento non facciano apparire alcuna barra di scorrimento orizzontale, nasconderemo anche gli overflow della sezione.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Aggiungi riga n. 1

Struttura della colonna

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

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica la larghezza e la larghezza massima nelle impostazioni di dimensionamento.

• Larghezza: 90%
• Larghezza massima: 100%

Spaziatura

Rimuovi anche tutta l'imbottitura superiore e inferiore predefinita.

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

Aggiungi il modulo di testo n. 1 alla colonna

Aggiungi contenuto H1

L'unico modulo di cui abbiamo bisogno in questa riga è un modulo di testo con alcuni contenuti H1.

Impostazioni testo H1

Modificare di conseguenza le impostazioni del testo H1 del modulo:

• Carattere dell'intestazione: Display Playfair
• Peso del carattere dell'intestazione: grassetto
• Allineamento del testo dell'intestazione: al centro
• Colore del testo dell'intestazione: #000000
• Dimensione del testo dell'intestazione: 6vw

Aggiungi riga #2

Struttura della colonna

Quindi, aggiungi un'altra riga utilizzando la seguente struttura di colonne:

Sfondo sfumato

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e usa uno sfondo sfumato.

• Colore 1: #444444
• Colore 2: #000000
• Tipo di gradiente: lineare
• Direzione gradiente: 237deg

Dimensionamento

Modifica anche le impostazioni di dimensionamento della riga.

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

Spaziatura

Quindi, aggiungi un'imbottitura personalizzata superiore e inferiore.

• Imbottitura superiore: 0vw
• Imbottitura inferiore: 10vw (desktop), 15vw (tablet), 20vw (telefono)

Aggiungi il modulo di testo n. 2 alla colonna

Aggiungi contenuto

Il primo modulo di cui abbiamo bisogno in questa riga è un modulo di testo con alcuni contenuti.

Impostazioni testo

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

• Carattere di testo: display Playfair
• Colore del testo: #dddddd
• Dimensione del testo: 6vw
• Altezza riga di testo: 1em
• Intensità della sfocatura dell'ombra del testo: 0,29 em
• Colore ombra del testo: #ffffff
• Allineamento del testo: Centro

Aggiungi il modulo di testo n. 3 alla colonna

Aggiungi contenuto

Quindi, aggiungi un altro modulo di testo con un contenuto descrittivo a tua scelta.

Impostazioni testo

Modificare le impostazioni del testo del modulo come segue:

• Carattere del testo: Open Sans
• Colore del testo: #e8e8e8
• Dimensione del testo: 0.9vw (desktop), 2vw (tablet), 2.5vw (telefono)
• Altezza riga di testo: 2em
• Allineamento del testo: Centro

Dimensionamento

Modifica anche le impostazioni di dimensionamento.

• Larghezza: 40% (desktop), 90% (tablet e telefono)
• Allineamento del modulo: Centro

Spaziatura

E includi alcuni margini superiore e inferiore su diverse dimensioni dello schermo.

• Margine superiore: 10vw (desktop), 15vw (tablet), 20vw (telefono)
• Margine inferiore: 3vw (desktop), 8vw (tablet), 13vw (telefono)

Aggiungi modulo pulsante alla colonna

Aggiungi copia

Il prossimo e ultimo modulo di cui abbiamo bisogno è un modulo pulsante. Aggiungi una copia a tua scelta.

Allineamento

Continua modificando l'allineamento del pulsante nella scheda Design.

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

Quindi, modella il pulsante come segue:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 0.8vw (desktop), 1.5vw (tablet), 2.5vw (telefono)
• Colore del testo del pulsante: #ffffff
• Colore bordo pulsante: #ffffff
• Raggio del bordo del pulsante: 1px
• Carattere pulsante: Open Sans
• Peso del carattere del pulsante: grassetto
• Stile carattere pulsante: maiuscolo

Spaziatura

E includi alcuni valori di riempimento personalizzati su diverse dimensioni dello schermo.

• Imbottitura superiore: 1vw (Desktop), 2vw (Tablet), 3vw (Telefono)
• Imbottitura inferiore: 1vw (desktop), 2vw (tablet), 3vw (telefono)
• Imbottitura sinistra: 2.5vw (Desktop), 5vw (Tablet), 8vw (Telefono)
• Imbottitura destra: 2.5vw (desktop), 5vw (tablet), 8vw (telefono)

2. Applica effetti di scorrimento

Esempio 1

Modulo di testo n. 1

Movimento orizzontale

Ora che abbiamo progettato l'aspetto generale della nostra sezione degli eroi, è il momento di applicare i diversi effetti di movimento di scorrimento alla nostra copia. Per ricreare il primo esempio, apri il primo modulo di testo e usa il seguente movimento orizzontale:

• Abilita movimento orizzontale: Sì
• Compensazione iniziale: 0
• Compensazione media: 0
  • 0% – 80% (desktop)
  • 0% – 95% (tablet e telefono)
• Compensazione finale: -10

Dissolvenza in entrata e in uscita

Aggiungeremo anche un effetto di dissolvenza in entrata e in uscita.

• Abilita dissolvenza in entrata e in uscita: Sì
• Opacità iniziale: 100%
• Opacità media: 100%
  • 0% – 70% (desktop)
  • 0% – 95% (tablet e telefono)
• Opacità finale: 0%

Modulo di testo #2

Movimento orizzontale

Quindi, apri il secondo modulo di testo nella tua sezione e applica il seguente movimento orizzontale:

• Abilita movimento orizzontale: Sì
• Compensazione iniziale: 10
• Compensazione media: 0
  • 10% – 70% (desktop)
  • 10% – 95% (tablet e telefono)
• Scostamento finale: 10

Dissolvenza in entrata e in uscita

Insieme a un effetto di dissolvenza in entrata e in uscita abbinato:

• Abilita dissolvenza in entrata e in uscita: Sì
• Opacità iniziale: 0%
• Opacità media: 100%
  • 35% – 60% (desktop)
  • 35% – 95% (tablet e telefono)
• Opacità finale: 0%

Esempio #2

Modulo di testo n. 1

Movimento verticale

Vuoi ricreare invece il secondo effetto di movimento di scorrimento? Apri il primo modulo di testo nella tua sezione e aggiungi il seguente movimento verticale:

• Abilita movimento verticale: Sì
• Compensazione iniziale: 0
• Compensazione media: 0
  • 90% (desktop)
  • 95% (tablet e telefono)
• Compensazione finale: -8

Ridimensionamento su e giù

Aggiungi anche un effetto di ridimensionamento su e giù.

• Abilita ridimensionamento su e giù: Sì
• Scala iniziale: 20%
• Scala media: 100%
  • 20% – 80% (desktop)
  • 20% – 95% (tablet e telefono)
• Scala finale: 20%

Modulo di testo #2

Movimento verticale

Quindi, apri il secondo modulo di testo e utilizza le seguenti impostazioni di movimento verticale:

• Abilita movimento verticale: Sì
• Compensazione iniziale: 0
• Compensazione media: 0
  • 15% – 70% (desktop)
  • 15% – 90% (tablet e telefono)
• Compensazione finale: -8

Ridimensionamento su e giù

Aggiungi un effetto di ridimensionamento su e giù in seguito.

• Abilita ridimensionamento su e giù: Sì
• Scala iniziale: 0%
• Scala media: 100%
  • 30% – 70% (desktop)
  • 30% – 90% (tablet e telefono)
• Scala finale: 100%

Sfocatura

E completa l'effetto di scorrimento aggiungendo un effetto di sfocatura al secondo modulo di testo della tua sezione.

• Abilita sfocatura: Sì
• Sfocatura iniziale: 10px
• Sfocatura media: 0px
  • 40% – 73% (Desktop)
  • 40% – 95% (tablet e telefono)
• Sfocatura finale: 100 px

Esempio #3

Modulo di testo n. 1

Movimento orizzontale

Ultimo ma non meno importante, ti mostreremo come ricreare il terzo effetto di movimento di scorrimento. Apri il primo modulo di testo della sezione e aggiungi un effetto di movimento orizzontale.

• Abilita movimento orizzontale: Sì
• Compensazione iniziale: 0
• Compensazione media: 0
  • 0% – 90%
• Scostamento finale: 10

Dissolvenza in entrata e in uscita

Usa un effetto di dissolvenza in entrata e in uscita anche per questo modulo.

• Abilita dissolvenza in entrata e in uscita: Sì
• Opacità iniziale: 100%
• Opacità media: 100%
  • 0% – 90% (desktop)
  • 0% – 95% (tablet e telefono)
• Opacità finale: 0%

rotante

E applicheremo anche un effetto rotante.

• Abilita rotazione: Sì
• Rotazione iniziale: 0°
• Rotazione media: 0°
  • 0% – 90% (desktop)
  • 0% – 95% (tablet e telefono)
• Rotazione finale: 90°

Modulo di testo #2

Movimento orizzontale

Quindi, apri il secondo modulo di testo nella tua sezione e applica le seguenti impostazioni di movimento orizzontale:

• Abilita movimento orizzontale: Sì
• Compensazione iniziale: 0
• Compensazione media: 0
  • 0% – 90%
• Compensazione finale: -10

Dissolvenza in entrata e in uscita

Continua utilizzando un effetto di movimento di scorrimento in dissolvenza in entrata e in uscita.

• Abilita dissolvenza in entrata e in uscita: Sì
• Opacità iniziale: 100%
• Opacità media: 100%
  • 0% – 80% (desktop)
  • 0% – 95% (tablet e telefono)
• Opacità finale: 0%

rotante

E completa le impostazioni del modulo aggiungendo anche un effetto di scorrimento rotante.

• Abilita rotazione: Sì
• Rotazione iniziale: 0°
• Rotazione media: 0°
  • 0% – 80% (desktop)
  • 0% – 90% (tablet e telefono)
• Rotazione finale: -90°

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Esempio 1

Desktop

Mobile

Esempio #2

Desktop

Mobile

Esempio #3

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come utilizzare i nuovi effetti di scorrimento di Divi per aggiungere effetti di movimento di scorrimento al titolo. Abbiamo trattato tre diversi esempi, ma le possibilità sono davvero infinite. Sei stato anche in grado di scaricare i 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.