Cara Mengubah Kursor Menjadi Tombol Kreatif Saat Melayang Pada Elemen Menggunakan Divi

Rifat Divi Tutorials Oct 16, 2021

Bagaimana jika Anda mengarahkan mouse ke elemen dan itu menjadi tombol dan mengkliknya akan mengarahkan Anda ke halaman lain? Kami sering mengatur tombol di bagian bawah atau samping galeri gambar atau ubin artikel/produk untuk membawa kami ke halaman detail elemen tersebut. Bagaimana jika tombol tidak diatur secara visual? Kami mengaturnya dengan efek melayang mouse sehingga mouse menjadi tombol segera setelah mendarat di ubin gambar atau artikel dan klik di mana saja di area tertentu yang akan membawa kami ke halaman yang diinginkan. Ya! Dengan Divi , kami memiliki banyak opsi untuk menyesuaikan situs web kami dan tutorial hari ini tentang cara mengubah kursor menjadi tombol kreatif sambil mengarahkan kursor ke elemen. Bukankah mengasyikkan?

Jadi jangan menunggu lebih jauh dan langsung masuk ke tutorialnya.

Puncak Menyelinap

Sebelum kita melangkah lebih jauh, seperti inilah desain kita hari ini.

Bagian Satu: Struktur Elemen Bangunan

Tambahkan halaman dari dasbor WordPress Anda dan buka dengan Divi builder. Maju dengan "Bangun Dari Awal".

Buat Situs Web Luar Biasa

Dengan Elementor pembuat halaman gratis terbaik

Mulai sekarang

Menambahkan: Bagian Baru

Warna latar belakang

Kami akan menambahkan putih sebagai warna latar belakang ke bagian awal kami.

  • Warna Latar Belakang: #ffffff

Jarak

Sekarang dari tab desain, tambahkan beberapa spasi ke bagian tersebut.

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

Menambahkan: Baris Baru

Struktur Kolom

Sekarang kita akan menambahkan dua baris kolom ke bagian kita.

Perekat

Sekarang, sebelum menambahkan modul lain, mari ubah pengaturan ukuran dari dua baris kolom ini.

  • Lebar Maks: 2580px

Jarak

Sekarang, buat beberapa perubahan dalam spasi.

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

Menambahkan: Modul Gambar Ke Kolom 1

Menambahkan gambar

Sekarang tambahkan modul gambar ke kolom 1 dan tambahkan gambar pilihan Anda.

Tambahkan Tautan

Sekarang tambahkan tautan ke gambar ini.

Skala Arahkan

Sekarang, pindah ke tab desain dan ubah pengaturan skala hover dari modul gambar ini.

  • Keduanya: 90%

Kelas CSS

Tambahkan beberapa Kelas CSS dari tab lanjutan.

  • Kelas CSS: kursor gambar

Menambahkan: Modul Teks 1 Ke Kolom 1

Konten H3

Kami akan menambahkan modul teks ke kolom 1 dan menambahkan beberapa konten H3 sesuai kebutuhan.

Pengaturan Konten H3

Ubah pengaturan konten H3 dari tab desain.

  • Judul 3 Font: Aktor
  • Judul 3 Warna Teks: #000000
  • Judul 3 Ukuran Teks: Desktop: 35px, Tablet: 28px Dan Telepon: 22px
  • Pos 3 Tinggi Baris: 1.4em

Jarak

Tambahkan spasi ke modul teks.

  • Margin Bawah: 15px

Menambahkan: Modul Teks 2 Ke Kolom 1

Konten Teks

Tambahkan modul teks lain tepat di bawah modul teks sebelumnya dan tambahkan beberapa konten deskriptif ke modul itu.

Pengaturan Konten Teks

Ubah pengaturan konten teks dari tab desain.

  • Judul 3 Font: Aktor
  • Judul 3 Warna Teks: #75BAFF
  • Judul 3 Ukuran Teks: Desktop: 22px, Tablet: 18px Dan Telepon: 15px
  • Spasi Huruf Teks: 0.5px
  • Pos 3 Tinggi Baris: 1.4em

Menambahkan: Modul Tombol Ke Kolom 1

Teks Tombol

