Jak dodać stylizowany i odwrócony kursor do swojej strony Divi?

Jednym z najszybszych sposobów interakcji z odwiedzającymi w Twojej witrynie jest użycie ich kursora. Tam zwykle wszystko się zaczyna. Interakcja użytkownika na komputerze jest prawie całkowicie oparta na sposobie, w jaki odwiedzający używają kursora do poruszania się po Twoich stronach. Jest to również jedyna rzecz, która pozwala im wywoływać zdarzenia, niezależnie od tego, czy jest to efekt najechania, czy kliknięcie. Dlatego natkniesz się na mnóstwo stron internetowych, które dostosowują kursor do określonego celu. Stylizacja kursora jest pomocna, jeśli chcesz na przykład wyróżnić wezwanie do działania. Dzisiaj pokażemy Ci, jak to zrobić w Divi. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ za DARMO

Aby położyć swoje ręce na darmowym układzie, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

1. Utwórz nową stronę/otwórz istniejącą

Utwórz nową stronę lub otwórz istniejącą

Zacznij od utworzenia nowej strony lub otwarcia istniejącej.

Prześlij wybrany układ

Aby skupić się na istocie tego samouczka, użyjemy Pakietu Układu Naprawy Roweru, ale możesz użyć dowolnego innego układu, który wybierzesz.

Dodaj nową sekcję na dole strony

Po przesłaniu układu przejdź na dół strony i dodaj nową sekcję. Użyjemy tej sekcji do zbudowania naszego kursora.

Rozstaw

Aby utworzyć niestandardowy kursor, dodamy moduł tekstowy w dalszej części samouczka. Ten moduł zostanie umieszczony wewnątrz sekcji, ale nie chcemy, aby rzeczywisty kontener sekcji pojawiał się w naszym projekcie. Aby sekcja nie pojawiała się, usuniemy domyślne górne i dolne dopełnienie w ustawieniach odstępów.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze modułów, otwórz ustawienia wierszy i usuń wszystkie niestandardowe szerokości rynny w ustawieniach rozmiaru.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Usuń również wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj moduł tekstowy (kursor)

Pozostaw puste pole zawartości

Czas dodać moduł tekstowy, którego później użyjemy jako kursora! Pozostaw pole zawartości puste.

Rozmiary

Przejdź do zakładki projektowania i ukształtuj moduł, używając niestandardowej szerokości i wysokości na różnych rozmiarach ekranu:

• Szerokość:
  • Pulpit: 100px
  • Tablet: 60px
  • Telefon: 40px
• Wzrost:
  • Pulpit: 100px
  • Tablet: 60px
  • Telefon: 40px

Granica

Aby zmienić kursor w okrąg, jak można zauważyć na podglądzie tego posta, użyjemy zaokrąglonych rogów i obramowania.

• Wszystkie rogi: 100%
• Szerokość obramowania: 3px
• Kolor obramowania: #ffffff

Tryb mieszania

W podglądzie tego posta można było zauważyć odwrócony efekt na kursorze, szczególnie po najechaniu na moduł przycisku. Aby osiągnąć ten efekt, użyjemy trybu mieszania dla naszego modułu tekstowego.

• Tryb mieszania: różnica

Główny element CSS

Dodając następujące wiersze kodu CSS do głównego elementu modułu, pomożemy przygotować moduł do przyszłego użycia jako kursora:

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

Pozycja

Wykorzystamy również stałą pozycję dla modułu.

• Pozycja: Naprawiono
• Lokalizacja: górny lewy
• Indeks Z: 2

Klasa CSS

Dokończymy ustawienia modułu, przypisując niestandardową klasę CSS w zakładce Zaawansowane.

• Klasa CSS: kursor

2. Dodaj funkcjonalność

Dodaj moduł kodu poniżej modułu tekstu kursora

Teraz, gdy mamy już moduł tekstowy kursora, czas skupić się na funkcjonalności! Dodaj moduł kodu tuż pod kursorem Moduł tekstowy nowej sekcji.

Dodaj tagi stylu i skryptu

Połączymy trochę kodu CSS i JQuery, więc śmiało dodaj tagi stylu i skryptu do modułu kodu.

Otwieranie kodu JQuery

Następnie skopiuj i wklej następujący kod JQuery otwierający wiersze między tagami skryptu:

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

Moduł tekstowy zmiany położenia kursora

Teraz, gdy stworzona została podstawa wewnątrz naszego modułu kodu, przejdziemy krok po kroku. Pierwszą rzeczą, którą zrobimy, jest umieszczenie utworzonego przez nas modułu tekstowego po wewnętrznej zawartości kreatora. To pozwoli nam używać kursora na całej stronie.

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

Usuń domyślny kursor strony

Następnie usuniemy domyślny kursor strony za pomocą niestandardowego kodu CSS, który umieścimy między tagami stylu.

body {
cursor: none;
}

Ustaw moduł tekstowy kursora jako kursor

Następnie pozwolimy kursorowi śledzić ruchy odwiedzających za pomocą następujących wierszy kodu JQuery:

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

Przełącz efekt podczas najeżdżania na konkretny moduł

Dodaj zwiększ klasę CSS

Jak można zauważyć na podglądzie tego posta, po najechaniu na moduł przycisku zmieniają się style kursora. Aby to osiągnąć, dodamy nową klasę CSS między naszymi tagami stylu.

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

Wszystkie moduły przycisków

Przełączymy tę klasę CSS za pomocą kodu JQuery. Poniższy kod odnosi się do wszystkich modułów przycisków na twojej stronie Divi jeden po drugim.

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

Specjalny moduł przycisku

Jeśli chcesz, aby efekt dotyczył w szczególności jednego modułu, potrzebne jest inne podejście. Najpierw otwórz moduł przycisku, do którego chcesz zastosować efekt, i dołącz niestandardową klasę CSS.

• Klasa CSS: przycisk kursora

Następnie zastąp klasę CSS w kodzie użytym w poprzednim kroku. Otóż ​​to!

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

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak utworzyć niestandardowy kursor dla swojej strony Divi. Pokazaliśmy również, jak używać tego niestandardowego kursora, aby wywołać efekt najechania, gdy ktoś najedzie na wezwanie do działania na Twojej stronie. Gdy zrozumiesz podejście polegające na stworzeniu niestandardowego kursora, będziesz mógł stworzyć dowolny projekt lub efekt! Udało Ci się również pobrać plik JSON za darmo. Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.