Come impilare le righe sullo scorrimento con le opzioni adesive di Divi

Da quando sono uscite le opzioni adesive di Divi, ti abbiamo mostrato come utilizzare le diverse funzionalità durante le build del tuo sito Web, in particolare all'interno delle intestazioni. Ma ci sono un sacco di modi in cui puoi utilizzare le opzioni adesive per migliorare l'esperienza utente che le persone hanno sul tuo sito web e far brillare il tuo sito web. Nel tutorial di oggi, ad esempio, ti mostreremo come impilare le righe sullo scorrimento con le opzioni permanenti di Divi. Non appena una riga tocca la parte superiore della finestra, inizierà a scendere sotto la riga successiva, il che dà un effetto di sovrapposizione che sembra bello. Ricreeremo il design da zero e potrai anche scaricare gratuitamente il file JSON della sezione!

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 sovrapposizione delle righe

Per mettere le mani sul layout di sovrapposizione delle righe 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 il concetto della prima riga

Aggiungi nuova sezione

Spaziatura

Nella prima parte di questo tutorial, inizieremo a gettare le basi della nostra prima riga. Una volta che abbiamo finito di modellare gli elementi nella prima riga, possiamo riutilizzarli interamente per creare l'effetto di sovrapposizione delle righe. Aggiungi una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e applica alcuni valori di riempimento personalizzati su diverse dimensioni dello schermo.

• Imbottitura superiore:
  • Desktop: 100 px
  • Tablet: 40px
  • Telefono: 25px
• Imbottitura inferiore:
  • Desktop: 100 px
  • Tablet: 40px
  • Telefono: 25px

Aggiungi nuova riga

Struttura della colonna

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

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni di riga e applica le seguenti impostazioni di dimensionamento:

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

Spaziatura

Quindi, rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Impostazioni colonna 1

Colore di sfondo

Quindi, apri le impostazioni della colonna 1 e applica un colore di sfondo a tua scelta.

• Colore di sfondo: #2b343b

Immagine di sfondo

Usa anche un'immagine di sfondo. Se desideri utilizzare quelli visualizzati in questo tutorial, scarica la cartella compressa all'inizio del tutorial e carica le immagini di sfondo nella tua libreria multimediale.

• Dimensione immagine di sfondo: adatta

Spaziatura

Passa alla scheda Design della colonna e applica i seguenti valori di riempimento su schermi di diverse dimensioni:

• Imbottitura superiore:
  • Desktop: 25%
  • Compressa: 40%
  • Telefono: 50%
• Imbottitura inferiore:
  • Desktop: 25%
  • Compressa: 40%
  • Telefono: 50%
• Imbottitura sinistra: 5%
• Imbottitura destra: 5%

Impostazioni colonna 2

Colore di sfondo

Quindi, apri la seconda colonna e usa un colore di sfondo anche lì.

• Colore di sfondo: #394751

Spaziatura

Insieme ad alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 13%
• Imbottitura fondo: 13%
• Imbottitura sinistra: 8%
• Imbottitura destra: 8%

Scatola ombra

E un'ombra di scatola.

• Posizione verticale dell'ombra del riquadro: 20 px
• Forza sfocatura ombra scatola: 50 px
• Colore ombra: rgba(0,0,0,0.14)

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto H2

È ora di aggiungere moduli, iniziando con un modulo di testo nella colonna 1. Inserisci alcuni contenuti H2 di tua scelta all'interno della casella del contenuto.

Impostazioni testo H2

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

• Intestazione 2 Carattere: Alata
• Intestazione 2 Peso del carattere: grassetto
• Intestazione 2 Allineamento del testo: Centro
• Colore testo titolo 2: #ffffff
• Intestazione 2 Dimensione del testo:
  • Desktop: 200 px
  • Tablet: 150px
  • Telefono: 100px
• Intestazione 2 Spaziatura lettere: -1px

Posizione

Riposiziona anche il modulo nella scheda Avanzate.

• Posizione: Assoluta
• Posizione: in alto a sinistra
• Scostamento verticale: 2%
• Scostamento orizzontale: 2%

Aggiungi modulo pulsante alla colonna 1

Aggiungi copia

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

Impostazioni dei pulsanti

Passa alla scheda di progettazione del modulo e modella il pulsante di conseguenza:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 20 px
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #83a5bf
• Larghezza bordo pulsante: 0px
• Raggio del bordo del pulsante: 1px
• Carattere pulsante: Alata

