Vorresti combinare le impostazioni della maschera di sfondo e le opzioni di trasformazione del modello Divi creare sfondi unici?
I disegni di sfondo sono un ottimo modo per dare il tuo sito web talento visivo e distinguersi dalla massa. Le nuove impostazioni Maschera di sfondo e Trasformazione pattern da Divi possono essere combinati in molti modi per creare questi motivi di sfondo.
In questo articolo, vedremo come utilizzare la maschera di sfondo e le impostazioni di trasformazione del modello da Divi per creare sfondi interessanti per i tuoi layout Divi.
Cominciamo.
Panoramica
Innanzitutto, ecco un'anteprima di ciascun esempio su schermi di dimensioni diverse (telefono e desktop).
Leggi anche: Divi: come utilizzare gli effetti ombra e al passaggio del mouse per creare contenuti interattivi
Esempio 1
Versione 1 su desktop
Versione 1 al telefono
Scarica DIVI ora!!!
Versione 2 su desktop
Versione 2 al telefono
Esempio 2
Versione 1 su desktop
Versione 1 al telefono
Scarica DIVI ora!!!
Versione 2 su desktop
Versione 2 al telefono
Esempio 3
Versione 1 su desktop
Versione 1 sul telefono
Scarica DIVI ora!!!
Versione 2 su desktop
Versione 2 al telefono
Opzioni Divi Background Mask e Pattern Transform
Le nuove funzionalità di maschera e motivo di sfondo di Divi includono diverse opzioni per regolarle. Le regolazioni includono capovolgimento orizzontale e verticale, rotazione e inversione. Per visualizzare le opzioni, vai alle impostazioni dello sfondo di una sezione o linea e seleziona le schede Motivo di sfondo o Maschera di sfondo.
Dopo aver aggiunto un motivo o una maschera, vengono 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 impostazioni predefinite.
Aggiungiamo una maschera del blog di livello nell'immagine qui sotto. Usiamoli per dimostrare come funzionano le impostazioni Maschera di sfondo e Trasformazione pattern.
Tornitura orizzontale
È l'inversione orizzontale. Abbiamo applicato le impostazioni di trasformazione sia al pattern che alla maschera.
Capovolgimento verticale
Questo è il capovolgimento verticale per il motivo e la maschera.
Rotazione
Questo mostra la rotazione per il modello e la maschera.
Inversione
Questo esempio mostra Inverti per motivo e maschera.
Combinazioni di trasformazione di maschera e pattern di sfondo
Naturalmente, possiamo anche utilizzare i parametri di trasformazione in varie combinazioni. Ecco alcuni esempi.
Questo ruota il motivo e inverte la maschera.
Questo esempio utilizza il capovolgimento verticale, la rotazione e l'inversione per il motivo di sfondo. La maschera di sfondo utilizza il capovolgimento orizzontale, il capovolgimento verticale e la rotazione.
Per questo esempio, abbiamo utilizzato il capovolgimento e la rotazione orizzontali per il motivo di sfondo e il capovolgimento e la rotazione verticali per la maschera di sfondo.
Esempi di maschere di sfondo e impostazioni di trasformazione del motivo
Successivamente, vediamo come utilizzare queste impostazioni con i layout Divi. Useremo una sezione come punto di partenza e creeremo tre esempi. Lo personalizzeremo e quindi utilizzeremo le impostazioni di trasformazione per modificarlo per ogni esempio.
Per i nostri esempi, utilizziamo una versione modificata della sezione Eroe della pagina di destinazione del layout Pianificazione disponibile in Divi.
Ecco una panoramica della sezione in questione. Usa il colore di sfondo: #92a5ab.
- Sfondo: #92a5ab
Esempio di parametri di trasformazione della maschera e del modello di sfondo 1
Il nostro primo esempio ci fornisce un arco che si trova verticalmente al centro dello schermo. Un lato dello schermo ha un motivo trapuntato. Successivamente, creeremo una versione alternativa con l'arco rivolto dall'altra parte.
motivo di sfondo
Apri le impostazioni della sezione, scorri verso il basso fino a sfondo e seleziona la scheda Motivo di sfondo. Scegli Tufted per il motivo di sfondo e Inverting per Pattern Transform.
- Motivo di sfondo: trapuntato
- Pattern Transform: Reverse
Maschera di sfondo
Seleziona scheda Maschera di sfondo e scegliere Arco per la maschera di sfondo. Cambia il colore della maschera in # 616d72 e imposta la trasformazione della maschera su Inverti. Questo completa la nostra prima versione dell'arco con ciuffi.
- Maschera di sfondo: Arch
- Colore maschera: #616d72
- Trasformazione maschera: inverti
Esempio 1 Versione 2
Quindi, creiamo una variazione del nostro design. Basta modificare il trasformazione della maschera per il motivo di sfondo con 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: capovolgi orizzontalmente, capovolgi verticalmente
Esempio di parametri di trasformazione della maschera e del modello di sfondo 2
Per il nostro secondo esempio, creeremo un ovale al centro dello schermo con un motivo all'interno dell'ovale. Successivamente, cambieremo il posizionamento del pattern. Modificheremo anche questo per dimensioni dello schermo diverse.
Motivo di sfondo
Nelle impostazioni di sfondo, seleziona la scheda Pattern di sfondo e scegliere Shippo per il motivo. Imposta la trasformazione del modello su Inverti.
- Sfondo del modello: Shippo
- Pattern Transform: Reverse
Maschera di sfondo
Quindi seleziona la scheda Maschera di sfondo e modificare le seguenti impostazioni.
- Maschera di sfondo: Ellisse
- Colore: #758489
- Mask Transform: capovolgimento orizzontale, rotazione
Tablet e telefono
Sia il tablet che il telefono utilizzeranno le stesse impostazioni, quindi dovremo solo modificare le impostazioni del tablet. Seleziona il Scheda Tablet e modificare il trasformazione della maschera in inversione orizzontale.
- Mask Transform: capovolgimento orizzontale, inversione
Esempio 2 Versione 2
Successivamente, creeremo la variazione per il nostro secondo esempio. Innanzitutto, seleziona la scheda Pattern di sfondo e imposta il Colore del modello 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 Capovolgi orizzontalmente, Ruota e Inverti per la trasformazione della maschera.
- Mask Transform: capovolgimento orizzontale, rotazione, inversione
Tablet e telefono
Per le opzioni tablet e telefono, selezionare l'icona del Tavoletta . Modifica il trasformazione della maschera in inversione e inversione orizzontale. La versione alternativa dell'esempio due è ora completa.
- Mask Transform: capovolgimento orizzontale, inversione
Esempio di parametri di trasformazione della maschera e del modello di sfondo 3
Per il nostro terzo esempio di impostazioni di trasformazione di maschere e modelli, utilizzeremo un motivo a nido d'ape con una maschera di pittura. Creeremo anche una versione mobile per questo.
motivo di sfondo
Innanzitutto, scegli la scheda Impostazioni dispositivo e seleziona l'icona Dispositivo. ufficio. Seleziona scheda Pattern di sfondo e scegli Honeycomb per il motivo di sfondo. Cambia il Colore in rgba(0,0,0,0.42). Per questo lasceremo le opzioni Trasformazione del modello disattivato. Li aggiungeremo per la versione alternativa.
- Motivo di sfondo: nido d'ape
- Colore del modello: rgba(0,0,0,0.42)
- Trasformazione pattern: nessuna
Maschera di sfondo
Quindi seleziona la scheda SfondoMaschera. Scegliere Verniciatura per la maschera di sfondo. Cambia il colore in # 697b82. Scegli Capovolgi verticalmente per la trasformazione della maschera.
- Maschera di sfondo: vernice
- Colore maschera: #697b82
- Trasformazione maschera: capovolgimento verticale
Quindi selezionare Coperchio per dimensione. Questo apre alcune altre opzioni. Scegliere In basso a destra per posizione. Questo è tutto per la versione desktop. Successivamente, creeremo la versione mobile.
- Dimensione maschera: copertina
- Posizione maschera: in basso a destra
Tablet e telefono
Quindi seleziona la scheda tablet e modificare la trasformazione del mascherare sfondo in verticale capovolgimento e rotazione. Questo completa lo stile per il nostro terzo esempio. Successivamente, creeremo la versione alternativa.
- Mask Transform: capovolgimento verticale, rotazione
Esempio 3 Versione 2
Per la versione alternativa di questo esempio, regoleremo sia il motivo di sfondo che la maschera di sfondo.
motivo di sfondo
Per il motivo di sfondo, cambia il colore del motivo in rgba(0,0,0,0.11). Modificare la trasformazione del modello per capovolgere orizzontalmente, capovolgere verticalmente e ruotare.
- Colore maschera: rgba(0,0,0,0.11)
- Trasformazione maschera: capovolgimento orizzontale, capovolgimento verticale, rotazione
maschera di sfondo
Quindi seleziona la scheda SfondoMaschera. Cambia il colore in bianco e la trasformazione della maschera in capovolgimento orizzontale, capovolgimento verticale e inversione.
- Colore maschera: #ffffff
- Mask Transform: capovolgimento orizzontale, capovolgimento verticale, inversione
Quindi, cambia le dimensioni della maschera da coprire, quindi scegli Centro per la posizione della maschera.
- Dimensione maschera: copertina
- Posizione maschera: centro
Tablet e telefono
Infine scegli la scheda compressa per creare la versione mobile. Scegli scheda maschera di sfondo e seleziona le quattro opzioni di trasformazione della maschera. Questo completa la versione alternativa del terzo esempio.
- Mask Transform: capovolgimento orizzontale, capovolgimento verticale, rotazione, inversione
Risultati finali
Ecco una panoramica di ogni esempio con dimensioni dello schermo diverse (desktop e telefono)
Esempio 1
Versione 1 su desktop
Versione 1 sul telefono
Versione 2 su desktop
Versione 2 al telefono
Esempio 2
Versione 1 su desktop
Versione 1 sul telefono
Versione 2 su desktop
Versione 2 sul telefono
Esempio 3
Versione 1 su desktop
Versione 1 sul telefono
Versione 2 su desktop
Versione 2 sul telefono
Scarica DIVI ora!!!
Guarda anche: Divi: come creare una sezione dei membri del team come un carosello
Conclusione
Questo è il nostro sguardo su come utilizzare la maschera di sfondo di Divi e le impostazioni di trasformazione del motivo per creare molti motivi 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 di piùoutils per aggiungere eleganza ai tuoi sfondi Divi.
Il modo migliore per imparare a usarli è giocare con le regolazioni e vedere cosa puoi creare.
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.
...
