Ti piacerebbe dare forme alle tue immagini usando il generatore di gradienti? Divi ?
Le maschere immagine vengono spesso utilizzate per aggiungere forme interessanti alle immagini. Consentono all'immagine di vedere attraverso la forma, conferendo alla pagina un elemento di design unico.
Con l' Costruttore di gradienti de Divi, non è necessario utilizzare le maschere per creare forme. Invece, puoi usare il Gradiente si ferma e i parametri per crearli!
In questo articolo vedremo come abbellire le tue immagini con il Gradient Builder di Divi per aiutarti ad aggiungere design unici alle tue immagini.
Cominciamo.
Panoramica
Per prima cosa, vediamo cosa creeremo in questo tutorial su diverse dimensioni dello schermo.
Primo esempio: forma circolare dell'immagine
Computer desktop
tavoletta di cioccolato Tablette
Telefono
Secondo esempio – Forma dell'immagine lineare
ufficio
tavoletta di cioccolato Tablette
Telefono
Terzo esempio: forma dell'immagine ellittica
Computer desktop
tavoletta di cioccolato Tablette
Telefono
Quarto esempio: forma conica dell'immagine
Computer desktop
tavoletta di cioccolato Tablette
Telefono
Progettazione del layout con Divi
Iniziamo creando il layout che useremo in tutti gli esempi. Questo layout può essere utilizzato come sezione eroe.
Includerà un titolo e una descrizione su un lato e l'immagine sull'altro. Useremo quindi questo layout e questa immagine per gli esempi.
Personalizza la sezione
Innanzitutto, crea una nuova pagina Divi e personalizza la sezione. Apri le impostazioni della sezione e modifica il colore sfondo a #f0f3fb.
- Sfondo: #f0f3fb
Quindi vai alla scheda Design e modificare le impostazioni di spaziatura come segue:.
- Imbottitura (superiore e inferiore): 10%
Aggiungi riga
Quindi aggiungere un linea con la struttura a colonne sottostante.
Accedi ai parametri di linea, nella scheda Design, accedi all'opzione dimensionamento e modificare i parametri di dimensionamento.
- Usa larghezza grondaia personalizzata: SÌ
- Larghezza massima: 1 px
Impostazioni della prima colonna
Nella scheda Contenuti della riga, apri le impostazioni della prima colonna della riga, vai alla scheda Design. Modificare la spaziatura come segue.
- Imbottitura (sinistra e destra): 9% sinistra, destra
Parametri del primo modulo Testo
Quindi aggiungere un Modulo di testo alla colonna di sinistra.
selezionare Rubrica 4 per il testo di contenuto e aggiungi il contenuto del tuo corpo.
- Testo: "Benvenuto in BlogPasCher"
Quindi vai alla scheda Design e modificare le impostazioni del titolo.
- Fonte: Montserrat
- Peso del carattere: grassetto
- Stile: TT
- Colore del testo: #1d4eff
- Dimensioni del testo: desktop 16px, tablet 14px, telefono 12px
- Spaziatura lettere: 0,3 em
- Altezza della linea: 1,6 em
Scorri fino a Spaziatura e cambia il margine inferiore.
- Margine (inferiore): 0px
Parametri del secondo modulo Testo
Quindi aggiungere un Modulo di testo sotto il primo.
Imposta il tipo di testo su “Titolo 1” e aggiungi il contenuto del tuo corpo.
- Contenuto: "Pianifica il tuo futuro finanziario"
Quindi seleziona la scheda Design e modificare le opzioni del titolo.
- Fonte: Montserrat
- Peso del carattere: grassetto
- Colore del testo: #0f1154
- Dimensioni: desktop 80px, tablet 40px, telefono 24px
- Altezza riga: 110%
Parametri del terzo modulo Testo
Quindi aggiungere un Modulo di testo sotto il secondo.
Lascia il tipo di testo in "Paragrafo" e aggiungi il contenuto del tuo corpo.
- Corpo: contenuto
Quindi vai alla scheda Design e modificare le impostazioni del testo.
- Carattere del testo: Roboto
- Peso del carattere: medio
- Colore del testo: #000000
- Dimensione del testo: 18px (desktop e tablet), 14px (telefono)
- Altezza della linea: 180%
Infine, scorri verso il basso fino a spaziatura e imposta il margine inferiore. Chiudere le impostazioni del modulo.
- Margine (inferiore): 0px
Impostazioni del modulo immagine
Ora aggiungi un Modulo immagine alla colonna di destra.
In primo luogo, rimuovere l'immagine fittizia facendo clic sul cestino o sull'icona di ripristino sopra l'immagine.
Quindi scorri verso il basso sfondo , seleziona la scheda Immagine e aggiungi la tua immagine. Lascia tutte le impostazioni dell'immagine ai valori predefiniti. L'immagine non mostrerà molto all'inizio. Lo risolveremo mentre procediamo.
Quindi seleziona la scheda Style e scorri fino a Spaziatura.
- Margine (Desktop): -10% (in alto), -30% (a sinistra), 10% (a destra)
- Imbottitura (superiore e inferiore): 300px
- Margine (tablet/telefono): 0% (in alto), 0% (sinistra e destra)
- Imbottitura (telefono): 150px (superiore e inferiore)
Esempi di immagini modellate con Gradient Builder di Divi
Primo esempio – Forma circolare
Il nostro primo esempio dà all'immagine una forma circolare con un foro al centro.
Apri le impostazioni del modulo Immagine e scorri verso il basso fino a sfondo . Seleziona il Scheda Sfumatura di sfondo e imposta 6 fermate di gradiente:
- Prima tappa: 0%, #f0f3fb
- Secondo: 45%, #f0f3fb
- Terzo (sopra il secondo): 45%, rgba(41,196,169,0)
- Quarto: 69%, RGB (250,255,214,0)
- Quinto (sopra il quarto): 69%, #f0f3fb
- Sesto: 100%, #f0f3fb
- Tipo: Rotondo
- Posizione: Centro
- Unità: percentuale
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
Secondo esempio – Forma lineare
Ecco un'anteprima del secondo esempio di forma dell'immagine. Questo esempio posiziona linee diagonali sull'immagine.
Apri le impostazioni, scorri verso il basso fino a backgound e seleziona ilScheda Sfumatura di sfondo. Aggiungi quattro interruzioni di gradiente:
- Prima tappa: 0%, #f0f3fb
- Secondo: 5%, #f0f3fb
- Terzo (sopra il secondo): 5%, rgba(175,175,175,0)
- Quarto: 13%, RGB (41,196,169,0)
- Tipo: lineare
- Sterzo: 150 gradi
- Ripeti gradiente: SÌ
- Unità gradiente: percentuale
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
Terzo esempio – Forma ellittica
Questo è il nostro terzo esempio di forma dell'immagine. Questo utilizza una forma ellittica.
Apri le impostazioni del modulo Immagine e scorri verso il basso fino a sfondo . Seleziona scheda Gradiente di sfondo e crea quattro interruzioni di gradiente:
- Prima tappa: 0%, #f0f3fb
- Secondo: 9%, #f0f3fb
- Terzo (sopra il secondo): 9%, rgba(175,175,175,0)
- Quarto: 21%, RGB (41,196,169,0)
- Tipo: ellittica
- Posizione gradiente: in alto a sinistra
- Ripeti gradiente: SÌ
- Unità gradiente: percentuale
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
Quarto esempio – Forma conica
Il nostro quarto esempio usa "Conico" per creare un'unica forma di immagine.
Apri Impostazioni modulo immagine, scorri verso il basso fino a sfondo e seleziona la scheda Immagine di sfondo. Questo ha 5 fermate gradiente:
- Prima tappa: 23%, #f0f3fb
- Secondo: 35%, #f0f3fb
- Terzo (sopra il secondo): 35%, rgba(41,196,169,0)
- Quarto: 65%, RGB (250,255,214,0)
- Quinto (sopra il quarto): 65%, #f0f3fb
- Tipo: affusolato
- Direzione gradiente: 180 gradi
- Posizione gradiente: in basso
- Unità: percentuale
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
Risultati finali
Tutti i layout sono andati bene. Le forme delle immagini si distinguono e le immagini sono sempre facili da capire. Sono tutti reattivi, quindi stanno benissimo su qualsiasi dispositivo.
Primo esempio: forma circolare dell'immagine
Computer desktop
Scarica DIVI ora!!!
tavoletta di cioccolato Tablette
Telefono
Secondo esempio – Forma dell'immagine lineare
Computer desktop
Scarica DIVI ora!!!
tavoletta di cioccolato Tablette
Telefono
Terzo esempio: forma dell'immagine ellittica
Computer desktop
Scarica DIVI ora!!!
tavoletta di cioccolato Tablette
Telefono
Quarto esempio: forma conica dell'immagine
Computer desktop
Scarica DIVI ora!!!
tavoletta di cioccolato Tablette
Telefono
Conclusione
Questo è il nostro sguardo su come modellare le tue immagini con Gradient Builder di Divi.
Il Gradient Builder può creare forme di immagini interessanti. Giocare con le interruzioni del gradiente, provare diversi tipi di gradienti e attivare la ripetizione del gradiente sono ottimi modi per creare nuovi design.
Assicurati di controllare i tuoi progetti su tutte le dimensioni dello schermo e di apportare le modifiche se necessario.
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.
...
