Come utilizzare la maschera di sfondo di Divi e le impostazioni di trasformazione del modello

I motivi di sfondo sono un ottimo modo per dare al tuo sito web un tocco visivo e distinguerti dalla massa. La nuova maschera di sfondo e le impostazioni di trasformazione del motivo di Divi possono essere combinate in molti modi per creare quei motivi di sfondo. In questo post, vedremo come utilizzare la maschera di sfondo di Divi e le impostazioni di trasformazione del modello per creare sfondi interessanti per i tuoi layout Divi.

Iniziamo.

Anteprima

Innanzitutto, ecco uno sguardo a ciascun esempio con le opzioni desktop, telefono e alternative per ciascuno.

Esempio Uno Risultati

Versione normale desktop

Telefono versione normale

Desktop versione alternativa

Telefono versione alternativa

Esempio due risultati

Versione normale desktop

Telefono versione normale

Desktop versione alternativa

Telefono versione alternativa

Esempio tre risultati

Versione normale desktop

Telefono versione normale

Desktop versione alternativa

Telefono versione alternativa

Opzioni Divi Background Mask e Pattern Transform

La nuova maschera di sfondo e le funzionalità del modello di Divi includono diverse opzioni per regolarle. Le regolazioni includono capovolgimento, rotazione e inversione orizzontale e verticale. Per vedere le opzioni, vai alle Impostazioni sfondo di una sezione o riga e seleziona le schede Motivo di sfondo o Maschera di sfondo.

Dopo aver aggiunto un motivo o una maschera, verranno visualizzate le impostazioni di trasformazione. Basta fare clic sulle opzioni che si desidera utilizzare. Possiamo usarli insieme e in qualsiasi combinazione desideriamo.

Come funzionano le impostazioni di trasformazione di maschere e modelli di Divi

Il modello seguente è Zig Zag con le impostazioni predefinite.

Ho aggiunto una maschera del blog di livello nell'immagine qui sotto. Usiamo questi per dimostrare come funzionano le impostazioni di trasformazione della maschera di sfondo e del modello.

Capovolgimento orizzontale

Questo è il ribaltamento orizzontale. Ho applicato le impostazioni di trasformazione sia al pattern che alla maschera.

Capovolgimento verticale

Questo è il ribaltamento verticale per il motivo e la maschera.

Rotante

Questo mostra Rotazione per il modello e la maschera.

Invertire

Questo esempio mostra l'inversione per il modello e la maschera.

Combinazioni di maschera di sfondo e trasformazione del motivo

Naturalmente, possiamo anche utilizzare le impostazioni di trasformazione in varie combinazioni. Ecco alcuni esempi.

Questo ruota il motivo e inverte la maschera.

Questo esempio utilizza Capovolgimento verticale, Rotazione e Inversione per il motivo di sfondo. La maschera di sfondo usa Capovolgimento orizzontale, Capovolgimento verticale e Rotazione.

Per questo esempio, ho usato Capovolgimento e rotazione orizzontale per il motivo di sfondo e Capovolgimento e rotazione verticale per la maschera di sfondo.

Esempi di impostazioni di trasformazione di maschere e modelli di sfondo

Successivamente, diamo un'occhiata a come queste impostazioni possono essere utilizzate con i layout Divi. Useremo una sezione come punto di partenza e creeremo tre esempi. Lo modelleremo e quindi utilizzeremo le impostazioni di trasformazione per cambiarlo per ogni esempio.

Per i miei esempi, sto utilizzando una versione modificata della sezione eroe dalla pagina di destinazione Pianificazione patrimoniale disponibile in Divi. Ecco uno sguardo alla mia sezione. La modifica semplifica la sezione dell'eroe per le nostre esigenze. Utilizza lo sfondo del colore di sfondo: #92a5ab.

• Sfondo: #92a5ab

Esempio di impostazioni di trasformazione della maschera e del modello di sfondo uno

Il nostro primo esempio ci fornisce un arco che si trova verticalmente al centro dello schermo. Un lato dello schermo ha un motivo trapuntato. Quindi, creeremo una versione alternativa con l'arco rivolto nell'altra direzione.

