Ti piacerebbe usare le maschere e i modelli per la tua sezione Eroe in Divi ?
Le nuove maschere e motivi di sfondo di Divi sono una delle nostre nuove funzionalità di design più interessanti di sempre. Ognuna delle maschere e dei motivi può essere combinata con altri elementi di sfondo (come colori, immagini e sfumature) per innumerevoli combinazioni uniche con pochi clic.
Oggi vi mostreremo come utilizzarlo Divi e le sue nuove maschere e motivi di sfondo per progettare una sezione dell'eroe.
In questo tutorial, tratteremo i passaggi importanti necessari per creare maschere e motivi di sfondo.
Mostreremo anche come posizionare le immagini di sfondo per adattarle al design di una maschera. Questo dovrebbe darti il outils devi creare la sezione Hero perfetta per il tuo sito in pochi minuti.
Panoramica
Ecco una rapida occhiata al design che creeremo in questo tutorial.
Leggi anche: Divi: come creare una griglia di immagini reattiva con collegamenti ed effetti al passaggio del mouse
Esempio di sezione di Hero con maschera e motivo bianchi.
Ecco una versione scura della stessa sezione Hero con una maschera e un motivo neri.
Con questo design in atto, puoi facilmente cambiare le maschere e le posizioni delle maschere con pochi clic!
Crea una nuova pagina con Divi Builder
Dalla dashboard di WordPress, vai a Pagine> Aggiungi nuovo per creare una nuova pagina.
Dagli un titolo che abbia senso per te e fai clic Usa il Divi Costruttore
quindi fare clic su Inizia a costruire (Costruisci da zero)
Dopodiché avrai una tela bianca su cui iniziare a progettare Divi.
Come utilizzare le maschere e i motivi di sfondo di Divi nella sezione del tuo eroe
1. Creare la struttura del layout
Per questa sezione degli eroi, utilizzeremo una struttura di layout classica con il titolo e l'invito all'azione a sinistra e un'immagine (o design visivo) a destra.
Per questo esempio, il nostro design visivo verrà creato utilizzando le opzioni di sfondo di Divi. Ma prima di arrivare al nocciolo della questione, dobbiamo creare una riga a due colonne per risparmiare spazio sul lato destro della pagina per mostrare le nostre maschere di sfondo della sezione e il design del modello.
2. Aggiungi il titolo e l'invito all'azione
Nella colonna di sinistra (colonna 1), aggiungi un modulo Testo per il titolo principale, un modulo Testo per il testo dei sottotitoli e un modulo Pulsante per il tuo pulsante.
3. Aggiungi la spaziatura verticale alla sezione
Per rendere il nostro design di sfondo alto e bello, dobbiamo aggiungere un'altezza verticale alla sezione. Un modo semplice per farlo è aggiungere il riempimento nella parte superiore e inferiore della sezione. Tieni presente che dobbiamo regolare il riempimento sul tablet e sullo schermo del telefono per fare spazio al nostro design di sfondo una volta che le colonne sono impilate verticalmente.
Apri le impostazioni della sezione. Nella scheda progettazione, aggiorna il riempimento come segue:
- Imbottitura:
- Desktop: 20vw in alto, 20vw in basso
- Tablet: 8vw superiore, 48vw inferiore
- Telefono: 8vw superiore, 70vw inferiore
4. Aggiungi l'immagine di sfondo e il gradiente
Successivamente, possiamo aggiungere un'immagine di sfondo e un gradiente alla sezione. Tieni presente che il punto focale principale dell'immagine di sfondo verrà rivelato sul lato destro della sezione, quindi usa un'immagine che abbia ciò che vuoi vedere sul lato destro.
Per questo esempio, utilizziamo un'immagine con lo skyline di una città . Il lato destro dell'immagine ha edifici più vicini e più belli, quindi funziona davvero bene.
Sotto la scheda Immagine di sfondo, carica l'immagine sullo sfondo della sezione.
In Divi, puoi facilmente aggiungere una sfumatura di colore sull'immagine di sfondo. Sotto la scheda Gradiente di sfondo, aggiungi la seguente sfumatura allo sfondo della sezione:
- Gradiente si ferma:
- 0%: #3e22ss
- 100%: chiaro
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
5. Creare un motivo di sfondo per la sezione
Ora che abbiamo la nostra immagine di sfondo e il gradiente pronti, possiamo aggiungere un motivo di sfondo per completare il design.
In questo esempio, utilizzeremo un motivo sottile che aggiunge solo un po' di consistenza per dargli un aspetto più unico.
Sotto la scheda Pattern di sfondo, aggiorna quanto segue:
- Motivo di sfondo: trapuntato
MANCIA: Con i motivi di sfondo, di solito è meglio mantenerlo sottile. Prova a utilizzare dimensioni personalizzate per i disegni più piccoli, quindi riduci l'opacità del colore.
6. Creare una maschera di sfondo per la sezione
Con il nostro motivo di sfondo in atto, siamo finalmente pronti per testare una nuovissima maschera di sfondo per il nostro design. Ci sono un sacco di opzioni e varianti tra cui scegliere. Per questo esempio, useremo la maschera a nido d'ape.
Sotto la scheda Maschera di sfondo, aggiorna quanto segue:
- Maschera: a nido d'ape
- Colore maschera: #ffffff
- Dimensioni: copertina
7. Regolare la posizione dell'immagine di sfondo
Poiché utilizziamo una maschera di sfondo, parte della nostra immagine di sfondo è mascherata (o "mascherata").
In questo esempio, ci assicureremo che la parte inferiore destra dell'immagine sia più visibile e la sposteremo leggermente a destra per mostrare più edifici.
Nella scheda Immagine, aggiorna quanto segue:
- Posizione dell'immagine di sfondo: in basso a destra
- Offset orizzontale dell'immagine di sfondo: -4vw
8. Usa una modalità di fusione
Un modo per essere creativi con tutti questi elementi di sfondo è aggiungere una modalità di fusione. I metodi di fusione possono essere aggiunti a qualsiasi opzione di sfondo e possono essere utilizzati per mescolare più livelli di sfondo (immagine, sfumatura, maschera, ecc.) in modi creativi.
Per questo esempio, mescoleremo l'immagine di sfondo con il colore del gradiente. Per fare ciò, fare clic sulla scheda Immagine di sfondo e aggiungi un metodo di fusione per fondere il colore del gradiente con l'immagine di sfondo come segue:
- Miscela di immagini di sfondo: Moltiplica
9. Regola la maschera di sfondo per dispositivi mobili
È importante assicurarsi che il design della maschera di sfondo sia perfetto anche sui dispositivi mobili. Fortunatamente, le opzioni integrate semplificano questo processo.
Ricorda che abbiamo già aggiunto l'imbottitura extra sul tablet e sul telefono per fare spazio al nostro design di sfondo.
Ora tutto ciò che dobbiamo fare è utilizzare le opzioni di trasformazione dello sfondo e proporzioni per regolare la maschera per dispositivi mobili.
Sotto la scheda Maschera di sfondo, abilita le opzioni reattive e aggiorna quanto segue:
Versione Tablet
- Trasformazione maschera: capovolgi verticalmente, capovolgi orizzontalmente, ruota
- Proporzioni maschera: quadrato
Versione telefonica
- Trasformazione maschera: capovolgi verticalmente, capovolgi orizzontalmente, ruota
- Proporzioni maschera: Ritratto
Il risultato
Dai un'occhiata al design che abbiamo creato finora.
Computer desktop
Versione per tablet
Edizione telefonica
10. Crea una versione oscura
Se vuoi una versione scura di questo design, cambia semplicemente il colore della maschera di sfondo in un colore scuro (come il nero).
Quindi cambia il colore del motivo in nero.
Quindi cambia il titolo e il testo dei sottotitoli in bianco. E potresti voler aggiornare anche il colore del pulsante.
Ecco come appare la versione oscura.
Risultati finali
Guarda anche: Divi: Come personalizzare il link "Leggi di più" di un Blog
Ecco un altro sguardo ai nostri risultati finali.
Scarica DIVI ora!!!
Conclusione
Progetta una sezione Eroe per il tuo sito web è molto divertente con maschere e motivi di sfondo di Divi. Le opzioni di sfondo sono facili da modificare per ottenere il design perfetto. E ci sono molte altre opzioni che puoi usare (come i metodi di fusione) per creare sfondi ancora più unici.
Inoltre, puoi aggiungere maschere e motivi a qualsiasi elemento Divi, non solo alle sezioni. Allora divertiti a sperimentare!
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.
...
