Ti piacerebbe progettare uno sfondo unico usando le maschere modello? Divi ?
Il nuovo motivo di sfondo maschera da Divi hanno aperto molte opzioni di design per gli sfondi. Funzionano alla grande con colori e motivi di sfondo per creare molti design unici.
In questo articolo, vedremo come creare sottili maschere con motivi di sfondo Divi . Discuteremo anche i vantaggi dell'utilizzo di una maschera sottile e creeremo tre esempi.
Cominciamo.
Anteprima della maschera del motivo di sfondo
Prima di iniziare a progettare, ecco un'anteprima di ciò che costruiremo in questo tutorial Divi.
Esempio 1
Leggi anche: Divi: come modificare la sfumatura di uno sfondo al passaggio del mouse
Esempio 2
Esempio 3
Come creare una maschera di sfondo
La maschera di sfondo coprirà il motivo di sfondo e rivelerà parti del motivo. Funziona molto buono con colori e motivi di sfondo. È possibile regolare lo sfondo per adattarlo contenuto, aggiusta il contenuto per adattare lo sfondo o regolare entrambi.
Guarda anche: Divi: come utilizzare il "Gradient Builder" per abbellire le tue immagini
Per prima cosa, apri il parametri di sezione dove vuoi aggiungere la maschera di sfondo.
Successivamente, dovrai scegliere un colore di sfondo per la sezione. Scorri fino a sfondo. Con la scheda Sfondo selezionata, scegli il tuo colore sfondo nel selettore colore.
Successivamente, dovrai scegliere un motivo di sfondo e impostarne le dimensioni e la posizione. Seleziona scheda Pattern di sfondo e fare clic su Aggiungi motivo di sfondo.
Si apre un elenco di opzioni del modello. Scegli il tuo modello nella lista. Completerà la sezione.
Successivamente, dovrai scegliere una maschera di sfondo e regolarne il colore e le impostazioni per adattarle al tuo design. Seleziona scheda Maschera di sfondo e fare clic su Aggiungi maschera di sfondo.
Si aprirà un altro modale con le opzioni della maschera. Scegli la tua maschera sfondo nell'elenco. La maschera sarà bianca finché non scegli un colore.
Regolarli impostazioni della maschera di sfondo per ottenere l'aspetto desiderato. È possibile modificare le dimensioni, la posizione, la direzione della maschera, la rotazione, ecc. Giocare con queste impostazioni può aiutarti a creare design interessanti.
Ecco un'anteprima dello sfondo che abbiamo appena creato senza moduli. I colori sono simili, ma sono abbastanza diversi da risaltare un po'. Questo impedisce di distrarre troppo.
Esempi di maschere con motivo di sfondo sottile
Ora diamo un'occhiata a tre esempi di maschere di pattern di sfondo.
Aggiungiamo una maschera di sfondo alla sezione Eroe di landing page aziendale gratuita disponibile in Divi.
Ecco un'anteprima della pagina originale prima di aggiungere le maschere del motivo di sfondo.
Cambieremo anche i colori di sfondo dei pulsanti. Usando gli stessi sottili concetti di design, li faremo risaltare più che sullo sfondo.
Il divisore è un altro elemento che vedremo cambiare colore, ma questo elemento usa la trasparenza per ottenere il suo colore dallo sfondo, quindi non avremo bisogno di cambiarne il colore.
Esempio 1
Questo esempio utilizzerà lo sfondo originale e i colori dei pulsanti.
Colore di sfondo
Per il nostro primo esempio, utilizziamo il colore di sfondo originale per questo layout: #1d1d25. Manterremo anche il colore del pulsante originale – # 4c594c
- Colore di sfondo: #1d1d25
- Colore pulsante: # 4c594c
Motivo di sfondo
Seleziona la scheda Motivo di sfondo e scegli Strisce diagonali 2. Cambia il colore del motivo in # 383838.
- Motivo di sfondo: strisce diagonali 2
- Colore motivo: #383838
- Dimensioni: dimensioni reali
- Ripeti origine: in alto a sinistra
- Ripeti motivo: ripeti
Maschera di sfondo
Quindi seleziona la scheda SfondoMaschera. Scegliere segno di omissione e imposta il colore su # 383838.
- Maschera: cursore
- Colore maschera: #383838
Sotto il colore della maschera, seleziona l'opzione per trasformazione orizzontale e il formato immagine ritratto. Chiudi le impostazioni della sezione e salva il tuo lavoro.
- Trasformazione maschera: orizzontalmente
- Proporzioni maschera: grande (ritratto)
Esempio 2
Per il nostro secondo esempio, cambieremo i colori dello sfondo e dei pulsanti in viola.
Colore di sfondo
Aprili parametri di sezione . Assicurarsi che tu sono nella scheda Colore di sfondo e cambialo Colore in #483c56.
- Sfondo: #483c56
Motivo di sfondo
Quindi seleziona la scheda Motivo sul retro sfondo e scegli Trapuntato per il motivo di sfondo. Cambia il colore del motivo in # 635c84.
- Motivo di sfondo: trapuntato
- Colore motivo: # 635c84
Quindi scegli Formato personalizzato . Questo apre un'altra serie di opzioni. Cambiarlo largeur in 10vw.
- Dimensione del modello: dimensione personalizzata
- Larghezza del modello: 10vw
- Ripeti origine: in alto a sinistra
- Ripeti motivo: ripeti
Maschera di sfondo
Ora è il momento di configurare la nostra maschera di sfondo.
Seleziona scheda Maschera di sfondo e scegli la maschera denominata Arch. Cambia il suo colore in #67557a.
- Maschera: Arch
- Colore maschera: #67557a
Quindi, imposta le sue opzioni per trasformazione su Orizzontale, Verticale e Rotazione. Per il formato immagine, scegli l'opzione ampia o orizzontale. Chiudi le impostazioni della sezione.
- Trasformazione maschera: orizzontale, verticale e rotazione
- Proporzioni maschera: Ampio (orizzontale)
Pulsante
Infine, regoliamo il pulsante CTA in questa sezione Eroe. Vogliamo che si fonda con il design, ma vogliamo anche che si distingua.
Aprili impostazioni dei pulsanti. Dovremo solo cambiare il colore di sfondo. Può essere di un colore simile allo sfondo, ma abbastanza diverso da non perdersi nella pagina. Sceglieremo un colore più luminoso per lo sfondo. Lasceremo lo stesso colore del testo.
Seleziona la scheda Design , scorrere fino a sfondo e modificare il Colore di sfondo del pulsante in #8b4dc1. Ci dà il contrasto che vogliamo e funziona benissimo con il sfondo viola. Chiudi le impostazioni del pulsante e salva la pagina.
- Sfondo pulsante: #8b4dc1
Esempio 3
Per il nostro terzo esempio, cambieremo i colori dello sfondo e dei pulsanti in verde usando gli stessi concetti dei due esempi precedenti.
Colore di sfondo
Per prima cosa, apri il parametri di sezione . Con tab Colore di sfondo.
- Sfondo: #497762
Motivo di sfondo
Quindi seleziona la scheda Pattern di sfondoe modificare i parametri di somma da seguire.
- Motivo di sfondo: quadrati
- Colore motivo: #3a604e
- Dimensioni: dimensioni reali
- Origine ripetizione motivo: in alto a sinistra
- Ripeti motivo: ripeti
Maschera di sfondo
Quindi seleziona la scheda SfondoMaschera.
- Maschera: linee diagonali
- Colore: #3a604e
Quindi, imposta i seguenti parametri:
- Trasformazione maschera: orizzontalmente
- Proporzioni maschera: paesaggio
- Dimensioni: copertina
- Posizione maschera: in alto al centro
Pulsante
Infine, apri il impostazioni dei pulsanti e seleziona la scheda Design. Scorri verso il basso e cambia il colore di sfondo del pulsante in #61a380. Chiudi le impostazioni del modulo e salva il tuo lavoro.
- Sfondo pulsante: #61a380
Risultati finali
Guarda anche: Divi: Come personalizzare il carrello e le icone di ricerca del modulo "Menu a larghezza intera".
Ecco come appaiono le nostre maschere di pattern di sfondo nella sezione degli eroi del nostro layout.
Esempio 1
Esempio 2
Esempio 3
Scarica DIVI ora!!!
Conclusione
Questo è il nostro sguardo su come creare sottili maschere con motivi di sfondo con Divi. Una maschera sottile risalta quel tanto che basta per dare una consistenza visiva allo sfondo. Hanno un bell'aspetto senza distrarre dalle tue CTA e altri elementi.
Le maschere del motivo di sfondo di Divi sono semplici da usare e le loro impostazioni ti consentono di creare qualcosa di unico. Sperimenta con le impostazioni per creare le tue maschere di pattern di sfondo.
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.
...
