Come combinare le maschere di sfondo con i divisori di sezione in Divi
Pubblicato: 2022-08-15La combinazione di maschere di sfondo con divisori di sezione in Divi aggiunge un altro livello di creatività a un già potente arsenale di opzioni di progettazione dello sfondo. Se non hai molta esperienza con le opzioni di sfondo di Divi, ti stai sicuramente perdendo. Un'opzione comoda, ma potente, ti dà la possibilità di aggiungere una maschera di sfondo al tuo gradiente di sfondo (o immagine) in pochi clic. Oltre alle opzioni di sfondo, i divisori di sezione offrono agli utenti anche la possibilità di migliorare i loro progetti di sfondo.
In questo tutorial, ti mostreremo come combinare le maschere di sfondo con i divisori di sezione in Divi. Ti forniremo istruzioni dettagliate su come completare un progetto di sfondo per una sezione Divi utilizzando questa tecnica. Inoltre, tratteremo anche come creare alcuni design alternativi con poche semplici modifiche.
Divertiti!
Sbirciata
Ecco una rapida occhiata ai progetti di questo tutorial.
Il concetto
Il concetto di base per questo tutorial è quello di combinare una maschera di sfondo e divisori di sezione per creare forme di maschera ancora più uniche.
Innanzitutto, aggiungiamo una maschera di sfondo.
Quindi aggiungiamo divisori di sezione per completare la forma della maschera in modo creativo.
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Guadagnare
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à in
elenco, inserisci semplicemente il tuo indirizzo e-mail qui sotto e fai clic su download. Non verrai "iscritto nuovamente" né riceverai email extra.
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.
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!
Per importare il layout della sezione nella tua Libreria Divi, procedi come segue:
- Vai alla Libreria Divi.
- Fai clic sul pulsante Importa nella parte superiore della pagina.
- Nel popup di portabilità, seleziona la scheda di importazione
- Scegli il file di download dal tuo computer (assicurati di decomprimere prima il file e di utilizzare il file JSON).
- Quindi fare clic sul pulsante di importazione.
Una volta terminato, il layout della sezione sarà disponibile in Divi Builder.
Veniamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non lo hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Costruisci da zero".
- Ora hai una tela bianca per iniziare a progettare in Divi!
Come combinare maschere e divisori di sfondo in Divi
1. Aggiungi la dimensione e la spaziatura della sezione
Per iniziare, aggiungeremo dimensioni e spaziatura alla sezione esistente nel builder. Tratterremo l'aggiunta di una riga o di qualsiasi contenuto in modo da poterci concentrare sul design dello sfondo della sezione
Apri le impostazioni per la sezione. Nella scheda Design, aggiorna le dimensioni e la spaziatura come segue:
- Altezza minima: 50vw
- Padding: 0px in alto, 0px in basso
L'uso dell'unità di lunghezza VW per l'altezza potrebbe sembrare strano. Tuttavia, dal momento che utilizzeremo l'unità di lunghezza VW per ridimensionare i nostri elementi di sfondo, ciò assicurerà che il design si ridimensioni in modo fluido su diverse larghezze del browser.
2. Crea il gradiente di sfondo
Una volta che la sezione ha una certa altezza, siamo pronti per aggiungere il gradiente di sfondo alla sezione. Questo ci darà del colore di sfondo in modo da poter mostrare la maschera di sfondo e la combinazione di divisori in seguito.
Nella scheda Contenuto, fai clic sulla scheda del gradiente di sfondo sotto le opzioni di sfondo. Quindi aggiungi un gradiente come segue:
- Colore Stop 1: #1a2a6c (al 20%)
- Colore Stop 2: #b21f1f (al 60%)
- Colore Stop 2: #fdbb2d (al 100%)
3. Crea la maschera di sfondo
Ora che abbiamo una sfumatura di colore, siamo pronti per creare una maschera di sfondo.
Nella scheda Maschera di sfondo, aggiorna quanto segue:
- Maschera: Chevron
- Colore maschera: #000
- Trasformazione maschera: invertita
- Proporzioni maschera: vedi screenshot
4. Aggiungi i divisori di sfondo della sezione
Una volta che la nostra maschera è a posto, possiamo modificare ulteriormente la forma della mascheratura usando i divisori di sezione. In questo esempio, aggiungeremo un divisore di sezione a semicerchio in alto e in basso. Questo comprimerà la maschera di sfondo per assomigliare di più a un design a freccia di fantasia.
Per fare ciò, fai clic sulla scheda Design e aggiungi i seguenti divisori:
Innanzitutto, aggiungi un divisore superiore nella scheda Superiore.
- Stile del divisore: vedi screenshot
- Colore divisorio: #000
- Altezza divisore: 10vw
Quindi, aggiungi un divisore inferiore nella scheda In basso.
- Stile del divisore: vedi screenshot
- Colore divisorio: #000
- Altezza divisore: 10vw
- Capovolgi divisorio: capovolgimento verticale
Il risultato
Ecco il risultato finora.
Modifica delle opzioni di sfondo e dei divisori per più disegni
Ora che hai l'idea di base in atto, possiamo facilmente giocare con i divisori delle sezioni delle opzioni di sfondo per creare più design.
Design alternativo n. 1
Per il nostro primo design alternativo, ruoteremo la maschera di sfondo esistente e sostituiremo i divisori di sezione a semicerchio con triangoli.
Per fare ciò, apri le impostazioni della sezione esistente, fai clic sulla scheda Maschera di sfondo e aggiorna quanto segue:
- Trasformazione maschera: capovolgi verticalmente, ruota
- Proporzioni maschera: vedi screenshot
Successivamente, aggiorna i divisori di sezione come segue:
Divisore superiore
- Stile del divisore: vedi screenshot
- Altezza divisore: 13vw
Divisorio inferiore
- Stile del divisore: vedi screenshot
- Altezza divisore: 13vw
- Capovolgi divisorio: disabilita
Il risultato
Ecco il risultato.
Design alternativo n. 2
Per il nostro secondo e ultimo design alternativo, sostituiremo la Chevrons Mask con la Diagonal Bars 2 Mask e gli daremo anche un nuovo divisore della sezione superiore per aggiungere un sottile effetto swooshing al design.
Per fare ciò, apri le impostazioni della sezione esistente, fai clic sulla scheda Maschera di sfondo e aggiorna quanto segue:
- Maschera: barre diagonali 2
- Trasformazione maschera: capovolgimento orizzontale
- Proporzioni maschera: vedi screenshot
Successivamente, aggiorna i divisori di sezione come segue:
Divisore superiore
- Stile del divisore: vedi screenshot
- Capovolgi divisorio: capovolgimento orizzontale
Divisorio inferiore
- Stile divisorio: nessuno
Il risultato
Ecco il risultato.
Risultati finali
Per darti un'idea migliore di come appariranno questi sfondi con alcuni contenuti, ho aggiunto una riga a colonna singola con un'intestazione grande posizionata al centro della sezione. Ho anche aggiunto un design aggiuntivo per ciascuno che include un'immagine con un metodo di fusione.
Dai un'occhiata!
Per esplorare le impostazioni utilizzate per il contenuto e le immagini, sentiti libero di scaricare il layout gratuito per questo tutorial (vedi sopra) che include ciascuno dei design.
Pensieri finali
La combinazione di maschere e divisori di sezione per i disegni di sfondo apre più possibilità per la creazione di forme uniche per quelle maschere integrate. Sentiti libero di esplorare diverse combinazioni da solo. Si spera che questo possa tornare utile per il tuo sito Web o per il tuo prossimo progetto.
Non vedo l'ora di sentirti nei commenti.
Saluti!