Come lampeggiare progressivamente i passaggi di un processo con gli effetti di scorrimento di Divi
Pubblicato: 2020-03-01Le aziende spesso istruiscono i loro visitatori sui loro servizi offrendo un'utile illustrazione dei passaggi del loro processo. Ad esempio, un'agenzia di web design può mostrare il proprio processo di sviluppo web o una panetteria può presentare i passaggi per creare il cupcake perfetto.
Con Divi, possiamo portare i "passaggi di un processo" a un livello completamente diverso utilizzando gli effetti di scorrimento incorporati. In questo tutorial, ti mostreremo un modo semplice per visualizzare progressivamente i passaggi di un processo mentre l'utente scorre la pagina. Ciò darà al design una bella spinta interattiva che enfatizza in modo creativo il messaggio previsto.
Sbirciata
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, 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 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.
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!
Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file JSON nel Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Come lampeggiare progressivamente i passaggi di un processo con gli effetti di scorrimento di Divi
Per creare il nostro layout per visualizzare i passaggi di un processo sullo scorrimento, dobbiamo iniziare con l'aggiunta di una nuova riga.
Creazione della riga a quattro colonne
Per iniziare, aggiungi una riga di quattro colonne alla sezione.
Prima di iniziare ad aggiungere moduli/contenuti alle colonne, apri le impostazioni per la riga e aggiorna quanto segue:
- Larghezza grondaia: 2
- Larghezza massima: 80%
Abbastanza semplice finora. Ora iniziamo ad aggiungere alcuni contenuti.
Aggiunta di contenuto (passaggi) a ciascuna colonna
Poiché questo design presenta un effetto di scorrimento che visualizza i passaggi di un processo, ciascuna delle nostre colonne conterrà uno dei passaggi. La colonna 1 conterrà il contenuto per illustrare il passaggio 1. La colonna 2 conterrà il contenuto per il passaggio 2. E così via.
Aggiungi modulo di testo alla colonna 1
Aggiungi un nuovo modulo di testo alla colonna 1.
Contenuto e design del modulo di testo
Quindi aggiorna il contenuto del testo come segue:
Apri la scheda Progettazione e aggiorna le seguenti impostazioni:
- Carattere del testo: Lato
- Peso del carattere del testo: grassetto
- Colore del testo del testo: #fc6d71
- Carattere titolo 2: Oswald
- Intestazione 2 Peso del carattere: Leggero
- Titolo 2: Dimensione testo: 32px
- Intestazione 2 Spaziatura lettere: 1px
- Altezza riga intestazione 2: 1,3 em
- Margine: 0px in basso
- Imbottitura: 10% sopra, 10% sotto
- Larghezza bordo: 1px
- Colore del bordo: rgba (166,166,166,0.16)
Aggiungi modulo immagine alla colonna 1
Una volta che il modulo di testo è a posto, aggiungi un modulo immagine sotto il modulo di testo nella colonna 1.
Quindi aggiorna il margine dell'immagine come segue:
Copia e incolla il contenuto della colonna 1
Per accelerare il processo di progettazione, possiamo utilizzare la selezione multipla per selezionare i due moduli nella colonna 1 e quindi incollarli in ciascuna delle restanti quattro colonne.
Aggiorna contenuto per moduli duplicati
Una volta che i moduli duplicati sono a posto, torna indietro e aggiorna il contenuto del testo e le immagini per riflettere ciascuno dei quattro passaggi del processo.
Una volta fatto, il tuo design dovrebbe assomigliare a questo.
Aggiunta di effetti di scorrimento a ciascuna colonna
Ora siamo pronti per aggiungere gli effetti di scorrimento per far lampeggiare ogni fase del processo mentre l'utente scorre la pagina. Invece di aggiungere effetti di scorrimento a ciascuno dei moduli, aggiungeremo l'effetto di scorrimento a ciascuna colonna in modo che l'effetto venga applicato a tutti i moduli nel contenuto.
Per creare l'effetto di scorrimento lampeggiante, utilizzeremo l'effetto di scorrimento Dissolvenza in entrata e in uscita per ogni colonna. L'idea è di iniziare l'effetto iniziando con lo 0% di opacità, continuare con il 100% di opacità e poi tornare allo 0%.
Effetti di scorrimento colonna 1
Nelle impostazioni della riga, apri le impostazioni per la colonna 1 e aggiungi il seguente effetto di scorrimento:
Nella scheda delle opzioni Dissolvenza in entrata e in uscita:
- Abilita dissolvenza in entrata e in uscita: SI
- Opacità iniziale: 0% (al 20% di visualizzazione)
- Opacità media: 100% (al 25%-45% viewport)
- Opacità finale: 0% (al 50% di visualizzazione)
Effetti di scorrimento colonna 2
Apri le impostazioni per la colonna 2 e aggiungi il seguente effetto di scorrimento:
Nella scheda delle opzioni Dissolvenza in entrata e in uscita:
- Abilita dissolvenza in entrata e in uscita: SI
- Opacità iniziale: 0% (al 35% di visualizzazione)
- Opacità media: 100% (al 40% -60% di viewport)
- Opacità finale: 0% (al 65% di visualizzazione)
Effetti di scorrimento colonna 3
Effetti di scorrimento colonna 4
Aggiunta di un'intestazione
Come tocco finale, possiamo aggiungere un'intestazione al nostro layout. Per fare ciò, aggiungi una nuova riga a una colonna sotto la riga corrente.
Quindi aggiungi un modulo di testo alla riga con il seguente contenuto:
Nella scheda Progettazione, aggiorna quanto segue:
- Allineamento del testo: Lato
- Intestazione 2 Peso del carattere: Leggero
- Stile carattere titolo 2: TT
- Colore testo titolo 2: #fc6d71
- Titolo 2: Dimensione testo: 70 px (desktop), 40 px (tablet), 24 px (telefono)
- Intestazione 2 Spaziatura lettere: 0,5 em
Risultato finale
Per vedere il risultato su una pagina live, dovrai aggiungere dello spazio aggiuntivo sopra e sotto la sezione per vedere l'effetto di scorrimento dall'inizio alla fine. Un modo semplice per farlo è aggiungere il margine superiore e inferiore alla sezione.
Ecco il risultato.
Pensieri finali
Illustrare i passaggi di un processo non deve essere limitato a un'immagine oa un grafico statico. Con l'effetto di scorrimento di Divi, puoi dare vita all'illustrazione visualizzando progressivamente ogni passaggio mentre l'utente scorre la pagina. E, poiché l'effetto di scorrimento viene aggiunto a ciascuna colonna, puoi facilmente modificare i moduli/contenuto all'interno di ciascuna colonna senza interrompere la funzionalità. Si spera che questa sia una tecnica utile da aggiungere alla tua cassetta degli attrezzi di progettazione.
Non vedo l'ora di sentirti nei commenti.
Saluti!