Come utilizzare il Divi Gradient Builder per fondere più colori sfumati senza sforzo

Pubblicato: 2022-05-18

Il nuovo Gradient Builder di Divi è un potente strumento che crea qualsiasi tipo di sfondo sfumato che desideri. È facile da usare e puoi aggiungere più colori per creare sfumature interessanti e uniche. Tuttavia, l'aggiunta di più colori può richiedere più riflessione nel processo di progettazione. In questo post, vedremo come utilizzare Divi Gradient Builder per fondere più colori sfumati senza sforzo per aiutarti a iniziare a creare i tuoi gradienti multicolori.

Anteprima di più colori sfumati

Per prima cosa, diamo un'occhiata a cosa costruiremo in questo tutorial. Creeremo quattro diversi gradienti usando lo stesso layout.

Primi risultati di esempio

Risultati del secondo esempio

Risultati del terzo esempio

Risultati del quarto esempio

Procedure consigliate per la combinazione di più colori sfumati

Come tutti i principi di progettazione, ci sono alcune cose da tenere a mente quando si combinano più colori sfumati. Ecco alcune cose da tenere a mente quando si combinano più colori sfumati per ottenere l'aspetto migliore per il tuo sito web.

Concentrati sulle famiglie di colori

Rimani all'interno della stessa famiglia di colori utilizzando diverse tonalità dello stesso colore. Ciò mantiene un contrasto più basso tra i colori di sfondo, che evita che lo sfondo diventi troppo distratto. Useremo questa tecnica per il nostro primo esempio.

Prova i colori attenuati

Prova varie tonalità di colori attenuati con lo stesso livello. Questo ti dà più colore mantenendo basso il contrasto tra loro. I pastelli ne sono un buon esempio. Questo dà al tuo sfondo più sfumature di colore senza distrarre dal primo piano. Useremo questo metodo nel nostro secondo esempio.

Dai priorità alla leggibilità

Dai sempre la priorità alla leggibilità nel tuo design. Quando progetti colori e motivi con i tuoi gradienti, assicurati che i tuoi contenuti siano sempre leggibili. Un modo per farlo è spingere il gradiente su un lato dello schermo. Ciò ti consente di progettare un gradiente che si distingua senza intralciare il contenuto. Useremo questo metodo per il nostro terzo esempio.

Usa gradienti intersecanti e sfumati

Combina sfumature intersecanti con sfumature sfumate per creare linee dure e toni morbidi. Questo può creare modelli interessanti senza interferire con i tuoi contenuti. Prova diverse direzioni e punti di arresto del gradiente per vedere cosa funziona meglio per il tuo layout. Usa queste impostazioni per creare cerchi, linee dure e altro. Useremo questo metodo anche per il nostro terzo esempio.

Usa diversi tipi di gradiente

Sperimenta con diversi tipi di gradiente per ottenere risultati unici. Ad esempio, conico è un ottimo tipo di sfumatura per creare un aspetto unico con diversi colori sfumati. Useremo conico nel nostro quarto esempio.

Non usare troppi colori

Non usare più colori solo per il gusto di avere più colori. Di solito sono ideali da due a tre colori, ma puoi usarne di più se stai attento. Quando usi ancora più colori, mantienili il più simili possibile in modo che diventino sfumature piuttosto che forti contrasti.

Non scegliere i colori a caso

Usa colori che si adattano bene ai tuoi contenuti e al tuo sito web. Questo non solo mantiene leggibili i tuoi contenuti, ma sembra anche che appartengano al sito web.

Ricorda UX

Considera sempre l'esperienza dell'utente. Controlla il gradiente con il contenuto su di esso per vedere come funziona. Chiedi a più utenti di guardare il contenuto e il gradiente per assicurarsi che funzioni bene per loro.

Metti alla prova i tuoi gradienti

Prova più tipi e colori di sfumature con il test a/b per vedere cosa ottiene i risultati migliori.

Esempi di più colori sfumati

Ora, diamo un'occhiata ad alcuni esempi di Gradient Builder. Per questi esempi, ho ottimizzato l'eroe dalla pagina Informazioni dal Pacchetto layout pavimentazione gratuito disponibile in Divi. Gli ho assegnato un nuovo colore di sfondo, #6294d1, e un nuovo colore del pulsante, #c1fff4.

Colore di sfondo: #6294d1
Colore pulsante: #c1fff4

Esempi di Divi Gradient Builder

Come creare più colori sfumati con il Divi Gradient Builder

Per prima cosa, vediamo come apportare le modifiche all'interno del Divi Gradient Builder. Aggiungeremo il gradiente allo sfondo di una sezione. Per iniziare, fai clic sull'icona delle impostazioni della sezione .

Come creare più sfumature con il Divi Gradient Builder

Quindi, scorri verso il basso fino a Sfondo . Seleziona la scheda Gradiente di sfondo e fai clic su Aggiungi sfumatura di sfondo .

Come creare più sfumature con il Divi Gradient Builder

