Ti piacerebbe avere una sfumatura di sfondo Divi che cambia quando si libra?
La creazione di siti Web significa assicurarsi che ogni dettaglio sia corretto. Prestare attenzione ai piccoli dettagli del tuo design aumenterà rapidamente la qualità del tuo sito web.
Con le nuove opzioni al passaggio del mouse di Divi, puoi facilmente aggiungere piccole interazioni sul tuo sito web. Le opzioni al passaggio del mouse si applicano a quasi tutti i parametri 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 tutorial. Oltre a effettuare la transizione gradiente, creeremo anche uno straordinario esempio di design da zero che sarai libero di utilizzare per qualsiasi tipo di sito web che crei.
Andiamo!
Panoramica
Prima di tuffarci nel tutorial, diamo un'occhiata al risultato finale.
Iniziamo a progettare con Divi
Guarda anche: Divi: come creare uno slider per fisarmonica reattivo
Aggiungi la sezione # 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 margini superiore e inferiore personalizzati.
- Imbottitura (superiore e inferiore): 100px
Aggiungi la riga 1
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Colore di sfondo predefinito (Desktop) della colonna 1
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi il seguente colore di sfondo predefinito alla colonna 1:
- Sfondo (desktop): #e7ffa0
Colore di sfondo della colonna 1 al passaggio del mouse
Cambia questo colore di sfondo al passaggio del mouse.
- Sfondo: #00020c
Sfumatura di sfondo della colonna 1
Aggiungi anche un colore di sfondo sfumato alla colonna 1. Nota che stiamo usando un colore completamente trasparente. Questo colore consentirà la visualizzazione del colore di sfondo, che a sua volta cambia al passaggio del mouse.
- Colore 1 (20%): RGB(255,255,255,0)
- Colore 2 (100%): RGB(16,0,201,0.8)
- Tipo di gradiente: lineare
- Direzione gradiente: 50 gradi
Colore di sfondo della colonna 2
Aggiungi anche un colore di sfondo alla colonna 2.
- Sfondo: #ffffff
dimensionamento
Quindi vai alla scheda Design e modificare le impostazioni di dimensionamento nell'opzione dimensionamento.
- Usa larghezza grondaia personalizzata: SÌ
- Larghezza grondaia: 1
- Larghezza: 2000px
spaziatura
Continua aggiungendo valori di riempimento personalizzati nelle impostazioni di spaziatura.
- Imbottitura (superiore e inferiore): 0px
Spaziatura (colonna 2)
- Imbottitura (superiore e inferiore): 6vw (desktop), 120px (tablet e telefono)
- Imbottitura (sinistra e destra): 5vw (desktop), 80px (tablet), 50px (telefono)
scatola di ombra
E dai anche alla riga un'ombra sottile.
- Intensità sfocatura ombra scatola: 100px
- Box Shadow Spread Forza: -10px
transizioni
Infine, creeremo una transizione di sfondo sfumata uniforme aumentando la durata della transizione nella scheda Tecnologia.
- Durata della transizione: 1100 ms
Aggiungi un modulo Immagine alla colonna 1
Carica un'immagine
È ora di iniziare ad aggiungere moduli! Aggiungi un modulo Immagine alla prima colonna.
Sfondo sfumato
Vai alle impostazioni dello sfondo di questo modulo Immagine e aggiungi uno sfondo sfumato. Utilizziamo ancora una volta un colore completamente trasparente per consentire agli altri colori di essere visibili.
- Colore 1 (57%): RGB (50,217,255,0.66)
- Colore 2 (100%): RGB (255,255,255,0)
- Tipo di sfumatura: circolare
- Posizione gradiente: in alto
spaziatura
Quindi, aggiungi un'imbottitura superiore personalizzata al modulo.
- Imbottitura (superiore): 14vw
Aggiungi il modulo di testo alla colonna 2
Aggiungi contenuto
Passiamo alla seconda colonna! Il primo modulo di cui avremo bisogno è un modulo di testo per il titolo. Vai avanti e aggiungi a contenuto titolo a scelta.
Impostazioni del testo dell'intestazione
Quindi, vai alle impostazioni del testo dell'intestazione e apporta alcune modifiche.
- Carattere: Abril Fatface
- Colore del testo: #000000
- Dimensione testo: 4 vw (desktop), 60 px (tablet), 40 px (telefono)
Aggiungi un secondo modulo di testo alla colonna 2
Aggiungi contenuto
Il secondo modulo di cui avremo bisogno è un altro modulo di testo. Aggiungi un po contenuto di scelta.
Impostazioni del testo
Quindi, vai alle impostazioni del testo e modifica l'allineamento del testo.
- Allineamento del testo: giustificato
dimensionamento
Regola anche la larghezza nelle impostazioni delle taglie.
- Larghezza: 73% (desktop), 100% (tablet e telefono)
spaziatura
Infine, aggiungi margini superiore e inferiore personalizzati al modulo per creare spazi.
- Margine (superiore e inferiore): 2,5 vw (desktop), 50 px (tablet e telefono)
Aggiungi il modulo Button alla colonna 2
Aggiungere una descrizione
Il terzo e ultimo modulo di cui avremo bisogno nella seconda colonna è un modulo Button. Aggiungi una copia a tua scelta.
Impostazioni dei pulsanti
Quindi modificare le impostazioni dei pulsanti.
- Usa stili personalizzati per pulsante: SÌ
- Dimensione testo pulsante: 1,2 vw (desktop), 14 px (tablet e telefono)
- Colore testo pulsante: #ffffff
- Gradient Stops 1 (0%): #9ea6ff
- Gradiente si ferma 2 (100%): rgba(16,0,201,0.8)
- Sterzo: 78 gradi
- Larghezza bordo pulsante: 0 pixel
- Raggio di confine: 30px
- Spaziatura lettere: -1px
- Peso del carattere: Ultra grassetto
- Stile carattere: TT -(Maiuscolo)
spaziatura
Aggiungi anche valori di riempimento personalizzati.
- Imbottitura (superiore e inferiore): 10px
- Imbottitura (sinistra e destra): 40px
scatola di ombra
E applica un'ombra sottile al pulsante.
- Intensità sfocatura ombra scatola: 40px
Leggi anche: Come personalizzare il modulo “Conto alla rovescia” con una GIF
Aggiungi la sezione # 2
spaziatura
Ora che abbiamo completato la prima sezione, passiamo alla successiva. Aggiungi una nuova sezione regolare utilizzando i seguenti valori di riempimento personalizzato:
- Imbottitura (superiore e inferiore): 100px
Aggiungi una riga a due colonne
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Sfondo della colonna 1
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi il seguente colore di sfondo alla colonna 1:
- Sfondo: #ffffff
Sfondo della colonna 2 (desktop)
Aggiungi il seguente colore di sfondo alla colonna 2.
- Sfondo (desktop): #ffffff
Colore di sfondo della colonna 2 al passaggio del mouse
E cambia questo colore di sfondo al passaggio del mouse.
- Sfondo (al passaggio del mouse): #3d02ff
Sfondo sfumato a 2 colonne
Aggiungi anche uno sfondo sfumato alla colonna.
- Gradiente si ferma 1 (20%): rgba(255,255,255,0)
- Gradient Stops 2 (100%): #ff7700
dimensionamento
Quindi, vai alle impostazioni di ridimensionamento e apporta alcune modifiche.
- Usa larghezza grondaia personalizzata: SÌ
- Larghezza grondaia: 1
- Larghezza: 2000px
Spaziatura (linea)
Continua aggiungendo valori di riempimento personalizzati nelle impostazioni di spaziatura.
- Imbottitura (superiore e inferiore): 0px
Spaziatura (colonna 1)
Modifica le impostazioni di spaziatura della colonna 1
- Imbottitura (superiore e inferiore): 6vw (desktop), 120px (tablet e telefono)
- Imbottitura (sinistra e destra): 5vw (desktop), 80px (tablet), 50px (telefono)
scatola di ombra
E aggiungi anche un'ombra sottile a questa riga.
- Intensità sfocatura ombra scatola: 100px
- Box Shadow Spread Forza: -10px
transizioni
Infine, crea una transizione graduale aumentando la durata della transizione nella scheda Tecnologia.
- Durata della transizione: 1100 ms
Moduli linea 1 duplicati
Dato che abbiamo già tutti i moduli di cui abbiamo bisogno nella sezione precedente, risparmieremo tempo clonandoli.
Posiziona i duplicati nelle colonne della riga 2
E posiziona i duplicati nella nuova riga come segue:
Modifica contenuto
Assicurati di cambiare il contenuto dei tuoi moduli
Cambia lo sfondo del gradiente del pulsante
Cambia anche il gradiente di sfondo del pulsante.
- Gradiente si ferma 0%: #ff653f
- Il gradiente si ferma al 100%: #0066ff
- Sterzo: 39 gradi
Cambia immagine
Sostituisci l'immagine.
Cambia sfumatura di sfondo
Infine, modifica il gradiente di sfondo del modulo Immagine.
- Gradiente si ferma 0%: rgba(0,2,12,0.66)
- Gradiente si ferma 57%: rgba(255,255,255,0)
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata al risultato finale.
Scarica DIVI ora!!!
Conclusione
In questo articolo, ti abbiamo mostrato come modificare uno sfondo sfumato al passaggio del mouse utilizzando Divi. Abbiamo anche creato da zero un ottimo esempio che utilizza questo approccio.
Sei libero di utilizzare il design e la grafica per qualsiasi tipo di sito web che crei.
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, consultando la nostra guida su 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.
...
