Vai al contenuto principale

Come creare una transizione senza interruzioni con effetti di scorrimento su Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Quando progetti la tua pagina dei servizi, vuoi assicurarti che i tuoi visitatori notino tutti i diversi servizi che fornisci. In molti casi, questo sarà solo un servizio specifico che stanno cercando, ma se fornisci un modo semplificato nella tua struttura di servizio, è più probabile che i tuoi visitatori li trattino tutti. 

In questo tutorial, ti mostreremo come essere creativo con gli effetti di scorrimento di Divi e creare una transizione di servizio senza interruzioni. Puoi anche scaricare il file JSON gratuitamente!

Andiamo.

Possibile risultato

Prima di immergerci nel tutorial, diamo un'occhiata al risultato su schermi di dimensioni diverse.

Transizione tra sezione divi

1, ricrea la struttura degli elementi

Aggiungi la sezione # 1

spaziatura

Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e modifica i valori di riempimento su schermi di dimensioni diverse.

  • Imbottitura superiore: 80 px (desktop e tablet), 0 px (telefono)
  • Imbottitura inferiore: 80px
Sezione parametri Divi

Aggiungi una nuova linea

Struttura a colonne

Continua ad aggiungere una nuova riga utilizzando la seguente struttura di colonne:

dimensionamento

Senza aggiungere più moduli, aprire i parametri di linea e applicare le seguenti modifiche ai parametri di quotatura:

  • Usa una larghezza della grondaia personalizzata: Sì
  • Larghezza della grondaia: 1
  • Larghezza: 90%
  • Larghezza massima: 1580 px
Configurazione della spaziatura Divi

spaziatura

Quindi aggiungere un margine superiore e inferiore personalizzato.

  • Margine superiore: 200px
  • Margine inferiore: 200px
Configurazione della spaziatura delle linee Divi

Aggiungi un modulo di testo alla colonna 1

Aggiungi contenuto H2

È ora di aggiungere i moduli, iniziando con un modulo di testo nella colonna 1. Inserisci il contenuto H2 che desideri.

I nostri servizi offerti dagli esperti del momento

Impostazioni di testo H2

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

  • Titolo 2 Polizia: trimestrale
  • Intestazione 2 Dimensioni testo: 80 px (desktop), 50 px (tablet), 40 px (telefono)
  • Altezza della linea 2 della testa: 1.2em
Capo polizia divi

spaziatura

Quindi aggiungi un margine inferiore sul tablet e sul telefono.

  • Margine inferiore: 50 pixel (solo tablet e telefono)
Configurazione della spaziatura del testo Divi

Aggiungi un modulo di testo alla colonna 2

Aggiungi contenuto

Passiamo alla seconda colonna. Il primo modulo di cui abbiamo bisogno è un modulo di testo con un contenuto descrittivo.

Casella di testo Content divi

Impostazioni del testo

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

  • Carattere testo: cabina
  • Stile del carattere del testo: maiuscolo
  • Colore del testo: # 000000
  • Dimensioni del testo: 18 px (desktop), 15 px (tablet), 13 px (telefono)
  • Spaziatura lettere di testo: 3px (desktop), 1px (tablet e telefono)
  • Altezza della riga di testo: 3em
Parametro di testo Divi

Aggiungi un modulo di separazione alla colonna 2

visibilità

Il modulo successivo e finale di cui abbiamo bisogno in questa colonna è un modulo di separazione. Assicurati che l'opzione "Mostra separatore" sia abilitata.

  • Mostra separatore: Sì
Divisorio visibile

Linea

Quindi modificare il colore della linea del modulo.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

  • Colore della linea: # 000000
Colore di sfondo divisore

dimensionamento

Quindi apportare alcune modifiche ai parametri di dimensionamento.

  • Peso del divisore: 3px
  • Larghezza: 28%
Dimensionamento separatore Divi

spaziatura

Aggiungiamo anche un margine superiore.

  • Margine superiore: 10px
Interasse moduli separatori Divi

Aggiungi la sezione # 2

spaziatura

Passiamo alla sezione successiva regolare. Rimuovere il riempimento superiore predefinito dalla sezione.

  • Imbottitura superiore: 0px
Sezione 2 spaziatura divi

overflow

Nascondi anche gli overflow.

  • Straripamento orizzontale: nascosto
  • Straripamento verticale: nascosto
