Vai al contenuto principale

Come creare gli effetti di scorrimento del divisore di sezione in 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]

La creazione di effetti di scorrimento utilizzando il divisore di sezione è una tecnica facile e divertente che può aggiungere vita al tuo sito Web utilizzando il tema Divi WordPress. Un divisore di sezione continua ad essere un elemento di design versatile, utile per aggiungere un tocco di creatività alle transizioni dei contenuti della pagina. 

Ma con gli effetti di scorrimento di Divi, i divisori di sezione diventano ancora più interessanti! Il trucco sta nell'isolare una sezione dedicata allo stile del divisore scelto. Quindi puoi aggiungere tutti i tipi di movimenti generati dallo scorrimento alla sezione per creare bellissimi effetti di scorrimento come sfondo per il contenuto della pagina.

Cominciamo!

Possibile risultato

Ecco una panoramica dei progetti che saremo in grado di realizzare dopo aver completato questo tutorial.

Come creare divisori animati di sezioni a scorrimento con Divi

Creazione delle due sezioni di contenuto

Aggiungi una riga

Per iniziare, crea una riga con una colonna nella sezione predefinita.

Aggiungi sezione divi

Margine della sezione (per i test)

A scopo di test, aggiungi un margine superiore alla sezione in modo da avere spazio per lo scorrimento. Apri le impostazioni della sezione e aggiungi quanto segue:

  • Margine superiore: 80 vh
Configurare la spaziatura delle sezioni Div

Aggiungi un modulo di testo

Nella riga di una colonna, aggiungi un nuovo modulo di testo.

Modulo di testo Divi

Contenuto del modulo di testo

All'interno del contenuto del corpo, aggiungi il seguente titolo H2:

<h2>Section Avec Séparateurs</h2>

Sezione con divisorio

Design del modulo di testo

Sotto le impostazioni di progettazione, aggiorna quanto segue:

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]

  • Carattere testo: Roboto
  • Allineamento del testo: centro
  • Articolo 2 Colore del testo: # bae0d8
  • Intestazione 2 Dimensioni testo: 80 px (desktop), 50 px (tablet), 30 px (telefono)
Configurazione dei caratteri Divi

Aggiungi una seconda sezione di contenuto

Nella sezione precedente, aggiungi una nuova sezione regolare.

sezione divisoria effetti di scorrimento del divisore

Aggiungi una riga

Nella nuova sezione, aggiungi una riga a una colonna.

Aggiungi sezione divi 1

Aggiungi un modulo di testo

Quindi aggiungi un nuovo modulo di testo alla riga.

Aggiungi modulo di testo divi

Design del modulo di testo

Per ora possiamo mantenere il contenuto di riempimento predefinito all'interno del corpo. Passiamo alla scheda di progettazione e aggiorniamo quanto segue:

  • Carattere testo: Roboto
  • Colore del testo del testo: #dddddd
  • Dimensione del testo: 16px
  • Altezza della riga di testo: 1,5 em
  • Allineamento del testo: a sinistra
  • Larghezza massima: 400 px
  • Allineamento del modulo: centro
Personalizza il modulo divi in ​​stile testo

Impostazioni della sezione

Assicurati di rimuovere il colore di sfondo predefinito della sezione, ma dagli uno sfondo completamente trasparente. Quindi possiamo rimuovere il riempimento superiore e aggiungere un margine inferiore per scopi di test di scorrimento.

Per fare ciò, apri le impostazioni della sezione e aggiorna quanto segue:

  • Colore di sfondo: rgba (0,0,0,0)
  • Margine inferiore: 80vh
  • Riempimento: 0px
Configurazione della sezione di spaziatura Divi

Creazione del separatore di sezione animata

Una volta completate due sezioni di contenuto, siamo pronti per aggiungere la sezione per i nostri divisori di sezione animati.

Aggiungi una nuova sezione

Vai avanti e crea una nuova sezione regolare nel mezzo delle due sezioni di contenuto.

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]

Aggiungi sezione regolare divi

Contesto della sezione

E ancora, rimuovi il colore di sfondo predefinito della sezione, ma aggiornando quanto segue:

  • Colore di sfondo: rgba (0,0,0,0)
Personnalsier sfondo sezione divi

Disegno del divisore di sezione

Non preoccuparti, creeremo il nostro colore di sfondo con i divisori di sezione. Per fare ciò, fare clic sulla scheda di progettazione e aggiungere un divisore superiore e inferiore alla sezione come segue:

Design divisorio superiore

  • Stile divisore superiore: vedi screenshot
  • Colore del divisore superiore: # 524fbf
  • Altezza del divisore superiore: 20vw
  • Ripetizione orizzontale del divisore superiore: 0,6x
  • Capovolgi del divisore superiore: orizzontale
Configurazione bordo sezione Divi

Design divisore inferiore

  • Stile divisore inferiore: vedi screenshot
  • Colore separatore inferiore: # 524fbf
  • Altezza del divisore inferiore: 20vw
  • Ripetizione orizzontale del divisore inferiore: 0,5x
  • Inclinazione inferiore del divisore: orizzontale e verticale
Selettore divi inferiore
Altezza della sezione e imbottitura

Poiché questa sezione è esclusivamente per la progettazione di divisori, possiamo eliminare l'altezza e l'imbottitura in modo che venga visualizzato solo lo stile del divisore e non ci sia spazio inutile tra le due sezioni di contenuto. Aggiorna quanto segue:

  • Altezza: 0px
  • Imbottitura: 0px alta, 0px bassa
Divisore basso sezione divi
Effetti di scorrimento del separatore di sezione

Quindi dai alla sezione i seguenti effetti di scorrimento:

Sotto la scheda Movimento orizzontale ...

  • Attiva movimento orizzontale: SÌ

Possiamo mantenere le impostazioni predefinite per questo nella visualizzazione di ufficio .

Divisione scorrimento orizzontale

Quindi aggiornare i parametri di movimento orizzontale sul compressa :

  • Inizio offset: 3 (allo 0% della finestra)
  • Offset medio: 0 (al 50% del viewport)
  • Fine offset: -3 (al 100% del viewport)
Tavolo orizzontale di contaminazione divi

Sotto la scheda Ridimensionamento su e giù effetto , aggiorna quanto segue sul ufficio ...

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]

  • Scala iniziale: 200% (allo 0% della finestra)
  • Scala media: 150% (al 45% -65% del viewport)
  • Fine scala: 150% (al 100% del viewport)
Configurazione del layout

Quindi aggiorna l'effetto Ridimensionamento su e giù in compressa come segue:

  • Scala iniziale: 400% (allo 0% della finestra)
  • Scala media: 300% (al 45% -65% del viewport)
  • Fine scala: 400% (al 100% del viewport)

Il motivo principale per cui dobbiamo regolare gli effetti di movimento sul tablet (e sul telefono) è dovuto ai valori di movimento orizzontale utilizzando le unità di lunghezza dei pixel (ad esempio 3 = 300 pixel), che sono assoluto e non si adattano alla larghezza del browser.

Ora vediamo il risultato finale del nostro divisore animato di sezioni animate.

Considerazioni finali

L'animazione dei divisori di sezione sulla pergamena è un modo divertente ed efficace per dare vita a una pagina web. Spero che questo ti dia l'ispirazione per accendere tu stesso progetti ancora più creativi.

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
1 azioni
quota1
Tweet
Enregistrer