Cum să adăugați un cursor cu stil și inversat la pagina dvs. Divi

Una dintre cele mai rapide modalități de a interacționa cu vizitatorii de pe site-ul dvs. web este prin intermediul cursorului lor. De aici începe de obicei totul. Interacțiunea utilizatorilor pe desktop se bazează aproape în totalitate pe modul în care vizitatorii își folosesc cursorul pentru a naviga prin paginile dvs. Este, de asemenea, singurul lucru care le permite să declanșeze evenimente, indiferent dacă este un efect de plutire sau un clic. De aceea, veți întâlni o mulțime de site-uri web care personalizează cursorul cu un anumit obiectiv în minte. Stilizarea cursorului este utilă, de exemplu, dacă doriți să evidențiați un îndemn la acțiune. Astăzi, vă vom arăta cum să faceți acest lucru în cadrul Divi. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați aspectul GRATUIT

Pentru a pune mâna pe aspectul liber, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

1. Creați o pagină nouă / Deschideți una existentă

Creați o pagină nouă sau deschideți una existentă

Începeți prin a crea o pagină nouă sau a deschide una existentă.

Încărcați aspectul la alegere

Pentru a ne concentra asupra esenței acestui tutorial, vom folosi pachetul de reparații pentru biciclete, dar nu ezitați să utilizați orice alt aspect la alegere.

Adăugați o secțiune nouă în partea de jos a paginii

După ce aspectul dvs. a fost încărcat, navigați la partea de jos a paginii și adăugați o nouă secțiune. Vom folosi această secțiune pentru a ne construi cursorul.

Spațiere

Pentru a crea un cursor personalizat, vom adăuga un modul de text mai târziu în tutorial. Acest modul va fi plasat în interiorul secțiunii, dar nu dorim ca containerul secțiunii să apară în designul nostru. Pentru a evita afișarea secțiunii, vom elimina căptușeala implicită de sus și de jos din setările de spațiere.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând la secțiune utilizând următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândurilor și eliminați toată lățimea jgheabului personalizată din setările de dimensionare.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Eliminați și toate umpluturile implicite, de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un modul de text (cursor)

Lăsați caseta de conținut goală

Este timpul să adăugați un modul de text, pe care, mai târziu, îl vom folosi ca cursor! Lăsați caseta de conținut goală.

Dimensionare

Treceți la fila de proiectare și formați modulul folosind o lățime și înălțime personalizate pe diferite dimensiuni ale ecranului:

• Lăţime:
  • Desktop: 100 px
  • Tabletă: 60 px
  • Telefon: 40 px
• Înălţime:
  • Desktop: 100 px
  • Tabletă: 60 px
  • Telefon: 40 px

Frontieră

Pentru a transforma cursorul într-un cerc, așa cum ați putut observa în previzualizarea acestei postări, vom folosi colțuri rotunjite și o margine.

• Toate colțurile: 100%
• Lățimea chenarului: 3 px
• Culoare margine: #ffffff

Blend Mode

În previzualizarea acestei postări, ați putea observa un efect inversat asupra cursorului, mai ales atunci când plasați un modul buton. Pentru a obține acest efect, vom folosi un mod de amestecare pentru modulul nostru de text.

• Blend Mode: Diferență

Element principal CSS

Prin adăugarea următoarelor linii de cod CSS la elementul principal al modulului, vom ajuta la pregătirea modulului pentru utilizarea viitoare ca cursor:

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

Poziţie

Vom folosi o poziție fixă ​​și pentru modul.

• Poziție: Fix
• Locație: stânga sus
• Indicele Z: 2

Clasa CSS

Și vom completa setările modulului prin atribuirea unei clase CSS personalizate în fila avansată.

• Clasa CSS: cursor

2. Adăugați funcționalitate

Adăugați un modul de cod sub modulul textului cursorului

Acum că avem cursorul Modulul text în poziție, este timpul să ne concentrăm asupra funcționalității! Adăugați un modul de cod chiar sub cursorul Text Module din noua dvs. secțiune.

Adăugați etichete stil și script

Vom combina un pic de cod CSS și JQuery, așa că mergeți mai departe și adăugați etichete de stil și script la modulul dvs. de cod.

Deschiderea codului JQuery

Apoi, copiați lipiți următoarele linii de deschidere a codului JQuery între etichetele de script:

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

Repoziționați modulul textului cursorului

Acum că a fost creată fundația din modulul nostru de cod, vom merge pas cu pas. Primul lucru pe care îl vom face este să plasăm modulul de text pe care l-am creat după conținutul interior al constructorului. Acest lucru ne va permite să folosim cursorul pe toată pagina.

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

Eliminați cursorul implicit al paginii

Apoi, vom elimina cursorul implicit al paginii folosind un cod CSS personalizat pe care îl vom plasa între etichetele de stil.

body {
cursor: none;
}

Setați modulul textului cursorului ca cursor

Apoi, vom permite cursorului să urmeze mișcările vizitatorilor folosind următoarele linii de cod JQuery:

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

Comutați efectul când plasați un modul special

Adăugați Creșteți clasa CSS

După cum ați putut observa în previzualizarea acestei postări, de îndată ce un modul de buton este plasat, stilurile cursorului se schimbă. Pentru a realiza acest lucru, vom adăuga o nouă clasă CSS între etichetele noastre de stil.

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

Toate modulele de butoane

Vom comuta această clasă CSS folosind un cod JQuery. Codul de mai jos vizează toate modulele de butoane din pagina dvs. Divi unul câte unul.

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

Un modul de buton specific

Dacă doriți ca efectul să se aplice în special unui modul, este necesară o abordare diferită. Mai întâi, deschideți modulul buton la care doriți să aplicați efectul și includeți o clasă CSS personalizată.

• Clasa CSS: buton cursor

Apoi, înlocuiți clasa CSS în codul pe care l-ați folosit în pasul anterior. Asta e!

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

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați un cursor personalizat pentru pagina dvs. Divi. De asemenea, v-am arătat cum să utilizați acest cursor personalizat pentru a declanșa un efect de plutire atunci când cineva trece la un îndemn pe pagina dvs. Odată ce veți obține abordarea de a crea un cursor personalizat, veți putea crea orice tip de design sau efect! Ați putut descărca gratuit fișierul JSON. Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.