Vai al contenuto principale

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

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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

pulsante del cursore

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

pulsante del cursore

spaziatura

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

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

pulsante del cursore

Aggiungi una nuova linea

Struttura della colonna

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

pulsante del cursore

dimensionamento

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

pulsante del cursore

spaziatura

Quindi rimuovere tutto il riempimento superiore e inferiore predefinito.

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

pulsante del cursore

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.

pulsante del cursore

Aggiungi un collegamento

Quindi aggiungi un collegamento al modulo immagine.

pulsante del cursore

Scala cavalcavia

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

pulsante del cursore

Classe CSS

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

pulsante del cursore

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.

pulsante del cursore

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

pulsante del cursore

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

spaziatura

Quindi aggiungi un margine inferiore.

pulsante del cursore

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.

pulsante del cursore

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 °

pulsante del cursore

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.

pulsante del cursore

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

pulsante del cursore

  • 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

pulsante del cursore

spaziatura

Aggiungi anche valori di spaziatura personalizzati.

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

pulsante del cursore

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

pulsante del cursore

Elimina colonna 2

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

pulsante del cursore

Clona colonna 1

E riutilizzare la prima colonna clonandola una volta.

pulsante del cursore

Clona l'intera riga

Continua clonando l'intera riga una volta.

pulsante del cursore

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.

pulsante del cursore

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:

pulsante del cursore

spaziatura

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

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

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

pulsante del cursore

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.

pulsante del cursore

Colore di sfondo

Quindi aggiungi un colore di sfondo.

  • Colore di sfondo: # 47669b

pulsante del cursore

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

pulsante del cursore

dimensionamento

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

  • Larghezza: 150px
  • Altezza: 150px

pulsante del cursore

confine

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

pulsante del cursore

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)

pulsante del cursore

Classe CSS

Successivamente, daremo al nostro modulo una classe CSS.

pulsante del cursore

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;

pulsante del cursore

Posizione

E completeremo i parametri del modulo cambiando la posizione nella scheda avanzata:

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

pulsante del cursore

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.

pulsante del cursore

Aggiungi tag di stile e script

Aggiungi tag di stile e script al tuo modulo di codice.

pulsante del cursore

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;
}

pulsante del cursore

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

});

});

pulsante del cursore

Panoramica

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

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

ufficio

pulsante del cursore

Mobile

pulsante del cursore

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.



Fonte

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
0 azioni
quota
Tweet
Enregistrer