Elementor: come creare l’effetto cursore del mouse personalizzato

03 Nov Elementor: come creare l’effetto cursore del mouse personalizzato

I miglioramenti del web design passano anche da piccoli particolari di funzioni basilari, tra queste, ad esempio, chi avrebbe mai pensato di andare a scomodare persino un grande classico come il cursore per applicargli un’animazione durante i suoi movimenti? Recentemente infatti si vedono anche dei siti moderni nei quali mentre navighi non possiedono il classico cursore a freccia che ci accompagna da decenni, ma piuttosto dei cursori di svariate tipologie grafiche con relative animazioni che lo seguono durante il suo spostamento.

In questo articolo vedremo appunto come fare ciò, ma una premessa obbligatoria è che per creare l’effetto cursore del mouse personalizzato useremo Elementor, ed avremo bisogno della sua versione PRO che ci consentirà appunto tale personalizzazione del cursore.
Una volta acquistato, installato ed attivato Elementor, questi sono i passaggi piuttosto semplici per personalizzare il cursore del mouse con un effetto:

1. Andate alla voce Elementor > Custom Code > Aggiungi nuovo
2. Date un nome al vostro nuovo cursore
3. Nel campo sottostante il titolo trovate Location, selezionate </body> – End
4. Incollate il codice che trovate in fondo a questo articolo e poi cliccate su Pubblica
5. Si aprirà una finestra di Elementor che vi chiederà dove desiderate applicare il vostro codice, selezionate ovviamente Entire site e salvate

A questo punto il gioco è fatto, modificando però il codice in tre diversi  punti, potrete anche personalizzare il nuovo cursore.
La prima modifica può essere applicata al tag tipe, sostituendo infatti il numero 1 con il 2 cambierà anche la tipologia di cursore.
La seconda personalizzazione è di tipo grafico, volendo infatti cambiare il colore del nuovo cursore, per farlo basta agire sul tag color e sostituire quel colore esadecimale #000000 con uno a vostro piacere.
La terza ed ultima modifica riguarda invece il tag removeDefaultCursor che può essere modificato da false a true.

Di seguito il codice in questione:

<script src="https://unpkg.com/kursor"></script>
<script>
new kursor({
type: 1,
color: '#000000',
removeDefaultCursor: false, 
})
</script>