Come creare un pulsante animato con Divi che catturerà l’attenzione dell’utente

Cosa sono i pulsanti e a cosa servono

I pulsanti non sono solo parte del design di un sito web, ma hanno anche la capacità di trasmettere messaggi importanti in modo efficace. Possono essere utilizzati per attirare l’attenzione degli utenti e incoraggiarli a fare qualcosa, come ad esempio acquistare un prodotto o effettuare una registrazione.

Pulsanti ben progettati possono essere di grande aiuto per rendere un sito web più attraente e coinvolgente. La scelta dei colori, delle dimensioni e dei tipi di pulsanti giusti può fare la differenza tra un sito che (in)trattiene l’utente e uno abbandonato presto.

Possono inoltre aiutare a migliorare l’esperienza utente. Se un pulsante è ben posizionato e di facile accesso, gli utenti possono eseguire rapidamente l’azione che si desidera compiano, senza dover scavare nel sito alla ricerca di una soluzione.

I pulsanti, insieme alle CTA (Call to Action), sono elementi fondamentali di una strategia di web design.

Non sai cosa è una CTA? Lo vediamo subito.

Ora che hai più chiaro quanto siano importanti i pulsanti all’interno del tuo sito web ti mostro il pulsante che andremo a creare con questa guida.

Ma prima lascia che mi presenti. 

Sono Valeria, mi occupo di sviluppo web a Humans e se c’è una cosa che mi piace fare in modo particolare nel mio lavoro è sperimentare. I miei primi esperimenti erano proprio con i pulsanti perché sono quelli che ci permettono di fare clic e interagire con i nostri dispositivi. 

E poi, c’è qualcosa di così gratificante nel vedere il tuo design prendere vita quando qualcuno preme un pulsante che hai creato tu.

Ed ecco qua sotto il pulsante che imparerai a creare con questa breve e facilissima guida!

Se ci cliccherai sopra andrai diretto alla parte pratica del tutorial, se invece vuoi gustarti ancora un altro po’ di teoria ti basterà scorrere e semplicemente ammirarlo 😉

Sei prontə per la grande avventura?

Per questo articolo ho scelto come tipo di animazione una sorta di ondeggiare molto veloce (in inglese“ wiggle” che da il nome all’animazione che utilizzeremo). Mi piace perché ricorda un po’ il movimento che fa il telefono quando vibra a seguito di un messaggio o una chiamata.

Questa scelta segue un mio gusto personale ma sappi che ci sono tantissime altre animazioni e potrai divertirti a creare quella che più preferisci.

Noterai che l’animazione inizia con un piccolo ritardo per poi fermarsi per qualche secondo, e così via all’infinito. Non è né un errore né una scelta casuale.

Un’animazione che inizia e si ferma può aiutare a evitare distrazioni eccessive durante l’utilizzo del sito, poiché non continua in modo costante.

Inoltre, è più attraente visivamente, poiché crea un effetto di “anticipazione” che può essere molto coinvolgente per l’utente. In questo modo, il pulsante diventa più che un semplice elemento dell’interfaccia utente: sarà trasformato in un vero e proprio punto focale dell’esperienza dell’utente.

Come impostare un’animazione in hover con Divi

La maggior parte delle animazioni sui pulsanti vengono effettuate nel momento in cui il nostro cursore viene posizionato sopra il pulsante stesso. 

Questa azione viene denominata hover.

Sono molteplici le animazioni che possiamo fare, ecco alcuni esempi:

• Dimensione: permette di variare le dimensioni del pulsante quando viene attivato o cliccato.
• Colore: cambia il colore del pulsante quando viene attivato o cliccato.
• Rotazione: il pulsante ruota quando viene attivato o cliccato.
• Vibrazione: il pulsante vibra quando viene attivato o cliccato.
• Ridimensionamento: il pulsante si ridimensiona quando viene attivato o cliccato.
• Scorrimento: il pulsante scorre quando viene attivato o cliccato.

Queste animazioni si attivano solamente nel momento in cui il nostro utente ha già individuato il nostro pulsante.

Si potrebbe quindi dire che questo tipo di animazione è passiva, ovvero inizia solo nel momento in cui riceve un’interazione da parte del nostro utente.

A noi invece interessa pilotare lo sguardo del nostro utente su quello specifico punto della nostra pagina web.

Quindi quello che andremo a fare oggi è un’animazione attiva, ovvero che inizia automaticamente quando viene caricata una pagina, indipendentemente quindi da ciò che farà l’utente.

Perché è importante animare il nostro pulsante

L’attenzione umana è stata sempre attratta da elementi in movimento. Diversi studi scientifici hanno rilevato che gli oggetti in movimento vengono notati più rapidamente e più facilmente rispetto a quelli statici e hanno anche dimostrato che gli oggetti in movimento sono più facili da ricordare e da identificare. Questo perché il movimento è un segnale di attenzione e una forma di feedback in tempo reale che informa gli utenti su quali elementi della pagina web prestare più attenzione. Gli elementi in movimento aiutano anche a mantenere l’interesse e l’attenzione dell’utente, aiutando così a incoraggiare l’utente a esplorare più a fondo la pagina web.

Se vuoi approfondire ti consiglio di leggere questi due studi pubblicati su Sciencedirect e su Researchgate che parlano proprio di questo.

