Come modificare uno sfondo sfumato al passaggio del mouse con Divi
Pubblicato: 2019-01-05La creazione di siti Web significa assicurarsi che ogni dettaglio sia corretto. Prestare attenzione ai piccoli dettagli nel tuo design aumenterà rapidamente e migliorerà la qualità del tuo sito web. Con le nuove opzioni al passaggio del mouse di Divi, puoi aggiungere facilmente piccole interazioni sul tuo sito web. Le opzioni al passaggio del mouse si applicano a quasi tutte le impostazioni di progettazione. Ad esempio, puoi modificare indirettamente uno sfondo sfumato al passaggio del mouse per creare una bella transizione. Questo è esattamente ciò che ti mostreremo in questo post sul blog. Oltre a ottenere la transizione del gradiente, creeremo anche uno straordinario esempio di design da zero che puoi utilizzare liberamente per qualsiasi tipo di sito Web che crei.
Arriviamo ad esso!
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato finale su schermi di diverse dimensioni.
Statico
Passa il mouse
Scarica le illustrazioni GRATUITAMENTE
Per mettere le mani sulle illustrazioni gratuite che provengono dal Video Game Layout Pack, 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ì e venerdì! 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!
Iniziamo a creare!
Iscriviti al nostro canale Youtube
Aggiungi la sezione n. 1
Spaziatura
La prima cosa che devi fare è creare una nuova pagina o aprirne una esistente e aggiungervi una nuova sezione regolare. Apri le impostazioni e aggiungi un margine superiore e inferiore personalizzato.
- Imbottitura superiore: 100 px
- Imbottitura inferiore: 100 px
Aggiungi riga n. 1
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Colore di sfondo predefinito della colonna 1
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi il seguente colore di sfondo predefinito alla colonna 1:
- Colore di sfondo: #e7ffa0
Colore di sfondo al passaggio del mouse della colonna 1
Cambia questo colore di sfondo al passaggio del mouse.
- Colore di sfondo: #00020c
Sfondo sfumato colonna 1
Aggiungi anche un colore di sfondo sfumato alla colonna 1. Noterai che stiamo usando un colore completamente trasparente. Questo colore consentirà di mostrare il colore di sfondo, che a sua volta cambia al passaggio del mouse.
- Colore 1: RGB (255,255,255,0)
- Colore 2: RGB (16,0,201,0.8)
- Tipo di gradiente colonna 1: lineare
- Colonna 1 Direzione gradiente: 50deg
- Colonna 1 Posizione iniziale: 20%
Colore di sfondo della colonna 2
Aggiungi anche un colore di sfondo della colonna 2.
- Colore di sfondo della colonna 2: #ffffff
Dimensionamento
Quindi, vai alla scheda Design e modifica le impostazioni di dimensionamento.
- Usa larghezza personalizzata: Sì
- Unità: PX
- Larghezza personalizzata: 2000 px
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
Spaziatura
Continua aggiungendo alcuni valori di riempimento personalizzati nelle impostazioni di spaziatura.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
- Imbottitura superiore colonna 2: 6vw (desktop), 120px (tablet e telefono)
- Imbottitura inferiore colonna 2: 6vw (desktop), 120px (tablet e telefono)
- Imbottitura sinistra colonna 2: 5vw (Desktop), 80px (Tablet), 50px (Telefono)
- Imbottitura destra colonna 2: 5vw (Desktop), 80px (Tablet), 50px (Telefono)
Scatola ombra
E dai anche alla riga una sottile ombra di scatola.
- Forza sfocatura dell'ombra della scatola: 100 px
- Forza di diffusione dell'ombra della scatola: -10px
transizioni
Ultimo ma non meno importante, creeremo una transizione graduale dello sfondo sfumato aumentando la durata della transizione nella scheda Avanzate.
- Durata della transizione: 1100 ms
Aggiungi modulo immagine alla colonna 1
Carica immagine
È ora di iniziare ad aggiungere moduli! Aggiungi un modulo immagine alla prima colonna e carica il file ' divi-gradient-background-on-hover-illustration-1.png ' che puoi trovare nella cartella zippata che hai scaricato all'inizio di questo post.
Sfondo sfumato
Vai alle impostazioni dello sfondo di questo modulo immagine e aggiungi uno sfondo sfumato. Utilizziamo nuovamente un colore completamente trasparente per consentire agli altri colori di trasparire.
- Colore 1: RGB (50,217,255,0.66)
- Colore 2: RGB (255,255,255,0)
- Tipo di gradiente: radiale
- Direzione radiale: in alto
- Posizione finale: 57%
Spaziatura
Quindi, aggiungi un'imbottitura superiore personalizzata al modulo.
- Imbottitura superiore: 14vw
Aggiungi il modulo di testo del titolo alla colonna 2
Aggiungi contenuto
Alla seconda colonna! Il primo modulo di cui avremo bisogno è un modulo di testo del titolo. Vai avanti e aggiungi alcuni contenuti di intestazione a tua scelta.
Impostazioni del testo dell'intestazione
Quindi, vai alle impostazioni del testo dell'intestazione e apporta alcune modifiche.
- Carattere dell'intestazione: Abril Fatface
- Colore del testo dell'intestazione: #000000
- Dimensione del testo dell'intestazione: 4vw (desktop), 60px (tablet), 40px (telefono)
Aggiungi il modulo di testo descrittivo alla colonna 2
Aggiungi contenuto
Il secondo modulo di cui avremo bisogno è un altro modulo di testo. Aggiungi alcuni contenuti a tua scelta.
Impostazioni testo
Quindi, vai alle impostazioni del testo e modifica l'orientamento del testo.
- Orientamento del testo: giustifica
Dimensionamento
Regola anche la larghezza nelle impostazioni di dimensionamento.
- Larghezza: 73% (desktop), 100% (tablet e telefono)
Spaziatura
Infine, aggiungi un margine superiore e inferiore personalizzato al modulo per creare spazi bianchi.
- Margine superiore: 2,5 vw (desktop), 50 px (tablet e telefono)
- Margine inferiore: 2,5 vw (desktop), 50 px (tablet e telefono)
Aggiungi modulo pulsante alla colonna 2
Aggiungi copia
Il terzo e ultimo modulo di cui avremo bisogno nella seconda colonna è un modulo pulsante. Aggiungi una copia a tua scelta.
Impostazioni dei pulsanti
Modificare le impostazioni del pulsante successivamente.
- Usa stili personalizzati per il pulsante: Sì
- Dimensione del testo del pulsante: 1.2vw (desktop), 14px (tablet e telefono)
- Colore del testo del pulsante: #ffffff
- Colore sfumatura 1: #9ea6ff
- Colore sfumato 2: rgba(16,0,201,0.8)
- Direzione gradiente: 78 gradi
- Larghezza bordo pulsante: 0px
- Raggio del bordo del pulsante: 30 px
- Spaziatura delle lettere dei pulsanti: -1px
- Peso del carattere: Ultra grassetto
- Stile carattere: maiuscolo
Spaziatura
Aggiungi anche alcuni valori di riempimento personalizzati.
- Imbottitura superiore: 10px
- Imbottitura inferiore: 10px
- Imbottitura sinistra: 40px
- Imbottitura destra: 40px
Scatola ombra
E applica un'ombra sottile al pulsante.
- Forza sfocatura ombra scatola: 40 px
Aggiungi sezione #2
Spaziatura
Ora che abbiamo terminato la prima sezione, passeremo alla successiva. Aggiungi una nuova sezione normale utilizzando i seguenti valori di riempimento personalizzati:
- Imbottitura superiore: 100 px
- Imbottitura inferiore: 100 px
Aggiungi riga #2
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Colore di sfondo della colonna 1
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi il seguente colore di sfondo alla colonna 1:
- Colore di sfondo della colonna 1: #ffffff
Colore di sfondo predefinito della colonna 2
Aggiungi il seguente colore di sfondo alla colonna 2.
- Colore di sfondo della colonna 2: #ffffff
Colore di sfondo al passaggio del mouse della colonna 2
E cambia questo colore di sfondo al passaggio del mouse.
- Colore di sfondo della colonna 2: #3d02ff
Sfondo sfumato colonna 2
Aggiungi anche uno sfondo sfumato alla colonna.
- Colore 1: RGB (255,255,255,0)
- Colore 2: #ff7700
- Colonna 2 Posizione iniziale: 20%
Dimensionamento
Quindi, vai alle impostazioni di dimensionamento e apporta alcune modifiche.
- Usa larghezza personalizzata: Sì
- Unità: PX
- Larghezza personalizzata: 2000 px
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
Spaziatura
Continua aggiungendo valori di riempimento personalizzati nelle impostazioni di spaziatura.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
- Imbottitura superiore colonna 1: 6vw (desktop), 120px (tablet e telefono)
- Imbottitura inferiore colonna 1: 6vw (desktop), 120px (tablet e telefono)
- Imbottitura sinistra colonna 1: 5vw (desktop), 80px (tablet), 50px (telefono)
- Imbottitura destra colonna 1: 5vw (Desktop), 80px (Tablet), 50px (Telefono)
Scatola ombra
E aggiungi anche un'ombra sottile a questa riga.
- Forza sfocatura dell'ombra della scatola: 100 px
- Forza di diffusione dell'ombra della scatola: -10px
transizioni
Ultimo ma non meno importante, crea una transizione graduale aumentando la durata della transizione nella scheda Avanzate.
- Durata della transizione: 1100 ms
Moduli di testo duplicato e modulo pulsante della riga n. 1
Poiché abbiamo già tutti i moduli di cui abbiamo bisogno nella sezione precedente, risparmieremo tempo clonandoli.
Posiziona duplicati nella colonna 1 della riga n. 2
E posizionando i duplicati nella prima colonna della nuova riga.
Modifica contenuto
Assicurati di modificare il contenuto dei tuoi moduli.
Cambia sfondo sfumato pulsante
Cambia anche lo sfondo sfumato del pulsante.
- Colore 1: #ff653f
- Colore 2: #0066ff
- Direzione gradiente: 39deg
Modulo clone immagine della riga n. 2
Clona anche il modulo immagine che trovi nella prima colonna della riga precedente.
Posiziona duplicato nella colonna 2 della riga n. 2
E posiziona il duplicato nella seconda colonna della nuova riga.
Cambia immagine
Cambia l'immagine nel file ' divi-gradient-background-on-hover-illustration-2.png ' che puoi trovare nella cartella zippata che hai scaricato all'inizio di questo post.
Cambia sfumatura di sfondo
Ultimo ma non meno importante, cambia lo sfondo sfumato del modulo immagine.
- Colore 1: rgba(0,2,12,0.66)
- Colore 2: RGB (255,255,255,0)
- Posizione finale: 57%
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato finale su schermi di diverse dimensioni!
Statico
Passa il mouse
Pensieri finali
In questo post, ti abbiamo mostrato come modificare uno sfondo sfumato al passaggio del mouse utilizzando Divi. Abbiamo anche creato da zero uno straordinario esempio di design che utilizza questo approccio. Sei libero di utilizzare il design e le illustrazioni per qualsiasi tipo di sito web che stai costruendo. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!