Come trasformare il cursore in un pulsante quando passi il mouse su un elemento utilizzando Divi

Quando visualizzi gli elementi di destinazione 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, questo tutorial ti piacerà. Oggi ti mostreremo come trasformare il tuo cursore in un pulsante quando passi il mouse su un particolare elemento cliccabile, come un'immagine. Ciò aggiungerà ulteriore motivazione ai tuoi visitatori e si tradurrà in una piacevole interazione con la pagina. Potrai anche scaricare il file JSON gratuitamente!

Andiamo.

Panoramica

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di dimensioni diverse.

ufficio

Mobile

Scarica il layout GRATUITAMENTE

Per mettere le mani sul layout gratuito, devi prima scaricarlo utilizzando il pulsante qui sotto. 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 il tuo indirizzo e-mail di seguito e fai clic su download. Non verrai "riscritto" né riceverai ulteriori e-mail.

1. Creare una struttura di elementi

Aggiungi una nuova sezione

Colore di sfondo

Inizieremo questo tutorial costruendo la struttura degli elementi in una pagina Divi. Aggiungi una nuova sezione e usa un colore di sfondo bianco.

• Colore di sfondo: #ffffff

spaziatura

Vai alla scheda Progettazione sezione e modifica le impostazioni di spaziatura come segue:

• Imbottitura superiore: 80px
• Imbottitura inferiore: 0px

Aggiungi una nuova linea

Struttura della colonna

Continua ad aggiungere una nuova riga utilizzando la seguente struttura di colonne:

dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica la larghezza massima nelle impostazioni di dimensionamento.

spaziatura

Quindi rimuovere tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi un modulo immagine alla colonna 1

Scarica immagine

Facciamo i moduli, iniziando con un modulo immagine nella colonna 1. Carica un'immagine di tua scelta.

Aggiungi un collegamento

Quindi aggiungi un collegamento al modulo immagine.

Scala cavalcavia

Quindi vai alla scheda Design e modifica le impostazioni della scala al passaggio del mouse.

Classe CSS

Completa i parametri del modulo applicando la seguente classe CSS nella scheda avanzata:

Aggiungi il modulo di testo # 1 alla colonna 1

Aggiungi contenuto H3

Passiamo al modulo successivo, che è un modulo di testo con alcuni contenuti H3 a tua scelta.

Impostazioni di testo H3

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H3 di conseguenza:

• Titolo 3: Polizia: attore
• Colore testo titolo 3: # 000000
• Intestazione 3 Dimensioni del testo:
  • Desktop: 35 px
  • Tablet: 28px
  • Telefono: 22px
• Titolo 3 Altezza linea: 1,4em

spaziatura

Quindi aggiungi un margine inferiore.

Aggiungi il modulo di testo # 2 alla colonna 1

Aggiungi contenuto

Quindi aggiungi un altro modulo di testo appena sotto il precedente con il contenuto della descrizione a tua scelta.

Impostazioni del testo

Modificare le impostazioni di testo del modulo come segue:

• Carattere del testo: attore
• Colore del testo: # 75baff
• Dimensione del testo:
  • Desktop: 22 px
  • Tablet: 18px
  • Telefono: 15px
• Spaziatura lettere del testo: 0.5 px
• Altezza della linea della lettera: 2 °

Aggiungi un modulo pulsanti alla colonna 1

Aggiungi una copia

Il prossimo e ultimo modulo 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 il pulsante: Sì
• Colore testo pulsante: # 000000
• Larghezza del bordo del pulsante: 0px
• Raggio del bordo del pulsante: 1px

• Carattere pulsante: attore
• Mostra l'icona del pulsante: Sì
• Posizione icona pulsante: sinistra
• Mostra solo l'icona al passaggio del mouse per il pulsante: No

spaziatura

Aggiungi anche valori di spaziatura personalizzati.

• Margine inferiore: 80px
• Imbottitura inferiore: 20px
• Imbottitura destra: 30px

Scatola delle ombre

