5 Sovrapposizioni di maschere e motivi di sfondo che puoi applicare alla tua immagine di sfondo

Con l'ultima versione della maschera di sfondo e del modello di sfondo di Divi, puoi creare alcune sezioni di eroi uniche per il tuo sito web. Una sezione eroe è la prima sezione del tuo sito web ed è la prima cosa che i tuoi visitatori vedono prima di scorrere il tuo sito web, quindi è importante essere accattivanti! La combinazione delle opzioni di immagine di sfondo, maschera di sfondo e motivo di sfondo di Divi ci consente di creare sezioni di eroi avvincenti in modo che il tuo sito Web faccia un'ottima prima impressione.

Questo post ti mostrerà come creare cinque maschere di sfondo uniche e sovrapposizioni di motivi che puoi applicare a un'immagine di sfondo per creare sezioni di eroi davvero straordinarie. Questo tutorial tratterà i passaggi essenziali necessari per creare ogni sezione eroe e ti fornirà gli strumenti necessari per creare una sezione eroe sorprendente per il tuo sito Web in pochi minuti.

In questo esempio utilizzeremo le foto gratuite del pacchetto di layout del corso online. Per utilizzare le stesse immagini, scorri fino in fondo a questo post per scaricare le immagini a piena risoluzione.

Iniziamo!

Cosa stiamo creando

Ecco una rapida occhiata alle cinque sezioni di eroi che creeremo in questo post oggi.

I disegni sono sottili, semplici e tuttavia d'impatto.

Scarica il layout GRATUITAMENTE

Se desideri scaricare il design del layout pre-progettato da questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download, dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non verrai "iscritto nuovamente" né riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo pacchetto di layout pagina di destinazione Divi, oltre a tonnellate di altre risorse, suggerimenti e trucchi Divi incredibili e gratuiti. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo email qui sotto e clicca su download per accedere al layout pack.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Come scaricare e utilizzare i layout

Per importare il layout della sezione nella tua Libreria Divi, procedi come segue:

1. Vai alla Libreria Divi.
2. Fai clic sul pulsante Importa nella parte superiore della pagina.
3. Nel popup di portabilità, seleziona la scheda di importazione.
4. Scegli il file di download dal tuo computer (assicurati di decomprimere prima il file e di utilizzare il file JSON).
5. Quindi fare clic sul pulsante di importazione.

Dopo aver importato con successo i layout, verranno visualizzati nella tua Libreria Divi e saranno disponibili per l'uso in Divi Builder.

Passiamo ora al tutorial!

Cosa ti serve per iniziare

Prima di poter iniziare, dovrai:

1. Installa e attiva il tema Divi.
2. Crea una nuova pagina, pubblicala e fai clic sul pulsante "Usa The Divi Builder" per modificare la pagina sul front-end utilizzando Visual Builder.
3. Scegli l'opzione "Costruisci da zero".

Ora abbiamo una tela bianca per iniziare a progettare!

Come creare 5 sovrapposizioni di maschere e motivi di sfondo da applicare a un'immagine di sfondo

Innanzitutto, creiamo la sezione Eroe

Tutti i nostri esempi di progettazione utilizzano la stessa struttura di sezioni, righe e colonne, quindi impostiamole ora.

1. Crea la struttura del layout

Aggiungi una riga alla tua pagina e quindi fai clic sull'icona verde "+" per visualizzare la struttura delle colonne e seleziona la prima colonna, quella a larghezza intera.

2. Aggiungi la spaziatura tra le sezioni

Ora che abbiamo impostato la nostra riga e colonna, è il momento di aggiungere spaziatura alla sezione.

Nella scheda Spaziatura, aggiorna quanto segue:

• Desktop: 400px in alto e 400px in basso
• Tablet: 200px in alto e 200px in basso; 25px sinistra e destra
• Telefono: 50px in alto e 50px in basso; 25px sinistra e destra

Come progettare la sezione Hero #1

Progettiamo la prima sezione dell'eroe.

1. Aggiungi testo di intestazione

Fare clic sull'icona grigia "+" per visualizzare la libreria dei moduli. Scorri fino al testo e fai clic per caricare.

Digita il testo dell'intestazione e quindi nella scheda Testo dell'intestazione, configura queste impostazioni:

• Famiglia di caratteri: Work Sans
• Colore carattere: bianco #ffffff
• Dimensione del font:
  • Desktop: 3 rem
  • Compressa: 2,2 rem
  • Telefono: 1.4rem

2. Aggiungi modulo pulsanti

Aggiungi un pulsante e configura queste impostazioni:

• Sotto il tipo di scheda Testo: Ulteriori informazioni
• Nella scheda Allineamento scegli: Centro
• Fare clic su Usa stili personalizzati e quindi configurare:
  • Dimensione testo pulsante:
    • Desktop: 20px
    • Tablet: 16px
    • Telefono: 14px
  • Colore testo pulsante: bianco #ffffff
  • Colore sfondo pulsante: nero #1d1d1d
  • Larghezza bordo pulsante: 0
  • Raggio bordo pulsante: 0
  • Spaziatura lettere pulsanti: 3pt
  • Carattere del pulsante: Work Sans
  • Stile carattere pulsante: maiuscolo