Spaziatura

Aggiungi successivamente alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 20px
• Imbottitura inferiore: 20px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Posizione

E riposiziona il modulo nella scheda Avanzate.

• Posizione: Assoluta
• Posizione: in basso a destra

Aggiungi il modulo di testo n. 1 alla colonna 2

Aggiungi contenuto H3

Alla seconda colonna. Aggiungi un primo modulo di testo con alcuni contenuti H3 a tua scelta.

Impostazioni testo H3

Passa alla scheda di progettazione del modulo e applica i seguenti stili di testo H3:

• Intestazione 3 Carattere: Alata
• Intestazione 3 Peso del carattere: grassetto
• Colore testo titolo 3: #ffffff
• Intestazione 3 Dimensioni del testo: 40 px

Aggiungi modulo divisore alla colonna 2

Visibilità

Sotto il primo modulo di testo, aggiungeremo un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Impostazioni linea

Passa alla scheda di progettazione del modulo e cambia il colore della linea.

• Colore linea: #f3f0ee

Dimensionamento

Modifica anche le impostazioni di dimensionamento.

• Peso del divisore: 5px
• Larghezza: 19%
• Altezza: 5px

Spaziatura

E completa le impostazioni del modulo aggiungendo un margine inferiore alle impostazioni di spaziatura.

• Margine inferiore: 20%

Aggiungi il modulo di testo n. 2 alla colonna 2

Aggiungi contenuto

Aggiungi un altro modulo di testo proprio sotto il modulo divisore. Inserisci alcuni contenuti descrittivi a tua scelta.

Impostazioni testo

Stile il testo del modulo di conseguenza:

• Carattere del testo: Montserrat
• Colore del testo: #ffffff
• Dimensione del testo:
  • Desktop: 15px
  • Tablet e telefono: 14px
• Altezza riga di testo: 2em

2. Trasforma la riga in un elemento impilabile

Impostazioni riga

Indice Z

Ora che abbiamo posizionato la nostra prima riga, è il momento di applicare le impostazioni di sovrapposizione delle righe adesive. Applicheremo queste impostazioni prima di clonare la nostra riga per il riutilizzo in modo che l'effetto di impilamento avvenga automaticamente. Apri le impostazioni della riga, vai alla scheda Avanzate e applica l'indice z di 1. Questo indice z ci aiuterà a garantire che ogni riga successiva sia posizionata sopra quella precedente.

• Indice Z: 1

Impostazioni permanenti

Quindi, andremo alle impostazioni degli effetti di scorrimento e applicheremo le seguenti impostazioni permanenti:

• Posizione appiccicosa:
  • Desktop: resta in alto
  • Tablet e telefono: non attaccare
• Limite appiccicoso inferiore: sezione
• Offset dagli elementi appiccicosi circostanti: No

3. Riutilizza la riga impilata nella stessa sezione

Clona riga x3

Ora che le nostre opzioni permanenti sono state applicate, possiamo riutilizzare l'intera riga fino a tutte le volte che vogliamo.

Modifiche generali

Cambia tutto Copia

Assicurati di cambiare la copia in ogni duplicato

Cambia i colori e le immagini di sfondo della colonna 1

Insieme ai colori e alle immagini di sfondo della colonna 1.

• Duplicato 1: #edc1b6
• Duplicato 2: #efe7e2
• Duplicato 3: #f7f6f4

Cambia i colori di sfondo della colonna 2

Stiamo usando colori diversi anche per la seconda colonna di ogni riga duplicata.

• Duplicato 1: #ffd1c1
• Duplicato 2: #fff8f2
• Duplicato 3: #fffaf7

Cambia i colori di sfondo dei pulsanti

Successivamente, cambieremo i colori di sfondo del pulsante in ogni riga duplicata.

• Duplicato 1: #c18a7a
• Duplicato 2: #bab5b2
• Duplicato 3: #c98f7d

Modifiche alle righe con colori di sfondo chiari

Cambia i colori del testo

E, ultimo ma non meno importante, cambieremo il colore del testo per ogni modulo di testo nelle righe con un colore di sfondo più chiaro. Questo è tutto!

• Colore del testo: #2b343b

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 all'interno del design della tua pagina. Più specificamente, ti abbiamo mostrato come impilare le righe per creare un design accattivante e un'esperienza utente. Abbiamo ricreato da zero un bellissimo esempio di design e anche tu sei stato in grado di scaricare gratuitamente il file JSON! 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.