Come progettare uno sfondo con due livelli di sfumature, maschere e motivi in ​​Divi

Se stai cercando di progettare uno sfondo creativo per il tuo sito Web, Divi ha alcune potenti opzioni di progettazione integrate da esplorare. Ti abbiamo già mostrato come combinare i gradienti di sfondo, le maschere e i motivi di Divi utilizzando le opzioni di sfondo per una singola sezione. Ma oggi stiamo spingendo i limiti del design dello sfondo. In questo tutorial, ti mostreremo come progettare sfondi con due livelli di sfumature, maschere e motivi in ​​Divi. Questo raddoppia il numero di opzioni di sfondo per un singolo disegno di sfondo. E con tutti questi livelli di design opzionali, le possibili combinazioni di design aumentano in modo esponenziale.

In questo post ti mostreremo come progettare uno sfondo con:
– due mascherine (una per lato)
– due gradienti avanzati sovrapposti
– due modelli che si fondono con il design

Inoltre, dimostreremo quanto può essere facile e divertente cambiare le combinazioni di design con pochi semplici clic.

Divertiamoci un po'!

Iscriviti al nostro canale Youtube

Sbirciata

Ecco alcuni progetti di esempio che possiamo realizzare utilizzando questo tutorial.

Il concetto

Il concetto per questo design è piuttosto semplice. Iniziamo con una sezione che ha le opzioni di progettazione dello sfondo integrate di Divi (sfumatura, maschere, motivi, ecc.). Quindi creiamo una riga che è posizionata in modo da coprire completamente la sezione (come una sovrapposizione). Poiché anche una riga Divi ha le stesse opzioni di progettazione dello sfondo integrate, ora abbiamo due livelli (la sezione e la riga) di opzioni di sfondo per progettare uno sfondo per il nostro contenuto.

Scarica il layout GRATUITAMENTE

Per mettere le mani sul design del layout di 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!

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.

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:

1. Se non lo hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Costruisci da zero".
4. Ora hai una tela bianca per iniziare a progettare in Divi!

Come progettare uno sfondo con due livelli di sfumature, maschere e motivi

Aggiungi righe alla sezione

Per iniziare, aggiungi una riga di una colonna alla sezione esistente nel builder. Questa riga alla fine diventerà il secondo livello del design dello sfondo.

Quindi, duplica la riga che hai appena creato. Questa seconda riga (duplicata) verrà utilizzata per i nostri contenuti proprio come faresti normalmente. Ora dovresti avere una riga in alto per il livello di sfondo aggiuntivo e una riga per il contenuto normale.

Torneremo alle righe più tardi. Per ora, inizieremo a progettare il primo livello del nostro design di sfondo usando la sezione.

Aggiungi spaziatura verticale alla sezione

Affinché il nostro design di sfondo riempia il browser, dobbiamo aggiungere un'altezza verticale alla sezione. Un modo semplice per farlo è aggiungere un valore di altezza minima alla sezione.

Apri le impostazioni per la sezione. Nella scheda progettazione, aggiorna l'altezza e il riempimento come segue:

• Altezza minima: 70vh
• Padding: 0px in alto, 0px in basso

Crea il disegno di sfondo della sezione (il primo livello)

Ora che abbiamo l'altezza della nostra sezione in posizione, abbiamo la nostra tela per creare il nostro primo livello di progettazione dello sfondo. Divi ha molte opzioni disponibili per la progettazione di sfondi. Per questo tutorial, ci concentreremo su gradienti di sfondo, maschere e motivi.

Progetta un gradiente di sfondo per la sezione

Per il nostro primo elemento di design dello sfondo, possiamo aggiungere una sfumatura di sfondo personalizzata alla sezione. Per questo gradiente, aggiungeremo 4 interruzioni del gradiente che sono distanziate in modo abbastanza uniforme. Questi 4 colori creeranno un bellissimo gradiente multicolore per il primo strato del nostro design di sfondo.

Per aggiungere le prime interruzioni del gradiente, assicurati di avere le impostazioni della sezione aperte nella scheda del contenuto. Quindi seleziona la scheda sfumatura e fai clic per aggiungere una nuova sfumatura. Questo aggiungerà due colori sfumati predefiniti. A partire dalla prima interruzione della sfumatura a sinistra, aggiorna/aggiungi le seguenti interruzioni della sfumatura con un colore e una posizione come segue:

Fermata gradiente n. 1