3. Aggiungi immagine di sfondo

Ora che abbiamo impostato il nostro contenuto, è ora di iniziare a progettare lo sfondo della sezione.

1. Passa all'interruttore Sfondo e fai clic sulla terza scheda, sulla scheda Immagine, quindi fai clic su "Aggiungi immagine di sfondo".
2. Verrà visualizzata la tua libreria multimediale, dove puoi selezionare una foto o caricarne una nuova.
3. Una volta selezionata la foto, fai clic sul pulsante "Carica un'immagine" nell'angolo in basso a destra.

4. Aggiungi motivo di sfondo

Ora che abbiamo impostato la nostra immagine di sfondo, aggiungiamo un pattern.

• All'interno della scheda Sfondo, vai alla quinta scheda, la scheda Motivi, quindi fai clic su "Aggiungi motivo di sfondo".
• Seleziona Tufted dal menu a tendina e configura queste impostazioni:
  • Colore del modello – rgba(255,255,255,0,31)
  • Trasformazione pattern: nessuna
  • Dimensione del modello: dimensione reale
  • Origine ripetizione motivo: in alto a sinistra
  • Ripeti motivo: ripeti
  • Modalità di fusione: normale

5. Aggiungi maschera di sfondo

Ora che abbiamo impostato la nostra immagine di sfondo e il motivo, aggiungiamo una maschera di sfondo.

• All'interno della scheda Sfondo, vai alla sesta scheda, la scheda maschera e fai clic su "Aggiungi maschera di sfondo".
• Seleziona Bean dal menu a tendina e configura queste impostazioni:
  • Colore maschera: rgba(0,0,0,0.36)
  • Rapporto d'aspetto maschera: rettangolo orizzontale
  • Dimensione maschera: Allunga per riempire

Ecco! Ora hai una sezione eroi dal design accattivante.

Come progettare l'eroe, sezione n. 2

Ora, progettiamo la seconda sezione dell'eroe.

1. Aggiungi un'immagine di sfondo e imposta la modalità di fusione su Sovrapponi

Seleziona l'immagine di sfondo, imposta la modalità di fusione su Sovrapponi e aggiungi un colore di sovrapposizione di rgba(10,10,10,0.64).

2. Aggiungi motivo di sfondo

Ora che abbiamo impostato l'immagine di sfondo, aggiungiamo un motivo di sfondo.

• All'interno della scheda Sfondo, vai alla quinta scheda, la scheda Modelli e fai clic su "Aggiungi motivo di sfondo".
• Seleziona Tufted dal menu a tendina e configura queste impostazioni:
  • Colore del modello – rgba(255,255,255,0,09)
  • Trasformazione pattern: nessuna
  • Dimensione del modello: copertina
  • Origine ripetizione motivo: in alto a sinistra
  • Ripeti motivo: ripeti
  • Modalità di fusione: normale

3. Aggiungi maschera di sfondo

Ora che abbiamo impostato la nostra immagine di sfondo e il motivo, aggiungiamo una maschera di sfondo.

• All'interno della scheda Sfondo, vai alla sesta scheda, la scheda maschera e fai clic su "Aggiungi maschera di sfondo".
• Seleziona Caret dal menu a discesa e configura queste impostazioni:
  • Colore maschera: rgba(0,0,0,0.36)
  • Trasformazione maschera: nessuna
  • Rapporto d'aspetto maschera: rettangolo orizzontale
  • Dimensione maschera: Allunga per riempire
  • Modalità di miscelazione maschera: normale

Come progettare l'eroe, sezione n. 3

Ora, progettiamo la terza sezione dell'eroe.

1. Aggiungi un'immagine di sfondo e imposta la modalità di fusione su Sovrapponi

Seleziona l'immagine di sfondo, imposta la modalità di fusione su Sovrapponi e aggiungi un colore di sovrapposizione di rgba(10,10,10,0.39).

2. Aggiungi motivo di sfondo

Ora che abbiamo impostato la nostra immagine di sfondo, aggiungiamo un motivo di sfondo.

• All'interno della scheda Sfondo, vai alla quinta scheda, la scheda Motivi e fai clic su "Aggiungi motivo di sfondo".
• Seleziona Strisce diagonali 2 dal menu a discesa e configura queste impostazioni:
  • Colore motivo – rgba(0,0,0,0.06)
  • Trasformazione pattern: nessuna
  • Dimensione del modello: dimensione reale
  • Origine ripetizione motivo: in alto a sinistra
  • Ripeti motivo: ripeti
  • Modalità di fusione: normale

3. Aggiungi maschera di sfondo

Ora che abbiamo aggiunto un'immagine di sfondo e un motivo, aggiungiamo una maschera di sfondo.

