Come creare un elenco interattivo su scorrimento con le opzioni adesive di Divi

Le opzioni adesive di Divi ti consentono di aggiungere facilmente interazione alle pagine che crei e progetti. Se stai cercando un modo per menzionare più elementi senza creare semplicemente un elenco statico, ti piacerà questo tutorial. Oggi ti mostriamo come creare un elenco interattivo su scorrimento utilizzando le opzioni permanenti di Divi. Mentre le persone scorrono verso il basso nella sezione, vengono aggiunti diversi elementi all'elenco a sinistra. Questo aiuta a mantenere una visione d'insieme. Potrai anche scaricare il file JSON gratuito!

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!

Crea struttura elemento

Aggiungi nuova sezione

Colore di sfondo

Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Aggiungi un colore di sfondo alla sezione.

• Colore di sfondo: #f2f2f2

Aggiungi riga

Struttura della colonna

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

Dimensionamento

Senza ancora aggiungere moduli, apri le impostazioni di riga e modifica le impostazioni di dimensionamento come segue:

• Larghezza: 100%
• Larghezza massima: 100%

Colore di sfondo della colonna 1

Quindi, apri le impostazioni della colonna 1 e aggiungi un colore di sfondo.

• Colore di sfondo: #f2f2f2

Spaziatura colonna 1

Modifica successivamente le impostazioni di spaziatura della colonna.

• Imbottitura superiore:
  • Tablet: 20px
  • Telefono: 20px
• Imbottitura inferiore:
  • Tablet: 20px
  • Telefono: 20px
• Imbottitura sinistra: 3%
• Imbottitura destra: 3%

Indice Z della colonna 1

E aumenta l'indice z della colonna nella scheda avanzata.

• Indice Z: 12

Aggiungi il modulo di testo n. 1 alla colonna 1

Aggiungi contenuto

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

Impostazioni testo

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

• Carattere di testo: display Playfair
• Peso del carattere del testo: grassetto
• Stile del carattere del testo: corsivo
• Colore del testo: #bfbfbf
• Dimensione del testo:
  • Desktop: 2vw
  • Tablet: 5vw
  • Telefono: 8vw
• Altezza riga di testo: 1em

Aggiungi il modulo di testo n. 2 alla colonna 2

Aggiungi contenuto H3

Aggiungi un altro modulo di testo alla colonna con alcuni contenuti H3 a tua scelta.

Impostazioni testo H3

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

• Intestazione 3 Carattere: Display Playfair
• Intestazione 3 Peso del carattere: grassetto
• Colore testo titolo 3: #000000
• Intestazione 3 Dimensione del testo:
  • Desktop: 3vw
  • Tablet: 10vw
  • Telefono: 12vw

Spaziatura

Aggiungi successivamente un margine superiore e inferiore personalizzato.

• Margine superiore: 2vh
• Margine inferiore: 2vh

Trasforma scala

Quindi, applica alcune impostazioni di scala di trasformazione personalizzate.

• Entrambi: 300%

Trasforma Traduci

E completa le impostazioni del modulo applicando le seguenti impostazioni di traduzione di trasformazione:

• Fondo: 30%

Aggiungi modulo divisore alla colonna 1

Visibilità

L'ultimo modulo di cui abbiamo bisogno nella colonna 1 è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Linea

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

• Colore linea: #000000
• Stile linea: solido
• Posizione della linea: in alto

Dimensionamento

Modifica anche le impostazioni di dimensionamento del modulo.

• Peso del divisore: 4px
• Altezza divisore: 4px

Aggiungi modulo immagine alla colonna 2

Lascia la casella immagine vuota

Nella colonna 2, il primo modulo che aggiungeremo è un modulo immagine. Lascia vuota la casella dell'immagine.

Immagine di sfondo

Usa invece un'immagine di sfondo.

• Dimensione immagine di sfondo: copertina
• Posizione immagine di sfondo: Centro

Spaziatura

E per consentire la visualizzazione dell'immagine di sfondo, modificheremo le impostazioni di spaziatura come segue:

• Margine superiore:
  • Desktop: 15vh
  • Tablet e telefono: 0vh
• Imbottitura superiore: 33vh
• Imbottitura inferiore: 33vh

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto

Il prossimo e ultimo modulo di cui abbiamo bisogno è un modulo di testo sotto il modulo immagine. 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: cabina
• Colore del testo: #000000
• Dimensione del testo:
  • Desktop: 1.2vw
  • Tablet: 2.3vw
  • Telefono: 3.4vw
• Altezza riga di testo: 1,6 em

Spaziatura

Completa le impostazioni del modulo modificando le impostazioni di spaziatura del modulo di conseguenza:

• Imbottitura sinistra:
  • Tablet e telefono: 5%
• Imbottitura destra: 5%

Applica effetti appiccicosi

Trasforma la colonna n. 1 appiccicosa

Ora che tutti gli elementi sono a posto, possiamo iniziare ad applicare le impostazioni permanenti. Apri le impostazioni della colonna 1 e utilizza le seguenti impostazioni permanenti reattive nella scheda Avanzate:

• Posizione appiccicosa: bastone in alto
• Limite appiccicoso inferiore
  • Desktop: Sezione
  • Tablet e telefono: riga
• Offset dagli elementi appiccicosi circostanti:
  • Desktop: Sì
  • Tablet e telefono: No
• Stili di transizione predefiniti e permanenti: Sì

Modulo di testo n. 1 nella colonna n. 1: impostazioni permanenti

Altezza

Ora che la colonna 1 è diventata fissa, possiamo iniziare ad applicare alcune impostazioni permanenti agli elementi all'interno di questa colonna. Inizieremo con l'altezza del primo modulo di testo.

• Altezza: 0px
• Altezza adesiva: Auto

Opacità

Stiamo modificando anche l'opacità.

• Opacità: 0%
• Opacità appiccicosa: 100%

Modulo di testo n. 2 nella colonna n. 1: impostazioni permanenti

Trasforma scala

Successivamente, apriremo il secondo modulo di testo nella colonna 1. Riporta i valori della scala di trasformazione a "100%" in uno stato permanente.

• Appiccicoso Entrambi: 100%

Trasforma Traduci

Modifica anche le impostazioni di traduzione della trasformazione adesiva.

• Fondo appiccicoso: 0%

Transizione

E completa le impostazioni del modulo aumentando la durata della transizione nella scheda Avanzate.

• Transizione: 1000 ms

Modulo divisore: impostazioni permanenti

Larghezza massima

Ultimo ma non meno importante, modificheremo anche la larghezza massima del modulo divisore.

• Larghezza massima: 0px
• Larghezza massima adesiva: 120 px

Clona riga due volte

Una volta completata la prima riga, puoi clonarla due volte.

Cambia tutto il contenuto e le immagini

Assicurati di modificare tutti i contenuti e le immagini 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 le opzioni adesive di Divi. Più specificamente, ti abbiamo mostrato come creare un elenco interattivo su scroll. Mentre le persone scorrono verso il basso il design della sezione, diversi elementi del tuo elenco vengono raccolti sul lato sinistro. Questo fornisce una panoramica strutturata e ti aiuta a creare un design interattivo. Puoi utilizzare questo approccio per qualsiasi tipo di elenco che desideri condividere sulle tue pagine! 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.