Come utilizzare i moduli immagine posizionati assoluti come sfondi parallasse con zoom indietro con Divi

Quando usi un'immagine di sfondo nella tua sezione, ci sono un paio di modi per modellare quell'immagine subito. È possibile utilizzare modalità di fusione, sovrapposizioni di sfondi sfumati e abilitare effetti di parallasse. Ora, con i nuovi effetti di scorrimento di Divi, puoi portare l'animazione un ulteriore passo avanti e combinare magnificamente un effetto di ingrandimento con l'effetto di parallasse per ampliare un altro tipo di dimensione nel tuo web design. Per fare ciò, utilizzeremo i moduli immagine posizionati in modo assoluto e l'unità di larghezza della finestra. In questo tutorial, ti guideremo attraverso il processo ricreando un bellissimo case study CTA design che puoi anche scaricare gratuitamente!

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 dei moduli di immagine con posizionamento assoluto

Per mettere le mani sul layout gratuito dei moduli immagine posizionati in assoluto, 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!

Iniziamo a ricreare!

Aggiungi nuova sezione

Colore di sfondo

Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e cambia il colore di sfondo.

• Colore di sfondo: #000000

Dimensionamento

Passa alla scheda Design della sezione e modifica la larghezza nelle impostazioni di dimensionamento.

• Larghezza: 95%
• Allineamento della sezione: Centro

Spaziatura

Aggiungi anche alcuni valori di spaziatura personalizzati.

• Margine superiore: 5%
• Margine inferiore: 5%
• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

straripamenti

E assicurati di nascondere gli overflow della sezione. Questo è un passaggio importante per far funzionare il tutorial. Nascondendo gli overflow, ci assicureremo che nulla superi il contenitore della sezione.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga alla tua sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Aggiungi il modulo di testo n. 1 alla colonna

Aggiungi contenuto H2

Quindi, aggiungi un primo modulo di testo con alcuni contenuti H2 a tua scelta.

Impostazioni testo H2

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

• Intestazione 2 Carattere: Lato
• Intestazione 2 Peso del carattere: Leggero
• Colore testo titolo 2: #ffffff
• Titolo 2: Dimensione testo: 4vw (desktop), 8vw (tablet e telefono)
• Intestazione 2 Spaziatura lettere: 1px

Spaziatura

Aggiungeremo anche alcuni valori di spaziatura personalizzati.

• Margine superiore: 25vw (desktop), 50vw (tablet e telefono)
• Margine sinistro: 5%
• Margine destro: 5%

Aggiungi il modulo di testo n. 2 alla colonna

Aggiungi contenuto

Il prossimo modulo di cui abbiamo bisogno è un altro modulo di testo. Aggiungi alcuni contenuti descrittivi a tua scelta.

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo come segue:

• Carattere del testo: Lato
• Colore del testo: #ffffff
• Dimensione del testo: 0.8vw (desktop), 2vw (tablet), 3vw (telefono)
• Altezza riga di testo: 2.1em

Dimensionamento

Successivamente, modifica la larghezza tra le diverse dimensioni dello schermo.

• Larghezza: 800 px (desktop), 80% (tablet), 90% (telefono)

Spaziatura

E completa le impostazioni del modulo aggiungendo alcuni valori di margine personalizzati alle impostazioni di spaziatura.

• Margine superiore: 2%
• Margine inferiore: 2%
• Margine sinistro: 5%
• Margine destro: 5%

Aggiungi modulo pulsante alla colonna

Aggiungi copia

Al modulo successivo, che è un modulo pulsante. Aggiungi una copia a tua scelta.

Impostazioni dei pulsanti

Quindi, passa alla scheda Design e modella il pulsante di conseguenza:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 1.5vw (desktop), 2.5vw (tablet), 3vw (telefono)
• Colore del testo del pulsante: #ffffff
• Colore sfumato 1: rgba (255,255,255,0)
• Colore sfumato 2: #ffffff
• Tipo di gradiente: lineare
• Posizione di partenza: 98%
• Posizione finale: 98%

• Larghezza bordo pulsante: 0px
• Carattere pulsante: Lato
• Peso del carattere del pulsante: pesante
• Mostra icona pulsante: Sì
• Posizionamento dell'icona del pulsante: a sinistra
• Mostra solo l'icona al passaggio del mouse per il pulsante: No

Spaziatura

Utilizziamo anche alcuni valori di spaziatura personalizzati su schermi di diverse dimensioni.

• Margine inferiore: 7vw (desktop), 20vw (tablet), 25vw (telefono)
• Margine sinistro: 5%
• Margine destro: 5%

Aggiungi modulo immagine alla parte superiore della colonna

Dopo aver completato i primi tre moduli nella colonna della riga, è il momento di aggiungere il modulo dell'immagine con posizionamento assoluto e utilizzarlo come immagine di sfondo rimpicciolita. Il primo passo per farlo è aggiungere un nuovo modulo immagine nella parte superiore della colonna.

Lascia la casella immagine vuota

Lascia vuota la casella dell'immagine.

Immagine di sfondo

E usa invece un'immagine di sfondo parallasse. Puoi usare qualsiasi immagine tu voglia, ma se vuoi ricreare lo stesso identico risultato, puoi trovare le immagini che sono state usate in questo tutorial scaricando la cartella all'inizio di questo tutorial.

• Usa effetto parallasse: Sì
• Metodo di parallasse: CSS

Dimensionamento

Passa alla scheda di progettazione del modulo e forza la larghezza completa.

• Forza intera larghezza: Sì

Spaziatura

Aggiungi anche un'imbottitura superiore e inferiore personalizzata su schermi di diverse dimensioni.

• Imbottitura superiore: 27vw (desktop), 54vw (tablet), 68vw (telefono)
• Imbottitura inferiore: 27vw (desktop), 54vw (tablet), 68vw (telefono)

Posizione

Ora, per assicurarci che il modulo non occupi spazio contenitore nella nostra colonna, riposizioneremo l'intero modulo nella scheda Avanzate.

• Posizione: Assoluta
• Posizione: in alto a sinistra

Ridimensionamento dell'effetto di scorrimento verso l'alto e verso il basso

E completeremo le impostazioni del modulo aggiungendo un effetto di scorrimento in scala su e giù.

• Abilita ridimensionamento su e giù: Sì
• Scala iniziale: 150% (al 30%)
• Scala media: 150% (al 45%)
• Scala finale: 100% (al 55%)
• Attivazione effetto movimento: mezzo dell'elemento

Clona l'intera sezione tutte le volte necessarie

Una volta completata la prima sezione, puoi clonarla tutte le volte che vuoi.

Modifica copia per ogni sezione duplicata

Assicurati di cambiare la copia per ogni duplicato.

Cambia immagine di sfondo del modulo immagine per ogni sezione duplicata

Insieme all'immagine di sfondo del modulo immagine e il gioco è fatto!

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 essere creativo con i nuovi effetti di scorrimento di Divi. Più specificamente, abbiamo utilizzato moduli immagine posizionati in modo assoluto insieme a sfondi di parallasse per creare un bellissimo effetto di ingrandimento della sezione. Abbiamo accompagnato questo tutorial con un bellissimo layout CTA di case study che puoi scaricare 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.