Il Gradient Builder di Divi offre dei nuovi controlli nel Visual Builder e ti permette di creare sfumature avanzate, utilizzando più colori e nuove opzioni di sfumatura.

Creare sfondi passando gradualmente da un colore ad un altro era piuttosto semplice col “vecchio” sistema offerto da Divi… Però, anche i risultati erano semplici, perché le opzioni a disposizione non erano molte.

Potevi scegliere un colore sfumato iniziale, uno finale e selezionare qualche tipo di sfumatura. Il nuovo generatore di gradienti consente di creare gli sfondi utilizzando più interruzioni di colore, sfumature ripetute, nuovi tipi di sfumatura e nuove posizioni di sfumatura.
È una funzione molto semplice da usare, veloce e intuitiva.

Guida passo passo per realizzare uno sfondo sfumato con Divi

Apri in modifica il modulo in cui vuoi creare lo sfondo, poi segui gli step:

1- Fai clic su “Sfondo” e scegli “Gradiente”, poi clicca su “Colore dello sfondo”, proprio al centro:

sfondo sfumato con Divi

2- Apparirà il cursore delle sfumature, coi colori di inizio e di fine agli estremi (puoi cambiarli con altri semplicemente cliccando sul pallino colorato e selezionando il colore che vuoi)

gradient builder di divi

3- Se vuoi aggiungere altri colori, basta fare clic sul cursore della sfumatura in un punto qualsiasi. Puoi aggiungere tutti i colori che vuoi, trascinarli per cambiarne la posizione e fare clic per regolarli i colori. Se fai clic con il pulsante destro del mouse sulla sfumatura e sulle singole interruzioni di colore, potrai eseguire azioni come “trova e sostituisci”, “estendi stili”, “elimina colori” e così via.

Gradiente con più colori sfumati

4- Utilizzando più interruzioni di colore, è possibile creare un’ampia gamma di nuove sfumature. Puoi aggiungere tutte le interruzioni di colore desiderate e controllarne la posizione all’interno del cursore della sfumatura. Con più colori, è facile creare sfondi che non era facile ottenere prima, a meno di non mettersi a scrivere il CSS a mano.

5- Con le opzioni più in basso, puoi ruotare il gradiente e ripeterlo per creare effetti sempre diversi…

sfondo con gradiente divi

Con questo generatore di gradienti CSS, puoi combinare immagini, sfumature e modelli per i tuoi progetti web, poiché Divi ora ha una gamma impressionante di opzioni per il design degli sfondi. Utilizzando insieme gradienti di sfondo, immagini, maschere e motivi, puoi creare layout sorprendenti!

È anche possibile sovrapporre diverse sfumature l’una sull’altra applicando gli sfondi a gradiente a moduli, colonne, righe e sezioni.
Puoi testare tranquillamente il nuovo generatore facendo un post di test sul tuo sito o, se ancora non hai Divi, provare con la demo gratuita del Gradient Builder. Posizionando le sfumature sopra le immagini di sfondo e sotto i modelli di sfondo e le maschere, puoi vedere il modo in cui il nuovo generatore di sfumature funziona.

Inoltre, puoi scaricare il Gradient Pack gratuito con tutti i gradienti che vedi nella demo che ti ho linkato sopra e usarli liberamente sulle pagine web che creerai. Puoi copiarle e incollarle su qualsiasi elemento, è facilissimo e ti consiglio di provare subito.
Oltretutto, si tratta di gradienti CSS e quindi non appesantirai inutilmente il tuo sito!