Nascondi gli overflow del modulo divi

Aggiungi una nuova linea

Struttura a colonne

Continua ad aggiungere una prima riga usando la seguente struttura di colonne:

Scegli un layout divi

dimensionamento

Senza aggiungere più moduli, aprire i parametri di linea, accedere ai parametri di quotatura e apportare le seguenti modifiche:

  • Usa una larghezza della grondaia personalizzata: Sì
  • Larghezza della grondaia: 1
  • Equalizza le altezze delle colonne: Sì
  • Larghezza: 90%
  • Larghezza massima: 1580 px
Sezione divi configurazione grondaia

spaziatura

Quindi rimuovere tutte le imbottiture superiore e inferiore predefinite.

  • Imbottitura superiore: 0px
  • Imbottitura inferiore: 0px
Impostazioni spaziatura modulo linea Divi 1

Impostazioni della colonna 1

Colore di sfondo

Quindi apri le impostazioni per la colonna 1 e cambia il colore di sfondo.

  • Colore di sfondo: # f7f7f7
Configurazione dello sfondo del modulo della linea Divi

spaziatura

Completa le impostazioni della colonna aggiungendo valori di riempimento personalizzati su schermi di dimensioni diverse.

  • Imbottitura superiore: 200 px (scrivania), 100 px (tablet e telefono)
  • Imbottitura inferiore: 200 px (scrivania), 100 px (tablet e telefono)
  • Imbottitura sinistra: 8%
  • Imbottitura destra: 8%
Impostazioni della colonna del modulo riga

Impostazioni della colonna 2

spaziatura

Continua aprendo le impostazioni nella colonna 2. Vai alla scheda Avanzate e aggiungi valori di riempimento personalizzati su schermi di dimensioni diverse.

  • Imbottitura superiore: 100 px (desktop), 50 px (tablet e telefono)
  • Imbottitura inferiore: 200px
  • Imbottitura sinistra: 150 px (scrivania), 0 px (tablet e telefono)
Impostazioni spaziatura modulo Divi

Aggiungi un modulo di separazione alla colonna 1

visibilità

Nella prima colonna, il primo modulo di cui abbiamo bisogno è un modulo di separazione. Assicurati che l'opzione "Mostra separatore" sia abilitata.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

  • Mostra separatore: Sì
Mostra separatore divi 1

Linea

Quindi modificare il colore della linea del modulo.

  • Colore della linea: # 000000
Impostazioni separatore Divi

dimensionamento

Apportare anche modifiche ai parametri di dimensionamento.

  • Peso del divisore: 3px
  • Larghezza: 50%
Dimensionamento separatore Divi

Aggiungi un modulo di testo alla colonna 1

Aggiungi contenuto H3

Il prossimo modulo di cui abbiamo bisogno nella colonna 1 è un modulo di testo con contenuto H3.

Impostazione della sezione dei contenuti Divi

Impostazioni di testo H3

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

  • Titolo 3 Polizia: trimestrale
  • Colore del testo dell'articolo 3: # 000000
  • Voce 3 Dimensioni del testo: 50 px (desktop), 40 px (tablet), 35 px (telefono)
  • Altezza della linea 3 della testa: 1.1em

Aggiungi un modulo di testo alla colonna 2

Aggiungi contenuto

Nella seconda colonna, il primo modulo di cui abbiamo bisogno è un modulo di testo con alcuni contenuti descrittivi.

Impostazione del modulo di testo Divi

Impostazioni del testo

Modificare le impostazioni di testo del modulo come segue:

  • Carattere testo: cabina
  • Stile del carattere del testo: maiuscolo
  • Dimensioni del testo: 18 px (desktop), 15 px (tablet), 13 px (telefono)
  • Spaziatura lettere di testo: 3px (desktop), 1px (tablet e telefono)
  • Altezza della riga di testo: 3em
Regolazione del carattere dello stampo del testo Divi

Aggiungi un modulo pulsanti alla colonna 2

Aggiungi una copia

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

Impostazione del contenuto del modulo di testo

Impostazioni dei pulsanti

Quindi stile il pulsante.

  • Usa stili personalizzati per il pulsante: Sì
  • Dimensione del testo del pulsante: 20 pixel
  • Colore testo pulsante: #ffffff
  • Colore sfondo pulsante: # 000000
  • Larghezza bordo pulsante: 0px
