Confronto dei tipi di gradiente in Divi's Gradient Builder

I tipi di gradiente fanno parte del nuovo Divi Gradient Builder. I nuovi tipi di gradiente Divi ti danno la possibilità di aggiungere forme e colori diversi ai tuoi sfondi. In questo post, confronteremo questi tipi di gradiente e ti mostreremo come usarli per creare sfondi unici!

Iniziamo.

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 gradiente 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. Vedremo questi in dettaglio nei nostri esempi.

I tipi di sfumatura sono influenzati anche dagli altri controlli, come la posizione, indipendentemente dal fatto che si ripeta 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 sfumatura. Il primo sarà un tipo standard di sfumatura che vedresti sul web. I prossimi due saranno un po' più sperimentali, solo per vedere cosa si può fare con i tipi di gradiente.

Esempi di tipi di gradiente

Per gli esempi di tipo gradiente, sto usando la sezione eroe dalla pagina di destinazione del pacchetto di layout Bed and Breakfast gratuito disponibile in Divi. Questa sezione ha già un gradiente, ma lo sostituiremo e faremo alcuni esperimenti. Possiamo eliminare il gradiente di sfondo originale o modificarlo. I risultati sono gli stessi. Per semplicità lo modifico.

Ho personalizzato il testo del titolo, cambiandolo da nero a bianco.

Tipo di gradiente lineare

I gradienti lineari mostrano il gradiente come se fossero distribuiti sulla pagina.

Primo esempio di gradiente lineare

Ecco uno sguardo al 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 primo è rgba(92,158,82,0.76) alla posizione 0%. Il secondo è rgba(0,10,4,0.76) alla posizione del 97%.

• Colore 1: rgba(92,158,82,0,76) (in posizione 0%)
• Colore 2: rgba(0,10,4,0.76) (alla posizione del 97%)

Quindi, cambia il Tipo di sfumatura in Lineare e imposta la direzione su 131 gradi. Non farlo ripetere . Impostare l' unità su percentuale. Posiziona il gradiente sopra l'immagine di sfondo.

• Tipo di gradiente: lineare
• Direzione: 131 gradi
• Ripeti: no
• Unità: percentuale
• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Secondo esempio di gradiente lineare

Ecco uno sguardo al 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 primo è rgba(18,76,41,0.76) alla posizione del 13%. Il secondo è rgba(92,158,82,0.76) alla posizione del 13%. Il colore 3 è rgba(18,76,41,0.76) nella posizione del 34%.

• Colore 1: rgba(18,76,41,0.76) (al 13% di posizione)
• Colore 2: rgba(92,158,82,0,76) (al 13% di posizione)
• Colore 3: rgba(18,76,41,0.76) (alla posizione del 34%)

Quindi, imposta il Tipo di sfumatura su Lineare e imposta la direzione su 90 gradi. Non farlo ripetere . Cambia l' unità in percentuale. Posizionalo sopra l'immagine di sfondo.

• Tipo di gradiente: lineare
• Direzione: 90 gradi
• Ripeti: no
• Unità: percentuale
• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Terzo esempio di gradiente lineare

Il nostro terzo esempio posiziona una linea di colore chiara in diagonale nell'angolo in alto a destra, toccando una linea di colore più scura.

Questo ha tre colori. Il colore 1 è rgba(92,158,82,0,76) nella posizione del 13%. Il colore 2 è rgba(92,158,82,0,76) nella posizione del 23%. Il terzo colore è rgba(18,76,41,0.76) alla posizione del 32%.

• Colore 1: rgba(92,158,82,0,76) (al 13% di posizione)
• Colore 2: rgba(92,158,82,0,76) (alla posizione del 23%)
• Colore 3: rgba(18,76,41,0.76) (alla posizione del 32%)

Impostare il Tipo di sfumatura su Lineare in una direzione di 209 gradi. Non ripetere l'operazione e impostare l' unità su percentuale. Posiziona il gradiente sopra l'immagine di sfondo.

• Tipo di gradiente: lineare
• Direzione: 209 gradi
• Ripeti: no
• Unità: percentuale
• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Tipo di gradiente circolare

Il tipo di sfumatura circolare crea un cerchio con i colori.

