Come creare una bellissima sezione eroe in collisione di colonne su Scroll con Divi

Gli effetti di scorrimento di Divi offrono tantissime nuove possibilità di design ai siti web che crei. Le sottili interazioni che scegli di aggiungere possono davvero aiutare a migliorare l'aspetto generale del tuo sito web. Tutto diventa ancora migliore non appena sincronizzi gli effetti di scorrimento. In questo tutorial, ci occuperemo in modo specifico della creazione di una bellissima sezione di eroe in collisione di colonne su scorrimento. Il design della sezione dell'eroe unisce due diverse colonne sullo scorrimento, il che a sua volta aiuta a enfatizzare la copia. Potrai anche scaricare gratuitamente il file JSON!

Andiamo ad esso.

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il layout della sezione dell'eroe che si scontra con le colonne

Per mettere le mani sul layout della sezione eroe in collisione di colonne gratuito, devi 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!

Ricrea il layout della sezione della sezione Eroe

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: #f4f2f7

Spaziatura

Rimuovi anche l'imbottitura superiore e inferiore predefinita di tutte le sezioni.

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

Aggiungi nuova riga

Struttura della colonna

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

Dimensionamento

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

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

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

straripamenti

E nascondi gli overflow della riga.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Impostazioni colonna 1

Spaziatura

Quindi, apri le impostazioni della colonna 1 e aggiungi alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 15vw
• Imbottitura inferiore: 10vw
• Imbottitura sinistra: 5vw
• Imbottitura destra: 5vw

Indice Z

Aumenta anche l'indice z della colonna.

• Indice Z: 12

Impostazioni colonna 2

Immagine di sfondo

Continua aprendo le impostazioni della colonna 2 e carica un'immagine di sfondo a tua scelta.

• Dimensione immagine di sfondo: copertina
• Posizione immagine di sfondo: Centro
• Ripetizione immagine di sfondo: nessuna ripetizione
• Miscela immagine di sfondo: normale

Aggiungi il modulo di testo n. 1 alla colonna 1

Aggiungi contenuto H1

È ora di aggiungere moduli, iniziando con un primo modulo di testo nella colonna 1. Aggiungi alcuni contenuti H1 a tua scelta.

Impostazioni testo H1

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

• Carattere dell'intestazione: Ombre nella luce
• Peso del carattere dell'intestazione: grassetto
• Colore del testo dell'intestazione: #000000
• Dimensione del testo dell'intestazione: 6vw (desktop), 11vw (tablet), 13vw (telefono)
• Spaziatura delle lettere dell'intestazione: -2px
• Altezza della linea di prua: 1.2em

Spaziatura

Aggiungi anche un margine superiore.

• Margine superiore: 10vw

Aggiungi il modulo di testo n. 2 alla colonna 1

Aggiungi contenuto

Inserisci un altro modulo di testo con un contenuto descrittivo a tua scelta.

Impostazioni testo

Modifica le impostazioni del testo del modulo come segue:

• Carattere del testo: Open Sans
• Colore del testo: #1e1e1e
• Dimensione del testo: 0.9vw (desktop), 1.9vw (tablet), 3vw (telefono)
• Altezza riga di testo: 2,4 em

Spaziatura

E aggiungi alcuni valori di margine personalizzati su diverse dimensioni dello schermo.

• Margine superiore: 4vw (desktop), 8vw (tablet), 12vw (telefono)
• Margine inferiore: 4vw (desktop), 8vw (tablet), 12vw (telefono)

Aggiungi modulo pulsante alla colonna 1

Aggiungi copia

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

Impostazioni dei pulsanti

Modifica le impostazioni dei pulsanti del modulo come segue:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 1vw (desktop), 2vw (tablet), 3vw (telefono)
• 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: Open Sans

Spaziatura

E completa le impostazioni dei pulsanti aggiungendo alcuni valori di riempimento personalizzati su diverse dimensioni dello schermo.

• Imbottitura superiore: 1vw (Desktop), 2vw (Tablet), 3vw (Telefono)
• Imbottitura inferiore: 1vw (desktop), 2vw (tablet), 3vw (telefono)
• Imbottitura sinistra: 3vw (Desktop), 5vw (Tablet), 7vw (Telefono)
• Imbottitura destra: 3vw (Desktop), 5vw (Tablet), 7vw (Telefono)

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto

Nella seconda colonna, l'unico modulo di cui avremo bisogno è un modulo di testo. Inserisci alcuni contenuti a tua scelta.

Impostazioni testo

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

• Carattere del testo: ombre nella luce
• Colore del testo: rgba(0,0,0,0.25)
• Dimensioni del testo: 9vw (desktop), 14vw (tablet e telefono)
• Spaziatura delle lettere del testo: -3px
• Altezza riga di testo: 1em
• Allineamento del testo: centro (desktop), sinistra (tablet e telefono)

Spaziatura

Aggiungi anche alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 5vw (Desktop),
• Imbottitura inferiore: 60vw (tablet e telefono)
• Imbottitura sinistra: 5vw (tablet e telefono)

Applica animazioni di scorrimento

Sezione

Ridimensionamento su e giù

Una volta che tutti i tuoi moduli sono a posto, è il momento di applicare gli effetti di scorrimento! Apri prima le impostazioni della sezione e usa il seguente effetto di ridimensionamento su e giù:

• Abilita Sclaing su e giù
• Scala iniziale: 100% (al 49%)
• Scala media:
  • Desktop: 70% (al 100%)
  • Tablet e telefono: 100% (al 100%)
• Scala finale:
  • Desktop: 70%
  • Tablet e telefono: 100%

Colonna 1

Movimento orizzontale

Continua aprendo le impostazioni della colonna 1 e usa il seguente effetto di movimento orizzontale:

• Abilita movimento orizzontale: Sì
• Compensazione iniziale: 0
• Compensazione media:
  • Desktop: 0 (al 65%)
  • Tablet e telefono: 0 (al 93%)
• Scostamento finale:
  • Scrivania: 6
  • Tablet e telefono: 0

Ridimensionamento su e giù

Applica anche un effetto di ridimensionamento su e giù alla colonna.

• Abilita ridimensionamento su e giù: Sì
• Scala iniziale:
  • Desktop: 10%
  • Tablet e telefono: 100%
• Scala media:
  • Desktop: 90%
  • Tablet e telefono: 100%
• Scala finale: 100%

Colonna 2

Movimento orizzontale

Quindi, apri le impostazioni della colonna 2 e utilizza le seguenti impostazioni di movimento orizzontale:

• Abilita movimento orizzontale: Sì
• Compensazione iniziale: 0
• Compensazione media:
  • Desktop: 0 (al 53%)
  • Tablet e telefono: 0 (al 56%)
• Scostamento finale:
  • Desktop: -6 (al 53%)
  • Tablet e telefono: 0 (al 100%)

Dissolvenza in entrata e in uscita

Completa le impostazioni della colonna aggiungendo un effetto di dissolvenza in entrata e in uscita.

• Abilita dissolvenza in entrata e in uscita: Sì
• Opacità iniziale: 100% (al 47%)
• Opacità media:
  • Desktop: 0% (al 47%)
  • Tablet e telefono: 100% (al 47%)
• Opacità finale:
  • Desktop: 0%
  • Tablet e telefono: 100%

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 utilizzare in modo creativo gli effetti di scorrimento di Divi per creare una sezione dell'eroe che collide con le colonne. Non appena i visitatori scorrono, le due diverse colonne e i loro elementi inizieranno a fondersi. Questo, a sua volta, ti consentirà di enfatizzare ancora di più la copia. 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.