Impostazione dello stile del pulsante Divi
  • Carattere pulsante: trimestrale
  • Peso carattere pulsante: grassetto
Impostazioni del colore del pulsante Divi

spaziatura

Aggiungi anche un'imbottitura personalizzata.

  • Imbottitura superiore: 50px
  • Imbottitura inferiore: 50px
  • Padding sinistro: 100px
  • Imbottitura destra: 100px
Impostazioni della spaziatura dei pulsanti del modulo Divi

Posizione

E riposiziona il pulsante di conseguenza:

  • Posizione: assoluta
  • Posizione: in basso a sinistra
Regolazione della posizione del modulo pulsanti Divi

Clona la linea tutte le volte che è necessario

Dopo aver completato l'intera linea e tutti i suoi moduli, è possibile clonare l'intera linea tre volte.

Modulo clone divi

Cambia tutto il contenuto

Assicurati di modificare tutto il contenuto in righe duplicate.

Modifica il contenuto della sezione divi

2. Applicare effetti di scorrimento

Effetti di scorrimento della prima riga

Movimento orizzontale

Dopo aver completato tutte le righe nella sezione, è il momento di aggiungere gli effetti di scorrimento. Apri la prima riga della sezione e aggiungi il movimento orizzontale.

  • Attiva movimento orizzontale: Sì
  • Avvia offset: -5
  • Offset medio: 0 (al 26%)
  • Scostamento finale: 0
  • Attivare l'effetto di movimento: metà dell'elemento
Applica effetti di scorrimento divi

Dissolvenza in entrata e in uscita

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

  • Attiva dissolvenza in entrata e in uscita: Sì
  • Opacità iniziale: 100%
  • Opacità media: 100% (al 50%)
  • Opacità finale: 0% (al 53%)
  • Attivare l'effetto di movimento: metà dell'elemento
Configura divi della sezione animazione dissolvenza

Effetti di scorrimento della riga centrale

Movimento verticale

Successivamente, aggiungeremo effetti di scorrimento a tutte le righe tra la prima e l'ultima riga della sezione. Per prima cosa usa un movimento verticale:

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

  • Attiva movimento verticale: Sì
  • Avvia offset: -4
  • Offset medio: 0 (al 26%)
  • Scostamento finale: 0
  • Effetto di attivazione del movimento: metà dell'elemento
Configurazione dell'aniazione di scorrimento Divi

Dissolvenza in entrata e in uscita

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

  • Attiva dissolvenza in entrata e in uscita: Sì
  • Opacità iniziale: 0%
  • Opacità media: 100% (dal 27% al 50%)
  • Fine offset: 0 (al 53%)
  • Attivare l'effetto di movimento: metà dell'elemento
Animazione in dissolvenza della linea Divi

Effetti di scorrimento dell'ultima riga

Movimento verticale

Quindi aprire l'ultima riga della sezione e aggiungere il seguente movimento verticale:

  • Attiva movimento verticale: Sì
  • Avvia offset: -4
  • Offset medio: 0 (al 26%)
  • Scostamento finale: 0
  • Attivare l'effetto di movimento: metà dell'elemento
Animazione a scorrimento modulo linea divi

Dissolvenza in entrata e in uscita

Con un effetto di dissolvenza in entrata e in uscita e il gioco è fatto!

  • Attiva dissolvenza in entrata e in uscita: Sì
  • Opacità iniziale: 0%
  • Opacità media: 100% (dal 27% al 50%)
  • Opacità finale: 100% (al 53%)
  • Attivare l'effetto di movimento: metà dell'elemento
Impostazioni dell'animazione dell'aspetto del modulo della linea Divi

Risultato finale

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.

Demo finale

Considerazioni finali

In questo articolo, ti abbiamo mostrato come creare una bellissima transizione di servizio con gli effetti di scorrimento di Divi. Prima ancora che una di servizio scompaia, comincia ad apparire l'altra, regalando un bel passaggio gradevole alla vista. Questo approccio ti aiuterà a mettere in evidenza ogni servizio a livello individuale. Puoi anche scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, sentiti libero di lasciare un commento nella sezione commenti qui sotto.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
0 azioni
quota
Tweet
Enregistrer