Vorresti usare il Gradient Builder di Divi ma non sai quale tipo di sfumatura scegliere?
I tipi di gradiente fanno parte del nuovo Divi Costruttore di gradienti . Nuovi tipi di gradienti Divi ti consentono di aggiungere forme e colori diversi ai tuoi sfondi.
In questo articolo, confronteremo questi tipi di gradienti e ti mostreremo come usarli per creare sfondi unici!
Cominciamo.
Quali sono i tipi di gradiente Divi?
Il nuovo Gradient Builder di Divi aggiunge diverse nuove funzionalità di sfumatura che includono tipi di sfumatura. Ci sono quattro tipi di gradienti tra cui scegliere:
- lineare
- circolare
- Ellittica
- conico
Ciascuno dei tipi visualizza il gradiente in modo diverso. Sono usati per modellare il gradiente da visualizzare come un modello di colore lineare, in un cerchio, un'ellisse o un cono. Li vedremo in dettaglio nei nostri esempi.
I tipi di sfumatura sono influenzati anche da altri controlli, come la posizione, se ripetere o meno, l'unità di misura per la barra di scorrimento della sfumatura e il posizionamento della sfumatura sopra lo sfondo.
Ogni regolazione può avere un impatto piccolo o enorme sul gradiente. Il gradiente può essere sottile o risaltare. Piccole o grandi modifiche possono essere apportate con una sola regolazione.
Con questo in mente, diamo un'occhiata ad alcuni esempi di gradienti che utilizzano ciascuno dei tipi di gradiente. Mostreremo tre esempi di ogni tipo di gradiente.
Il primo sarà un tipo di sfumatura standard che vedrai sul web. I prossimi due saranno un po' più sperimentali, solo per vedere cosa puoi fare con i tipi di gradienti.
Esempi di tipi di gradiente
Per esempi di tipo gradiente, utilizziamo la sezione Eroe della homepage di pacchetto di layout pernottamento e colazione gratuito disponibile in Divi. Questa sezione ha già un gradiente, ma lo sostituiremo e faremo alcuni esperimenti.
Possiamo rimuovere il gradiente di sfondo originale o modificarlo. I risultati sono gli stessi. Per semplicità lo modificheremo.
Abbiamo personalizzato il testo del titolo cambiandolo da nero a bianco.
Tipo di gradiente lineare
Leggi anche: Divi: come utilizzare la fusione dei motivi sulle immagini di sfondo
I gradienti lineari mostrano il gradiente come se fosse distribuito su tutta la pagina.
Primo esempio del tipo a gradiente lineare
Ecco un'anteprima del nostro primo esempio. Visualizza un colore più chiaro a sinistra dello schermo e un colore più scuro a destra, con una transizione graduale tra di loro.
Per creare questo esempio, aggiungi due colori. il premier è rgba(92,158,82,0.76) alla posizione 0%. il secondo è rgba(0,10,4,0.76) alla posizione del 97%.
- Gradiente si ferma:
- 0%: RGB(92,158,82,0.76)
- 97%: RGB(0,10,4,0.76)
Quindi cambia il Tipologia gradiente su Lineare e impostare il Tipo di viaggio oltre 131 gradi. che lui non ripetere. Impostare ilunité su Percentuale. Posiziona il gradiente sopra l'immagine di sfondo.
- Tipo di gradiente: lineare
- Direzione del gradiente: 131 gradi
- Ripeti gradiente: NO
- Unità gradiente: percentuale
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
Secondo esempio del tipo a gradiente lineare
Ecco un'anteprima del secondo esempio di gradiente lineare. Funziona come il primo, ma ha un fermo a sinistra dove prende il sopravvento una tonalità più scura.
Per crearlo, aggiungi tre interruzioni sfumate. il premier è rgba(18,76,41,0.76) alla posizione 13%. il secondo è rgba(92,158,82,0.76) alla posizione del 13%. colore 3 è rgba(18,76,41,0.76) alla posizione del 34%.
- Gradiente si ferma:
- 13%: RGB(18,76,41,0.76)
- 13%: RGB(92,158,82,0.76)
- 34%: RGB(18,76,41,0.76)
Quindi impostare il Tipologia gradiente su Lineare e impostare il Tipo di viaggio oltre 90 gradi. che lui non ripetere . Cambiare ilunité percentuale. Posizionalo sopra l'immagine di sfondo.
- Tipo di gradiente: lineare
- Direzione del gradiente: 90 gradi
- Ripeti gradiente: NO
- Unità gradiente: percentuale
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
Terzo esempio del tipo a gradiente lineare
Il nostro terzo esempio posiziona una linea di colore chiaro in diagonale nell'angolo in alto a destra, toccando una linea di colore più scuro.
Questo ha tre colori. colore 1 è rgba(92,158,82,0.76) alla posizione del 13%. colore 2 è rgba(92,158,82,0.76) alla posizione del 23%. Il terzo colore è rgba(18,76,41,0.76) alla posizione del 32%.
- Gradiente si ferma:
- 13%: RGB(92,158,82,0.76)
- 23%: RGB(92,158,82,0.76)
- 32%: RGB(18,76,41,0.76)
Definisci il Tipologia gradiente a lineare in a direzione di 209 gradi. Nato il non ripetere e impostare ilunité su Percentuale. Posiziona il gradiente sopra l'immagine di sfondo.
- Tipo di gradiente: lineare
- Direzione del gradiente: 209 gradi
- Ripeti gradiente: NO
- Unità gradiente: percentuale
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
Tipo di gradiente circolare
Il tipo di sfumatura circolare crea un cerchio con i colori.
Primo esempio del tipo a gradiente circolare
Il nostro primo esempio di sfumatura circolare posiziona un colore chiaro al centro e un colore più scuro attorno ai bordi.
Questo ha 2 colori. il premier è rgba(92,158,82,0.76) alla posizione 0%. il secondo è rgba(0,10,4,0.76) alla posizione del 62%.
- Gradiente si ferma:
- 0%: RGB(92,158,82,0.76)
- 62%: RGB(0,10,4,0.76)
Definisci il Tipologia gradiente su circolare. Centrare il direzione . Assicurati che lui non ripetere , cambiare ilunité come percentuale e posizionarlo sopra l'immagine di sfondo.
- Tipo di sfumatura: circolare
- Posizione gradiente: centro
- Ripeti gradiente: NO
- Unità gradiente: percentuale
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
Secondo esempio del tipo a gradiente circolare
Questo gradiente posiziona un bordo circolare chiaro al centro dello schermo.
Ha quattro colori. Due colori sono sovrapposti. il premier è rgba(18,76,41,0.76) alla posizione 13%. il secondo è rgba(92,158,82,0.76) alla posizione del 33%. colore 3 è rgba(92,158,82,0.76) alla posizione del 51%. colore 4 è rgba(18,76,41,0.76). È posizionato alla posizione 51%, sopra il colore 3.
- Gradiente si ferma:
- 13%: RGB(18,76,41,0.76)
- 33%: RGB(92,158,82,0.76)
- 51%: RGB(92,158,82,0.76)
- 51%: RGB(18,76,41,0.76)
Definisci il Tipologia sfumare su Circolare e posizionare il Tipo di viaggio nell'angolo in alto a sinistra. Assicurati che lui non ripetere , cambiare il unité come percentuale e posizionarlo sopra l'immagine di sfondo.
- Tipo di sfumatura: circolare
- Posizione gradiente: in alto a sinistra
- Ripeti gradiente: NO
- Unità gradiente: percentuale
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
Terzo esempio del tipo a gradiente circolare
Questo esempio posiziona diversi cerchi di luce nel colore più scuro, a partire dal centro del cerchio.
Anche questo impila due colori in un certo ordine per ottenere questo design. Il primo il colore è rgba(18,76,41,0.76) alla posizione del 13%. colore 2 è rgba(18,76,41,0.76) alla posizione del 44%. Il terzo il colore si sovrappone al secondo colore. Questo è rgba(92,158,82,0.76) alla posizione del 44%. colore 4 è rgba(92,158,82,0.76) alla posizione del 51%.
- Gradiente si ferma:
- 13%: RGB(18,76,41,0.76)
- 44%: RGB(18,76,41,0.76)
- 44%: RGB(92,158,82,0.76)
- 51%: RGB(92,158,82,0.76)
Cambiarlo tipo di gradiente in circolare. Posiziona il direzione sotto. ripetizione Questo. Impostare ilunité su Percentuale e posiziona il gradiente sopra l'immagine di sfondo.
- Tipo di sfumatura: circolare
- Posizione gradiente: in basso
- Ripeti gradiente: SÌ
- Unità gradiente: percentuale
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
Tipo di gradiente ellittico
I gradienti ellittici posizionano i colori a forma di ellisse.
Primo esempio del tipo a gradiente ellittico
Il nostro primo esempio ellittico posiziona un'ellisse di colore chiaro al centro dello schermo con un colore più scuro attorno.
Questo ha due colori. il premier è rgba(92,158,82,0.76) alla posizione 0%. il secondo è rgba(0,10,4,0.76) alla posizione del 50%.
- Gradiente si ferma:
- 0%: RGB(92,158,82,0.76)
- 50%: RGB(0,10,4,0.76)
Cambiarlo tipo di gradiente in ellittica. Impostare il direzione al centro. Assicurati questo non ripetere , aggiusta ilunité su Percentuale e posizionarlo sopra l'immagine di sfondo.
- Tipo di sfumatura: ellittica
- Posizione gradiente: centro
- Ripeti gradiente: NO
- Unità gradiente: percentuale
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
Secondo esempio del tipo a gradiente ellittico
Il nostro secondo esempio posiziona molte linee circolari sottili lungo il gradiente.
Ha due colori. il premier è rgba(92,158,82,0.76) nella posizione 34pt. il secondo è rgba(0,10,4,0.76) alla posizione 39pt.
- Gradiente si ferma:
- 34pt: rgba(92,158,82,0.76)
- 39pt: rgba(0,10,4,0.76)
Cambiarlo Tipologia gradiente a ellittica e regolare il Tipo di viaggio sulla sinistra. Avere questo a ripetere. Cambiare ilunité in punti. Posizionalo sopra l'immagine di sfondo.
- Tipo di sfumatura: ellittica
- Posizione gradiente: destra
- Ripeti gradiente: SÌ
- Unità gradiente: punti(pt)
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
Terzo esempio del tipo a gradiente ellittico
Il nostro terzo esempio posiziona molti semicerchi nel gradiente.
Questo ha due colori. il premier è rgba(32,68,35,0.73) alla posizione 34vmin. il secondo è rgba(0,10,4,0.76) alla posizione 39vmin.
- Gradiente si ferma:
- 34vmin: rgba(32, 68, 35, 0.73)
- 39vmin: rgba(0,10,4,0.76)
Cambiarlo Tipologia gradiente a ellittica e regolare il Tipo di viaggio in alto. Avere questo a ripetere. Cambiare ilUnire in Viewport minimo. Posizionalo sopra l'immagine di sfondo.
- Tipo di sfumatura: ellittica
- Posizione gradiente: in alto
- Ripeti gradiente: SÌ
- Unità gradiente: Viewport minimo (vmin)
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
Tipo a gradiente conico
Guarda anche: Divi: come creare transizioni di sfondo tra gli elementi
Il tipo di gradiente conico mostra il gradiente come un cono come se il cono fosse visto dall'alto.
Primo esempio del tipo a gradiente conico
Questo esempio posiziona una linea diagonale dal centro del gradiente a sinistra con un colore chiaro su un lato e un colore scuro sull'altro.
Ha due colori. il premier è rgba(92,158,82,0.76) alla posizione 0%. il secondo è rgba(0,10,4,0.76) alla posizione del 50%.
- Gradiente si ferma:
- 0%: RGB(92,158,82,0.76)
- 50%: RGB(0,10,4,0.76)
Cambiarlo tipo di gradiente in conico. Aggiusta il direzione oltre 221 gradi. Centrare il posizione et non ripeterlo . Posiziona il gradiente sopra l'immagine.
- Tipo di gradiente: conico
- Direzione del gradiente: 221 gradi
- Posizione: Centro
- Ripeti gradiente: NO
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
Secondo esempio del tipo a gradiente conico
Questo esempio è simile al precedente, ma posiziona la linea centrale in alto.
Questo ha quattro colori. il premier è rgba(20,40,20,0.76) alla posizione del 7%. colore 2 è rgba(30,73,25,0.68) alla posizione del 24%. colore 3 è rgba(103,132,30,0.68) alla posizione del 65%. Il quarto il colore è rgba(38,86,26,0.68) alla posizione del 85%.
- Gradiente si ferma:
- 7%: RGB(20,40,20,0.76)
- 24%: RGB(30,73,25,0.68)
- 65%: RGB(103,132,30,0.68)
- 85%: RGB(38,86,26,0.68)
Definisci il tipo di gradiente su conico e il direzione a 0 gradi. Centrare il posizione . Nato il non ripetere e posizionalo sopra l'immagine.
- Tipo di gradiente: conico
- Direzione del gradiente: 0 gradi
- Posizione: Centro
- Ripeti gradiente: NO
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
Terzo esempio del tipo a gradiente conico
Il nostro ultimo esempio posiziona una serie di linee dal centro in alto del gradiente verso l'esterno in tutte le direzioni.
Questo ha due colori. il premier è rgba(30,73,25,0.68) nella posizione 5deg. il secondo è rgba(20,40,20,0.76) nella posizione 7deg.
- Gradiente si ferma:
- 5 gradi: RGB (30,73,25,0.68)
- 7 gradi: RGB (20,40,20,0.76)
Impostare il GradientType su Conico e il Tipo di viaggio a 221 gradi Posiziona il posizione sopra. Ripetere questo e posizionalo sopra l'immagine di sfondo.
- Tipo di gradiente: conico
- Direzione del gradiente: 221 gradi
- Posizione: in alto
- Ripeti gradiente: SÌ
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
Scarica DIVI ora!!!
Conclusione
Questo è il nostro sguardo al confronto dei tipi di gradiente in Divi's Gradient Builder.
Come puoi vedere da questi esempi, le impostazioni sono semplici, ma ognuna di esse può fare una grande differenza nella progettazione del gradiente.
Per ottenere i migliori risultati, sperimenta i tipi di sfumatura con diverse direzioni e posizioni e attiva o disattiva l'opzione di ripetizione per vedere cosa puoi creare.
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.
...
