Come cambiare gli stili sullo scorrimento senza movimento usando le opzioni adesive di Divi

Se stai cercando uno stile di design pulito quando crei un nuovo sito web, molto probabilmente vorrai trovare un modo per aggiungere ancora una dimensione extra al tuo sito web. Questo tutorial riguarderà tutto questo. Ti mostreremo come utilizzare le opzioni adesive di Divi per modificare gli stili adesivi senza movimento. Nello specifico, ciò significa che non appena i visitatori scorrono oltre una certa parte della tua pagina, gli stili di quella parte cambieranno ma gli elementi rimarranno al loro posto. Questo tipo di effetto è completamente focalizzato sul comportamento dell'utente. Il cambio di stili appiccicosi avviene solo quando le persone lo superano, il che dà un risultato bellissimo. In questo tutorial, ti mostreremo passo dopo passo come arrivarci. Una volta ottenuto l'approccio, sarai in grado di usarlo in qualsiasi tipo di progetto che costruirai! 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 la struttura degli elementi

Aggiungi nuova sezione

Visibilità

Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e nascondi gli overflow nella scheda Avanzate. Ciò contribuirà a garantire che non venga visualizzata la barra di scorrimento orizzontale.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Aggiungi nuova riga

Struttura della colonna

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

Dimensionamento

Senza aggiungere alcun modulo, apri le impostazioni di 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: 2580 px

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Impostazioni colonna 1

Spaziatura

Quindi, apri le impostazioni della colonna 1 e applica alcuni valori di riempimento personalizzati su diverse dimensioni dello schermo.

• Imbottitura superiore:
  • Desktop: 200 px
  • Tablet: 100px
  • Telefono: 80px
• Imbottitura inferiore:
  • Desktop: 200 px
  • Tablet: 100px
  • Telefono: 80px

Indice Z

Aumenta anche l'indice z di questa colonna. Più avanti nel tutorial, creeremo una sovrapposizione orizzontale tra la colonna 1 e 2. Aumenteremo l'indice z per garantire che i moduli della colonna 1 rimangano sopra i moduli della colonna 2.

• Indice Z: 11

Impostazioni colonna 2

Colore di sfondo

Successivamente, aggiungeremo un colore di sfondo alla colonna 2.

• Colore di sfondo: #f9f9f9

Spaziatura

Utilizzeremo anche alcuni valori di riempimento personalizzati su schermi di diverse dimensioni.

• Imbottitura superiore:
  • Desktop: 200 px
  • Tablet: 150px
  • Telefono: 100px
• Imbottitura inferiore:
  • Desktop: 200 px
  • Tablet: 150px
  • Telefono: 100px

Impostazioni colonna 3

Spaziatura

Ultimo ma non meno importante, aggiungeremo anche alcuni valori di riempimento personalizzati alla colonna 3.

• Imbottitura superiore:
  • Desktop: 200 px
  • Tablet: 100px
  • Telefono: 50px
• Imbottitura inferiore:
  • Desktop: 200 px
  • Tablet: 100px
  • Telefono: 50px
• Imbottitura sinistra: 8%
• Imbottitura destra: 8%

Aggiungi modulo di testo alla colonna 1

Aggiungi copia

È ora di aggiungere moduli, iniziando con un modulo di testo nella colonna 1. Aggiungi un numero alla casella del contenuto.

Colore di sfondo

Cambia il colore di sfondo successivo.

• Colore di sfondo: #efefef

Impostazioni testo

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

• Carattere del testo: Montserrat
• Colore del testo: #ffffff
• Dimensione del testo: 100 px
• Altezza riga di testo: 1em
• Allineamento del testo: Centro

Dimensionamento

Modificare la larghezza successiva.

• Larghezza: 150 px

Spaziatura

Quindi, aggiungi un'imbottitura personalizzata superiore e inferiore.

• Imbottitura superiore: 20px
• Imbottitura inferiore: 20px

Posizione

Riposizionare anche il modulo.

• Posizione: Assoluta
• Posizione: in basso a destra
• Scostamento orizzontale: -5%

Aggiungi modulo di testo alla colonna 2

Aggiungi copia H3 e H4

Alla seconda colonna. Lì, aggiungeremo un modulo di testo con alcune copie H3 e H4.

Impostazioni testo

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

• Allineamento del testo: Centro
• Colore del testo: scuro

Impostazioni testo H3

Quindi, modifica le impostazioni del testo H3.

• Intestazione 3 Carattere: Display Playfair
• Intestazione 3 Allineamento del testo: Centro
• Intestazione 3 Dimensione del testo:
  • Desktop: 90 px
  • Tablet: 70px
  • Telefono: 60px

Impostazioni testo H4

Disegna anche il testo H4.

• Intestazione 4 Carattere: Montserrat
• Intestazione 4 Peso del carattere: Leggero

Dimensionamento

