Come utilizzare forme di movimento trasformate come sfondi con Divi
Pubblicato: 2020-05-07I nuovi effetti di scorrimento di Divi sono fatti per portare facilmente la tua esperienza di web design al livello successivo. Naturalmente, puoi applicarlo direttamente agli elementi all'interno della tua sezione, ma puoi scegliere di aggiungere movimento anche agli elementi sottostanti. L'adozione di un approccio di base ti consente di mantenere il contenuto statico mentre il movimento in background è in corso. In questo tutorial, utilizzeremo le forme di movimento trasformate come elementi sottostanti per creare una sezione animata. Tratteremo due esempi diversi ma le possibilità sono davvero infinite. Potrai anche scaricare gratuitamente il file JSON!
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
Scarica GRATUITAMENTE il layout delle forme di movimento trasformate
Per mettere le mani sul layout delle forme di movimento trasformate gratuite, devi prima scaricarlo 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 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.
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!
Passaggi generali
Aggiungi nuova sezione
Sfondo sfumato
Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e applica uno sfondo sfumato.
- Colore 1: #ffffff
- Colore 2: #97c6fc
- Tipo di gradiente: lineare
- Direzione gradiente: 306 gradi
- Posizione di partenza: 50%
- Posizione finale: 50%
Spaziatura
Passa alla scheda di progettazione della sezione e utilizza alcuni margini personalizzati e valori di riempimento.
- Margine sinistro: 4%
- Margine destro: 4%
- Imbottitura superiore: 11%
- Imbottitura inferiore: 11%
Scatola ombra
Stiamo usando anche un'ombra sottile della scatola.
- Intensità della sfocatura dell'ombra della scatola: 80 px
- Colore ombra: rgba(0,0,0,0.1)
- Posizione ombra scatola: Ombra esterna
Visibilità
E completeremo le impostazioni della sezione impostando gli overflow su nascosti. Ciò assicurerà che quando aggiungiamo le forme di movimento trasformate, non supereranno il contenitore della sezione.
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga alla tua sezione utilizzando la seguente struttura a colonne:
Dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica la larghezza massima nelle impostazioni di dimensionamento.
- Larghezza massima: 1580 px
Spaziatura colonna 1
Stiamo aggiungendo anche un po' di riempimento superiore alle impostazioni di spaziatura della prima colonna.
- Imbottitura superiore: 9%
Aggiungi il modulo di testo n. 1 alla colonna 1
Aggiungi contenuto H2
Una volta completate le impostazioni della riga, è il momento di aggiungere moduli, iniziando con un modulo di testo nella colonna 1. Aggiungi del contenuto H2 a tua scelta.
Impostazioni testo H2
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H2 di conseguenza:
- Carattere titolo 2: Abril Fatface
- Colore testo titolo 2: #7206a0
- Titolo 2: Dimensione testo: 80 px (desktop), 65 px (tablet), 50 px (telefono)
Aggiungi il modulo di testo n. 2 alla colonna 1
Impostazioni testo
Aggiungi un altro modulo di testo proprio sotto il precedente 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: #7206a0
- Altezza riga di testo: 2em
Aggiungi modulo pulsante alla colonna 1
Aggiungi copia
L'ultimo modulo di cui abbiamo bisogno nella colonna 1 è un modulo pulsante. Inserisci una copia a tua scelta.
Impostazioni dei pulsanti
Quindi, passa alla scheda Design e modella il pulsante di conseguenza:
- Usa stili personalizzati per pulsante: Sì
- Dimensione del testo del pulsante: 20 px
- Colore del testo del pulsante: #ffffff
- Colore di sfondo del pulsante: #077bff
- Larghezza bordo pulsante: 0px
- Carattere pulsante: Abril Fatface
Spaziatura
Stiamo aggiungendo anche alcuni valori di riempimento personalizzati.
- Imbottitura superiore: 20px
- Imbottitura inferiore: 20px
- Imbottitura sinistra: 50 px
- Imbottitura destra: 50px
Aggiungi modulo immagine alla colonna 2
Carica immagine
Nella seconda colonna della riga, l'unico modulo di cui abbiamo bisogno è un modulo immagine. Carica un'illustrazione a tua scelta. Se vuoi usare esattamente quello che abbiamo usato in questo tutorial, puoi trovarlo nella cartella di download che hai potuto scaricare all'inizio di questo post.
Allineamento
Passa alla scheda di progettazione del modulo e modifica l'allineamento dell'immagine.
- Allineamento immagine: a destra
Dimensionamento
Completa le impostazioni del modulo modificando la larghezza su diverse dimensioni dello schermo.
- Larghezza: 100% (desktop), 50% (tablet e telefono)
Ricrea l'esempio n. 1
Aggiungi modulo di testo alla parte superiore della colonna 1
Una volta che tutti i moduli regolari sono a posto, è il momento di aggiungere le forme di movimento trasformate! Ricreeremo il primo esempio aggiungendo un nuovo modulo di testo nella parte superiore della prima colonna. Lascia vuota la casella del contenuto.
Sfondo sfumato
Aggiungi uno sfondo sfumato al modulo successivo.
- Colore 1: RGB (255,255,255,0)
- Colore 2: #00fff6
- Tipo di gradiente: lineare
- Direzione gradiente: 306 gradi
- Posizione di partenza: 54%
- Posizione finale: 54%
Dimensionamento
Modifica anche le impostazioni di dimensionamento.
- Larghezza: 165%
- Altezza: 270%
Spaziatura
Quindi, vai alle impostazioni di spaziatura e utilizza alcuni valori di spaziatura personalizzati.
- Margine inferiore: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Imbottitura superiore: 29%
- Imbottitura inferiore: 29%
Trasforma Ruota
Stiamo ruotando il modulo successivo.
- Sinistra: 270°
Trasforma inclinazione
Applicheremo anche un valore di inclinazione della trasformazione.
- In basso: 16deg
- Destra: 16deg
Posizione
Quindi, passa alla scheda Avanzate e modifica le impostazioni di posizione come segue:
- Posizione: Assoluta
- Posizione: in alto a sinistra
- Scostamento verticale: -50%
- Scostamento orizzontale: -50%
Effetto scorrimento movimento verticale
Successivamente, aggiungeremo gli effetti di scorrimento, iniziando con un movimento verticale.
- Abilita movimento verticale: Sì
- Compensazione iniziale: 4
- Scostamento medio: 0 (al 50%)
- Compensazione finale: -4
Effetto scorrimento movimento orizzontale
E completeremo le impostazioni del modulo aggiungendo anche un po' di movimento orizzontale!
- Abilita movimento orizzontale: Sì
- Compensazione iniziale: 4
- Scostamento medio: 0 (al 50%)
- Scostamento finale: -4%
Ricrea l'esempio n. 2
Aggiungi modulo di testo alla parte superiore della colonna 1
Vuoi ricreare invece il secondo esempio? Aggiungi un modulo di testo nella parte superiore della prima colonna.
Colore di sfondo
Apri le impostazioni del modulo e applica un colore di sfondo.
- Colore di sfondo: #00fff6
Dimensionamento
Passa alla scheda di progettazione del modulo e modifica le impostazioni di dimensionamento.
- Larghezza: 165%
- Altezza: 270%
Spaziatura
Stiamo aggiungendo anche alcuni valori di spaziatura personalizzati.
- Margine inferiore: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Imbottitura superiore: 29%
- Imbottitura inferiore: 29%
Ruota inclinazione
E applicheremo un effetto di inclinazione di trasformazione nelle impostazioni di trasformazione.
- Destra: -54°
Posizione
Quindi, andremo alla scheda Avanzate e modificheremo le impostazioni di posizione del modulo.
- Posizione: Assoluta
- Posizione: in alto a sinistra
- Scostamento verticale: -50%
- Scostamento orizzontale: -50%
Effetto scorrimento movimento verticale
Quindi, aggiungeremo gli effetti di scorrimento. Iniziando con un movimento verticale.
- Abilita movimento verticale: Sì
- Compensazione iniziale: 4
- Scostamento medio: 0 (al 50%)
- Compensazione finale: -4
Effetto scorrimento movimento orizzontale
E completeremo le impostazioni del modulo aggiungendo anche un po' di movimento orizzontale!
- Abilita movimento orizzontale: Sì
- Compensazione iniziale: 4
- Scostamento medio: 0 (al 50%)
- Compensazione finale: -4
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
Pensieri finali
In questo post, ti abbiamo mostrato come aggiungere in modo creativo forme di movimento trasformate al design della tua sezione. Le forme di movimento trasformate sottostanti aiutano ad aggiungere un'animazione sottile ai progetti delle sezioni. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande, 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.