4 pulsanti di scorrimento animati per la sezione Hero del tuo sito Divi (e come crearli)
Pubblicato: 2019-08-08I pulsanti di scorrimento animati hanno un compito semplice ma importante di catturare l'attenzione degli utenti e guidarli verso il basso nella tua pagina web. Questi tipi di pulsanti si trovano normalmente above the fold in modo che un visitatore possa semplicemente fare clic sul pulsante senza dover scorrere alla successiva sezione importante della pagina web. In effetti, Divi ha questa funzione di pulsante di scorrimento integrata nel modulo di intestazione a larghezza intera.
In questo tutorial, ti mostrerò come creare pulsanti di scorrimento animati completamente personalizzati in Divi. Quindi, se stai cercando un'alternativa creativa al pulsante di scorrimento integrato di Divi nel modulo di intestazione a larghezza intera, questi design animati di pulsanti di scorrimento ti aiuteranno a indirizzarti nella giusta direzione (letteralmente).
Sbirciata
Ecco una rapida occhiata ai progetti che costruiremo insieme.
Scarica GRATIS il layout dei pulsanti di scorrimento animati
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!
Iscriviti al nostro canale Youtube
Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.
Andiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai avere quanto segue:
- Il tema Divi installato e attivo
- Una nuova pagina creata per costruire da zero sul front-end (visual builder)
- Immagini da utilizzare per contenuti fittizi
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Costruire la sezione dell'intestazione
Prima di iniziare a progettare i pulsanti di scorrimento animati, dobbiamo impostare la nostra sezione di intestazione fittizia. Dal momento che ci concentreremo maggiormente sull'ottenimento dei design animati dei pulsanti di scorrimento, manterremo il design dell'intestazione semplice con uno sfondo scuro. Una volta fatto, possiamo duplicare la sezione per affrontare ogni nuovo design del pulsante di scorrimento.
Per iniziare, crea una sezione regolare con una riga di una colonna.
Quindi, prima di aggiungere un modulo, apri le impostazioni della sezione e aggiungi uno sfondo scuro come segue:
Colore di sfondo: #222222
Qualsiasi sfondo scuro funzionerà.
Aggiungi il testo dell'intestazione
Per creare il testo dell'intestazione fittizia, aggiungi un nuovo modulo di testo alla riga di una colonna.
Quindi aggiorna il contenuto del corpo con un'intestazione h1 appena sopra il testo del paragrafo predefinito.
<h1>scroll button animation</h1> <p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
Quindi aggiorna le impostazioni di progettazione come segue:
Carattere del testo: Karla
Testo Allineamento del testo: Centro
titolo Dimensione testo: 5vw
Colore del testo: chiaro
Questo sarà il design della sezione di base che utilizzeremo per i nostri diversi pulsanti di scorrimento animati.
Pulsante di scorrimento animato Design n. 1: testo verticale con animazione a rimbalzo lento
Con il nostro design della sezione di base in atto, siamo pronti per aggiungere il nostro primo pulsante di scorrimento animato. Questo pulsante di scorrimento è costituito da un modulo blurb che avrà un'icona sul lato destro. Quindi il testo e l'icona verranno ruotati verticalmente in modo che l'icona della freccia sia rivolta verso il basso. Successivamente aggiungeremo l'animazione di rimbalzo con una durata lenta.
Ecco come farlo.
Innanzitutto, aggiungi una nuova riga a una colonna appena sotto la nostra riga contenente il testo dell'intestazione.
Quindi aggiungi un modulo blurb alla riga.
Sotto le impostazioni del blurb, elimina il contenuto del corpo predefinito e aggiungi quanto segue:
Titolo: scroll
Usa l'icona: S
Icona: freccia destra (vedi screenshot)
Quindi aggiorna le impostazioni di progettazione come segue:
Colore icona: #ffffff
Posizionamento immagine/icona: a sinistra
Usa la dimensione del carattere dell'icona: S
Dimensione carattere icona: 50 px
Stile carattere titolo: TT
Colore del testo del titolo: #ffffff
Dimensione del testo del titolo: 14px
Spaziatura delle lettere del titolo: 3px
Altezza della riga del titolo: 50 px (uguale alla dimensione del carattere dell'icona)
Successivamente, dobbiamo dare al nostro blurb una larghezza impostata e ruotarlo verticalmente come segue:
larghezza: 132px
Allineamento del modulo: centro
Trasforma Ruota asse Z: 90 gradi
Ora tutto ciò che dobbiamo fare è invertire l'ordine dei contenuti del blurb in modo che l'icona della freccia si trovi a destra del blurb anziché a sinistra. Ciò farà visualizzare la freccia sotto il testo verticale come previsto. Per fare ciò, dobbiamo aggiungere il seguente CSS personalizzato all'elemento principale:
direction: rtl;
Aggiunta dell'animazione a impulsi lenti
Per aggiungere l'animazione, aggiorna quanto segue:
Stile di animazione: rimbalzo
Direzione animazione: Giù
Durata dell'animazione: 5000 ms
Ritardo animazione: 400 ms
Animazione immagine/icona: da sinistra a destra
Risultato finale
Ora diamo un'occhiata al risultato finale per il progetto #1.
Pulsante di scorrimento animato Design n. 2: Animazione del testo di selezione verticale
Questo prossimo design si basa sul design n. 1 in quanto manterremo il pulsante di scorrimento del testo verticale creato utilizzando il modulo blurb. La differenza sarà l'animazione. Per questo design aggiungeremo un'animazione diapositiva che inizia con il pulsante di scorrimento nascosto sopra il contenitore della riga e termina con il pulsante nascosto sotto la riga. Con l'animazione in loop, questo creerà un effetto di animazione di selezione del testo che attirerà l'attenzione dell'utente.
Ecco come farlo.
Per prima cosa duplica l'intera sezione del disegno #1.
Aggiorna le impostazioni della riga 2
Quindi, aggiorna la riga della sezione contenente il modulo blurb/pulsante di scorrimento come segue:
Overflow orizzontale: nascosto
Overflow verticale: nascosto
Aggiorna le impostazioni del modulo Blurb
Per creare l'animazione di selezione, per prima cosa dobbiamo usare la trasformazione traduci per spostare il testo blurb sotto il contenitore della riga (nascosto alla vista). Questa sarà la posizione del testo alla fine dell'animazione. Aggiorna quanto segue:
Trasforma Trasla asse Y: 115px
Quindi, aggiungi le seguenti impostazioni di animazione:
Stile di animazione: diapositiva
Direzione animazione: Giù
Durata dell'animazione: 4000 ms
Intensità animazione: 195%
Opacità iniziale dell'animazione: 100%
Curva di velocità di animazione: lineare
Ripetizione animazione: loop
Risultato finale
Ora diamo un'occhiata al risultato finale per il disegno n.
Pulsante di scorrimento animato Design n. 3: scheda Freccia con animazione di scorrimento verso il basso ritardata
Per questo prossimo design, combineremo un modulo di testo e un modulo blurb per creare un design unico della scheda freccia.
Per questo design inizieremo con il design della sezione di intestazione di base. Quindi puoi duplicare la sezione del disegno n. 3 duplicato e quindi eliminare il modulo blurb nella riga 2.
Quindi aggiungi un modulo di testo alla riga di una colonna direttamente sotto la prima riga.
Quindi aggiorna il contenuto del corpo con la parola "scorri".
Quindi aggiorna le impostazioni di progettazione come segue:
Colore di sfondo: #ffffff
Colore del testo del testo: #222222
Allineamento del testo: centro
Larghezza: 50px
Allineamento del modulo: centro
Margine: 0px in basso
Imbottitura: 20px in alto, 20px in basso
Angoli arrotondati 5px in basso a sinistra, 5px in basso a destra
Aggiungi l'icona Blurb
Ora che il modulo di testo è a posto, dobbiamo creare l'icona blurb direttamente sotto di esso per completare il design della scheda freccia. Per fare ciò, aggiungi un nuovo modulo blurb sotto il modulo di testo.
Quindi elimina il titolo predefinito e il testo del corpo. Quindi aggiungi l'aggiornamento quanto segue:
Usa l'icona: S
Icona: triangolo freccia in basso (vedi screenshot)
Quindi aggiorna le impostazioni come segue:
Colore icona: #ffffff
Margine: -36px in alto, 0px in basso
Questo margine negativo collegherà la freccia al modulo di testo per un bel design della scheda freccia.
Quindi aggiungi il seguente css all'immagine blurb per eliminare un margine non necessario sotto l'icona.
Blurb immagine CSS:
margin-bottom: 0px;
Riga 2 Impostazioni e animazione
Poiché vogliamo aggiungere la stessa animazione a entrambi i moduli che compongono il design del pulsante di scorrimento, dovremo aggiungere l'animazione alla riga che li contiene. Aggiorna l'impostazione per la riga come segue:
Larghezza massima: 100 px
Imbottitura: 0px in alto, 0px in basso
Stile di animazione: diapositiva
Direzione animazione: Giù
Durata dell'animazione: 1200 ms
Colore di sfondo della riga 1 e ombra del riquadro
Il tocco finale di questo design consiste nell'aggiungere un colore di sfondo alla prima riga direttamente sopra la riga del pulsante di scorrimento. E aggiornando l'indice Z di quella riga, consentiremo all'animazione del pulsante di scorrimento di apparire come se irrompesse attraverso l'intestazione.
Apri le impostazioni per la riga 1 come segue:
Colore di sfondo: #222222
Indice Z: 10
Box Shadow: vedi screenshot
Posizione verticale dell'ombra del riquadro: 80 px
Forza sfocatura ombra scatola: 22 px
Forza di diffusione dell'ombra della scatola: -70px
Colore ombra: #222222 (assicurati che corrisponda al colore di sfondo)
Risultato finale
Ora controlla il risultato finale.
Pulsante di scorrimento animato Design n. 4: Animazione di scorrimento del mouse
Per quest'ultimo pulsante di scorrimento animato, creeremo un'animazione di scorrimento del mouse combinando un modulo di testo e un modulo blurb.
Ecco come farlo.
Per iniziare puoi utilizzare la sezione di intestazione di base. Quindi aggiungi una nuova riga sotto la riga 1.
Aggiungi il modulo Blurb
Quindi, aggiungi un modulo blurb alla riga. Quindi elimina il titolo predefinito e il testo del corpo.
Successivamente, aggiorna l'icona come segue:
Usa l'icona: S
Icona: cerchio (vedi screenshot)
Quindi aggiorna le impostazioni del design del blurb come segue:
Colore icona: #ffffff
Usa la dimensione del carattere dell'icona: S
Dimensione carattere icona: 15px
Stile di animazione: diapositiva
Direzione animazione: Giù
Durata dell'animazione: 1200 ms
Ripetizione animazione: loop
Animazione immagine/icona: nessuna animazione
Quindi aggiungi il seguente CSS personalizzato all'immagine Blurb:
margin-bottom: 0px;
Aggiungi il modulo di testo
Quindi, aggiungi un nuovo modulo di testo direttamente sotto il modulo blurb. Quindi aggiorna il corpo del testo con la parola "scorri".
Quindi aggiorna le seguenti impostazioni di testo:
Colore del testo del testo: #ffffff
Allineamento del testo: centro
Larghezza: 90 px
Margine: 10px in alto, -30px a sinistra
Aggiorna le impostazioni della riga 2
Ora aggiorna le impostazioni della riga come segue:
Larghezza: 30px
Altezza: 60 px
Angoli arrotondati: 16px
Larghezza bordo: 1px
Colore bordo: #ffffff
Stile bordo: solido
Overflow orizzontale: visibile
Overflow verticale: visibile
Il risultato finale
Ora diamo un'occhiata al risultato finale:
Aggiunta della funzionalità di collegamento di ancoraggio
I collegamenti di ancoraggio sono quei collegamenti che passano a diverse sezioni di una pagina. Sono spesso utilizzati in siti Web di una pagina. Possiamo utilizzare lo stesso concetto per aggiungere un collegamento di ancoraggio ai nostri pulsanti di scorrimento in modo che spostino la pagina nella sezione desiderata. Per aggiungere la funzionalità di collegamento di ancoraggio ai pulsanti di scorrimento animati, ci sono due cose principali che devi fare.
- Devi aggiungere un ID CSS alla sezione o alla riga a cui vuoi passare
- È necessario aggiungere un collegamento di ancoraggio con lo stesso ID CSS al pulsante di scorrimento
Ecco come funzionerebbe. Innanzitutto, crea una nuova sezione sotto la sezione dell'intestazione contenente il pulsante di scorrimento. Quindi dai alla nuova sezione un ID CSS nella scheda Avanzate.
Quindi trova l'elemento/pulsante di scorrimento che desideri trasformare nel tuo link di ancoraggio e aggiungi un URL che inizia con un hashtag (o simbolo di cancelletto) ed è immediatamente seguito dall'ID CSS dell'elemento a cui stai passando.
Ad esempio, se l'ID CSS della sezione è "section-2", aggiungere "#section-2" come URL del collegamento.
Ricorda, Divi ti consente di aggiungere URL di collegamento a ogni elemento in Divi, quindi sentiti libero di aggiungere collegamenti all'intera riga contenente il pulsante di scorrimento animato.
Per maggiori informazioni, dai un'occhiata ad alcune cose interessanti che puoi fare con i link di ancoraggio.
Diventa creativo!
Non aver paura di combinare diversi moduli e animarli in modi diversi. In effetti, mentre stavo esplorando nuovi modi per progettare i pulsanti di scorrimento con Divi, ho creato una divertente animazione di scorrimento del pollice che potrebbe essere utilizzata per i dispositivi mobili. L'ho incluso nel download gratuito sopra nel caso volessi verificarlo.
Pensieri finali
Pulsanti di scorrimento animati come questi sono facili da costruire con Divi. E possono essere utilizzati in più punti rispetto all'intestazione se li tratti come collegamenti di ancoraggio. Spero che questi design ti ispirino a creare un nuovo pulsante di scorrimento per il tuo prossimo progetto.
Non vedo l'ora di sentirti nei commenti.
Saluti!