• Colore arresto gradiente: #bae9ff
• Posizione di arresto del gradiente: 0%

Fermata gradiente n. 2

• Colore arresto sfumatura: #adfff1
• Posizione di arresto del gradiente: 32%

Fermata gradiente n. 3

• Colore arresto sfumatura: #ffffff
• Posizione di arresto del gradiente: 64%

Fermata gradiente n. 4

• Colore arresto sfumatura: #f9b8dd
• Posizione di arresto del gradiente: 100%

Quindi aggiorna il tipo e la posizione del gradiente:

• Tipo di sfumatura: circolare
• Posizione gradiente: centro

Crea un motivo di sfondo per la sezione

Ora che il nostro gradiente di sfondo è pronto, possiamo aggiungere un motivo di sfondo per completare il design. In questo esempio, creeremo uno schema sottile usando il modello Waves.

Nella scheda modelli, aggiorna quanto segue:

• Motivo di sfondo: onde
• Colore del modello: rgba (127,206,255,0,59)
• Dimensione del modello: dimensione personalizzata
• Larghezza del modello: 30vw
• Altezza del modello: 10px

SUGGERIMENTO: con i motivi di sfondo, è generalmente meglio mantenerlo sottile. Prova a utilizzare dimensioni personalizzate per motivi più piccoli e quindi elimina l'opacità del colore. Detto questo, non aver paura di pensare fuori dagli schemi.

Crea una maschera di sfondo per la sezione

Con il nostro motivo di sfondo in atto, siamo pronti per aggiungere una maschera di sfondo per completare il nostro design di sfondo per il primo livello. Ci sono un sacco di opzioni e varianti tra cui scegliere. Per questo esempio useremo la maschera Pillole Diagonali .

Nella scheda maschere, aggiorna quanto segue:

• Maschera: Pillole Diagonali
• Colore maschera: #ffffff
• Trasformazione maschera: capovolgi verticalmente, inverti
• Dimensione maschera: Allunga per riempire

Ecco il risultato fino ad ora...

Posiziona la riga come secondo strato

Ora che il design dello sfondo della nostra sezione è pronto per l'uso, possiamo aggiungere il secondo livello usando la riga che abbiamo creato in precedenza. Per modificare la riga, fai clic sull'icona a forma di ingranaggio nella riga in alto nella sezione.

È importante utilizzare la riga superiore in modo che il design dello sfondo non si sovrapponga all'altra riga designata per il nostro contenuto (un modo semplice per evitare di occuparsi dell'indice Z).

Nella scheda Avanzate, aggiorna quanto segue:

• Posizione: Assoluta

Ciò consentirà alla riga di sedersi sopra (o sovrapporre) la sezione senza occupare spazio effettivo nel documento. Ora, tutto ciò che dobbiamo fare è aggiornare l'altezza e la larghezza in modo che si estenda per l'intera larghezza e altezza della sezione. Questo creerà la sovrapposizione di cui abbiamo bisogno e il nostro secondo livello di design dello sfondo.

Nella scheda Design, aggiorna le opzioni di dimensionamento come segue:

• Equalizza le altezze delle colonne: SÌ
• Larghezza: 100%
• Larghezza massima: 100%
• Altezza: 100%

Assicurati di togliere anche l'imbottitura dalla fila.

• Padding: 0px in alto, 0px in basso

Crea il design dello sfondo della riga (il secondo livello di design)

Ora potresti non essere in grado di vedere la riga, ma ora si sovrappone perfettamente allo sfondo dell'intera sezione. Questo ci dà il nostro secondo strato e un'altra tela bianca per completare il nostro design.

Progetta un gradiente di sfondo per la riga

Poiché questo è il nostro secondo gradiente di livello, è importante utilizzare interruzioni di colore trasparenti (o semitrasparenti) in modo che i colori del gradiente del primo livello rimangano visibili in determinate aree. Ciò ti consente di creare una fusione di colori più unica che non è possibile con un solo livello di sfumature.

Per questo gradiente, aggiungeremo 3 interruzioni del gradiente che sono distanziate in modo abbastanza uniforme. L'arresto del gradiente centrale è trasparente per rivelare il design del gradiente del primo livello. Insieme, questi colori tenui completano bene il gradiente nel primo livello.

