Vorresti creare immagini di sfondo uniche usando la modalità di fusione del modello di Divi ?
Le impostazioni del motivo di sfondo integrato di Divi ti consentono di creare design accattivanti e aggiungere stile alle immagini di sfondo del tuo sito web. È possibile utilizzare le impostazioni del metodo di fusione per ottimizzare il modo in cui il motivo si fonde con l'immagine di sfondo.
In questo tutorial, ti mostreremo alcuni esempi su come aggiungere una modalità di fusione dei modelli alle immagini di sfondo della tua pagina. Seguili per ricreare questi look da solo o usali come ispirazione per creare i tuoi design personalizzati.
Cominciamo!
Panoramica
Ecco un'anteprima di ciò che progetteremo in questo tutorial.
Primo layout
Secondo layout
Terzo layout
Come utilizzare le modalità di fusione dei modelli sulle immagini di sfondo Divi
Crea una nuova pagina con un layout predefinito
Inizieremo utilizzando un layout predefinito dalla libreria Divi. Per questo disegno utilizzeremo il « Pagina di destinazione di Marina 'Di Pacchetto layout Marina .
Aggiungi una nuova pagina al tuo sito web e assegnagli un titolo, quindi seleziona l'opzione Usa Divi Builder.
Utilizzeremo un layout predefinito dalla libreria Divi per questo esempio, quindi seleziona Sfoglia i layout.
Trova e seleziona il layout Pagina di destinazione di Marina.
selezionare Usa questo layout per aggiungere il layout alla tua pagina.
Ora siamo pronti per progettare.
Primo layout
Per il nostro primo progetto, aggiungeremo un motivo a chevron alla prima immagine di intestazione. Ciò aggiungerà un certo interesse visivo all'intestazione.
Leggi anche: Divi: come personalizzare il modulo "Countdown Timer" con una GIF
A causa della modalità di fusione che applicheremo, il motivo sarà più sottile e consentirà comunque di visualizzare l'immagine di sfondo.
Innanzitutto, apri le impostazioni della sezione e vai alla sezione sfondo. Fare clic sulla scheda Pattern di sfondo e selezionare Aggiungi motivo di sfondo.
Quindi, seleziona il tipo di motivo. Come puoi vedere, ci sono molti modelli diversi tra cui scegliere e tutti possono essere ulteriormente personalizzati dalle impostazioni del modello di seguito.
- Tipo di motivo: spina di pesce invertita 2
Aggiunta la modalità "Miscela di motivi".
Infine, imposta la modalità di fusione del motivo. Useremo la modalità di fusione Luce soffusa per questo esempio. Questa modalità di fusione rende il motivo più sottile in modo che non distragga dall'immagine di sfondo.
- Modalità di fusione del modello: luce soffusa
Risultato
Ecco il progetto finale del nostro primo esempio.
Ecco la versione mobile.
Secondo layout
Per il secondo layout, utilizzeremo un motivo a onde sovrapposto all'immagine di sfondo e al gradiente, che si sposa bene con il tema nautico della pagina.
Per prima cosa, vai alla sezione "Come funziona" e apri le impostazioni della sezione.
Apri le impostazioni sfondo, quindi seleziona la scheda Pattern di sfondoe fare clic su Aggiungi motivo di sfondo.
Per questo disegno useremo il tipo di motivo Waves.
- Tipo di motivo: onde
Quindi cambia il colore del motivo in bianco.
- Colore motivo: #FFFFFF
Aggiunta la modalità di fusione dei motivi
Ora possiamo aggiungere la modalità di fusione al nostro modello. Imposta la modalità di fusione del modello su Copertura.
Scopri anche: Divi: Come personalizzare il carrello e le icone di ricerca del modulo "Menu a larghezza intera".
Questa modalità di fusione scurisce i colori scuri nell'immagine di sfondo e schiarisce i colori chiari.
- Modalità di fusione del modello: Sovrapposizione
Risultato
Ecco il risultato finale del secondo esempio applicato alla sezione "Come funziona".
Ed ecco la versione mobile.
Terzo layout
Iniziamo il nostro terzo layout.
Per questo layout, aggiungeremo strisce diagonali opache sullo sfondo del " Call to Action".
Inizia aprendo le impostazioni della sezione e vai alla sezione sfondo. Fare clic sulla scheda Pattern di sfondo, quindi seleziona Aggiungi motivo di sfondo.
Seleziona modello Strisce diagonali.
Quindi, imposta il colore del motivo.
- Colore del modello: rgba (255,255,255,0.25)
Capovolgi il motivo orizzontalmente usando le impostazioni di Trasforma motivo. Questo è un altro parametro che può aiutarti a mettere a punto il modello a tuo piacimento.
- Pattern Transform: Orizzontale
Aggiunta la modalità di fusione dei motivi
Infine, imposta la modalità di fusione del motivo. Per questo design, utilizzeremo la modalità di fusione Luminosità.
Leggi anche la nostra guida su: Divi: come utilizzare il "Gradient Builder" per abbellire le tue immagini
Questo, combinato con il nostro colore del motivo, aggiunge uno schermo luminoso all'immagine consentendo allo stesso tempo di mostrare la foto. Con questo design, l'immagine della barca risalta maggiormente dallo sfondo poiché il motivo aggiunge un contrasto distintivo.
- Modalità di fusione del modello: Luminosità
Risultato
Ecco il progetto finale per questa sezione.
Ed ecco la sua versione mobile.
Risultato finale
Ora diamo un'occhiata al design a pagina intera con le modalità di fusione dei motivi.
Scarica DIVI ora!!!
Conclusione
L'aggiunta di un motivo può essere un ottimo modo per aggiungere interesse visivo all'immagine di sfondo, ma a volte il motivo può sopraffare l'immagine di sfondo. Fortunatamente, Divi viene fornito con molte modalità di fusione in modo da poter personalizzare i motivi quanto vuoi.
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.
Non esitate a consultare anche la nostra guida sul 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.
...
