La creazione di effetti di scorrimento utilizzando il divisore di sezione è una tecnica semplice e divertente che può aggiungere vita al tuo sito web usando il tema WordPress Divi. Un divisorio continua ad essere un elemento di design versatile, utile per aggiungere un tocco di creatività alle tue transizioni contenuto de 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 di divisorio 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 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.
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
Aggiungi un modulo di testo
Nella riga di una colonna, aggiungi un nuovo modulo di testo.
Contenuto del modulo di testo
All'interno di contenuto del corpo, aggiungere la seguente intestazione H2:
<h2>Section Avec Séparateurs</h2>
Design del modulo di testo
Sotto le impostazioni di progettazione, aggiorna quanto segue:
- 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)
Aggiungi una seconda sezione di contenuto
Nella sezione precedente, aggiungi una nuova sezione regolare.
Aggiungi una riga
Nella nuova sezione, aggiungi una riga a una colonna.
Aggiungi un modulo di testo
Quindi aggiungi un nuovo modulo di testo alla riga.
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
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
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.
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)
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
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
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
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 .
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)
Sotto la scheda Ridimensionamento su e giù effetto , aggiorna quanto segue sul ufficio ...
- Scala iniziale: 200% (allo 0% della finestra)
- Scala media: 150% (al 45% -65% del viewport)
- Fine scala: 150% (al 100% del viewport)
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.
