Come aggiungere un cursore con stile e invertito alla tua pagina Divi

Uno dei modi più veloci per interagire con i visitatori del tuo sito web è attraverso il loro cursore. È lì che di solito inizia tutto. L'interazione dell'utente sul desktop è quasi interamente basata sul modo in cui i visitatori utilizzano il cursore per navigare tra le tue pagine. È anche l'unica cosa che consente loro di attivare eventi, che si tratti di un effetto al passaggio del mouse o di un clic. Ecco perché ti imbatterai in un sacco di siti Web che personalizzano il cursore con un obiettivo specifico in mente. Lo stile del cursore è utile se desideri evidenziare un invito all'azione, ad esempio. Oggi ti mostreremo come farlo all'interno di Divi. 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 i file

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.

SCARICA

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 una nuova pagina/Apri una esistente

Crea una nuova pagina o apri una esistente

Inizia creando una nuova pagina o aprendone una esistente.

Carica layout di tua scelta

Per concentrarci sull'essenza di questo tutorial, utilizzeremo il Bike Repair Layout Pack ma sentiti libero di utilizzare qualsiasi altro layout di tua scelta.

Aggiungi nuova sezione in fondo alla pagina

Una volta caricato il layout, vai in fondo alla pagina e aggiungi una nuova sezione. Useremo questa sezione per costruire il nostro cursore.

Spaziatura

Per creare un cursore personalizzato, aggiungeremo un modulo di testo più avanti nel tutorial. Questo modulo verrà posizionato all'interno della sezione, ma non vogliamo che il contenitore della sezione effettivo venga visualizzato nel nostro design. Per evitare che la sezione venga visualizzata, rimuoveremo l'imbottitura superiore e inferiore predefinita nelle impostazioni di spaziatura.

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

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una riga alla sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora moduli, apri le impostazioni della riga e rimuovi tutta la larghezza della grondaia personalizzata nelle impostazioni di dimensionamento.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Rimuovi anche tutta l'imbottitura superiore e inferiore predefinita.

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

Modulo Aggiungi testo (cursore)

Lascia la casella del contenuto vuota

È ora di aggiungere un modulo di testo, che in seguito utilizzeremo come cursore! Lascia vuota la casella del contenuto.

Dimensionamento

Passa alla scheda Design e modella il modulo utilizzando una larghezza e un'altezza personalizzate su diverse dimensioni dello schermo:

• Larghezza:
  • Desktop: 100 px
  • Tablet: 60px
  • Telefono: 40px
• Altezza:
  • Desktop: 100 px
  • Tablet: 60px
  • Telefono: 40px

Frontiera

Per trasformare il cursore in un cerchio, come puoi notare nell'anteprima di questo post, utilizzeremo angoli arrotondati e un bordo.

• Tutti gli angoli: 100%
• Larghezza bordo: 3px
• Colore bordo: #ffffff

Modalità di fusione

Nell'anteprima di questo post, potresti notare un effetto invertito sul cursore, specialmente quando passi con il mouse su un modulo pulsante. Per ottenere questo effetto, utilizzeremo una modalità di fusione per il nostro modulo di testo.

• Modalità di fusione: differenza

Elemento principale CSS

Aggiungendo queste seguenti righe di codice CSS all'elemento principale del modulo, aiuteremo a preparare il modulo per un uso futuro come cursore:

transition: all .1s linear;
pointer-events: none;

Posizione

Useremo anche una posizione fissa per il modulo.

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

Classe CSS

E completeremo le impostazioni del modulo assegnando una classe CSS personalizzata nella scheda avanzata.

• Classe CSS: cursore

2. Aggiungi funzionalità

Aggiungi modulo di codice sotto il modulo di testo del cursore

Ora che abbiamo posizionato il modulo di testo del cursore, è il momento di concentrarci sulla funzionalità! Aggiungi un modulo di codice proprio sotto il cursore Modulo di testo della tua nuova sezione.

Aggiungi tag stile e script

Combineremo un po' di codice CSS e JQuery, quindi vai avanti e aggiungi tag di stile e script al tuo modulo di codice.

Apertura del codice JQuery

Quindi, copia incolla le seguenti righe di apertura del codice JQuery tra i tag di script:

jQuery(document).ready(function($){
});

Riposiziona il modulo di testo del cursore

Ora che le basi all'interno del nostro modulo di codice sono state create, andremo passo dopo passo. La prima cosa che faremo è posizionare il modulo di testo che abbiamo creato dopo il contenuto interno del builder. Questo ci permetterà di usare il cursore a livello di pagina.

$('.cursor').insertAfter('.et_builder_inner_content');

Rimuovi il cursore predefinito della pagina

Successivamente, rimuoveremo il cursore predefinito della pagina utilizzando del codice CSS personalizzato che posizioneremo tra i tag di stile.

body {
cursor: none;
}

Imposta il modulo di testo del cursore come cursore

Successivamente, consentiremo al cursore di seguire i movimenti dei visitatori utilizzando le seguenti righe di codice JQuery:

$(window).mousemove(function(e){
var cursor = $('.cursor');
$('.cursor').css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
});

Attiva/disattiva l'effetto al passaggio del mouse su un particolare modulo

Aggiungi Aumenta classe CSS

Come puoi notare nell'anteprima di questo post, non appena viene posizionato un modulo pulsante, gli stili del cursore cambiano. Per ottenere ciò, aggiungeremo una nuova classe CSS tra i nostri tag di stile.

.increase-size {
transform: scale(5);
background-color: white;
}

Tutti i moduli pulsanti

Cambieremo questa classe CSS usando del codice JQuery. Il codice seguente ha come target tutti i moduli pulsante all'interno della tua pagina Divi uno per uno.

$('.et_pb_button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

Un modulo pulsante specifico

Se si desidera che l'effetto si applichi a un modulo in particolare, è necessario un approccio diverso. Innanzitutto, apri il modulo pulsante a cui desideri applicare l'effetto e includi una classe CSS personalizzata.

• Classe CSS: pulsante cursore

Quindi, sostituisci la classe CSS nel codice che hai usato nel passaggio precedente. Questo è tutto!

$('.cursor-button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

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 post, ti abbiamo mostrato come creare un cursore personalizzato per la tua pagina Divi. Ti abbiamo anche mostrato come utilizzare questo cursore personalizzato per attivare un effetto al passaggio del mouse quando qualcuno posiziona un invito all'azione sulla tua pagina. Una volta che avrai l'approccio di creare un cursore personalizzato, sarai in grado di creare qualsiasi tipo di design o effetto! 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.