• All'interno della scheda Sfondo, vai alla sesta scheda, la scheda maschera e fai clic su "Aggiungi maschera di sfondo".
• Seleziona Triangoli dal menu a tendina e configura queste impostazioni:
  • Colore maschera: rgba(10,10,10,0.61)
  • Trasformazione pattern: nessuna
  • Rapporto d'aspetto maschera: rettangolo orizzontale
  • Dimensione maschera: Allunga per riempire
  • Modalità di miscelazione maschera: normale

Come progettare l'eroe, sezione n. 4

Ora, progettiamo la quarta sezione dell'eroe.

1. Aggiungi un'immagine di sfondo

Seleziona la tua immagine di sfondo.

2. Aggiungi motivo di sfondo

Ora che abbiamo aggiunto la nostra immagine di sfondo, aggiungiamo un motivo di sfondo.

• All'interno della scheda Sfondo, vai alla quinta scheda, la scheda Modelli e fai clic su "Aggiungi motivo di sfondo".
• Seleziona Sorrisi dal menu a discesa e configura queste impostazioni:
  • Colore motivo – rgba(0,0,0,0.2)
  • Trasformazione pattern: nessuna
  • Dimensione del modello: copertina
  • Origine ripetizione motivo: in alto a sinistra
  • Ripeti motivo: ripeti
  • Modalità di fusione: normale

3. Aggiungi maschera di sfondo

Ora che abbiamo applicato l'immagine di sfondo e il motivo, aggiungiamo una maschera di sfondo.

• All'interno della scheda Sfondo, vai alla sesta scheda, la scheda maschera e fai clic su "Aggiungi maschera di sfondo".
• Seleziona Corner Lake dal menu a discesa e configura queste impostazioni:
  • Colore maschera: rgba(10,10,10,0.61)
  • Trasformazione maschera: orizzontale
  • Proporzioni maschera: rettangolo orizzontale
  • Dimensione maschera: copertina
  • Posizione maschera: centro sinistra
  • Modalità di miscelazione maschera: normale

3. Configura le impostazioni della riga

Prima di andare, questa sezione dell'eroe ha stili di riga unici. Mettiamolo a punto.

• Taglia:
  • Larghezza: 80%
  • Larghezza massima: 800 px
• Allineamento delle righe:
  • Desktop: predefinito
  • Tavoletta: Centro
  • Telefono: Centro
• Spaziatura:
  • A sinistra: 20vw

Come progettare l'eroe, sezione n. 5

Ora, progettiamo la quinta sezione dell'eroe.

1. Aggiungi un'immagine di sfondo

Seleziona la tua immagine di sfondo.

2. Aggiungi motivo di sfondo

Ora che abbiamo impostato la nostra immagine di sfondo, applichiamo un motivo di sfondo.

• All'interno della scheda Sfondo, vai alla quinta scheda, la scheda Modelli e fai clic su "Aggiungi motivo di sfondo".
• Seleziona Croci dal menu a discesa e configura queste impostazioni:
  • Colore motivo – #ffffff
  • Trasformazione pattern: nessuna
  • Dimensione del modello: dimensione personalizzata
  • Larghezza del motivo: 10px
  • Altezza del modello: 10px
  • Origine ripetizione motivo: in alto a sinistra
  • Ripeti motivo: ripeti
  • Modalità di fusione: normale

3. Aggiungi maschera di sfondo

Ora che abbiamo applicato un'immagine di sfondo e un motivo, aggiungiamo una maschera di sfondo.

• All'interno della scheda Sfondo, vai alla sesta scheda, la scheda maschera e fai clic su "Aggiungi maschera di sfondo".
• Seleziona Pillole diagonali dal menu a tendina e configura queste impostazioni:
  • Colore maschera: rgba(10,10,10,0.61)
  • Trasformazione maschera: orizzontale
  • Proporzioni maschera: rettangolo orizzontale
  • Dimensione maschera: copertina
  • Posizione maschera: centro sinistra
  • Modalità di miscelazione maschera: normale

3. Configura le impostazioni della riga

Prima di andare, questa sezione dell'eroe ha stili di riga unici. Mettiamolo a punto.

• Taglia:
  • Larghezza: 80%
  • Larghezza massima: 800 px
• Allineamento delle righe:
  • Desktop: predefinito
  • Tavoletta: Centro
  • Telefono: Centro
• Spaziatura:
  • A destra: 18vw

Ottieni più disegni di maschere e motivi di sfondo!

Se desideri più design come questo, dai un'occhiata a questi 12 modelli di maschere e motivi di sfondo gratuiti per il download.

Pensieri finali

Progettare una sezione eroe unica e accattivante per il tuo sito Web è facile con la nuova maschera di sfondo e le opzioni del modello di Divi. Ogni funzione ha molte opzioni che ti consentono di creare progetti di sfondo davvero creativi. Inoltre, puoi aggiungere motivi e maschere di sfondo a qualsiasi elemento di Divi Builder! Le opzioni di progettazione sono infinite.