Primo esempio di 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 primo è rgba(92,158,82,0.76) alla posizione 0%. Il secondo è rgba(0,10,4,0.76) alla posizione del 62%.

• Colore 1: rgba(92,158,82,0,76) (in posizione 0%)
• Colore 2: rgba(0,10,4,0.76) (alla posizione del 62%)

Imposta il Tipo di sfumatura su Circolare. Centrare la direzione . Non ripetere l'operazione, modificare l' unità in percentuale e posizionarla sopra l'immagine di sfondo.

• Tipo di sfumatura: circolare
• Direzione: Centro
• Ripeti: no
• Unità: percentuale
• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Secondo esempio di gradiente circolare

Questo gradiente posiziona un bordo circolare chiaro al centro dello schermo.

Ha quattro colori. Due colori sono impilati. Il primo è rgba(18,76,41,0.76) alla posizione del 13%. Il secondo è rgba(92,158,82,0.76) alla posizione del 33%. Il colore 3 è rgba(92,158,82,0,76) nella posizione del 51%. Il colore 4 è rgba(18,76,41,0.76). È posizionato nella posizione del 51%, sopra il colore 3.

• Colore 1: rgba(18,76,41,0.76) (al 13% di posizione)
• Colore 2: 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) (alla posizione del 51%)

Imposta il Tipo di sfumatura su Circolare e posiziona la direzione in alto a sinistra. Non ripetere l'operazione, modificare l' unità in percentuale e posizionarla sopra l'immagine di sfondo.

• Tipo di sfumatura: circolare
• Direzione: in alto a sinistra
• Ripeti: no
• Unità: percentuale
• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Terzo Esempio di Gradiente Circolare

Questo esempio posiziona diversi cerchi di luce all'interno del colore più scuro, a partire dal centro del cerchio.

Questo impila anche due colori in un certo ordine per ottenere questo disegno. Il primo colore è rgba(18,76,41,0.76) alla posizione del 13%. Il colore 2 è rgba(18,76,41,0.76) nella posizione del 44%. Il terzo colore si sovrappone al secondo colore. È rgba(92,158,82,0,76) alla posizione del 44%. Il colore 4 è rgba(92,158,82,0,76) nella posizione del 51%.

• Colore 1: rgba(18,76,41,0.76) (al 13% di posizione)
• Colore 2: rgba(18,76,41,0.76) (alla posizione del 44%)
• Colore 3: rgba(92,158,82,0,76) (alla posizione del 44%)
• Colore 4: rgba(92,158,82,0,76) (alla posizione del 51%)

Cambia il tipo di sfumatura in circolare. Posiziona la direzione in basso. Avere questo da ripetere . Imposta l' unità su Percentuale e posiziona il gradiente sopra l'immagine di sfondo.

• Tipo di sfumatura: circolare
• Direzione: In basso
• Ripeti: Sì
• Unità: percentuale
• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Tipo di gradiente ellittico

I gradienti ellittici posizionano i colori in una forma ellittica.

Primo esempio di gradiente ellittico

Il nostro primo esempio ellittico posiziona un'ellisse con un colore chiaro al centro dello schermo con un colore più scuro attorno ad esso.

Questo ha due colori. Il primo è rgba(92,158,82,0.76) alla posizione 0%. Il secondo è rgba(0,10,4,0.76) alla posizione del 50%.

• Colore 1: rgba(92,158,82,0,76) (in posizione 0%)
• Colore 2: rgba(0,10,4,0.76) (al 50% di posizione)

Cambia il tipo di sfumatura in ellittica. Imposta la direzione al centro. Non ripetere l'operazione, impostare l' unità su Percentuale e posizionarla sopra l'immagine di sfondo.

• Tipo di sfumatura: ellittica
• Direzione: Centro
• Ripeti: no
• Unità: percentuale
• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Secondo esempio di gradiente ellittico

Il nostro secondo esempio posiziona molte linee circolari sottili lungo il gradiente.

Ha due colori. Il primo è rgba(92,158,82,0.76) nella posizione 34pt. Il secondo è rgba(0,10,4,0.76) nella posizione 39pt.