Il gradiente inizia con due colori. Seleziona i gradienti sulla barra Interruzioni sfumatura per cambiarne i colori e trascinali in una nuova posizione iniziale. Aggiungi tutte le sfumature che vuoi. Puoi aggiungerne altri, eliminarli, modificarli, ecc.

Come creare più sfumature con il Divi Gradient Builder

Regola il Tipo , Direzione , Ripeti , Unità e se lo desideri o meno sull'immagine di sfondo per ottenere il design desiderato.

Come creare più sfumature con il Divi Gradient Builder

Per una panoramica dettagliata di Divi Gradient Builder, vedere l'articolo Introduzione a Advanced Gradient Builder per Divi.

Esempio di colori sfumati multipli uno

Per il nostro primo esempio, creeremo quattro interruzioni del gradiente. Apri la scheda Sfumatura di sfondo e seleziona la prima sfumatura . Lascia la posizione sfumatura a 0% e cambia il Colore sfumatura su # 6294d1.

Il gradiente interrompe la posizione del primo punto: 0%
Colore: #6294d1

Divi Gradient Builder Esempio uno

Quindi, aggiungi un nuovo stop colore facendo clic sulla barra Gradient Stop. Sposta la sua posizione sfumatura al 29% e cambia il suo Colore in # b5bfd1,

Il gradiente si ferma al secondo punto: 29%
Colore: #b5bfd1

Divi Gradient Builder Esempio uno

Quindi, aggiungi il terzo Gradient Stop e sposta la sua posizione all'84%. Cambia il suo colore in # 8eacd1.

Il gradiente ferma la posizione del terzo punto: 84%
Colore: #8eacd1

Divi Gradient Builder Esempio uno

Infine, cambia il colore del quarto Gradient Stop in # b5bfd1. Lasceremo questa posizione gradiente al 100%.

Il gradiente interrompe la posizione del quarto punto: 100%
Colore: #b5bfd1

Divi Gradient Builder Esempio uno

Successivamente, regoleremo le impostazioni del gradiente. Cambia la direzione a 225 gradi. Lascia il resto delle impostazioni ai valori predefiniti. Includerò queste impostazioni qui in modo che tu possa vederle. Ora puoi chiudere le impostazioni del modulo e salvare il tuo lavoro.

Tipo: lineare
Direzione: 225 gradi
Ripeti gradiente: no
Unità gradiente: percentuale
Posiziona il gradiente sopra l'immagine di sfondo: No

Divi Gradient Builder Esempio uno

Colori a gradiente multipli Esempio due

Per il nostro secondo esempio, creeremo tre interruzioni del gradiente. Apri le impostazioni del gradiente di sfondo e cambia il Colore della prima fermata del gradiente su #bffffc. Lascia la sua posizione allo 0%.

Posizione di arresto del primo gradiente: 0%
Colore: #bffffc

Divi Gradient Builder Esempio due

Aggiungi una nuova interruzione del gradiente e sposta la sua Posizione al 42%. Cambia il suo colore in #bbc7f9.

Posizione di arresto del secondo gradiente: 42%
Colore: #bbc7f9

Divi Gradient Builder Esempio due

Quindi, cambia il Colore della terza fermata del gradiente in #adbdd1. Lasceremo la sua posizione gradiente al 100%.

Posizione di arresto del terzo gradiente: 100%
Colore: #adbdd1

Divi Gradient Builder Esempio due

Quindi, cambia il Tipo di sfumatura in Circolare. Lascia il resto delle impostazioni ai valori predefiniti. Questo crea un punto caldo al centro della sezione. Chiudi le impostazioni e salva il lavoro.

Tipo di sfumatura: circolare

Divi Gradient Builder Esempio due

Colori a gradiente multipli Esempio tre

Per il nostro terzo esempio, useremo tre interruzioni del gradiente per costruire il nostro gradiente. Sposta il Posizione per il primo gradiente al 15% e cambia il suo Colore in # afc3ed.

Posizione di arresto del primo gradiente: 15%
Colore: #afc3ed

Divi Gradient Builder Esempio tre

Quindi, sposta la seconda fermata del gradiente al 33% e cambia il suo Colore in #adbdd1.

Posizione di arresto del secondo gradiente: 33%
Colore: #bffffc

Divi Gradient Builder Esempio tre

Quindi, sposta la terza fermata del gradiente al 33%, direttamente sopra la seconda fermata del gradiente e cambia il suo Colore in #adbdd1. Sembrerà che tu abbia due gradienti sulla barra Gradient Stop.

Posizione di arresto del terzo gradiente: 33%
Colore: #adbdd1

Divi Gradient Builder Esempio tre

Questo avrà un arco interessante che creeremo con le impostazioni. Cambia il tipo di sfumatura in circolare e la posizione sfumatura a destra. Chiudi le impostazioni e salva il tuo lavoro.

Tipo: circolare
Posizione: a destra

Divi Gradient Builder Esempio tre

Colori a gradiente multipli Esempio quattro

Il nostro quarto esempio include cinque fermate di gradiente. Per la prima interruzione del gradiente , cambia il Colore in # 878ebc. Lascia questo a 0% per la posizione.

Posizione di arresto del primo gradiente: 0%
Colore: #878ebc