Come creare un effetto di scorrimento dello sfondo a doppio strato con Divi

Se stai cercando un modo per far risaltare il tuo sito web, potresti voler imparare a creare sfondi a doppio strato. La creazione di sfondi a doppio strato ti aiuterà a dare vita alla tua immagine di sfondo attraverso il movimento. Nel tutorial di oggi, ti mostreremo come creare un design di sfondo a doppio strato con Divi. Questo tutorial contiene tre parti:

1. Preparazione di due file immagine in Adobe Photoshop
2. Creare il design all'interno di Divi
3. Applicare gli effetti di scorrimento per animare lo sfondo

Potrai anche scaricare gratuitamente i file JSON e immagine!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica il layout GRATUITAMENTE

Per mettere le mani sul layout gratuito, 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 sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

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!

1. Crea file immagine in Photoshop

Scegli l'immagine del prodotto con sfondo pulito e apri in Photoshop

Nella prima parte di questo tutorial, creeremo i file di immagine che utilizzeremo durante il tutorial Divi. Per crearli, utilizzeremo Adobe Photoshop, ma sentiti libero di utilizzare qualsiasi altro software di modifica delle immagini di tua scelta. L'effetto dell'immagine di sfondo a doppio strato funzionerà meglio se l'immagine con cui stai lavorando ha:

1. Una chiara messa a fuoco su un oggetto all'interno dell'immagine
2. Uno sfondo pulito

L'immagine qui sotto è un esempio perfetto. Puoi trovare questo file immagine nella cartella zippata condivisa nell'area download di questo post.

Duplica livello

Dopo aver aperto l'immagine all'interno di Photoshop, clona il livello originale una volta. Lavoreremo sul livello duplicato.

Nascondi livello originale

Per assicurarti di vedere il risultato mentre ci spostiamo verso il basso nel tutorial, nascondi il livello originale.

Crea PNG dalla selezione dell'oggetto nell'immagine

Usa lo strumento di selezione rapida sulla lastra

In totale, avremo bisogno di due file immagine per il tutorial:

1. un PNG dell'oggetto, in questo caso il piatto
2. un JPEG dello sfondo senza l'oggetto

Separiamo l'oggetto dal suo sfondo, così possiamo manipolarli individualmente una volta all'interno dell'ambiente Divi.

Per iniziare a selezionare l'oggetto, seleziona lo "Strumento di selezione rapida" nella barra degli strumenti e prova a coprire il più possibile l'oggetto.

Seleziona + Selezione maschera

Noterai che la selezione degli oggetti non è ancora abbastanza buona. Puoi perfezionare l'aspetto della tua selezione utilizzando l'opzione "Seleziona e maschera" quando fai clic con il pulsante destro del mouse sulla selezione. Una volta lì, puoi giocare con l'opacità, la levigatezza, ecc.

Crea una maschera di livello dalla selezione

Sebbene abbiamo creato una selezione uniforme, ci sono ancora parti all'interno dell'oggetto che non sono ancora selezionate. Aggiungeremo manualmente queste parti alla nostra selezione facendo clic sul pulsante della maschera di livello che puoi vedere nella schermata di stampa qui sotto:

Perfeziona la selezione all'interno della maschera con i pennelli

Una volta creata la maschera di livello, puoi iniziare a utilizzare un pennello per modificare la maschera di livello. Assicurati che la tua maschera di livello sia selezionata.

• L'uso di un pennello nero (#000) rimuoverà parti della maschera di livello
• L'uso di un pennello bianco (#fff) aggiungerà parti posteriori della maschera di livello

Usa un pennello che non abbia troppa durezza, così non devi essere super preciso.

Maschera di doppio controllo con strato colorato

Puoi sempre ricontrollare la tua maschera di livello posizionando un livello colorato sotto di essa. I livelli colorati lo tradiranno più facilmente se hai perso un punto.

Salva la selezione PNG come file immagine separato

Crea nuovo file

Ora che hai la selezione PNG del tuo oggetto, puoi clonare l'intero livello, in modo da poterci sempre tornare. Nella parte successiva, utilizzeremo il livello duplicato per creare l'immagine di sfondo senza l'oggetto.