Motivo di sfondo

Apri le impostazioni della sezione, scorri verso il basso fino a Sfondo e seleziona la scheda Motivo di sfondo. Scegli Trapuntato per Motivo di sfondo e Inversione per Trasformazione motivo.

• Motivo di sfondo: trapuntato
• Pattern Transform: Invertire

Maschera di sfondo

Seleziona la scheda Maschera di sfondo e scegli Arco per la maschera di sfondo. Cambia il Colore maschera su # 616d72 e imposta Trasforma maschera su Inversione. Questo termina la nostra prima versione dell'arco con ciuffi.

• Maschera di sfondo: Arch
• Colore: #616d72
• Trasformazione maschera: inversione

Esempio una variazione

Quindi, creiamo una variazione del nostro design. Basta cambiare la Trasformazione maschera per il motivo di sfondo in Capovolgimento orizzontale e Capovolgimento verticale. Questo cambia l'arco in modo che sia rivolto nell'altra direzione e sposta il motivo, quindi non sembra solo un'immagine speculare.

• Trasformazione maschera: capovolgimento orizzontale, capovolgimento verticale

Impostazioni di trasformazione di maschera e pattern di sfondo Esempio due

Per il nostro secondo esempio, creeremo un ovale al centro dello schermo con un motivo all'interno dell'ovale. Quindi, cambieremo il posizionamento del modello. Modificheremo anche questo per dimensioni dello schermo diverse.

Motivo di sfondo

Nelle impostazioni di sfondo, seleziona la scheda Motivo di sfondo e scegli Shippo per il motivo. Imposta il Pattern Transform su Inverting.

• Motivo di sfondo: Shippo
• Pattern Transform: Invertire

Maschera di sfondo

Quindi, seleziona la scheda Maschera di sfondo . Scegli Eclipse per la maschera di sfondo e passa il mouse sopra le opzioni di sfondo. Seleziona l'icona della tavoletta che appare. Questo apre le impostazioni del dispositivo. Per le impostazioni del desktop, imposta Colore su # 758489. Per Trasformazione maschera, scegli Capovolgimento e rotazione orizzontale. Questo termina la versione desktop. Cambiamo per la versione mobile.

• Maschera di sfondo: Eclipse
• Colore: #758489
• Trasformazione maschera: capovolgimento orizzontale, rotazione

Tablet e Telefono

Tablet e Telefono utilizzeranno entrambi le stesse impostazioni, quindi dovremo solo modificare le impostazioni del Tablet. Seleziona la scheda Tablet e cambia la Trasformazione maschera in Capovolgimento orizzontale.

• Trasformazione maschera: capovolgimento orizzontale, inversione

Esempio due variazione

Successivamente, creeremo la variazione per il nostro secondo esempio. Innanzitutto, seleziona la scheda Motivo di sfondo e imposta il Colore del motivo su rgba(0,0,0,0.06).

• Colore del modello: rgba(0,0,0,0.06)

Quindi, seleziona la scheda Maschera di sfondo e scegli Capovolgimento orizzontale, Rotazione e Inversione per Trasformazione maschera.

• Trasformazione maschera: capovolgimento orizzontale, rotazione, inversione

Tablet e Telefono

Per le opzioni del tablet e del telefono, selezionare l'icona del tablet . Cambia la trasformazione della maschera in capovolgimento e inversione orizzontale. La versione alternativa dell'esempio due è ora completa.

• Trasformazione maschera: capovolgimento orizzontale, inversione

Esempio tre di impostazioni di trasformazione della maschera e del modello di sfondo

Per il nostro terzo esempio di impostazioni di trasformazione di maschera e pattern, useremo un pattern a nido d'ape con una maschera di pittura. Creeremo anche una versione mobile per questo.

Motivo di sfondo

