Cara Menambahkan Kursor Bergaya & Terbalik ke Halaman Divi Anda

Salah satu cara tercepat untuk berinteraksi dengan pengunjung di situs web Anda adalah melalui kursor mereka. Di situlah biasanya semuanya dimulai. Interaksi pengguna di desktop hampir seluruhnya didasarkan pada cara pengunjung menggunakan kursor mereka untuk menavigasi halaman Anda. Itu juga satu-satunya hal yang memungkinkan mereka untuk memicu peristiwa, apakah itu efek melayang atau klik. Itulah mengapa Anda akan menemukan banyak sekali situs web yang menyesuaikan kursor dengan tujuan tertentu. Menata kursor Anda sangat membantu jika Anda ingin menyorot ajakan bertindak, misalnya. Hari ini, kami akan menunjukkan cara melakukannya di dalam Divi. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letaknya GRATIS

Untuk mendapatkan tata letak gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

1. Buat Halaman Baru/Buka Yang Sudah Ada

Buat Halaman Baru atau Buka Yang Ada

Mulailah dengan membuat halaman baru atau membuka halaman yang sudah ada.

Unggah Tata Letak Pilihan Anda

Untuk fokus pada esensi dari tutorial ini, kita akan menggunakan Paket Tata Letak Perbaikan Sepeda tetapi jangan ragu untuk menggunakan tata letak lain pilihan Anda.

Tambahkan Bagian Baru ke Bawah Halaman

Setelah tata letak Anda diunggah, navigasikan ke bagian bawah halaman Anda dan tambahkan bagian baru. Kita akan menggunakan bagian ini untuk membuat kursor kita.

Jarak

Untuk membuat kursor kustom, kami akan menambahkan Modul Teks nanti di tutorial. Modul ini akan ditempatkan di dalam bagian, tetapi kami tidak ingin wadah bagian yang sebenarnya muncul dalam desain kami. Untuk menghindari bagian tersebut muncul, kami akan menghapus padding atas dan bawah default dalam pengaturan spasi.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris dan hapus semua lebar talang khusus dalam pengaturan ukuran.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Hapus semua padding atas dan bawah default juga.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Modul Teks (Kursor)

Biarkan Kotak Konten Kosong

Saatnya menambahkan Modul Teks, yang nantinya akan kita gunakan sebagai kursor! Biarkan kotak konten kosong.

Perekat

Pindah ke tab desain dan bentuk modul menggunakan lebar dan tinggi khusus di berbagai ukuran layar:

• Lebar:
  • Desktop: 100px
  • Tablet: 60px
  • Telepon: 40px
• Tinggi:
  • Desktop: 100px
  • Tablet: 60px
  • Telepon: 40px

Berbatasan

Untuk mengubah kursor menjadi lingkaran, seperti yang Anda lihat di pratinjau posting ini, kami akan menggunakan sudut membulat dan batas.

• Semua Sudut: 100%
• Lebar Perbatasan: 3px
• Warna Perbatasan: #ffffff

Modus Campuran

Dalam pratinjau posting ini, Anda dapat melihat efek terbalik pada kursor, terutama saat mengarahkan Modul Tombol. Untuk mencapai efek ini, kami akan menggunakan mode campuran untuk Modul Teks kami.

• Mode Campuran: Perbedaan

Elemen Utama CSS

Dengan menambahkan baris kode CSS berikut ini ke elemen utama modul, kami akan membantu menyiapkan modul untuk digunakan di masa mendatang sebagai kursor:

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

Posisi

Kami akan menggunakan posisi tetap untuk modul juga.

• Posisi: Tetap
• Lokasi: Kiri Atas
• Indeks Z: 2

Kelas CSS

Dan kami akan menyelesaikan pengaturan modul dengan menetapkan kelas CSS khusus di tab lanjutan.

• Kelas CSS: kursor

2. Tambahkan Fungsionalitas

Tambahkan Modul Kode Di Bawah Modul Teks Kursor

Sekarang kita memiliki Modul Teks kursor di tempat, saatnya untuk fokus pada fungsionalitas! Tambahkan Modul Kode tepat di bawah Modul Teks kursor bagian baru Anda.

Tambahkan Gaya & Tag Skrip

Kami akan menggabungkan sedikit CSS dan Kode JQuery, jadi lanjutkan dan tambahkan tag gaya dan skrip ke Modul Kode Anda.

Pembukaan Kode JQuery

Selanjutnya, salin tempel baris pembuka kode JQuery berikut di antara tag skrip:

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

Modul Teks Kursor Reposisi

Sekarang fondasi di dalam Modul Kode kita telah dibuat, kita akan melangkah selangkah demi selangkah. Hal pertama yang akan kita lakukan adalah menempatkan Modul Teks yang telah kita buat setelah konten dalam pembuatnya. Ini akan memungkinkan kita untuk menggunakan kursor di seluruh halaman.

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

Hapus Kursor Default Halaman

Selanjutnya, kami akan menghapus kursor default halaman menggunakan beberapa kode CSS khusus yang akan kami tempatkan di antara tag gaya.

body {
cursor: none;
}

Atur Modul Teks Kursor sebagai Kursor

Selanjutnya, kita akan mengizinkan kursor untuk mengikuti pergerakan pengunjung menggunakan baris kode JQuery berikut:

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

Toggle Effect Saat Mengarahkan Modul Tertentu

Tambahkan Tingkatkan Kelas CSS

Seperti yang Anda lihat di pratinjau posting ini, segera setelah Modul Tombol diarahkan, gaya kursor berubah. Untuk mencapai ini, kita akan menambahkan Kelas CSS baru di antara tag gaya kita.

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

Semua Modul Tombol

Kami akan mengaktifkan kelas CSS ini menggunakan beberapa kode JQuery. Kode di bawah ini menargetkan semua Modul Tombol di dalam halaman Divi Anda satu per satu.

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

Modul Tombol Tertentu

Jika Anda ingin efek diterapkan pada satu modul secara khusus, diperlukan pendekatan yang berbeda. Pertama, buka Modul Tombol yang ingin Anda terapkan efeknya dan sertakan kelas CSS khusus.

• Kelas CSS: tombol kursor

Kemudian, ganti kelas CSS pada kode yang Anda gunakan pada langkah sebelumnya. Itu dia!

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

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat kursor khusus untuk halaman Divi Anda. Kami juga telah menunjukkan kepada Anda cara menggunakan kursor khusus ini untuk memicu efek kursor saat seseorang mengarahkan ajakan bertindak di halaman Anda. Setelah Anda mendapatkan pendekatan untuk membuat kursor khusus, Anda akan dapat membuat segala jenis desain atau efek! Anda juga dapat mengunduh file JSON secara gratis. Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.