Desideri creare motivi di sfondo personalizzati utilizzando l'opzione Ripeti sfumatura di Divi ?
Le opzioni di sfondo di Divi offrono molti modi per creare motivi di sfondo. Puoi persino creare motivi di sfondo usando solo i gradienti. L'opzione Ripeti gradiente lo rende semplice e facile.
In questo articolo vedremo come utilizzare l'opzione Ripetizione gradiente di Divi per creare motivi di sfondo personalizzati.
Cominciamo.
Guarda anche: Divi: come creare un modulo di contatto che appare dopo aver cliccato su un pulsante
Cos'è la ripetizione del gradiente
L'opzione Ripeti sfumatura crea un motivo basato sulle interruzioni sfumatura. Le interruzioni del gradiente sono misurazioni che determinano dove appaiono i colori e dove si fermano nel gradiente. Divi e il suo Gradient Builder usa queste fermate per creare il pattern.
L'ultimo colore indica la sfumatura in cui si trova il punto di interruzione nella sfumatura. Puoi avere tutti i colori che vuoi prima di questo punto di interruzione.
Le Costruttore di gradienti lo ripeterà quindi per riempire lo schermo che crea il motivo. L'opzione può essere aggiunta a qualsiasi sezione, riga, colonna o modulo e possono essere utilizzati insieme.
Attiva l'opzione "Gradiente di sfondo".
Per attivare l'opzione Ripetizione gradiente, apri le impostazioni della sezione facendo clic sull'icona a forma di ingranaggio. Funziona anche con righe, colonne e moduli.
Scorri fino a sfondo . Seleziona scheda Sfondo sfumato e fare clic su Aggiungi gradiente di sfondo.
Sotto la barra di arresto del gradiente c'è un'impostazione chiamata Ripetizione gradiente . Questa impostazione è disabilitata per impostazione predefinita. Basta fare clic su di esso per attivarlo.
Il gradiente ora si ripeterà, creando un modello basato sulle interruzioni del gradiente e sulle altre impostazioni del gradiente, come l'unità del gradiente.
Unità gradiente
L'unità del gradiente è l'unità di misura. Questo specifica cosa indicano i numeri delle interruzioni della sfumatura sulla barra della sfumatura, che determina come vengono misurate le interruzioni della sfumatura. Ciò influisce sul motivo creato dall'opzione di ripetizione.
Il generatore di gradiente di sfondo di Divi offre 15 unità. Diamo un'occhiata a un esempio delle quattro opzioni più popolari. Come vedremo nei nostri esempi, il risultato cambierà a seconda del numero di interruzioni del gradiente e delle impostazioni.
Percentuale (percentuale)
La percentuale misura le interruzioni del gradiente in percentuale. Questo calcola i punti di sfumatura in base all'elemento padre. Più piccolo è l'ultimo punto sfumato, più stretto sarà il motivo creato. Quando si regola la posizione di uno dei colori, quel colore si sposta mentre gli altri rimangono al loro posto.
Pixel (px)
Pixel misura il numero di pixel per ciascuna interruzione del gradiente. Ciò conferisce al gradiente un modello più piccolo rispetto alla maggior parte degli altri tipi di unità. Spostando la posizione del primo o dell'ultimo colore cambia la posizione di ogni colore.
Altezza finestra (vh)
Il viewport è l'area visibile della finestra del browser. Si misura separatamente in altezza e larghezza. L'altezza della finestra utilizza le interruzioni del gradiente per misurare la percentuale dell'altezza della dimensione della finestra. La regolazione della posizione del primo o dell'ultimo colore ha effetto su tutti i colori.
Larghezza finestra (vw)
La larghezza della finestra utilizza le interruzioni del gradiente per misurare la percentuale della larghezza della dimensione della finestra (o della larghezza del browser). Le regolazioni cambiano a seconda della larghezza. Quando regoli il numero più grande o più piccolo, quel colore specifico cambia posizione mentre gli altri rimangono gli stessi.
Esempi di utilizzo dell'opzione "Ripeti sfumatura".
Leggi anche: Divi: come creare un tablet con contenuti teaser scorrevoli
Per i nostri esempi, utilizziamo la sezione Call-to-Action della home page del pacchetto di layout di agopuntura gratuito disponibile in Divi.
Dovremo apportare una modifica alla prima colonna della sezione. Aprili parametri di linea facendo clic sulla sua icona a forma di ingranaggio.
Quindi selezionare il icona dell'ingranaggio per la prima colonna.
colonna uno gradiente
La prima colonna ha il proprio gradiente di sfondo. Fa parte del layout. Non lo cambieremo. Useremo questo stesso gradiente nei nostri quattro esempi. Ecco le impostazioni nel caso ne avessi bisogno.
- Gradiente si ferma:
- 0px: #f4d5b8
- 100px: RGB(244,213,184,0)
Impostazioni gradiente
- Tipo di gradiente: lineare
- Posizione gradiente: 180 gradi
- Ripeti gradiente: NO
- Unità gradiente: percentuale
- Gradiente quadrato sopra l'immagine di sfondo: NO
spaziatura
Aggiungeremo la spaziatura a sinistra della colonna. Accedi alla scheda Design, scorrere fino a Spaziatura e seleziona il icona della tavoletta per aprire le opzioni del dispositivo.
Aggiungi il 5% di riempimento sinistro per le schede desktop e tablet. Scegli la scheda del telefono ed elimina il riempimento sinistro. Lascia in alto e a destra le impostazioni correnti.
- Imbottitura
- In alto: 180px
- Sinistra: 5%
- A sinistra: 80px
esempio uno
Il nostro primo esempio crea un motivo ripetuto diagonale con linee sottili.
Questo ha tre fermate di gradiente.
- Gradiente si ferma:
- 4px: #fff6ee
- 9px: #ede3dc
- 14px: #e8ded7
Utilizzare le seguenti impostazioni.
- Tipo di gradiente: lineare
- Direzione gradiente: 156 gradi
- Ripeti gradiente: SÌ
- Unità gradiente: pixel
- Gradiente quadrato sopra l'immagine di sfondo: n
Secondo esempio
Il nostro secondo esempio crea un motivo ripetuto diagonale con linee più grandi.
Questo ha tre fermate di gradiente.
- Gradiente si ferma:
- 4px: #fff6ee
- 43px: #ede3dc
- 50px: #e8ded7
Per le impostazioni del gradiente,
- Tipo di gradiente: lineare
- Direzione gradiente: 156 gradi
- Ripeti gradiente: SÌ
- Unità gradiente: pixel
- Gradiente quadrato sopra l'immagine di sfondo: NO
Esempio tre
Il nostro terzo esempio crea un motivo circolare ripetuto con cerchi di medie dimensioni.
Questo ha tre fermate di gradiente.
- Gradiente si ferma
- 4px: #fff6ee
- 7px: #e8ded7
- 8px: #ede3dc
Applicare le seguenti impostazioni di sfumatura
- Tipo di sfumatura: circolare
- Posizione gradiente: in basso
- Ripeti gradiente: SÌ
- Unità gradiente: percentuale
- Gradiente quadrato sopra l'immagine di sfondo: NO
Esempio 4
Il nostro quarto esempio crea un motivo circolare con cerchi grandi.
Questo ha tre fermate di gradiente.
- Gradiente si ferma:
- 4px: #fff6ee
- 23px: #e8ded7
- 31px: #ede3dc
Per le impostazioni del gradiente, modificare come segue:
- Tipo di sfumatura: circolare
- Posizione gradiente: centro
- Ripeti gradiente: SÌ
- Unità gradiente: percentuale
- Gradiente quadrato sopra l'immagine di sfondo: n
Scarica DIVI ora!!!
Conclusione
Questo è il nostro sguardo su come utilizzare l'opzione per Ripetizione gradiente da Divi per creare sfondi personalizzati. Molte regolazioni nelle impostazioni del gradiente influiscono sul design del gradiente.
Gradient Repeat funziona bene con tutte queste modifiche per creare facilmente interessanti motivi di sfondo personalizzati.
Ti consigliamo di provare gli esempi che abbiamo fornito qui e di apportare modifiche per vedere come vengono influenzati i gradienti e di creare i tuoi gradienti di sfondo personalizzati.
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.
...