Terakhir, tambahkan modul tombol ke kolom 1 dan tambahkan salinan yang relevan.

Pengaturan Teks Tombol

Pindah ke tab desain modul dan ubah pengaturan tombol yang sesuai:

  • Gunakan Gaya Kustom Untuk Tombol: Ya
  • Warna Teks Tombol: #000000
  • Lebar Batas Tombol: 0px
  • Radius Perbatasan Tombol: 1px
  • Font Tombol: Aktor
  • Tampilkan Ikon Tombol: Ya
  • Penempatan Ikon Tombol: Kiri
  • Hanya Tampilkan Ikon Saat Arahkan ke Tombol: Tidak

Jarak

Sesuaikan nilai spasi.

  • Margin Bawah: 80px
  • Padding Bawah: 20px
  • Padding Kanan: 30px

Bayangan Kotak

Selesaikan pengaturan modul dengan menerapkan pengaturan bayangan kotak berikut:

  • Posisi Horizontal Bayangan Kotak: 0px
  • Posisi Vertikal Bayangan Kotak: 2px
  • Warna Bayangan: #000000

Duplikat Konten

Di sini kita akan melakukan beberapa hal. Pertama, kami akan menghapus kolom kedua.

Sekarang, kita akan mengkloning kolom pertama.

Sekarang duplikat seluruh baris dan ubah isinya.

Bagian Kedua: Tambahkan Kursor

Tambahkan Baris Baru

Struktur Kolom

Karena kita sudah selesai dengan struktur desain, kita akan melakukan desain kursor. Tambahkan baris baru ke bagian dengan struktur kolom berikut.

Jarak

Buka pengaturan baris lakukan beberapa perubahan seperti yang disebutkan di bawah ini.

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

Menambahkan: Modul Teks Untuk Kursor

Tambahkan Salinan

Sekarang tambahkan modul teks ke baris yang baru dibuat dan tambahkan beberapa salinan pilihan Anda.

Warna latar belakang

Kemudian, tambahkan warna latar belakang.

  • Warna Latar Belakang: #47669b

Pengaturan Teks

Dari tab desain, ubah gaya teks.

  • Font Teks: Aktor
  • Berat Font Teks: Tebal
  • Gaya Font Teks: Huruf Besar
  • Warna Teks: #ffffff
  • Spasi Huruf Teks: 2px
  • Perataan Teks: Tengah

Perekat

Lakukan beberapa penyesuaian di bagian ukuran.

  • Lebar: 150px
  • Tinggi: 150px

Berbatasan

Kami akan mengubah pengaturan perbatasan untuk membuat lingkaran ini.

  • Semua Sudut: 100px

Bayangan Kotak

Kami akan menambahkan bayangan kotak cahaya juga.

  • Kekuatan Buram Bayangan Kotak: 0px
  • Kekuatan Penyebaran Bayangan Kotak: 20px
  • Warna Bayangan: rgba(7.213.255.0.14)

Kelas CSS

Kemudian, kita akan memberikan modul kita sebuah kelas CSS.

  • Kelas CSS: kursor

Elemen Utama CSS

Sekarang tambahkan kode CSS ke kotak elemen utama.

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

Posisi

Sekarang, kita akan menyelesaikan modul ini dengan membuat beberapa perubahan pada bagian posisi dari tab lanjutan.

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

Menambahkan: Modul Kode

Sekarang tambahkan modul kode di bawah modul teks terakhir. Tambahkan tag Gaya dan Skrip di dalam modul kode.

Tambahkan Kode CSS

Rekatkan kode CSS berikut di dalam 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;
}

Tambahkan Kode JQuery

Rekatkan kode CSS berikut di dalam 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');
 
});
 
});

Hasil Akhir

Inilah tampilan desain akhir kami, Menakjubkan!

Kesimpulan

Tutorial hari ini didasarkan pada bagaimana Anda dapat menghadirkan desain yang lebih interaktif ke situs web Anda. Divi memberi Anda peluang besar untuk menarik lebih banyak perhatian pengunjung ke situs web Anda dengan membuat desainnya bersih dan cantik. Saya harap Anda menyukai tutorial hari ini, dan jika demikian, sebuah share akan luar biasa!

Divi WordPress Theme