E completa le impostazioni del modulo applicando le seguenti impostazioni dell'ombra del riquadro:

• Posizione orizzontale dell'ombra del riquadro: 0px
• Posizione dell'ombra del riquadro verticale: 2px
• Colore ombra: # 000000

Elimina colonna 2

Dopo aver completato la prima colonna e tutti i moduli in essa contenuti, rimuovere la seconda colonna vuota dalla riga.

Clona colonna 1

E riutilizzare la prima colonna clonandola una volta.

Clona l'intera riga

Continua clonando l'intera riga una volta.

Modifica tutti i contenuti, le immagini e i link duplicati

Successivamente, assicurati di modificare tutto il contenuto, le immagini e i collegamenti in ciascuna delle colonne duplicate.

2. Aggiungi un cursore

Aggiungi una nuova riga alla sezione

Struttura della colonna

Ora che abbiamo la struttura degli elementi a posto, è il momento di creare il design dello slider. Per fare ciò, aggiungeremo una nuova riga alla nostra sezione utilizzando la seguente struttura di colonne:

spaziatura

Apri le impostazioni delle righe e rimuovi tutte le imbottiture predefinite in alto e in basso.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi il modulo di testo del cursore alla nuova colonna di riga

Aggiungi contenuto

Quindi aggiungi un modulo di testo alla nuova riga. Questo modulo di testo sarà dedicato alla creazione del design del pulsante del cursore. Aggiungi una copia di tua scelta nell'area dei contenuti.

Colore di sfondo

Quindi aggiungi un colore di sfondo.

• Colore di sfondo: # 47669b

Impostazioni del testo

Passa alla scheda Design e applica uno stile al testo di conseguenza:

• Carattere del testo: attore
• Spessore del carattere del testo: grassetto
• Stile del carattere del testo: maiuscolo
• Colore del testo: #ffffff
• Spaziatura lettere del testo: 2px
• Allineamento del testo: centro

dimensionamento

Quindi aggiungi un valore di larghezza e altezza ai parametri di dimensionamento.

• Larghezza: 150px
• Altezza: 150px

confine

Trasformiamo questo modulo in un cerchio modificando le impostazioni del bordo.

Scatola delle ombre

Aggiungeremo anche un'ombra sottile della scatola.

• Intensità della sfocatura dell'ombra del riquadro: 0 px
• Forza di propagazione dell'ombra del riquadro: 20 px
• Colore dell'ombra: rgba (7,213,255,0.14)

Classe CSS

Successivamente, daremo al nostro modulo una classe CSS.

Elemento principale CSS

Aggiungiamo anche 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 i parametri del modulo cambiando la posizione nella scheda avanzata:

• Posizione: fissa
• Posizione: in alto a sinistra
• Indice Z: 2

Aggiungi un modulo di codice sotto il modulo di testo

Ora che abbiamo progettato il nostro dispositivo di scorrimento, è il momento di far funzionare la funzione. Per fare ciò, aggiungeremo un nuovo modulo di codice appena sotto il modulo di testo del cursore.

Aggiungi tag di stile e script

Aggiungi 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 il 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');

});

});

Panoramica

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.

ufficio

Mobile

Considerazioni finali

In questo tutorial, ti abbiamo mostrato come aggiungere più interazioni agli elementi cliccabili sulla tua pagina. Nello specifico, ti abbiamo mostrato come attivare un pulsante cursore quando qualcuno passa sopra un elemento di tua scelta. Ciò aggiunge ulteriore interazione al design della tua pagina e può aiutare ad aumentare le percentuali di clic! Sei stato anche in grado di scaricare gratuitamente il file JSON. Se hai domande o suggerimenti, sentiti libero di lasciare un commento nella sezione commenti qui sotto.

Se vuoi saperne di più su Divi e ottenere più omaggi Divi, assicurati Iscriviti alla nostra newsletter et Canale Youtube Quindi sarai sempre una delle prime persone a conoscere e apprezzare questo contenuto gratuito.