Come creare una maschera di sfondo adesiva con Divi

Le opzioni adesive di Divi ti consentono di creare un sacco di design diversi per i tuoi siti web. Il post di oggi aggiunge un altro tutorial all'elenco delle cose che puoi ottenere e, si spera, aiuterà a stimolare la creatività. Ti mostreremo come creare una maschera di sfondo adesiva e fare in modo che questa maschera segua il visitatore durante lo scorrimento fino alla fine della sezione. Questo tutorial combina le opzioni adesive di Divi con le modalità di fusione del filtro. Potrai anche scaricare gratuitamente il file JSON!

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 design in Divi

Aggiungi nuova sezione

Immagine di sfondo

Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Carica un'immagine di sfondo a tua scelta.

• Dimensione immagine di sfondo: copertina

Spaziatura

Passa alla scheda di progettazione della sezione e rimuovi tutto il riempimento superiore e inferiore predefinito nelle impostazioni di spaziatura.

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

straripamenti

Nascondi gli overflow della sezione nella scheda avanzata successiva.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Aggiungi riga n. 1

Struttura della colonna

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

Dimensionamento

Senza aggiungere moduli, apri le impostazioni di riga e modifica le impostazioni di dimensionamento di conseguenza:

• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Rimuovi anche tutto il riempimento superiore e inferiore predefinito.

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

Filtri

Stiamo anche aggiungendo una modalità di fusione a questa riga. Questa modalità di fusione ci aiuterà a creare una maschera più avanti nel tutorial.

• Modalità di fusione: schermo

Indice Z

Per assicurarci che questa riga rimanga al di sotto della seconda riga che aggiungeremo alla sezione, stiamo modificando l'indice z nella scheda avanzata.

• Indice Z: 9

Impostazioni colonna

Successivamente, apriremo le impostazioni della colonna.

Colore di sfondo

Stiamo usando un colore di sfondo completamente bianco. Qualsiasi altro colore che usi qui verrà mostrato attraverso l'immagine di sfondo della sezione, quindi è importante attenersi a un colore completamente bianco.

• Colore di sfondo: #ffffff

Elemento principale CSS

Stiamo anche aggiungendo un valore di altezza all'elemento principale nella scheda Avanzate. Una volta che la riga diventa appiccicosa, questa altezza farà in modo che la colonna copra l'intera immagine di sfondo della sezione in ogni momento.

height: 100vh;

Aggiungi modulo di testo alla riga

Lascia la casella del contenuto vuota

Una volta completate le impostazioni della riga, aggiungi un modulo di testo alla sua colonna. Lascia vuota la casella del contenuto. Utilizziamo invece questo modulo per creare una forma che riveli una parte dell'immagine di sfondo della sezione.

Colore di sfondo

Per consentire alla modalità di fusione di mostrare una parte dell'immagine di sfondo della sezione, stiamo utilizzando un colore di sfondo più scuro per questo modulo.

• Colore di sfondo: #0b3835

Dimensionamento

Quindi, passeremo alla scheda Design e modificheremo le impostazioni di dimensionamento come segue:

• Larghezza:
  • Desktop: 20vw
  • Tablet e telefono: 70vw
• Altezza:
  • Desktop: 30vh
  • Tablet e telefono: 10 vh

Spaziatura

Stiamo anche aggiungendo un margine superiore.

• Margine superiore: 3vh

Frontiera

E includeremo alcuni angoli arrotondati.

• Tutti gli angoli: 15px

Aggiungi riga #2

Struttura della colonna

Continua aggiungendo un'altra riga alla sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza ancora aggiungere moduli, apri le impostazioni di riga e apporta le seguenti modifiche alle impostazioni di dimensionamento:

• Larghezza: 100%
• Larghezza massima: 100%

Indice Z

Aumenta anche l'indice z della riga. Ciò contribuirà a garantire che il contenuto della riga rimanga in cima alla riga precedente.

• Indice Z: 12

Aggiungi modulo di testo alla riga

Aggiungi contenuto H2

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

Impostazioni testo H2

Modella le impostazioni del testo H2 come segue:

• Intestazione 2 Carattere: Display Playfair
• Intestazione 2 Allineamento del testo: Centro
• Colore testo titolo 2: #0b3835
• Intestazione 2 Dimensione del testo:
  • Desktop: 150 px
  • Tablet e telefono: 45px
• Altezza riga intestazione 2: 1.2em

Dimensionamento

Quindi, vai alle impostazioni di dimensionamento e applica le seguenti impostazioni:

• Larghezza massima: 980 px
• Allineamento del modulo: Centro

Spaziatura

Includi anche un margine superiore negativo.

Aggiungi modulo pulsante alla riga

Aggiungi copia

Il modulo successivo e ultimo di cui abbiamo bisogno in questa riga è un modulo pulsante. Aggiungi una copia a tua scelta.

Allineamento dei pulsanti

Passa alla scheda di progettazione del modulo e modifica l'allineamento del pulsante.

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

Quindi, vai alle impostazioni del pulsante e applica i seguenti stili:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 15 px
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #000000
• Larghezza bordo pulsante: 0px
• Raggio del bordo del pulsante: 100 px

• Carattere pulsante: Montserrat
• Peso del carattere del pulsante: semi grassetto
• Stile carattere pulsante: maiuscolo

Spaziatura

Stiamo aggiungendo anche alcuni margini personalizzati e valori di riempimento alle impostazioni di spaziatura.

• Margine inferiore: 60 vh
• Imbottitura superiore: 15px
• Imbottitura inferiore: 15px
• Imbottitura sinistra: 40px
• Imbottitura destra: 40px

2. Applica effetti appiccicosi

Apri riga n. 1

Ora che abbiamo costruito le basi del nostro design, è il momento di applicare gli stili appiccicosi. Apri le impostazioni della prima riga.

Applica opzioni permanenti

Passa alla scheda Avanzate e applica le seguenti impostazioni permanenti:

• Posizione appiccicosa: bastone in alto
• Limite appiccicoso inferiore: sezione
• Offset da elementi appiccicosi circostanti: Sì
• Stili di transizione predefiniti e permanenti: Sì

Opzioni permanenti del modulo di testo

Ora che la riga è diventata appiccicosa, possiamo applicare stili adesivi al modulo di testo all'interno della riga. Apri le impostazioni del modulo.

Dimensionamento appiccicoso

Quindi, vai alle impostazioni di dimensionamento e applica i seguenti valori di dimensionamento permanenti:

• Larghezza adesiva: 80vw
• Altezza adesiva: 90 vh

Durata della transizione

Ultimo ma non meno importante, vai alla scheda Avanzate e aumenta la durata della transizione. Questo è tutto!

• Durata della transizione: 500 ms

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, ancora una volta, ti abbiamo mostrato come essere creativo con le opzioni adesive di Divi. Più specificamente, ti abbiamo mostrato come combinare le impostazioni dei filtri di Divi e le opzioni adesive per creare una maschera di sfondo adesiva. 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.