Come trasformare il cursore in un pulsante quando si passa con il mouse su un elemento utilizzando Divi
Pubblicato: 2021-05-07Quando visualizzi elementi clickthrough sulla tua pagina, è importante assicurarsi che le persone sappiano che possono scegliere un elemento e fare clic su di esso. Uno dei modi più ovvi per farlo è includere un pulsante, ma se stai cercando un modo interattivo aggiuntivo per incoraggiare i clic sulla tua pagina, ti piacerà questo tutorial. Oggi ti mostreremo come trasformare il tuo cursore in un pulsante quando passi con il mouse su un particolare elemento cliccabile, come un'immagine. Ciò aggiungerà ulteriore incentivo ai tuoi visitatori e si tradurrà in una bella interazione con la pagina. Potrai anche scaricare gratuitamente il file JSON!
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica il layout GRATUITAMENTE
Per mettere le mani sul layout gratuito, 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!
1. Crea la struttura degli elementi
Aggiungi nuova sezione
Colore di sfondo
Inizieremo questo tutorial costruendo la struttura degli elementi all'interno di una pagina Divi. Aggiungi una nuova sezione e usa un colore di sfondo bianco per essa.
- Colore di sfondo: #ffffff
Spaziatura
Passa alla scheda Progettazione della sezione e modifica le impostazioni di spaziatura come segue:
- Imbottitura superiore: 80px
- Imbottitura inferiore: 0px
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Dimensionamento
Senza aggiungere ancora moduli, apri le impostazioni della riga e modifica la larghezza massima nelle impostazioni di dimensionamento.
- Larghezza massima: 2580 px
Spaziatura
Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi modulo immagine alla colonna 1
Carica immagine
Moduli Let's, iniziando con un modulo immagine nella colonna 1. Carica un'immagine a tua scelta.
Aggiungi collegamento
Aggiungi un collegamento al modulo immagine successivo.
Scala al passaggio del mouse
Quindi, vai alla scheda Progettazione e modifica le impostazioni della scala al passaggio del mouse del modulo.
- Entrambi: 90%
Classe CSS
Completa le impostazioni del modulo applicando la seguente classe CSS nella scheda Avanzate:
- Classe CSS: cursore immagine
Aggiungi il modulo di testo n. 1 alla colonna 1
Aggiungi contenuto H3
Passa al modulo successivo, che è un modulo di testo contenente alcuni contenuti H3 di tua scelta.
Impostazioni testo H3
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H3 di conseguenza:
- Titolo 3 Carattere: attore
- Colore testo titolo 3: #000000
- Intestazione 3 Dimensione del testo:
- Desktop: 35px
- Tablet: 28px
- Telefono: 22px
- Intestazione 3 Altezza riga: 1.4em
Spaziatura
Aggiungi un margine inferiore dopo.
- Margine inferiore: 15 px
Aggiungi il modulo di testo n. 2 alla colonna 1
Aggiungi contenuto
Quindi, aggiungi un altro modulo di testo proprio sotto il precedente con un contenuto descrittivo a tua scelta.
Impostazioni testo
Modificare le impostazioni del testo del modulo come segue:
- Carattere del testo: attore
- Colore del testo: #75baff
- Dimensione del testo:
- Desktop: 22px
- Tablet: 18px
- Telefono: 15px
- Spaziatura delle lettere del testo: 0,5 px
- Altezza linea lettera: 2em
Aggiungi modulo pulsante alla colonna 1
Aggiungi copia
Il modulo successivo e ultimo di cui abbiamo bisogno in questa colonna è un modulo pulsante. Aggiungi una copia a tua scelta.
Impostazioni dei pulsanti
Passa alla scheda di progettazione del modulo e modifica le impostazioni del pulsante di conseguenza:
- Usa stili personalizzati per pulsante: Sì
- Colore del testo del pulsante: #000000
- Larghezza bordo pulsante: 0px
- Raggio del bordo del pulsante: 1px
- Carattere pulsante: attore
- Mostra icona pulsante: Sì
- Posizionamento dell'icona del pulsante: a sinistra
- Mostra solo l'icona al passaggio del mouse per il pulsante: No
Spaziatura
Aggiungi anche alcuni valori di spaziatura personalizzati.
- Margine inferiore: 80 px
- Imbottitura inferiore: 20px
- Imbottitura destra: 30px
Scatola ombra
E completa le impostazioni del modulo applicando le seguenti impostazioni dell'ombra della casella:
- Posizione orizzontale dell'ombra del riquadro: 0px
- Posizione verticale dell'ombra del riquadro: 2px
- Colore ombra: #000000
Elimina colonna 2
Una volta completata la prima colonna e tutti i moduli al suo interno, elimina la seconda colonna vuota della riga.
Clona colonna 1
E riutilizza la prima colonna clonandola una volta.
Clona intera riga
Continua clonando l'intera riga una volta.
Modifica tutti i contenuti, le immagini e i collegamenti duplicati
Quindi, assicurati di modificare tutti i contenuti, le immagini e i collegamenti in ciascuna delle colonne duplicate.
2. Aggiungi cursore
Aggiungi nuova riga alla sezione
Struttura della colonna
Ora che abbiamo la struttura dell'elemento a posto, è il momento di creare il design del cursore. Per fare ciò, aggiungeremo una nuova riga alla nostra sezione utilizzando la seguente struttura a colonne:
Spaziatura
Apri le impostazioni della riga e rimuovi tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi il modulo di testo del cursore alla colonna della nuova riga
Aggiungi contenuto
Quindi, aggiungi un modulo di testo alla nuova riga. Questo modulo di testo sarà dedicato alla creazione del design del pulsante cursore. Aggiungi una copia a tua scelta all'interno della casella del contenuto.
Colore di sfondo
Quindi, aggiungi un colore di sfondo.
- Colore di sfondo: #47669b
Impostazioni testo
Passa alla scheda Design e modella il testo di conseguenza:
- Carattere del testo: attore
- Peso del carattere del testo: grassetto
- Stile del carattere del testo: maiuscolo
- Colore del testo: #ffffff
- Spaziatura delle lettere del testo: 2px
- Allineamento del testo: Centro
Dimensionamento
Aggiungi un valore di larghezza e altezza alle impostazioni di dimensionamento successivo.
- Larghezza: 150 px
- Altezza: 150 px
Frontiera
Stiamo trasformando questo modulo in un cerchio modificando le impostazioni del bordo.
- Tutti gli angoli: 100 px
Scatola ombra
Aggiungeremo anche un'ombra sottile della scatola.
- Forza sfocatura ombra scatola: 0px
- Forza di diffusione dell'ombra della scatola: 20 px
- Colore ombra: rgba (7,213,255,0,14)
Classe CSS
Quindi, daremo al nostro modulo una classe CSS.
- Classe CSS: cursore
Elemento principale CSS
Stiamo aggiungendo anche alcune righe di codice CSS all'elemento principale del modulo.
transition: all .1s linear; pointer-events: none; display: flex; justify-content: center; align-items: center;
Posizione
E completeremo le impostazioni del modulo modificando la posizione nella scheda avanzate:
- Posizione: fissa
- Posizione: in alto a sinistra
- Indice Z: 2
Aggiungi modulo codice sotto modulo testo
Ora che abbiamo progettato il nostro cursore, è il momento di far funzionare la funzionalità. Per fare ciò, aggiungeremo un nuovo modulo di codice proprio sotto il cursore Modulo di testo.
Aggiungi tag stile e script
Aggiungi alcuni tag di stile e script al tuo modulo di codice.
Aggiungi codice CSS
Inserisci le seguenti righe di codice CSS tra i tag di stile:
.hide-cursor {
cursor: none;
}
.cursor {
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
visibility: hidden;
opacity: 0;
}
.show-cursor {
visibility: visible !important;
opacity: 1;
}
Aggiungi codice JQuery
E usa le seguenti righe di codice JQuery tra i tag di script:
jQuery(document).ready(function($){
var cursor = $('.cursor');
$('.image-cursor').mousemove(function(e){
cursor.css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
cursor.addClass('show-cursor');
$('body').addClass('hide-cursor');
});
$('.image-cursor').mouseleave(function() {
cursor.removeClass('show-cursor');
$('body').removeClass('hide-cursor');
});
});
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 tutorial, ti abbiamo mostrato come aggiungere più interazione agli elementi cliccabili sulla tua pagina. Più specificamente, ti abbiamo mostrato come attivare un pulsante cursore quando qualcuno passa il mouse su un elemento di tua scelta. Ciò aggiunge ulteriore interazione al design della tua pagina e potrebbe aiutarti ad aumentare le percentuali di clic! 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.