Per aggiungere le prime interruzioni del gradiente, assicurati di avere le impostazioni della sezione aperte nella scheda del contenuto. Quindi seleziona la scheda sfumatura e fai clic per aggiungere una nuova sfumatura. Questo aggiungerà due colori sfumati predefiniti. A partire dalla prima interruzione della sfumatura a sinistra, aggiorna/aggiungi le seguenti interruzioni della sfumatura con un colore e una posizione come segue:

Fermata gradiente n. 1

• Colore arresto gradiente: #7fceff
• Posizione di arresto del gradiente: 0%

Fermata gradiente n. 2

• Colore Stop sfumato: trasparente
• Posizione di arresto del gradiente: 40%

Fermata gradiente n. 3

• Colore arresto sfumatura: #f1ddff
• Posizione di arresto del gradiente: 100%

Quindi aggiorna il tipo e la posizione del gradiente:

• Tipo di sfumatura: ellittica
• Posizione gradiente: in basso a destra

Crea un motivo di sfondo per la sezione

Ora che il nostro gradiente di secondo livello è a posto, possiamo aggiungere un motivo di sfondo per completare il design. Per il nostro modello di secondo strato, useremo il modello Confetti.

Nella scheda modelli, aggiorna quanto segue:

• Motivo di sfondo: coriandoli
• Colore motivo: #00ff4c
• Dimensione del modello: dimensione personalizzata
• Larghezza del modello: 45vw
• Modalità di fusione del modello: schermo

Questo modello utilizza la modalità di fusione dello schermo per una versione chiara del colore del modello mescolato con i colori sfumati dietro di esso. Migliora il design e rende il motivo più sottile.

Crea una maschera di sfondo per la riga

Con il nostro modello di secondo livello in atto, siamo pronti per aggiungere una seconda maschera di livello per completare il nostro design di sfondo a due strati. Per la seconda maschera di livello, utilizzeremo la stessa maschera Diagon Pills invertita e capovolta orizzontalmente in modo che appaia sul lato sinistro della sezione, adiacente alla maschera nel primo livello.

Nella scheda maschere, aggiorna quanto segue:

• Maschera: Pillole Diagonali
• Colore maschera: #ffffff
• Trasformazione maschera: capovolgi orizzontalmente, inverti

Ecco il risultato fino ad ora...

I due strati (prima e dopo)

Ecco una rapida illustrazione dell'aspetto del primo livello prima dell'applicazione del secondo livello.

Aggiungi il titolo

Nella riga che abbiamo salvato per il nostro contenuto, aggiungi un modulo di testo per la tua intestazione principale.

Quindi apri le impostazioni del modulo di testo e aggiorna quanto segue:

• Corpo del testo: [aggiungi intestazione con tag H1]
• Carattere di intestazione: Inter
• Peso del carattere dell'intestazione: grassetto
• Colore testo intestazione: #000000
• Dimensione testo titolo: 8vw (desktop), 62px (tablet), 32px (telefono)
• Margine: 30vh in alto, 30vh in basso

Risultato finale

Diamo un'occhiata al risultato finale del nostro design su desktop e dispositivi mobili.

Cambialo!

Per un look diverso, puoi provare diverse maschere e motivi su ogni livello.

Ecco alcuni esempi.

Prova più gradienti!

Il Generatore di sfumature può creare tanti più colori e tipi di sfumatura che puoi utilizzare per far risaltare questi disegni di sfondo a strati. Puoi dare un'occhiata alle nostre demo dal vivo di più possibilità di progettazione del gradiente di sfondo.

Ottieni più modelli di maschere e motivi di sfondo!

Se vuoi più ispirazione su come utilizzare maschere e motivi di sfondo, dai un'occhiata a questi 12 modelli di maschere e motivi di sfondo gratuiti per il download.

Pensieri finali

È incredibile quanto sia facile creare sfondi così belli con le opzioni di sfondo di Divi. Inoltre, l'aggiunta di un altro livello di progettazione dello sfondo aumenta esponenzialmente le possibilità di progettazione. Inoltre, non abbiamo nemmeno menzionato il terzo livello, disponibile anche all'interno del design di questo tutorial. Riuscite a indovinare di cosa si tratta?

Per ulteriori informazioni, dai un'occhiata ai nostri post sulla versione delle funzionalità sul generatore di sfumature e sulle maschere e sui modelli di sfondo. Potresti anche trovare utile sapere come utilizzare maschere e modelli per progettare una sezione di eroi.

Non vedo l'ora di sentirti nei commenti.

Saluti!