Vuoi utilizzare la maschera di Divi e la sovrapposizione del motivo di sfondo?
Con l'ultimo versione della maschera di sfondo e della funzione del motivo di sfondo di Divi, puoi creare sezioni Hero uniche per il tuo sito web. Una sezione eroe è la prima sezione del tuo sito web e questa è la tua prima cosa Visitatori vedere prima di scorrere il tuo sito web, quindi è importante essere accattivanti!
Questo articolo ti mostrerà come creare cinque maschere di sfondo uniche e sovrapposizioni di motivi che puoi applicare a un'immagine di sfondo per creare sezioni dell'eroe davvero straordinarie.
Questo tutorial coprirà i passaggi essenziali necessari per creare ciascuna sezione Hero e ti fornirà gli strumenti necessari per creare una straordinaria sezione Hero per il tuo sito web in pochi minuti.
Cominciamo!
Panoramica
Ecco una rapida panoramica delle cinque sezioni Eroe che creeremo in questo articolo oggi.
Scarica DIVI ora!!!
I disegni sono sottili, semplici e tuttavia d'impatto.
Leggi anche: Divi: come utilizzare il "Gradient Builder" per abbellire le tue immagini
Crea una nuova pagina con Divi Builder
Per iniziare, dovrai fare quanto segue:
Dalla dashboard di WordPress, vai a Pagine> Aggiungi nuovo per creare una nuova pagina.
Dagli un titolo che abbia senso per te e fai clic Usa Divi Builder
quindi fare clic su Inizia a costruire (Costruisci da zero)
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Cinque esempi di maschere di sfondo e sovrapposizioni di motivi da applicare a un'immagine di sfondo
Per prima cosa, creiamo la sezione Eroe
Tutti i nostri modelli di esempio utilizzano la stessa struttura di sezioni, righe e colonne, quindi impostiamoli ora.
1. Creare una struttura di layout
Aggiungi una riga alla tua pagina, quindi fai clic sull'icona verde "+" per mostrare la struttura delle colonne e seleziona la prima colonna, la colonna a larghezza intera.
2. Aggiungi la spaziatura tra le sezioni
Ora che abbiamo definito la nostra riga e colonna, è il momento di aggiungere un po' di spaziatura alla sezione.
Nella scheda Spaziatura, aggiorna quanto segue:
- Desktop: 400 pixel (in alto e in basso)
- Tablet: 200 pixel (in alto e in basso); 25px (sinistra e destra)
- Telefono: 50 pixel (superiore e inferiore); 25px (sinistra e destra)
Disegno della sezione dell'eroe n. 1
Progettiamo la prima sezione Hero.
Scarica DIVI ora!!!
1. Aggiungi il testo dell'intestazione
Fare clic sull'icona grigia "+" per visualizzare la libreria dei moduli. Scorri fino al testo e fai clic per caricare.
Inserisci il testo del titolo, quindi sotto la scheda Intestazione del testo, configura queste impostazioni:
- Carattere dell'intestazione: Work Sans
- Colore del testo: bianco #ffffff
- Dimensione del testo dell'intestazione:
- Desktop: 3 em
- Compressa: 2,2 em
- Telefono: 1.4 em
2. Aggiungi modulo pulsanti
Aggiungi un pulsante e configura queste impostazioni:
- Sotto la scheda contens: Scopri di più
- Sotto la scheda allineamento, scegli: Centro
- Fare clic Usa stili personalizzati per il pulsante quindi configurare:
- Dimensione testo pulsante:
- Desktop: 20px
- Tablet: 16px
- Telefono: 14px
- Colore testo pulsante: #ffffff
- Sfondo: #1d1d1d
- Larghezza bordo pulsante: 0
- Raggio di confine: 0
- Spaziatura lettere: 3 punti
- Carattere del pulsante: Work Sans
- Stile carattere: TT
- Dimensione testo pulsante:
3. Aggiungi un'immagine di sfondo
Ora che il nostro contenuto è configurato, è ora di iniziare a progettare lo sfondo della sezione.
- Vai all'interruttore dello sfondo e fai clic sulla terza scheda, la scheda dell'immagine, quindi fai clic su "Aggiungi immagine di sfondo".
- Verrà visualizzata la tua libreria multimediale, dove puoi selezionare una foto o caricarne una nuova.
- Dopo aver selezionato la tua foto, fai clic sul pulsante "Carica un'immagine" nell'angolo in basso a destra.
4. Aggiungi un motivo di sfondo
Ora che abbiamo impostato la nostra immagine di sfondo, aggiungiamo un pattern.
- Nella scheda sfondo, vai alla quinta scheda, la scheda Pattern di sfondo, quindi fare clic su "Aggiungi motivo di sfondo".
- selezionare Moretta dal menu a tendina e configurare queste impostazioni:
- Colore del modello – rgba(255,255,255,0.31)
- Trasformazione pattern: nessuna
- Dimensioni: dimensioni reali
- Origine ripetizione motivo: in alto in basso
- Ripeti motivo: ripeti
- Modalità di fusione: normale
5. Aggiungi la maschera di sfondo
Ora che abbiamo impostato la nostra immagine e motivo di sfondo, aggiungiamo una maschera di sfondo.
- Nella scheda sfondo, vai alla 6a scheda, la scheda Maschera di sfondo, quindi fai clic su "Aggiungi una maschera di sfondo".
- selezionare Fagiolo dal menu a tendina e configurare queste impostazioni:
- Colore maschera: rgba(0,0,0,0.36)
- Proporzioni maschera: rettangolo orizzontale
- Dimensioni: da allungare a riempire
Ecco ! Ora hai una sezione Hero dal design accattivante.
Sezione Hero #2 design
Ora progettiamo la seconda sezione dell'eroe.
1. Aggiungi un'immagine di sfondo e imposta il metodo 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 un motivo di sfondo
Ora che abbiamo impostato l'immagine di sfondo, aggiungiamo un motivo di sfondo.
- Nella scheda Sfondo, vai alla quinta scheda, la scheda Pattern di sfondo, quindi fare clic su "Aggiungi motivo di sfondo".
- selezionare Moretta dal menu a tendina e configurare queste impostazioni:
- Colore del modello – rgba(255,255,255,0.09)
- Trasformazione pattern: nessuna
- Dimensioni: copertina
- Origine ripetizione motivo: in alto a sinistra
- Ripeti motivo: ripeti
- Modalità di fusione: normale
3. Aggiungi la maschera di sfondo
Ora che abbiamo impostato la nostra immagine e motivo di sfondo, aggiungiamo una maschera di sfondo.
- Nella scheda sfondo, vai alla 6a scheda, la scheda Maschera di sfondo, quindi fai clic su "Aggiungi maschera di sfondo".
- selezionare segno di omissione dal menu a tendina e configurare queste impostazioni:
- Colore maschera: rgba(0,0,0,0.36)
- Trasformazione maschera: nessuna
- Proporzioni: rettangolo orizzontale
- Dimensione maschera: allunga per riempire
- Modalità di miscelazione maschera: normale
Sezione Hero #3 design
Ora progettiamo la terza sezione Hero.
1. Aggiungi un'immagine di sfondo e imposta il metodo 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 un motivo di sfondo
Ora che abbiamo impostato la nostra immagine di sfondo, aggiungiamo un motivo di sfondo.
- Nella scheda sfondo, vai alla 5a scheda, la scheda Pattern di sfondo, quindi fare clic su "Aggiungi motivo di sfondo".
- selezionare Strisce diagonali 2 dal menu a tendina e configurare queste impostazioni:
- Colore del modello – rgba(0,0,0,0.06)
- Trasformazione pattern: nessuna
- Dimensioni: dimensioni reali
- Origine ripetizione motivo: in alto a sinistra
- Ripeti motivo: ripeti
- Modalità di fusione: normale
3. Aggiungi la maschera di sfondo
Ora che abbiamo aggiunto un'immagine di sfondo e un motivo, aggiungiamo una maschera di sfondo.
- Nella scheda sfondo, vai alla 6a scheda, la scheda Maschera di sfondo, quindi fai clic su "Aggiungi maschera di sfondo".
- selezionare Triangoli dal menu a tendina e configurare queste impostazioni:
- Colore maschera: rgba (10, 10, 10, 0,61)
- Trasformazione maschera: nessuna
- Proporzioni: rettangolo orizzontale
- Dimensione maschera: allunga per riempire
- Modalità di miscelazione maschera: normale
Sezione Hero #4 design
Ora progettiamo la quarta sezione di Hero.
1. Aggiungi un'immagine di sfondo
Seleziona la tua immagine di sfondo.
2. Aggiungi un motivo di sfondo
Ora che abbiamo aggiunto la nostra immagine di sfondo, aggiungiamo un motivo di sfondo.
- Nella scheda sfondo, vai alla 5a scheda, la scheda Pattern di sfondo, quindi fare clic su "Aggiungi motivo di sfondo".
- selezionare Smiles dal menu a tendina e configurare queste impostazioni:
- Colore del modello – rgba(0,0,0,0.2)
- Trasformazione pattern: nessuna
- Dimensioni: copertina
- Ripeti origine: in alto a sinistra
- Ripeti motivo: ripeti
- Modalità di fusione del modello: normale
3. Aggiungi la maschera di sfondo
Ora che abbiamo applicato l'immagine di sfondo e il motivo, aggiungiamo una maschera di sfondo.
- Nella scheda sfondo, vai alla 6a scheda, la scheda Maschera di sfondo, quindi fai clic su "Aggiungi maschera di sfondo".
- selezionare Lago d'angolo dal menu a tendina e configurare queste impostazioni:
- Colore maschera: rgba (10, 10, 10, 0,61)
- Trasformazione maschera: orizzontale
- Proporzioni: rettangolo orizzontale
- Dimensioni: copertina
- Posizione maschera: centro sinistra
- Modalità frullatore maschera: normale
3. Configurare i parametri di linea
Prima di andare, questa sezione Hero ha stili di linea unici. Impostiamo questo.
- Taglia:
- Larghezza: 80%
- Larghezza massima: 800 px
- Allineamento delle righe:
- Desktop: predefinito
- Tavoletta: Centro
- Telefono: Centro
- margini:
- A sinistra: 20vw
Sezione Hero #5 design
Ora progettiamo la quinta sezione Hero.
Scarica DIVI ora!!!
1. Aggiungi un'immagine di sfondo
Seleziona la tua immagine di sfondo.
2. Aggiungi un motivo
Ora che abbiamo impostato la nostra immagine di sfondo, applichiamo un motivo di sfondo.
- Nella scheda sfondo, vai alla 5a scheda, la scheda Pattern di sfondo, quindi fare clic su "Aggiungi motivo di sfondo".
- selezionare croci dal menu a tendina e configurare queste impostazioni:
- Colore motivo – #ffffff
- Trasformazione pattern: nessuna
- Dimensioni: dimensioni personalizzate
- Larghezza del motivo: 10px
- Altezza del modello: 10px
- Ripeti origine: in alto in basso
- Ripeti motivo: ripeti
- Modalità di fusione del modello: normale
3. Aggiungi la maschera di sfondo
Ora che abbiamo applicato un'immagine di sfondo e un motivo, aggiungiamo una maschera di sfondo.
- Nella scheda sfondo, vai alla 6a scheda, la scheda Maschera di sfondo, quindi fai clic su "Aggiungi maschera di sfondo".
- selezionare Pillole diagonali dal menu a tendina e configurare queste impostazioni:
- Colore maschera: rgba (10, 10, 10, 0,61)
- Trasformazione maschera: orizzontale
- Proporzioni: rettangolo orizzontale
- Dimensioni: copertina
- Posizione maschera: centro sinistra
- Modalità di miscelazione maschera: normale
3. Configurare i parametri di linea
Prima di andare, questa sezione Hero ha anche stili di linea unici. Impostiamo questo.
- Taglia:
- Larghezza: 80%
- Larghezza massima: 800 px
- Allineamento delle righe:
- Desktop: predefinito
- Tavoletta: Centro
- Telefono: Centro
- Spaziatura:
- Margine (a destra): 18vw
Guarda anche: Divi: come aggiungere maschere e motivi di sfondo a un'intestazione
Conclusione
Progettare una sezione Hero unica e accattivante per il tuo sito Web è facile con le nuove opzioni maschera di sfondo e motivo di Divi. Ogni funzione ha molte opzioni che ti consentono di creare sfondi davvero creativi.
Inoltre, puoi aggiungere motivi e maschere di sfondo a qualsiasi oggetto Divi Builder! Le opzioni di progettazione sono infinite.
Si spera che questa tecnica aggiunga un'altra utile abilità di progettazione per progetti futuri.
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.
...