Quindi, vai alle impostazioni di dimensionamento e applica una larghezza "100%". Questo aiuterà con il passaggio successivo, che è il riposizionamento del modulo.

• Larghezza: 100%

Posizione

Completa le impostazioni del modulo andando alla scheda Avanzate e modificando le impostazioni di posizione come segue:

• Posizione: Assoluta
• Posizione: in basso a sinistra
• Offset verticale: 20px

Aggiungi modulo di testo alla colonna 3

Aggiungi H5 e contenuto del paragrafo

Alla terza colonna. Aggiungi un modulo di testo con un contenuto H5 e paragrafo a tua scelta.

Impostazioni testo

Passa alla scheda di progettazione del modulo e cambia il carattere nelle impostazioni del testo.

• Carattere del testo: Montserrat

Impostazioni testo H5

Disegna anche il testo H5.

• Titolo 5 Carattere: Montserrat
• Intestazione 5 Peso del carattere: grassetto
• Intestazione 5 Dimensioni del testo:
  • Desktop e tablet: 23px
  • Telefono: 18px

2. Modifiche chiave per creare effetti

Sezione

Rimuovi il riempimento della sezione

Ora che abbiamo posto le basi del nostro design, possiamo iniziare a creare l'effetto di stili adesivi personalizzati che hai potuto vedere nell'anteprima di questo post. Il primo passo per ottenere questo effetto è assicurarsi che i valori di riempimento superiore e inferiore della sezione siano pari a zero. Ciò ci aiuterà a garantire che sia la sezione che la riga inizino e finiscano nello stesso punto. Questo è importante quando aggiungiamo la posizione appiccicosa alla nostra riga nei passaggi successivi. Impostando il limite alla parte inferiore della sezione, non lasciamo spazio per lo spostamento della riga. La riga, tuttavia, diventerà appiccicosa per quei pochi secondi e evidenzierà gli stili appiccicosi modificati nel nostro design.

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

Riga

Rendi la riga appiccicosa

Apri le impostazioni della riga e rendi la riga appiccicosa. Come accennato nel passaggio precedente, è importante assicurarsi che il limite appiccicoso inferiore della nostra riga sia la sezione. Poiché non c'è spazio tra la fine della riga e la fine della sezione, la riga adesiva rimarrà al suo posto.

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

Colore di sfondo riga appiccicosa

È ora di iniziare ad applicare alcuni stili appiccicosi ai nostri elementi! Inizia con il colore di sfondo della riga.

• Colore di sfondo: #161616

Transizione riga

Per garantire una transizione graduale, aumenteremo la durata della transizione nella scheda Avanzate della riga.

• Durata della transizione: 500 ms
• Curva di velocità di transizione: facilità

Colore di sfondo della colonna appiccicosa 2

Quindi, cambieremo il colore di sfondo della colonna adesiva 2.

• Colore di sfondo: #262626

Modulo di testo nella colonna 1

Colore di sfondo appiccicoso

Cambieremo anche il colore di sfondo del modulo di testo nella colonna 1.

• Colore di sfondo: #ddc7b5

Colore del testo appiccicoso

Insieme al colore del testo appiccicoso.

• Colore del testo: #0a0a0a

Dimensionamento appiccicoso

E aumenteremo la larghezza del modulo nelle impostazioni di dimensionamento.

• Larghezza: 105%

Transizione

Garantiamo una transizione fluida modificando la durata della transizione del modulo nella scheda Avanzate.

• Durata della transizione: 500 ms
• Curva di velocità di transizione: facilità

Modulo di testo nella colonna 2

Colore del testo appiccicoso

Successivamente, abbiamo il modulo di testo nella colonna 2. Cambieremo il colore del testo in luce in uno stato appiccicoso.

• Colore del testo: chiaro

Modulo di testo nella colonna 3

Colore del testo appiccicoso

Lo stesso vale per il modulo di testo nella colonna 3.

• Colore del testo: chiaro

3. Clona la sezione per il riutilizzo

Ora che abbiamo completato la prima sezione, incluso l'effetto di modifica degli stili permanenti, possiamo riutilizzare questa sezione tutte le volte che vogliamo clonandola.

Cambia tutto Copia

Assicurati di modificare tutte le copie duplicate.

Aggiungi un margine superiore alla prima sezione e un margine inferiore all'ultima sezione

E, ultimo ma non meno importante, aggiungeremo un margine superiore alla prima sezione e un margine inferiore all'ultima sezione. Questo ci aiuterà a prevenire la transizione immediata prima che le persone inizino a scorrere. Questo è tutto!

• Margine superiore: 200 px

• Margine inferiore: 200 px

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 le opzioni adesive di Divi. Più specificamente, abbiamo utilizzato le opzioni adesive Divi per modificare gli stili adesivi senza aggiungere movimento. Non appena le persone scorrono oltre una certa parte della tua pagina, gli stili del design cambiano, il che evidenzia quella parte specifica della pagina. 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.