Ti piacerebbe progettare uno sfondo Divi Vuoi creare uno scorrimento animato della pagina utilizzando maschere e pattern? Questo tutorial fa al caso tuo...
Aggiungere un'animazione scorrevole a Divi e le sue maschere e i suoi motivi di sfondo rappresentano un utile trucco di design che può dare nuova vita ai design di sfondo del tuo sito web.
In questo tutorial ti mostreremo come creare e animare maschere e pattern di sfondo utilizzando le opzioni di scorrimento di Divi (non è necessario alcun codice personalizzato).
Per fare ciò, creeremo un livello di sfondo mobile utilizzando una linea Divi che utilizzeremo per animare maschere e motivi di sfondo quando un utente scorre una sezione di contenuto.
Pensiamo che ti piacerà il risultato.
Cominciamo!
Panoramica
Ecco una rapida illustrazione di come apparirà l'animazione di scorrimento dello sfondo in questo tutorial.
Il concetto
Il concetto di questo progetto non dovrebbe essere troppo difficile da comprendere. Iniziamo con una sezione che ha uno sfondo sfumato.
Successivamente, creiamo una linea posizionata (assolutamente) in modo da coprire completamente la sezione (come una sovrapposizione). Possiamo aggiungere un motivo di sfondo alla riga.
Ora possiamo aggiungere una maschera di sfondo alla colonna.
Poi aggiungiamo effetti di scorrimento alla riga e alla colonna (come ridimensionamento e rotazione) che animeranno il motivo e la maschera separatamente sullo sfondo della sezione.
Quando nascondiamo l'overflow della sezione, tutto ciò che vediamo è l'animazione contenuta nella sezione.
Iniziamo creando una pagina con Divi Builder
Per iniziare, dovrai fare quanto segue:
Dalla dashboard di WordPress, vai a Pagine> Aggiungi nuovo per creare una nuova pagina.
Dagli un titolo che abbia senso per te e fai clic Usa Divi Builder
quindi fare clic su Inizia a costruire (Costruisci da zero)
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Leggi anche: Divi: come utilizzare il "Gradient Builder" per abbellire le tue immagini
Come creare maschere e pattern di sfondo animati a scorrimento con Divi
Progettazione di sfondo della sezione
Per prima cosa ignoreremo la creazione di una nuova riga e andremo direttamente a modificare la sezione predefinita esistente nel generatore di temi.
Per far sì che il nostro sfondo riempia l'intero browser, dobbiamo aggiungere altezza verticale alla sezione. Un modo semplice per farlo è aggiungere un'altezza minima alla sezione.
Apri le impostazioni della sezione. Sotto la scheda Design, aggiorna l'altezza minima e rimuovi la spaziatura interna come segue:
- Margine: 80 vh (superiore e inferiore)
- Imbottitura: 0px (superiore e inferiore)
Progettazione di un gradiente di sfondo per la sezione
Ora possiamo aggiungere alla sezione un gradiente di sfondo personalizzato.
Per aggiungere le prime interruzioni del gradiente, assicurati che le impostazioni della sezione siano aperte nella scheda ContenutiQuindi, seleziona la scheda Gradiente di sfondo e fai clic per aggiungere un nuovo gradiente. Questo aggiungerà due colori sfumati predefiniti. Aggiungi le seguenti Gradient Stops con colore e posizione come segue:
- Gradiente si ferma:
- 0%: #4158d0
- 50%: #c850c0
- 100%: #ffcc70
Quindi cambia la direzione del gradiente lineare:
- Direzione del gradiente: 270 gradi
Aggiungi righe alla sezione
Ora che la nostra sezione è al suo posto, aggiungiamo una riga a colonna singola. Questa riga verrà utilizzata per la maschera di sfondo e l'animazione di scorrimento del pattern.
Quindi duplica la linea che hai appena creato. Questa seconda riga (duplicata) verrà utilizzata per i nostri contenuti come faresti normalmente.
Ora dovresti avere una riga superiore per l'animazione di scorrimento dello sfondo e una riga per il contenuto normale.
Personalizza la linea
Ora che il gradiente di sfondo della nostra sezione è pronto, possiamo concentrarci sulla linea che utilizzeremo per l'animazione di scorrimento dello sfondo.
Apri le impostazioni della linea. Sotto la scheda Filtri, aggiorna quanto segue:
- Posizione: Assoluta
Ciò consentirà alla linea di sovrapporsi alla sezione senza occupare spazio effettivo nel documento.
Ora, tutto ciò che dobbiamo fare è aggiornare l'altezza e la larghezza in modo che coprano l'intera larghezza e altezza della sezione. Questo creerà la sovrapposizione di cui abbiamo bisogno e il nostro secondo livello di sfondo.
Sotto la scheda Design, aggiorna le opzioni di dimensionamento come segue:
- Altezza colonne Aquasize: SÌ
- Larghezza: 100%
- Larghezza massima: 100%
- Altezza: 100%
- Imbottitura: 0px (superiore e inferiore)
Ora potresti non essere in grado di vedere la linea, ma ora copre perfettamente lo sfondo dell'intera sezione.
Crea un motivo di sfondo per la linea
In questo esempio aggiungeremo il modello Coriandoli come sfondo della linea.
Apri le impostazioni della linea. Sotto l'opzione sfondo, seleziona la scheda Pattern di sfondo e aggiorna quanto segue:
- Motivo di sfondo: coriandoli
- Modello:
- Colore: #f6bef7
- Dimensioni: dimensioni personalizzate
- Larghezza: 35 vw
- Ripeti Origine: centro
NOTA : L'utilizzo dell'unità di lunghezza VW garantisce che il modello si adatti al browser, mantenendo il design coerente e reattivo.
Aggiungi effetti di scorrimento alla linea
Ora che il nostro motivo di sfondo è a posto, possiamo aggiungere effetti di scorrimento alla linea.
Vai alla scheda FiltriSotto l'opzione Effetti di scorrimento, aggiorna quanto segue:
Seleziona la scheda Movimento orizzontale e aggiorna quanto segue:
- Abilita movimento orizzontale: SÌ
- Compensazione iniziale: 0,5 (allo 0%)
- Mid Offset: 0 (dal 40% al 60%)
- Scostamento finale: -0,5 (al 100%)
In questo modo il motivo di sfondo della linea verrà spostato da 50 pixel a sinistra e terminerà 50 pixel a destra.
Selezionare la scheda "Aumenta e diminuisci" e aggiornare quanto segue:
- Abilita ridimensionamento su e giù: SÌ
- Scala iniziale: 150% (allo 0%)
- Scala media: 100% (dal 40% al 60%)
- Scala finale: 150% (al 100%)
In questo modo il motivo di sfondo della linea verrà ridimensionato durante lo scorrimento.
Seleziona la scheda "rotanti " e aggiorna quanto segue:
- Abilita rotazione: SI
- Rotazione iniziale: 10 gradi (a 0%)
- Rotazione media: 0 gradi (dal 40% al 60%)
- Rotazione finale: -10 gradi (al 100%)
SUGGERIMENTO CHIAVE: È consigliabile ridurre al minimo la rotazione, altrimenti si rischia di visualizzare spazi vuoti dove la linea non si estende oltre la sezione. Una buona regola pratica è aumentare la scala se si desidera aumentare la rotazione. Questo permetterà alla linea di ruotare sulla sezione senza esporre i bordi.
Aggiungi una maschera di sfondo con effetti di scorrimento alla colonna
Una volta completata la riga, siamo pronti ad aggiungere una maschera di sfondo con effetti di scorrimento alla colonna nella stessa riga. Per iniziare, aggiungiamo una maschera di sfondo.
Per fare ciò, apri le impostazioni della colonna. Sotto la scheda Maschera di sfondo, aggiorna quanto segue:
- Maschera: Strato Blob
- Colore: #ffffff
- Trasformazione maschera: capovolgimento orizzontale, inversione
Aggiungi effetti di scorrimento alla colonna
Ora che la nostra maschera di sfondo è al suo posto, possiamo aggiungere effetti di scorrimento alla colonna. Tenete presente che la colonna ha già effetti di scorrimento ereditati dalla riga padre.
Tutto quello che faremo è ruotare la colonna nella direzione opposta della riga per ottenere una maggiore separazione della maschera e del motivo per la durata dello scorrimento.
Vai alla scheda Filtri. Sotto opzioni Effetti di scorrimento, seleziona la scheda Rotating e aggiornare quanto segue:
- Abilita rotazione: SI
- Rotazione iniziale: -15 gradi (a 0%)
- Rotazione media: 0 gradi (dal 40% al 60%)
- Rotazione finale: 15 gradi (al 100%)
Nascondi l'overflow della sezione
Attualmente, la linea rimane visibile ogni volta che lo scorrimento la estende oltre la sezione.
Per ripulire questo, dobbiamo nascondere l'overflow della sezione. Per farlo, apri le impostazioni della sezione. Nella scheda Filtri, aggiorna le opzioni di visibilità come segue:
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
Ora sembra migliore.
Guarda anche: Divi: 12 combinazioni di maschere e motivi di sfondo
Aggiunta di contenuto alla linea creata per questo scopo
A questo punto, la maschera di sfondo e l'animazione di scorrimento del pattern sono complete. Non ci resta che aggiungere il contenuto desiderato alla riga creata in precedenza per il contenuto.
Per questo esempio, abbiamo aggiunto un titolo fittizio in modo da poter vedere come apparirà l'animazione di sfondo con testo statico.
Risultato finale
Diamo un'occhiata al risultato finale del nostro progetto.
Scarica DIVI ora!!!
Conclusione
È incredibile quanto sia facile creare sfondi così belli con le opzioni di Divi. Inoltre, l'aggiunta di animazioni con gli effetti di scorrimento di Divi dà nuova vita a questi design.
Per un look diverso, puoi provare maschere e motivi diversi su ogni livello. Se desideri più ispirazione su come utilizzare il maschere e modelli Per informazioni di base, vedere questi 12 combinazioni di maschere e motivi di sfondo
Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet.
Non esitate a consultare anche la nostra guida sul Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...