Innanzitutto, scegli la scheda delle impostazioni del dispositivo e seleziona l'icona del desktop . Seleziona la scheda Motivo di sfondo e scegli Nido d'ape per Motivo di sfondo. Cambia il Colore in rgba(0,0,0,0.42). Per questo, lasceremo le opzioni di Trasformazione del modello disabilitate. Li aggiungeremo per la versione alternativa.

• Motivo di sfondo: nido d'ape
• Colore motivo: rgba(0,0,0,0.42)
• Trasformazione pattern: nessuna

Maschera di sfondo

Quindi, seleziona la scheda Maschera di sfondo . Scegli Pittura per la maschera di sfondo. Cambia il Colore in # 697b82. Scegli Capovolgimento verticale per Trasformazione maschera.

• Maschera di sfondo: vernice
• Colore: #697b82
• Trasformazione maschera: capovolgimento verticale

Quindi, seleziona Copertina per la dimensione. Questo apre alcune altre opzioni. Scegli In basso a destra per la posizione. Questo è tutto per la versione desktop. Successivamente, creeremo la versione mobile.

• Dimensioni: copertina
• Posizione: in basso a destra

Tablet e Telefono

Quindi, seleziona la scheda del tablet e cambia la Trasformazione della maschera di sfondo in Capovolgimento e rotazione verticale. Questo completa lo stile per il nostro terzo esempio. Successivamente, creeremo la versione alternativa.

• Trasformazione maschera di sfondo: rotazione verticale, rotazione

Esempio tre variazione

Per la versione alternativa di questo esempio, regoleremo sia il Pattern di sfondo che la Maschera di sfondo.

Motivo di sfondo

Per il Pattern di sfondo , cambia il Colore del modello in rgba(0,0,0,0.11). Cambia la trasformazione del modello in Capovolgimento orizzontale, Capovolgimento verticale e Rotazione.

• Colore motivo: rgba(0,0,0,0.11)
• Pattern Transform: capovolgimento orizzontale, capovolgimento verticale, rotazione

Maschera di sfondo

Quindi, seleziona la scheda Maschera di sfondo . Cambia il Colore in bianco e Trasforma la maschera in Capovolgimento orizzontale, Capovolgimento verticale e Inversione.

• Colore: #ffffff
• Trasformazione maschera: capovolgimento orizzontale, capovolgimento verticale, inversione

Quindi, cambia la Dimensione della maschera in Copertura e quindi scegli Centro per la Posizione della maschera.

• Dimensione maschera: copertina
• Posizione maschera: centro

Tablet e Telefono

Infine, scegli la scheda tablet per creare la versione mobile. Scegli la scheda Maschera di sfondo e seleziona tutte e quattro le opzioni per Trasforma maschera. Questo completa la versione alternativa del terzo esempio.

• Trasformazione maschera di sfondo: capovolgimento orizzontale, capovolgimento verticale, rotazione, inversione

Risultati

Ecco uno sguardo a ciascun esempio con le opzioni desktop, telefono e alternative per ciascuno.

Esempio Uno Risultati

Versione normale desktop

Telefono versione normale

Desktop versione alternativa

Telefono versione alternativa

Esempio due risultati

Versione normale desktop

Telefono versione normale

Desktop versione alternativa

Telefono versione alternativa

Esempio tre risultati

Versione normale desktop

Telefono versione normale

Desktop versione alternativa

Telefono versione alternativa

Pensieri finali

Questo è il nostro sguardo su come utilizzare la maschera di sfondo di Divi e le impostazioni di trasformazione del modello per creare molti disegni di sfondo interessanti. Poiché i modelli e le maschere possono essere utilizzati insieme, le relative impostazioni di trasformazione possono essere utilizzate anche insieme. Questo apre molte opzioni di design, offrendoti ancora più strumenti per aggiungere eleganza ai tuoi sfondi Divi. Il modo migliore per imparare a usarli è giocare con le regolazioni e vedere cosa puoi creare.

Vogliamo sentire da voi. Hai provato la maschera di sfondo di Divi e le impostazioni di trasformazione del modello nei tuoi layout Divi? Fatecelo sapere nei commenti.