Utilizzo degli sfondi dei moduli per visualizzare immagini di parallasse in linea con Divi

Pubblicato: 2019-09-07

L'utilizzo degli sfondi di parallasse in linea CSS può davvero aiutare a migliorare l'aspetto del tuo sito Web e questo tutorial è l'esempio perfetto. Utilizzeremo più sfondi del modulo per creare un risultato sorprendente e coerente che mostri più parti della tua immagine di sfondo. 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 GRATUITAMENTE il layout di parallasse in linea

Per mettere le mani sul layout parallasse in linea gratuito, devi prima scaricarlo utilizzando il pulsante qui sotto. 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.

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!

Iscriviti al nostro canale Youtube

Iniziamo a ricreare

Aggiungi nuova sezione

Inizia aggiungendo una nuova sezione normale alla pagina su cui stai lavorando.

parallasse in linea

Aggiungi nuova riga

Struttura della colonna

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

Impostazioni colonna 1

Spaziatura

Aggiungi un valore di riempimento superiore alla prima colonna.

Imbottitura superiore:
- Desktop: 2vw
- Tablet + Telefono: 6vw

Impostazioni colonna 2

Spaziatura

Aggiungi anche un valore di riempimento superiore alla seconda colonna.

Imbottitura superiore:
- Desktop: 4vw
- Tablet + Telefono: 6vw

Impostazioni colonna 4

Spaziatura

Salta la colonna 3 e aggiungi alcuni valori di spaziatura alla colonna 4.

Imbottitura superiore
- Desktop: 19vw
- Tablet: 0vw
- Telefono: 1vw
Imbottitura sinistra e destra
- Desktop e Tablet: 1vw
- Telefono: 0vw

Aggiungi il primo modulo di testo alla colonna 1

Aggiungi contenuto H2

Ora aggiungi il primo modulo di testo alla colonna 1. Inserisci alcuni contenuti H2 a tua scelta.

Testo dell'intestazione

Passa alla scheda Design e modifica le impostazioni del testo H2 di conseguenza:

Livello del testo dell'intestazione: H2
Carattere H2: EB Garamond
Stile carattere H2: TT
Colore del testo H2: nero #oooooo
Dimensione del testo H2:
- Desktop: 3.1vw
- Tablet: 5.4vw
- Telefono: 10vw
Altezza linea H2:
- Desktop + Tablet: 1.1em
- Telefono: 1.3em

Spaziatura

Quindi, aggiungi un po' di spazio al modulo.

Imbottitura superiore:
- Desktop: 4vw
- Tablet + Telefono: 0vw
Imbottitura sinistra:
- Desktop e Tablet: 1vw
- Telefono: 2vw
Imbottitura destra
- Desktop e Tablet: 1vw
- Telefono: 0vw

Aggiungi il secondo modulo di testo alla colonna 1

Aggiungi contenuto

Ora aggiungi un secondo modulo di testo sotto il primo. Inserisci del contenuto del paragrafo.

Testo

Passa alla scheda Design e modifica le impostazioni del testo come segue:

Carattere del testo: EB Garamond
Colore del testo: grigio scuro #3d3d3d
Dimensione del testo:
- Desktop: 1vw
- Tablet: 2.2vw
- Telefono: 3.8vw
Altezza riga di testo: 1,8 em

Spaziatura

Successivamente, regolare le impostazioni di spaziatura del modulo.

Imbottitura inferiore:
- Telefono: 4vw
Imbottitura sinistra:
- Desktop + Tablet: 1.4vw
Imbottitura destra:
- Desktop: 1.3vw
- Tablet + Telefono: 1.7vw

Aggiungi modulo pulsante alla colonna 1

Aggiungi contenuto

Per completare la prima colonna, aggiungi un modulo pulsante. Inserisci qualche copia.

Aggiungi collegamento

Aggiungi anche un collegamento al pulsante.

Pulsante

Passa alla scheda Design e modella le impostazioni del pulsante di conseguenza:

Dimensione del testo del pulsante:
- Desktop: 1vw
- Tablet: 2vw
- Telefono: 4vw
Colore del testo del pulsante: grigio scuro #3d3d3d
Larghezza bordo pulsante: 1px
Carattere pulsante: EB Garamond

Spaziatura

Quindi, regolare le impostazioni di spaziatura del pulsante.

Margine superiore:
- Desktop + Tablet: 1vw
Margine inferiore:
- Telefono: 5vw

Aggiungi il primo modulo di testo alla colonna 2

Aggiungi contenuto

Alla prossima colonna! Aggiungi un modulo di testo con alcuni contenuti H4 a tua scelta.

Sfondo

Continua aggiungendo un'immagine di sfondo. Carica un'immagine di sfondo con parallasse CSS per desktop e usa un'immagine normale su schermi di dimensioni più piccole (senza parallasse CSS).

Sfondo del desktop: immagine
- Parallasse: CSS
Sfondo tablet + telefono: immagine

Sfondo al passaggio del mouse

Quindi, aggiungi uno sfondo sfumato solo al passaggio del mouse.

Sfondo al passaggio del mouse: gradiente di colore
Gradiente di colore 1: giallo dorato chiaro #edba63
Gradiente di colore 2: giallo dorato #ed9d12
Direzione del gradiente: 23 gradi
Posiziona il gradiente sopra l'immagine di sfondo: Sì

Testo dell'intestazione

Passa alla scheda Design e modifica le impostazioni del testo H4.

Livello dell'intestazione del testo: H4
Carattere H4: EB Garamond
Colore del testo H4: bianco #ffffff
Dimensione del testo H4:
- Desktop: 2.3vw
- Tablet: 4.5vw
- Telefono: 8.5vw

Spaziatura

Quindi, regolare la spaziatura.

Margine superiore:
- Telefono: -6vw
Imbottitura superiore:
- Desktop: 15vw
- Tablet: 22vw
- Telefono: 43vw
Imbottitura inferiore:
- Desktop + Tablet: 1vw
Imbottitura sinistra e destra:
- Desktop e tablet: 1.5vw
- Telefono: 5vw

Frontiera

Continua modellando i bordi.

Angoli arrotondati: 1vw tutti gli angoli
Stili di bordo: tutti i lati
Larghezza del bordo: 0.3vw
Colore bordo: bianco #ffffff

Trasforma scala al passaggio del mouse

Completa le impostazioni del modulo aggiungendo un effetto zoom al passaggio del mouse.

Scala di trasformazione al passaggio del mouse: 102%

Aggiungi il secondo modulo di testo alla colonna 2

Aggiungi contenuto

Aggiungi un secondo modulo alla seconda colonna con alcuni contenuti H4 a tua scelta.

Sfondo

Proprio come il modulo di testo precedente, aggiungi un'immagine di sfondo parallasse CSS sul desktop e un'immagine di sfondo normale su schermi di dimensioni più piccole.

Sfondo del desktop: immagine
- Parallasse: CSS
Sfondo tablet + telefono: immagine

Sfondo al passaggio del mouse

Aggiungi anche uno sfondo sfumato al passaggio del mouse.

Sfondo al passaggio del mouse: gradiente di colore
Gradiente di colore 1: Magenta chiaro #91463f
Gradiente colore 2: Magenta #910400
Direzione del gradiente: 23 gradi
Posiziona il gradiente sopra l'immagine di sfondo: Sì

Testo dell'intestazione

Successivamente, modella le impostazioni del testo H4.

Livello dell'intestazione del testo: H4
Carattere H4: EB Garamond
Colore del testo H4: bianco #ffffff
Dimensione del testo H4:
- Desktop: 2.3vw
- Tablet: 4.5vw
- Telefono: 8.5vw

Spaziatura

E modificare le impostazioni di spaziatura.

Imbottitura superiore:
- Desktop: 15vw
- Tablet: 21.1vw
- Telefono: 43vw
Imbottitura inferiore:
- Desktop + Tablet: 1vw
Imbottitura sinistra e destra:
- Desktop e tablet: 1.5vw
- Telefono: 5vw

