Come utilizzare le modalità di fusione dei motivi sulle immagini di sfondo Divi

Le impostazioni del motivo di sfondo integrate di Divi ti consentono di creare design accattivanti e aggiungere un tocco di stile alle immagini di sfondo sul tuo sito web. È possibile utilizzare le impostazioni dei metodi di fusione per ottimizzare il modo in cui il motivo si fonde con l'immagine di sfondo. Combina immagini di sfondo, motivi e modalità di fusione per creare sfondi ed elementi di design unici per il tuo layout. Con 24 motivi tra cui scegliere e 16 modalità di fusione, per non parlare di tutte le altre impostazioni che puoi utilizzare per perfezionare l'aspetto del motivo, il cielo è il limite per il tuo sfondo!

In questo tutorial, ti mostreremo alcuni esempi di come aggiungere una modalità di fusione del modello alle immagini di sfondo della tua pagina. Continua a ricreare questi look da solo o usali come ispirazione per creare i tuoi design personalizzati.

Iniziamo!

Sbirciata

Ecco un'anteprima di ciò che progetteremo in questo tutorial.

Primo layout

Secondo Disposizione

Terzo layout

Cosa ti serve per iniziare

Prima di iniziare, installa e attiva il tema Divi e assicurati di avere l'ultima versione di Divi sul tuo sito web.

Ora, iniziamo!

Come utilizzare le modalità di fusione dei motivi sulle immagini di sfondo Divi

Crea una nuova pagina con un layout predefinito

Inizieremo utilizzando un layout predefinito dalla libreria Divi. Per questo progetto, utilizzeremo la pagina di destinazione Marina del 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 layout.

Cerca e seleziona il layout della pagina di destinazione del porto turistico.

Seleziona Usa questo layout per aggiungere il layout alla tua pagina.

Ora siamo pronti per costruire il nostro design.

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. 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 modello 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: Chevron invertiti 2

Aggiunta della modalità di fusione del modello

Infine, imposta la modalità di fusione del modello. Utilizzeremo la modalità di fusione Luce soffusa per questa intestazione. 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

Progettazione finale

Ecco il progetto definitivo per il nostro primo layout.

Ecco la visualizzazione mobile per questo design.

Secondo Disposizione

Per il secondo layout, aggiungeremo uno schema alla sezione Come funziona del layout della pagina di destinazione di Marina. Useremo un motivo a onde sovrapposto all'immagine di sfondo e al gradiente, che si sposa bene con il tema nautico della pagina. Iniziamo.

Innanzitutto, vai alla sezione Come funziona e apri le Impostazioni della sezione. Apri le impostazioni dello sfondo, quindi seleziona la scheda Motivo e quindi fai clic su Aggiungi motivo di sfondo.

Per questo disegno, useremo il tipo di pattern Waves.

• Tipo di motivo: onde

Quindi, cambia il colore del motivo in bianco.

• Colore motivo: #FFFFFF

Aggiunta della modalità di fusione del modello

Ora possiamo aggiungere la modalità di fusione al nostro modello. Imposta la modalità di fusione del motivo su sovrapposizione. Questa modalità di fusione rende i colori scuri nell'immagine di sfondo più scuri e i colori chiari più chiari. Quando la modalità di fusione viene aggiunta a questa sezione, il motivo a onde bianche assume sfumature di blu, creando un effetto motivo interessante che sta benissimo con il design di questa pagina.

• Modalità di fusione del modello: Sovrapposizione

Progettazione finale

Ecco il progetto definitivo per la sezione Come funziona.

Ed ecco il design mobile.

Terzo layout

Iniziamo con il nostro terzo layout. Per questo layout, aggiungeremo alcune strisce diagonali opache sullo sfondo della sezione "Sicurezza e riparazioni di prim'ordine".

Inizia aprendo le impostazioni della sezione e navigando nella sezione in background. Fare clic sulla scheda modello e quindi selezionare Aggiungi modello di sfondo.

Seleziona il motivo a 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 Trasformazione del motivo. Questa è un'altra impostazione che può aiutarti a mettere a punto il modello a tuo piacimento.

• Pattern Transform: orizzontale

Aggiunta della modalità di fusione del modello

Infine, imposta la modalità di fusione del modello. Per questo disegno, useremo la modalità di fusione della luminosità. Questo, combinato con il nostro colore del motivo, aggiunge uno schermo luminoso all'immagine ma consente comunque alla foto di essere visibile. Con questo design, l'immagine della barca risalta maggiormente dallo sfondo poiché il motivo aggiunge un contrasto distintivo.

• Modalità di fusione del modello: Luminosità

Progettazione finale

Ecco il progetto definitivo per questa sezione.

Ed ecco il design mobile per questa sezione.

Risultato finale

Ora diamo un'occhiata al design completo della pagina con le modalità di fusione del modello.

Pensieri finali

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. O forse vuoi che il colore del tuo motivo cambi in base all'immagine dietro di esso. Per fortuna, Divi viene fornito con molte modalità di fusione in modo da poter personalizzare i motivi quanto desideri. Puoi giocare con diverse combinazioni di motivi, modalità di fusione, colori dei motivi, dimensioni dei motivi e molte altre impostazioni Divi per creare un design assolutamente unico per le tue immagini di sfondo.

Si spera che questo tutorial ti abbia ispirato a incorporare alcuni modelli e utilizzare le modalità di fusione nei progetti del tuo sito Web! Per un altro tutorial di progettazione che utilizza modelli, dai un'occhiata a questo tutorial per imparare a creare sottili maschere di pattern di sfondo. E per una panoramica dei diversi filtri, effetti e modalità di fusione che puoi utilizzare con Divi, dai un'occhiata a questi articoli: Parte 1 e Parte 2. Hai già utilizzato i modelli e le modalità di fusione di Divi sulle immagini di sfondo? Fateci sapere nei commenti!