Come utilizzare Divi per guidare le persone attraverso diversi passaggi appiccicosi

Quando cerchi di convincere i visitatori a raggiungere il tuo sito web, è fondamentale fornire loro gli incentivi giusti. Quando si pensa agli incentivi, vengono subito in mente inviti all'azione chiari e irresistibili. Ma i CTA sono solitamente l'ultima parte del processo di acquisizione. Molto probabilmente ti costruirai la tua strada mostrando il valore della tua azienda. Uno dei modi migliori per farlo è condividere il tuo approccio e la tua proposta di valore unica. Se stai cercando un modo semplice per progettare il tuo approccio, adorerai questo tutorial. Oggi ti mostreremo come includere diversi passaggi permanenti che cambiano mentre le persone scorrono e leggono. Potrai anche scaricare gratuitamente il file JSON!

Arriviamo 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 Sticky Steps

Per mettere le mani sul layout dei passaggi adesivi gratuiti, 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!

1. Crea un progetto di sezione

Aggiungi sezione normale

Sfondo sfumato

Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni di quella sezione e applica uno sfondo sfumato:

• Colore 1: #ffffff
• Colore 2: #e5e5e5
• Tipo di gradiente: lineare
• Direzione del gradiente: 150 gradi

Immagine di sfondo

Carica un'immagine di sfondo successiva. Puoi trovare quello che stiamo usando in questo tutorial nella cartella di download che puoi trovare all'inizio di questo post. Puoi utilizzare l'immagine di sfondo gratuitamente e senza alcuna restrizione.

• Dimensione immagine di sfondo: adatta
• Posizione immagine di sfondo: in alto a sinistra

Spaziatura

Rimuovi il riempimento inferiore predefinito della sezione aggiungendo "0px".

• Imbottitura inferiore: 0px

Aggiungi nuova riga

Struttura della colonna

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

Colore di sfondo

Senza ancora aggiungere moduli, apri le impostazioni della riga e cambia il colore di sfondo.

• Colore di sfondo: rgba (130,100,239,0,09)

Dimensionamento

Passa alla scheda Progettazione della riga e modifica le impostazioni di dimensionamento di conseguenza:

• Equalizza le altezze delle colonne: Sì
• Allineamento righe: Centro

Spaziatura

Applica anche alcuni valori di spaziatura personalizzati.

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

Frontiera

Quindi, vai alle impostazioni del bordo e usa alcuni angoli arrotondati.

• Tutti gli angoli: 10px

straripamenti

Stiamo modificando anche gli overflow di riga in visibili. Ciò assicurerà che tutto ciò che supera il contenitore di righe non venga nascosto.

• Overflow orizzontale: visibile
• Overflow verticale: visibile

Impostazioni colonna 1

Spaziatura

Quindi, apri le impostazioni della colonna 1 e aggiungi un'imbottitura superiore e inferiore personalizzata.

• Imbottitura superiore: 5%
• Imbottitura inferiore: 5%

Impostazioni colonna 2

Sfondo sfumato

Andando avanti, aggiungeremo uno sfondo sfumato alla colonna 2.

• Colore 1: #7b47ff
• Colore 2: #6929aa
• Tipo di gradiente: lineare
• Direzione del gradiente: 158 gradi

Spaziatura

Aggiungeremo anche un riempimento personalizzato a quella colonna.

• Imbottitura superiore: 5%
• Imbottitura inferiore: 5%
• Imbottitura sinistra: 5%
• Imbottitura destra: 5%

Frontiera

Insieme ad alcuni angoli arrotondati.

• Tutti gli angoli: 10px

Trasforma scala

E aumenteremo le dimensioni della colonna nelle impostazioni di trasformazione applicando i seguenti valori di scala di trasformazione:

• Entrambi: 107%

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto H3

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

Impostazioni testo H3

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

• Intestazione 3 Carattere: Poppins
• Colore testo titolo 3: #6929aa
• Titolo 2: Dimensione testo: 35px
• Intestazione 3 spaziatura lettere: -1px

Aggiungi modulo divisore alla colonna 1

Visibilità

Successivamente, inseriremo un modulo divisore nella colonna 1. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Linea

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

• Colore linea: #f5ca4e

Dimensionamento

Modifica anche le impostazioni di dimensionamento.

• Peso del divisore: 6px
• Larghezza: 20%
• Altezza: 6px

Frontiera

Completa le impostazioni del modulo includendo alcuni angoli arrotondati nelle impostazioni del bordo.

• Tutti gli angoli: 20px

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto

Nella colonna 2, l'unico modulo di cui abbiamo bisogno è un modulo di testo con un contenuto descrittivo.

Impostazioni testo

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

• Carattere di testo: display Playfair
• Dimensione del testo: 16px
• Altezza riga di testo: 2.1em

Spaziatura

Completa le impostazioni del modulo aggiungendo alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 5%
• Imbottitura inferiore: 5%
• Imbottitura sinistra: 5%
• Imbottitura destra: 5%

Clona l'intera riga tutte le volte che è necessario

Una volta completata la prima riga, puoi clonarla tutte le volte che vuoi, a seconda di quante informazioni vuoi condividere sul tuo primo passaggio.

Cambia tutto Copia

Assicurati di modificare tutte le copie in righe duplicate.

2. Aggiungi la barra della riga di passaggio alla parte inferiore della sezione

Aggiungi nuova riga

Struttura della colonna

Ora che abbiamo tutte le righe esplicative a posto, possiamo aggiungere la nostra barra delle righe adesive. Aggiungi una nuova riga utilizzando la seguente struttura di colonne:

Sfondo sfumato

Apri le impostazioni della riga e usa uno sfondo sfumato.

• Colore 1: #ffdf51
• Colore 2: #e5ac49
• Tipo di gradiente: lineare
• Direzione del gradiente: 150 gradi

Dimensionamento

Passa alla scheda Design della riga e modifica le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì
• Allineamento righe: Centro

Spaziatura

Successivamente, applica alcuni valori di spaziatura personalizzati.

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

Frontiera

Quindi, vai alle impostazioni del bordo e aggiungi alcuni angoli arrotondati.

• Tutti gli angoli: 10px

Scatola ombra

Applica anche la seguente ombra della scatola:

• Forza sfocatura ombra scatola: 50 px
• Colore ombra: rgba(0,0,0,0.13)

straripamenti

Quindi, vai alla scheda Avanzate e imposta gli overflow su visibili.

• Overflow orizzontale: visibile
• Overflow verticale: visibile

Spaziatura colonna 2

Quindi, apri le impostazioni della colonna 2 e utilizza un'imbottitura superiore e inferiore personalizzata.

• Imbottitura superiore: 1%
• Imbottitura inferiore: 1%

Spaziatura colonna 3

Stiamo aggiungendo anche un'imbottitura superiore e inferiore personalizzata alla colonna 3.

• Imbottitura superiore: 2%
• Imbottitura inferiore: 2%

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

È ora di aggiungere moduli alla nostra barra delle righe adesive. Aggiungi un modulo di testo alla colonna 1 e menziona il passaggio nella casella del contenuto.

Sfondo sfumato

Quindi, applica uno sfondo sfumato.

• Colore 1: #7b47ff
• Colore 2: #6929aa
• Tipo di gradiente: lineare
• Direzione del gradiente: 158 gradi

Impostazioni testo

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

• Carattere del testo: Poppins
• Peso del carattere del testo: grassetto
• Colore del testo: #ffffff
• Dimensione del testo: 27px

Dimensionamento

Apportare anche alcune modifiche alle impostazioni di dimensionamento.

• Larghezza: 60%
• Allineamento del modulo: Centro

Spaziatura

Quindi, aggiungi un'imbottitura personalizzata superiore e inferiore alle impostazioni di spaziatura.

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

Frontiera

Aggiungi alcuni angoli arrotondati alle impostazioni del bordo successivo.

• Tutti gli angoli: 10px

Scatola ombra

Stiamo anche usando un'ombra sottile della scatola.

• Colore ombra: rgba(0,0,0,0.3)

Trasforma Traduci

E completeremo le impostazioni del modulo riposizionando leggermente il modulo utilizzando le impostazioni di conversione di trasformazione di Divi.

• A destra: -20px

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto H2

Nella colonna 2, stiamo aggiungendo un modulo di testo con alcuni contenuti H2 che descrivono il passaggio in cui ci troviamo.

Impostazioni testo H2

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

• Intestazione 2 Carattere: Poppins
• Intestazione 2 Peso del carattere: medio
• Intestazione 2 Allineamento del testo:
  • Desktop: Sinistra
  • Tablet e telefono: Centro
• Colore testo titolo 2: #6d40ed
• Intestazione 2 Spaziatura lettere: -1px

Spaziatura

Aggiungi anche un'imbottitura personalizzata in alto e in basso.

• Imbottitura superiore: 5%
• Imbottitura inferiore: 5%

Aggiungi modulo di testo alla colonna 3

Aggiungi contenuto

Alla prossima e ultima colonna. Aggiungi un modulo di testo con un contenuto descrittivo.

Impostazioni testo

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

• Carattere di testo: display Playfair
• Peso del carattere del testo: grassetto
• Colore del testo: rgba (109,64,237,0,46)
• Dimensione del testo: 20px
• Allineamento del testo:
  • Desktop: Sinistra
  • Tablet e telefono: Centro

3. Applica effetti appiccicosi alla barra della riga di passaggio

Impostazioni riga appiccicosa

Ora che il nostro design appiccicoso della barra della riga è stato completato, è il momento di farlo aderire al fondo. Apri le impostazioni della riga, vai alla scheda Avanzate e applica le seguenti impostazioni di posizione permanente:

• Posizione appiccicosa: attaccati al fondo
• Offset fondo appiccicoso: 1px
• Limite permanente superiore: sezione
• Offset da elementi appiccicosi circostanti: Sì
• Stili di transizione predefiniti e permanenti: Sì

Filtro righe adesive

In uno stato predefinito, non vogliamo che la barra delle righe sia visibile. Una volta che è diventato appiccicoso, tuttavia, vogliamo che appaia. Per fare in modo che ciò accada, modificheremo il filtro di opacità nelle impostazioni dei filtri:

• Predefinito: 0%
• Appiccicoso: 100%

4. Riutilizza l'intera sezione per i passaggi successivi

Clona la sezione tutte le volte necessarie

Ora che la nostra prima sezione, dedicata al passaggio n. 1, è stata creata, possiamo riutilizzare l'intera sezione in base al numero di passaggi che abbiamo.

Cambia tutta la copia nelle sezioni duplicate

Assicurati di modificare tutte le copie nelle sezioni duplicate. Questo è tutto!

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 il design dell'approccio del tuo sito web. Più specificamente, ti abbiamo mostrato come utilizzare le opzioni permanenti di Divi per creare diverse barre di passaggi adesivi che aiuteranno i tuoi visitatori a navigare attraverso le diverse parti del tuo approccio. 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.