Ma veniamo alla creazione dell’animazione del nostro pulsante.

Come creare l’animazione automatica con Divi

Come vedrai andremo ad utilizzare del codice. Non preoccuparti di questo perché se hai già letto altri miei articoli come ad esempio quello in cui spiego come creare un carosello con Divi senza usare un plugin, saprai già che ho strutturato questa guida in modo che tu possa fare le tue personalizzazioni senza aver bisogno di conoscere i linguaggi di programmazione. Ti basterà copiare il codice che ti fornirò tra poco e incollarlo dove ti indicherò.

Come prima cosa andiamo a creare il nostro pulsante nel tuo sito in WordPress e con Divi.

Se hai già creato il tuo pulsante e vuoi semplicemente imparare come animarlo, puoi saltare questo passaggio e andare al prossimo cliccando qua.

Apri un nuovo modulo e seleziona pulsante.

Ora che abbiamo creato il nostro pulsante possiamo andare a personalizzarlo come più ci piace.

Il primo tab che troviamo è quello denominato “Contenuti”.

Qua possiamo inserire il testo che apparirà nel pulsante (per questo tutorial scriviamo un semplice “Iniziamo!” ma tu potrai inserire quello che preferisci).

Il testo che andrà nel nostro pulsante è importantissimo!

Ecco 5 semplici best practice che ti consiglio di seguire quando sceglierai il testo del tuo pulsante:

1. Usa una breve frase, non più di due parole.
2. Utilizza un linguaggio chiaro ed evidenzia l’azione che il pulsante svolgerà.
3. Utilizza una call-to-action specifica, come “Acquista ora” o “Iscriviti”.
4. Evita l’uso di parole come “click” o “clicca qui”.
5. Utilizza un carattere leggibile e un colore in contrasto con lo sfondo.

Hai scelto la frase giusta da inserire nel tuo pulsante?

Ottimo! Allora proseguiamo!

Adesso dobbiamo dire al nostro pulsante dove deve portare il nostro utente una volta che ci cliccherà sopra.

Sotto la voce “Collegamento” inseriremo il link che ci occorre e specifichiamo se vogliamo che si apra nella stessa pagina o in una nuova.

Definite le basi ora possiamo passare alla personalizzazione grafica.

Sotto il tab “Design” possiamo definire diverse impostazioni come il colore del background e del testo. Il font, la grandezza del bordo e il suo radio, le ombre, se vuoi aggiungere un’icona o meno. Ti invito a giocarci sopra e vedere tu stessə le varie customizzazioni.

Di seguito ti elenco le personalizzazioni che ho utilizzato per il nostro pulsante.

Dentro “Pulsante”:

 – Colore di sfondo: #105efb

 – Colore del testo: #ffffff

 – Grandezza del testo: 17px

 – Font: Nunito Sans

 – Icona: no

 – Border-radius: 30px

 – Spaziatura lettere: 2px

Dentro “Spaziatura”:

 – sia cima che fondo: 16px

 – sia sinistra che destra: 32px

Una volta inseriti questi parametri il tuo pulsante dovrebbe apparire così:

Adesso passiamo alla parte divertente, ovvero daremo vita al nostro pulsante!

Sotto il pulsante inseriamo un nuovo modulo, in questo caso inseriremo un modulo “codice” dove dovrai incollare il codice che trovi qua sotto:

Per poter “collegare” questo codice al nostro pulsante dobbiamo però dirgli dove dovrà eseguirsi e lo faremo creando una classe all’interno del pulsante.

La classe è un modo per applicare il codice solo ad un elemento specifico. Quando si assegna una classe ad un elemento HTML, come una parola, una frase, un paragrafo o un’immagine, tutti i comandi nel codice che abbia quella classe saranno applicati solo a quell’elemento. Ad esempio, se assegniamo la classe “rosso” ad un paragrafo, tutti i comandi nel codice che abbia quella classe saranno applicati solo al paragrafo, come cambiare ad esempio il colore in rosso, oppure cambiare la dimensione del carattere, cambiare il font, ecc. In questo modo, è possibile applicare codice a elementi specifici in una pagina web senza intaccare gli altri elementi sulla pagina.

Se infatti ci fai caso tutto il nostro codice è racchiuso dentro delle parentesi graffe precedute da una parola con un punto davanti. Quella è la nostra classe. Per poter dare il nome di quella classe al nostro pulsante in Divi inseriamo nel tab ”Avanzate”, del nostro modulo Pulsante, sotto la voce “ID & Classi CSS”,  il nome della classe : “pulsante-trillo”

Adesso guarda il tuo pulsante e vedrai che inizierà a vibrare ogni 5 secondi, bello vero?

Ora non ti resta che posizionarlo in una parte strategica del tuo sito web e iniziare ad usarlo per le tue Call to Action 💪

Bene, abbiamo fatto.

Spero che questa guida ti sia piaciuta e ti sia divertitə quanto me quando imparo una cosa nuova!

Sarebbe bello come buon proposito riuscire a fare una cosa nuova, anche se piccolissima, ogni giorno. Non trovi? Le guide e gli articoli del blog Humans potranno aiutarti a mettere dei piccoli mattoncini utili a raggiungere questo obiettivo.

A presto!

Valeria