Come creare bellissime transizioni al passaggio del mouse sullo sfondo sfumato con Divi
Pubblicato: 2019-07-13Di recente, sono state aggiunte a Divi alcune opzioni aggiuntive al passaggio del mouse, che ti consentono di creare effetti ancora più interessanti senza dover toccare una singola riga di codice. Ora puoi, ad esempio, creare incredibili transizioni al passaggio del mouse sullo sfondo sfumato. Combinando i gradienti di colonne, righe e sezioni, puoi ottenere design unici. In questo tutorial, ti mostreremo esattamente come farlo. Inizieremo seguendo alcuni passaggi generali. Fatto ciò, ci concentreremo su tre esempi di design individualmente. Potrai anche scaricare gratuitamente il file JSON!
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata ai tre diversi esempi che ricreeremo durante questo tutorial.
Esempio 1
Esempio #2
Esempio #3
Scarica le sezioni The Hero GRATUITAMENTE
Iscriviti al nostro canale Youtube
Per mettere le mani su queste sezioni di eroi gratuite, dovrai prima scaricarle 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
Spaziatura
Iniziamo con alcuni passaggi generali. Aggiungi una nuova sezione alla pagina su cui stai lavorando e rimuovi tutto il riempimento predefinito. La rimozione di tutto il riempimento superiore e inferiore, in seguito, ci aiuterà a combinare gli sfondi sfumati di colonne, righe e sezioni.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza del contenitore della sezione.
- Larghezza: 100%
- Larghezza massima: 100%
Spaziatura
Passa alle impostazioni di spaziatura e rimuovi tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi il modulo di testo n. 1 alla colonna
Aggiungi contenuto H1
Iniziamo ad aggiungere moduli! Il primo di cui abbiamo bisogno è un modulo di testo con alcuni contenuti H1.
Impostazioni testo H1
Passa alla scheda Design e modifica le impostazioni del testo H1 di conseguenza:
- Carattere dell'intestazione: Montserrat
- Allineamento del testo dell'intestazione: al centro
- Colore del testo dell'intestazione: #000000
- Dimensione del testo dell'intestazione: 3vw (desktop), 6vw (tablet e telefono)
- Spaziatura delle lettere dell'intestazione: 0.7vw
Dimensionamento
Successivamente apri le impostazioni di dimensionamento e modifica la larghezza insieme all'allineamento del modulo.
- Larghezza: 48% (desktop), 60% (tablet e telefono)
- Allineamento del modulo: Centro
Spaziatura
Completa il design del modulo aggiungendo un margine superiore.
- Margine superiore: 10vw
Aggiungi modulo divisore alla colonna
Visibilità
Al prossimo modulo! Aggiungi un modulo divisore e assicurati che l'opzione "Mostra divisore" sia abilitata.
- Mostra divisore: Sì
Linea
Cambia il colore della linea dopo.
- Colore linea: #000000
Dimensionamento
Passa alle impostazioni di dimensionamento e applica le seguenti impostazioni:
- Peso del divisore: 0.1vw
- Larghezza: 10% (desktop), 16% (tablet), 25% (telefono)
- Allineamento del modulo: Centro
Spaziatura
Aggiungi anche alcuni valori di riempimento personalizzati su schermi di diverse dimensioni.
- Imbottitura superiore: 2vw (Desktop), 4vw (Tablet), 6vw (Telefono)
- Imbottitura inferiore: 2vw (desktop), 4vw (tablet), 6vw (telefono)
Aggiungi il modulo di testo n. 2 alla colonna
Aggiungi contenuto
Al modulo successivo, che è un altro modulo di testo. Aggiungi del contenuto del paragrafo a tua scelta.
Impostazioni testo
Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Open Sans
- Allineamento del testo: giustifica
- Altezza riga di testo: 2,3 em
Dimensionamento
Modificare la larghezza e l'allineamento del modulo nelle impostazioni di dimensionamento successivo:
- Larghezza: 30% (Desktop), 54% (Tablet), 70% (Telefono)
- Allineamento del modulo: Centro
Aggiungi modulo pulsante alla colonna
Aggiungi copia
Il modulo successivo e ultimo di cui abbiamo bisogno nella colonna è un modulo pulsante. Aggiungi una copia a tua scelta.
Allineamento
Passa alla scheda Design e modifica l'allineamento del pulsante.
- Allineamento dei pulsanti: centro
Impostazioni dei pulsanti
Modifica anche le impostazioni dei pulsanti.
- Usa stili personalizzati per pulsante: Sì
- Dimensione del testo del pulsante: 0.8vw (desktop), 2vw (tablet), 2.8vw (telefono)
- Colore del testo del pulsante: #000000
- Larghezza bordo pulsante: 1px
- Raggio del bordo del pulsante: 1px
- Carattere pulsante: Montserrat
Spaziatura
E aggiungi alcuni valori di spaziatura personalizzati su diverse dimensioni dello schermo.
- Margine superiore: 2vw (desktop), 8vw (tablet e telefono)
- Margine inferiore: 10vw
- Imbottitura superiore: 1vw (Desktop), 2vw (Tablet), 3vw (Telefono)
- Imbottitura inferiore: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Imbottitura sinistra: 3vw (Desktop), 6vw (Tablet), 8vw (Telefono)
- Imbottitura destra: 3vw (Desktop), 6vw (Tablet), 8vw (Telefono)
Clona sezione due volte
Una volta completata la sezione, puoi clonarla due volte; uno per ogni esemplare.
Ricrea la transizione al passaggio del mouse sullo sfondo sfumato n. 1
Sezione
Sfondo sfumato predefinito
Iniziamo a creare la prima transizione al passaggio del mouse! Apri le impostazioni della sezione e aggiungi il seguente sfondo sfumato predefinito:
- Colore 1: #d1d1ff
- Colore 2: #f7f7f7
- Direzione gradiente: 90 gradi
- Posizione di partenza: 50%
- Posizione finale: 50%
Sfondo sfumato al passaggio del mouse
Modifica lo sfondo sfumato al passaggio del mouse.
- Colore 1: #f7f7f7
- Colore 2: #ffc1c7
- Direzione gradiente: 90 gradi
- Posizione di partenza: 50%
- Posizione finale: 50%
Riga
Sfondo sfumato predefinito
Apri le impostazioni della riga e applica le seguenti impostazioni di sfondo sfumato predefinite:
- Colore 1: #7032ff
- Colore 2: RGB (255,255,255,0)
- Direzione gradiente: 90 gradi
- Posizione di partenza: 10%
- Posizione finale: 10%
Sfondo sfumato al passaggio del mouse
Modifica lo sfondo sfumato al passaggio del mouse.
- Colore 1: RGB (255,255,255,0)
- Colore 2: #ff324a
- Direzione gradiente: 90 gradi
- Posizione di partenza: 90%
- Posizione finale: 90%
Ricrea la transizione al passaggio del mouse dello sfondo sfumato #2
Sezione
Sfondo sfumato predefinito
Al secondo esempio! Apri le impostazioni della sezione e aggiungi il seguente sfondo sfumato:
- Colore 1: #f7f7f7
- Colore 2: #eceaff
- Direzione del gradiente: 156deg
- Posizione di partenza: 50%
- Posizione finale: 50%
Sfondo sfumato al passaggio del mouse
Aggiungi uno sfondo sfumato diverso al passaggio del mouse:
- Colore 1: #ffeaec
- Colore 2: #f7f7f7
- Direzione del gradiente: 204deg
- Posizione di partenza: 50%
- Posizione finale: 50%
Riga
Sfondo sfumato predefinito
Apri le impostazioni della riga e applica le seguenti impostazioni di sfondo sfumato:
- Colore 1: #a932ff
- Colore 2: RGB (255,255,255,0)
- Tipo di gradiente: radiale
- Direzione radiale: in basso a sinistra
- Posizione di partenza: 14%
- Posizione finale: 14%
Sfondo sfumato al passaggio del mouse
Cambia lo sfondo del gradiente di riga al passaggio del mouse di conseguenza:
- Colore 1: #ff324a
- Colore 2: RGB (255,255,255,0)
- Tipo di gradiente: radiale
- Direzione radiale: in alto a sinistra
- Posizione di partenza: 14%
- Posizione finale: 14%
Colonna
Sfondo sfumato predefinito
Passa alle impostazioni della colonna e aggiungi il seguente sfondo sfumato:
- Colore 1: #a932ff
- Colore 2: RGB (255,255,255,0)
- Tipo di gradiente: radiale
- Direzione radiale: in alto a destra
- Posizione di partenza: 14%
- Posizione finale: 14%
Sfondo sfumato al passaggio del mouse
Modifica lo sfondo sfumato della colonna al passaggio del mouse:
- Colore 1: #ff324a
- Colore 2: RGB (255,255,255,0)
- Tipo di gradiente: radiale
- Direzione radiale: in basso a destra
- Posizione di partenza: 14%
- Posizione finale: 14%
Ricrea la transizione al passaggio del mouse dello sfondo sfumato n. 3
Sezione
Sfondo sfumato predefinito
Al prossimo e ultimo esempio! Apri le impostazioni della sezione e applica il seguente sfondo sfumato:
- Colore 1: #ffc1c7
- Colore 2: #ffffff
- Tipo di gradiente: radiale
- Direzione radiale: in alto
- Posizione di partenza: 45%
- Posizione finale: 45%
Sfondo sfumato al passaggio del mouse
Modifica lo sfondo sfumato della sezione al passaggio del mouse.
- Colore 1: #ffc1c7
- Colore 2: #ffffff
- Tipo di gradiente: radiale
- Direzione radiale: sinistra
- Posizione di partenza: 20%
- Posizione finale: 20%
Riga
Sfondo sfumato predefinito
Apri le impostazioni della riga e aggiungi il seguente sfondo sfumato:
- Colore 1: #d3dfff
- Colore 2: RGB (255,255,255,0)
- Tipo di gradiente: radiale
- Direzione radiale: In basso
- Posizione di partenza: 45%
- Posizione finale: 45%
Sfondo sfumato al passaggio del mouse
Modifica lo sfondo sfumato di conseguenza:
- Colore 1: #d3dfff
- Colore 2: RGB (255,255,255,0)
- Tipo di gradiente: radiale
- Direzione radiale: destra
- Posizione di partenza: 20%
- Posizione finale: 20%
Colonna
Sfondo sfumato predefinito
Ultimo ma non meno importante, aggiungi uno sfondo sfumato di colonna e il gioco è fatto!
- Colore 1: #f7f7f7
- Colore 2: RGB (255,255,255,0)
- Tipo di gradiente: radiale
- Direzione radiale: Centro
- Posizione di partenza: 41%
- Posizione finale: 41%
Anteprima
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata al risultato di tutti e tre gli esempi che abbiamo ricreato in questo tutorial!
Esempio 1
Esempio #2
Esempio #3
Pensieri finali
In questo post, ti abbiamo mostrato come utilizzare in modo creativo le opzioni aggiuntive del passaggio del mouse sullo sfondo sfumato di Divi per creare splendide transizioni al passaggio del mouse solo con le opzioni integrate di Divi. Abbiamo iniziato con alcuni passaggi generali e abbiamo continuato ricreando ciascuno dei tre esempi. Se hai domande o suggerimenti, assicurati di 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.