La dimensione del nostro oggetto è molto più piccola della dimensione del file iniziale, quindi creeremo un nuovo file per il nostro oggetto e lo porteremo sopra.

Adatta la selezione in un nuovo file

Copia e incolla il livello con la sua maschera di livello all'interno del nuovo file che hai creato.

Esporta per il Web

Ed esportalo per il web come PNG.

Comprimi file immagine

I PNG con sfondi trasparenti tendono ad avere file di dimensioni maggiori, quindi ti consigliamo di comprimere il file utilizzando uno strumento a tua scelta.

Rimuovi oggetto nell'immagine originale

Seleziona maschera di livello

Torna al file Photoshop iniziale! Lì, creeremo l'immagine di sfondo senza l'oggetto. Stiamo usando il livello superiore all'interno del nostro file per farlo. Innanzitutto, assicurati che la tua maschera di livello sia selezionata.

Inverti maschera

Quindi, vai alle proprietà di questo livello e fai clic su "Inverti".

Applica maschera di livello

Noterai ora che l'oggetto è trasparente all'interno del livello iniziale. Applicheremo la maschera di livello al nostro livello facendo clic con il pulsante destro del mouse e selezionando "Applica maschera di livello".

Riempi lo spazio vuoto usando lo strumento Clona

Abbiamo ancora un buco nel mezzo, che dobbiamo riempire. È qui che lo strumento di clonazione torna utile. Seleziona una dimensione del pennello a tua scelta e riempi l'immagine. Non è necessario essere super precisi con questo, all'interno del tutorial Divi, posizioneremo l'oggetto sopra di esso.

Salva immagine senza oggetto

Esporta per il Web

Una volta completata l'immagine di sfondo senza l'oggetto, puoi salvarla come file JPEG con una qualità del 70%.

Comprimi file immagine

Assicurati di comprimere anche questa immagine.

2. Crea un effetto di sfondo a doppio strato in Divi

Aggiungi nuova sezione

Carica immagine di sfondo

Una volta che hai entrambi i file immagine a portata di mano, è il momento di passare a Divi! Apri una nuova pagina e aggiungi una nuova sezione. Carica l'immagine di sfondo che hai creato nella prima parte del tutorial.

Spaziatura

Passa alla scheda Progettazione della sezione e applica alcuni valori di spaziatura personalizzati. Il margine inferiore che stiamo aggiungendo ci aiuterà a vedere l'effetto andare a posto. Normalmente, questo margine sarà sostituito dalle sezioni successive nel tuo disegno.

• Margine inferiore: 100 vh
• Imbottitura superiore:
  • Desktop: 100 px
  • Tablet e telefono: 50px
• Imbottitura inferiore:
  • Desktop: 100 px
  • Tablet: 600px
  • Telefono: 500 px

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora moduli, apri le impostazioni della riga e modifica la larghezza e la larghezza massima. Queste impostazioni consentiranno alla riga di toccare sempre i lati sinistro e destro del contenitore della sezione. In questo modo, possiamo assicurarci che le immagini PNG e di sfondo abbiano lo stesso equilibrio su tutte le dimensioni dello schermo.

• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Vai alle impostazioni di spaziatura della riga e rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Posizione

Quindi, riposizionare l'intera riga.

• Posizione: Assoluta
• Posizione:
  • Desktop: Centro
  • Tablet e telefono: centro in basso
• Spostamento verticale:
  • Scrivania: /
  • Tablet e telefono: 30 vh

Aggiungi modulo immagine alla riga

Carica immagine PNG

Una volta completate le impostazioni della riga, aggiungi un modulo immagine alla riga e carica il file PNG che hai creato nella prima parte del tutorial.

Allineamento

Passa alla scheda Design e modifica l'allineamento dell'immagine.

• Allineamento immagine: centro

Dimensionamento

Modificare le impostazioni di dimensionamento successivo.

• Larghezza:
  • Desktop: 36%
  • Tablet e telefono: 60%

Aggiungi riga #2

Struttura della colonna

Quindi, aggiungi un'altra riga alla sezione utilizzando la seguente struttura di colonne:

Colore di sfondo

Apri le impostazioni della riga e cambia il colore di sfondo.

• Colore di sfondo: #ffffff

Dimensionamento

Modificare le impostazioni di dimensionamento successivamente.

• Larghezza: 90%
• Larghezza massima: 550 px
• Allineamento righe:
  • Desktop: Sinistra
  • Tablet e telefono: Centro

Spaziatura

Quindi, applica alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 11%
• Imbottitura inferiore: 11%
• Imbottitura sinistra: 5%
• Imbottitura destra: 5%

Offset orizzontale

Stiamo aggiungendo anche un po' di offset orizzontale alle impostazioni di posizione.

• Spostamento orizzontale:
  • Desktop: 5%
  • Tablet e telefono: 0%

Aggiungi il modulo di testo n. 1 alla colonna 1

Aggiungi contenuto H2

È ora di aggiungere moduli, iniziando con un primo modulo di testo contenente alcuni contenuti H2.

Impostazioni testo H2

Disegna il testo H2 come segue:

• Carattere dell'intestazione 2: Kumbh Sans
• Intestazione 2 Dimensione del testo:
  • Desktop: 90 px
  • Tablet: 60px
  • Telefono: 45px

Aggiungi il modulo di testo n. 2 alla colonna 1

Aggiungi descrizione contenuto

Aggiungi un altro modulo di testo proprio sotto il precedente e inserisci del contenuto descrittivo a tua scelta.

Impostazioni testo

Modifica di conseguenza le impostazioni del testo del modulo:

• Carattere del testo: Kumbh Sans
• Altezza riga di testo: 2em

Aggiungi modulo pulsante alla colonna 1

Aggiungi copia

L'ultimo modulo di cui abbiamo bisogno in questa colonna è un modulo pulsante. Aggiungi una copia a tua scelta.

Impostazioni dei pulsanti

Modella il pulsante di conseguenza:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 20 px
• Colore del testo del pulsante: #6b6443
• Larghezza bordo pulsante: 0px
• Raggio bordo pulsante: 0px

• Carattere pulsante: Kumbh Sans
• Peso del carattere del pulsante: grassetto
• Mostra icona pulsante: Sì
• Posizionamento dell'icona del pulsante: a sinistra
• Mostra solo l'icona al passaggio del mouse per il pulsante: No

Scatola ombra

Includi anche un'ombra di scatola.

• Posizione orizzontale dell'ombra del riquadro: 0px
• Posizione verticale dell'ombra del riquadro: 2px
• Colore ombra: #6b6443

3. Aggiungi effetti di scorrimento

Movimento verticale dell'immagine

Nell'ultima parte di questo tutorial, ci concentreremo sull'aggiunta degli effetti di scorrimento al modulo immagine contenente il file immagine PNG. Apri le impostazioni del modulo, vai alla scheda Avanzate e applica le seguenti impostazioni di movimento verticale:

• Abilita movimento verticale: Sì
• Compensazione iniziale:
  • Desktop: 0
  • Tablet e telefono: 4 (allo 0%)
• Compensazione media:
  • Scrivania: 0
  • Tablet e telefono: 0 (al 97%)
• Scostamento finale:
  • Desktop: 0
  • Tablet e telefono: -2 (al 100%)

Movimento orizzontale dell'immagine

Stiamo completando il nostro design utilizzando le seguenti impostazioni di movimento orizzontale:

• Abilita movimento orizzontale: Sì
• Compensazione iniziale:
  • Desktop: 0 (allo 0%)
  • Tablet e telefono: 0
• Compensazione media:
  • Desktop: 0 (al 65%)
  • Tablet e telefono: 0 (al 97%)
• Scostamento finale:
  • Desktop: -10 (al 100%)
  • Tablet e telefono: 0

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come creare uno sfondo a doppio strato e animarlo con gli effetti di scorrimento incorporati di Divi. Nella prima parte del tutorial, abbiamo preparato i file immagine all'interno di Adobe Photoshop. Nella seconda parte del tutorial, ci siamo concentrati sull'utilizzo dei file di immagine all'interno di Divi per creare un design reattivo. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.