• Colore 1: rgba(92,158,82,0,76) (in posizione 34pt)
• Colore 2: rgba(0,10,4,0.76) (in posizione 39pt)

Cambia il tipo di sfumatura in ellittica e imposta la direzione a sinistra. Avere questo da ripetere . Cambia l' unità in punti. Posizionalo sopra l'immagine di sfondo.

• Tipo di sfumatura: ellittica
• Direzione: sinistra
• Ripeti: Sì
• Unità: Punti
• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Terzo esempio di gradiente ellittico

Il nostro terzo esempio posiziona molti semicerchi all'interno del gradiente.

Questo ha due colori. Il primo è rgba(32,68,35,0.73) alla posizione di 34vmin. Il secondo è rgba(0,10,4,0.76) nella posizione 39vmin.

• Colore 1: rgba(32,68,35,0.73) (in posizione 34vmin)
• Colore 2: rgba(0,10,4,0.76) (a 39vmin posizione)

Cambia il tipo di sfumatura in ellittica e imposta la direzione in alto. Avere questo da ripetere . Modificare l' unità in Viewport minimo. Posizionalo sopra l'immagine di sfondo.

• Tipo di sfumatura: ellittica
• Direzione: In alto
• Ripeti: Sì
• Unità: Viewport minimo
• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Tipo di gradiente conico

Il tipo di gradiente conico mostra il gradiente a forma di cono come se il cono fosse visto dall'alto.

Primo esempio di 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 primo è rgba(92,158,82,0.76) alla posizione 0%. Il secondo è rgba(0,10,4,0.76) alla posizione del 50%.

• Colore 1: rgba(92,158,82,0,76) (in posizione 0%)
• Colore 2: rgba(0,10,4,0.76) (al 50% di posizione)

Cambia il tipo di sfumatura in conico. Impostare la direzione a 221 gradi. Centrare la posizione e fare in modo che non si ripeta . Posiziona il gradiente sopra l'immagine.

• Tipo di gradiente: conico
• Direzione: 221 gradi
• Posizione: Centro
• Ripeti: no
• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Secondo esempio di gradiente conico

Questo esempio è simile al precedente, ma posiziona la linea dal centro verso l'alto.

Questo ha quattro colori. Il primo è rgba(20,40,20,0.76) alla posizione del 7%. Il colore 2 è rgba(30,73,25,0.68) nella posizione del 24%. Il colore 3 è rgba(103,132,30,0,68) nella posizione del 65%. Il quarto colore è rgba(38,86,26,0.68) nella posizione dell'85%.

• Colore 1: rgba(20,40,20,0.76) (in posizione 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%)
• Colore 4: rgba(38,86,26,0.68) (alla posizione dell'85%)

Imposta il tipo di sfumatura su conico e la direzione a 0 gradi. Centrare la posizione . Non farlo ripetere e posizionarlo sopra l'immagine.

• Tipo di gradiente: conico
• Direzione: 0 gradi
• Posizione: Centro
• Ripeti: no
• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Terzo esempio di 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 primo è rgba(30,73,25,0.68) nella posizione 5deg. Il secondo è rgba(20,40,20,0.76) nella posizione 7deg.

• Colore 1: rgba (30,73,25,0.68) (a 5 gradi)
• Colore 2: rgba(20,40,20,0.76) (a 7 gradi)

Impostare eth Gradient Type su Conical e la Direction su 221deg. Posiziona la posizione in alto. Fallo ripetere e posizionalo sopra l'immagine di sfondo.

• Tipo di gradiente: conico
• Direzione: 221 gradi
• Posizione: in alto
• Ripeti: Sì
• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Pensieri finali

Questo è il nostro sguardo al confronto dei tipi di gradiente in Divi's Gradient Builder. Come puoi vedere in questi esempi, le impostazioni sono semplici, ma ognuna di esse può fare una grande differenza nel design del gradiente. Per i migliori risultati, prova i tipi di sfumatura con direzioni e posizioni diverse e attiva o disattiva l'opzione di ripetizione per vedere cosa puoi creare.

Vogliamo sentire da voi. Hai usato i diversi tipi di gradiente in Divi Gradient Builder? Facci sapere la tua esperienza nei commenti.