Come trasformare il cursore in un pulsante creativo mentre si passa con il mouse sull'elemento utilizzando Divi

Rifat Divi Tutorials Jul 8, 2021

Cosa succede se passi il mouse su un elemento e questo diventa un pulsante e facendo clic su di esso verrai reindirizzato a un'altra pagina? Spesso impostiamo un pulsante nella parte inferiore o laterale della galleria di immagini o dei riquadri articolo/prodotto per portarci alla pagina dettagliata di quell'elemento. Cosa succede se il pulsante non è impostato visivamente? Lo impostiamo con l'effetto hovering del mouse in modo che il mouse diventi un pulsante non appena si ferma sulle tessere dell'immagine o dell'articolo e fa clic in un punto qualsiasi dell'area specifica che ci porterà alla pagina desiderata. Sì! Con Divi abbiamo molte opzioni per personalizzare il nostro sito Web e il tutorial di oggi su come trasformare un cursore in un pulsante creativo mentre si passa con il mouse sull'elemento. Non è eccitante?

Quindi non aspettiamo oltre e passiamo al tutorial.

Sneak Peak

Prima di andare oltre, ecco come sarà il nostro design di oggi.

Parte prima: struttura dell'elemento dell'edificio

Aggiungi una pagina dalla dashboard di WordPress e aprila con Divi builder. Vai avanti con "Costruisci da zero".

Create Amazing Websites

Con il miglior generatore di pagine gratuito Elementor

Parti ora

Aggiunta: Nuova Sezione

Colore di sfondo

Aggiungeremo il bianco come colore di sfondo alla nostra sezione iniziale.

  • Colore di sfondo: #ffffff

Spaziatura

Ora dalla scheda di progettazione, aggiungi un po' di spazio alla sezione.

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

Aggiunta: nuova riga

Struttura della colonna

Ora aggiungeremo una riga di due colonne alla nostra sezione.

Dimensionamento

Ora, prima di aggiungere altri moduli, cambiamo le impostazioni di dimensionamento di questa riga a due colonne.

  • Larghezza massima: 2580 px

Spaziatura

Ora, apporta alcune modifiche alla spaziatura.

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

Aggiunta: modulo immagine alla colonna 1

Aggiungi immagine

Ora aggiungi un modulo immagine alla colonna 1 e aggiungi un'immagine a tua scelta.

Aggiungi collegamento

Ora aggiungi un collegamento a questa immagine.

Scala al passaggio del mouse

Ora, passa alla scheda Progettazione e consente di modificare le impostazioni della scala al passaggio del mouse di questo modulo immagine.

  • Entrambi: 90%

Classe CSS

Aggiungi alcune classi CSS dalla scheda avanzata.

  • Classe CSS: cursore immaginecur

Aggiunta: Modulo di testo 1 alla colonna 1

Contenuto H3

Aggiungeremo un modulo di testo alla colonna 1 e aggiungeremo del contenuto H3 secondo necessità.

Impostazioni contenuti H3

Modifica le impostazioni del contenuto H3 dalla scheda Design.

  • Titolo 3 Carattere: attore
  • Colore testo titolo 3: #000000
  • Intestazione 3 Dimensioni del testo: desktop: 35 px, tablet: 28 px e telefono: 22 px
  • Intestazione 3 Altezza riga: 1.4em

Spaziatura

Aggiungi spaziatura al modulo di testo.

  • Margine inferiore: 15 px

Aggiunta: Modulo di testo 2 alla colonna 1

Contenuto del testo

Aggiungi un altro modulo di testo proprio sotto il modulo di testo precedente e aggiungi del contenuto descrittivo a quel modulo.

Impostazioni del contenuto del testo

Modifica le impostazioni del contenuto del testo dalla scheda Progettazione.

  • Titolo 3 Carattere: attore
  • Colore testo titolo 3: #75BAFF
  • Intestazione 3 Dimensioni del testo: desktop: 22 px, tablet: 18 px e telefono: 15 px
  • Spaziatura delle lettere del testo: 0,5 px
  • Intestazione 3 Altezza riga: 1.4em

Aggiunta: Modulo pulsante alla colonna 1

Testo del pulsante

Infine, aggiungi un modulo pulsante alla colonna 1 e aggiungi una copia pertinente.

Pulsante Impostazioni testo

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

Regola i valori di spaziatura.

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

Scatola ombra Box

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

Duplica il contenuto

Qui faremo un paio di cose. Innanzitutto, elimineremo la seconda colonna.

Ora cloneremo la prima colonna.

Ora duplica l'intera riga e modifica il contenuto.

Seconda parte: aggiungi cursore

Aggiungi nuova riga

Struttura della colonna

Dal momento che abbiamo finito con la struttura del design, faremo il design del cursore. Aggiungi una nuova riga alla sezione con la seguente struttura a colonne.

Spaziatura

Apri le impostazioni della riga e apporta alcune modifiche come indicato di seguito.

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

Aggiunta: modulo di testo per il cursore

Aggiungi copia

Ora aggiungi un modulo di testo alla riga appena creata e aggiungi una copia a tua scelta.

Colore di sfondo

Quindi, aggiungi un colore di sfondo.

  • Colore di sfondo: #47669b

Impostazioni testo

Dalla scheda Design, cambia lo stile del testo.

  • 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

Fai qualche aggiustamento nella sezione delle taglie.

  • Larghezza: 150 px
  • Altezza: 150 px

Confine

Cambieremo le impostazioni del bordo per creare questo cerchio.

  • Tutti gli angoli: 100 px

Scatola ombra Box

Aggiungeremo anche un'ombra light box.

  • Forza sfocatura ombra scatola: 0px
  • Forza di diffusione dell'ombra della scatola: 20 px
  • Colore ombra: rgba (7,213,255,0,14)

Classe CSS

Poi, daremo al nostro modulo una classe CSS.

  • Classe CSS: cursore

Elemento principale CSS

Ora aggiungi il codice CSS alla casella dell'elemento principale.

transition: all .1s linear;
pointer-events: none;
 
display: flex;
justify-content: center;
align-items: center;

Posizione

Ora finiremo questo modulo apportando alcune modifiche alla sezione della posizione dalla scheda Avanzate.

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

Aggiunta: Modulo codice

Ora aggiungi un modulo di codice sotto l'ultimo modulo di testo. Aggiungi i tag Style e Scripts all'interno del modulo di codice.

Aggiungi codice CSS

Incolla il seguente codice CSS all'interno dello Style .

.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

Incolla il seguente codice CSS all'interno dello 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');
 
});
 
});

Risultato finale

Ecco come appare il nostro design finale, Stupendo!

Conclusione

Il tutorial di oggi si è basato su come puoi portare un design più interattivo sul tuo sito web. Divi ti offre un'enorme opportunità di attirare l'attenzione dei visitatori sul tuo sito web rendendo il design pulito e stupendo. Spero che il tutorial di oggi vi piaccia e, in tal caso, una condivisione sarà FANTASTICA!