Frontiera

Modifica anche le impostazioni del bordo.

Angoli arrotondati: 1vw tutti gli angoli
Stili di bordo: tutti i lati
Larghezza del bordo: 0.3vw
Colore bordo: bianco #ffffff

Trasforma scala al passaggio del mouse

Ultimo ma non meno importante, aggiungi un effetto zoom al modulo di testo.

Scala di trasformazione al passaggio del mouse: 102%

Moduli di testo duplicati dalla colonna 2 alla colonna 3

Duplica e trascina i moduli di testo

Clona entrambi i moduli di testo e posizionali nella terza colonna della riga.

Regola il primo modulo di testo nella colonna 3

Modifica contenuto H4

Apri il primo modulo di testo duplicato nella colonna 3 e modifica il contenuto.

Cambia sfondo per tablet e telefono

Successivamente, cambia l'immagine di sfondo su schermi di dimensioni più piccole.

Cambia sfumatura di colore al passaggio del mouse

Continua cambiando i colori nel passaggio del mouse sul gradiente.

Gradiente di colore 1: rosa rosa #cc9293
Gradiente di colore 2: rosa #cc9293

Spaziatura

Infine, regola la spaziatura come segue.

Margine superiore:
- Tablet: -6.4vw
- Telefono: 0vw

Regola il secondo modulo di testo nella colonna 3

Modifica contenuto H4

Innanzitutto, cambia il contenuto.

Cambia sfondo per tablet e telefono

Quindi, cambia l'immagine di sfondo su schermi di dimensioni più piccole.

Cambia sfumatura di colore al passaggio del mouse

Cambia anche lo sfondo sfumato.

Gradiente di colore 1: pino morbido #5c755c
Gradiente colore 2: verde pino #4D754D

Aggiungi il primo modulo di testo alla colonna 4

Aggiungi contenuto

Passando alla colonna 4, aggiungi un modulo di testo. Inserisci alcuni contenuti H3 a tua scelta.

Testo dell'intestazione

Passa alla scheda Design e modifica le impostazioni del testo H3 come segue:

Livello del testo dell'intestazione: H3
Carattere di testo H3: EB Garamond
Stile carattere H3: TT
Colore del testo H3: nero #oooooo
Dimensione del testo H3:
- Desktop: 3vw
- Tablet: 5vw
- Telefono: 12vw
Altezza linea H3
- Desktop + Tablet: 1em
- Telefono: 1.1em

Aggiungi il secondo modulo di testo alla colonna 4

Aggiungi contenuto

Aggiungi un altro modulo di testo sotto il primo. Inserisci del contenuto del paragrafo.

Testo

Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:

Carattere del testo: EB Garamond
Colore del testo: grigio scuro #3d3d3d
Dimensione del testo:
- Desktop: 1vw
- Tablet: 2.2vw
- Telefono: 3.8vw
Altezza riga di testo: 1,8 em

Spaziatura

Quindi, regolare la spaziatura.

Imbottitura inferiore:
- Telefono: 4vw
Imbottitura sinistra: 0.9vw
Imbottitura destra: 2.2vw

Modulo pulsante duplicato dalla colonna 1 alla colonna 4

Duplica e trascina il modulo pulsante

Duplica il modulo pulsanti nella colonna 1.
Trascinalo nella colonna 3 sotto i moduli di testo.

Spaziatura

Regola alcuni valori di spaziatura nel modulo pulsante duplicato e il gioco è fatto!

Margine inferiore: 0vw
Margine sinistro:
- Desktop + Tablet: 0.7vw
- Telefono: 0.9vw

Anteprima

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

Desktop

Mobile

Conclusione

In questo post, ti abbiamo mostrato come creare un design di parallasse in linea con quattro caselle di testo che mostrano una parte diversa della stessa immagine. Ci auguriamo che questo design ti piaccia e se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!