Cara Menambahkan Efek Kemiringan Arahkan ke Elemen Apa Pun di Divi

Menambahkan efek kemiringan hover ke desain web Anda adalah salah satu cara yang menyenangkan dan menarik untuk menghidupkan situs web Divi Anda. Biasanya desain jenis ini membutuhkan plugin atau kode yang lebih canggih (seperti dalam tutorial ini). Namun, proses ini jauh lebih mudah menggunakan Tilt.js (efek kemiringan hover yang ringan untuk jQuery). Dengan Tilt.js, Anda dapat dengan mudah menerapkan efek kemiringan melayang ke apa pun dalam hitungan menit.

Dalam tutorial ini, kami akan menunjukkan cara menambahkan efek kemiringan hover ke elemen apa pun di Divi. Menggunakan kombinasi cuplikan jQuery tilt.js dan pembuat Divi, kami akan menunjukkan cara menambahkan efek kemiringan hover yang mengesankan ke gambar, kolom modul, baris, dan banyak lagi. Kami bahkan akan menunjukkan cara menambahkan efek paralaks 3d yang mengejutkan juga.

Mari kita mulai!

Sneak Peek

Untuk demo langsung fungsionalitas di balik tutorial ini, lihat codepen ini.

Dan inilah sekilas desain yang akan kita buat dalam tutorial ini.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. 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!

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Dasar-dasar Menggunakan Tilt.js

Tilt.js adalah efek miring melayang paralaks ringan untuk jQuery. Hanya dengan beberapa baris jQuery, Anda dapat menambahkan efek kemiringan hover ke elemen apa pun di halaman. Muncul dengan hingga 10 opsi (lihat dokumentasi) yang dapat dengan mudah ditambahkan untuk mengontrol desain dan fungsionalitas efek kemiringan termasuk skala dan efek silau yang indah.

Pada tingkat paling dasar, setelah Anda mengakses perpustakaan tilt.js, Anda dapat menambahkan kelas CSS ke elemen yang ingin Anda miringkan saat mengarahkan kursor dan kemudian menggunakan cuplikan jQuery sederhana untuk menerapkan fungsi kemiringan pada objek jQuery dengan kelas yang sama .

Misalnya, katakanlah Anda menambahkan Kelas CSS khusus ke modul gambar bernama “et-js-tilt”.

Yang perlu Anda lakukan setelah itu adalah menambahkan cuplikan jQuery berikut untuk menambahkan efek kemiringan hover ke gambar.

$(".et-js-tilt").tilt();

Kemudian Anda dapat mengatur opsi tambahan untuk efek kemiringan. Misalnya, Anda dapat menambahkan efek skala dan silau dengan cuplikan kode berikut.

$(".et-js-tilt").tilt({
  glare: true,
  maxGlare: 0.7,
  scale: 1.1
});

Hasilnya akan seperti ini…

Untuk efek yang lebih maju, Anda dapat menambahkan transform:translateZ() ke elemen turunan apa pun untuk mendapatkan efek paralaks 3D. Lebih lanjut tentang itu nanti.

Sekarang setelah kita memiliki pemahaman dasar tentang cara menggunakan tilt.js, mari kita jelajahi cara menggunakannya di Divi.

Cara Menambahkan Efek Kemiringan Arahkan ke Elemen Apa Pun di Divi

Menambahkan Efek Tilt Hover ke Modul Divi

Tambahkan baris tiga kolom ke bagian reguler default.

Tambahkan Modul Gambar

Di kolom pertama, tambahkan Modul Gambar.

Catatan: Anda dapat menggunakan modul apa pun yang Anda inginkan. Itu tidak harus berupa modul gambar.

Unggah gambar pilihan Anda. Saya menggunakan salah satu dari Paket Tata Letak Cookies Buatan Sendiri.

Tambahkan Kelas Modul Gambar

Di bawah tab lanjutan, tambahkan Kelas CSS berikut:

• Kelas CSS: et-js-tilt

Kelas ini akan digunakan sebagai selektor untuk fungsi kemiringan kita nanti.

Salin dan Tempel Modul Gambar

Selanjutnya, salin modul gambar dan tempel satu ke masing-masing dari dua kolom yang tersisa.

Anda dapat mengganti gambar duplikat dengan yang baru jika Anda mau. Pastikan saja bahwa setiap modul gambar memiliki Kelas CSS “et-js-tilt”.

Tambahkan JQuery tilt.js

Untuk menambahkan pustaka tilt.js dan cuplikan kode yang diperlukan untuk memiringkan gambar kita, kita akan menggunakan modul kode.

Pertama, tambahkan baris satu kolom baru di bawah baris yang ada.

Kemudian tambahkan modul kode ke baris baru.

Selanjutnya, kita perlu mengakses perpustakaan tilt.js dengan menambahkan skrip yang mengimpor tilt.js dari CDN mereka (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Rekatkan skrip berikut di kotak kode.

Gunakan src berikut dalam tag skrip untuk mengimpor perpustakaan:

src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"

Seharusnya terlihat seperti ini:

Penting untuk mengimpor tilt.js sebelum menambahkan kode yang akan menggunakannya. Jadi, setelah skrip menunjuk ke tilt.js, tambahkan tag skrip yang diperlukan untuk membungkus JQuery yang perlu kita tambahkan. Kemudian rekatkan JQuery berikut di antara tag skrip .

jQuery(document).ready(function ($) {
  if ($(window).width() > 980) {

    $(".et-js-tilt").tilt({
      glare: true,
      maxGlare: 0.7,
      scale: 1.1,
      perspective: 300,
    });

  }
});

Perhatikan bahwa fungsi tilt() berada di dalam pernyataan if yang akan dijalankan ketika lebar browser lebih besar dari 980px. Ini akan memastikan efeknya hanya terjadi di desktop.

Inilah hasilnya.

Menambahkan Efek Tilt Hover ke Baris

Seperti yang kami sebutkan sebelumnya, Anda dapat menambahkan efek kemiringan hover ini ke elemen apa pun di Divi. Ini termasuk seluruh baris. Plus, Anda dapat menambahkan efek kemiringan ke baris sambil mempertahankan efek kemiringan untuk setiap modul di dalam baris.

Berikut cara melakukannya.

Duplikat Baris dan Tambahkan Kelas CSS Unik ke Baris

Gandakan baris gambar yang ada lalu buka pengaturan baris duplikat. Di bawah tab lanjutan, berikan baris Kelas CSS unik sebagai berikut:

• Kelas CSS: et-row-js-tilt

Tambahkan jQuery

Kemudian tambahkan jQuery berikut di bawah fungsi kemiringan sebelumnya untuk menerapkan fungsi kemiringan terpisah ke baris.

    $(".et-row-js-tilt").tilt({
      scale: 1,
      perspective: 1200,
    });

Perhatikan bahwa untuk efek kemiringan ini, kami mengembalikan skala ke 1 dan meningkatkan nilai perspektif sehingga kemiringan lebih halus.

Inilah hasilnya.

Perhatikan bagaimana baris memiliki fungsi kemiringan yang aktif saat melayang di atas baris dan masing-masing modul gambar juga memiliki efek kemiringan yang sama yang kita tambahkan sebelumnya. Ini adalah bagaimana Anda dapat menerapkan contoh efek kemiringan bersarang.

Menambahkan Efek Tilt Hover ke Kolom dengan Beberapa Modul Divi

Dalam beberapa kasus, akan sangat membantu untuk menambahkan efek kemiringan ke kolom modul. Ini akan memungkinkan Anda untuk merancang beberapa modul dalam kolom dengan Divi dan kemudian membuat semua elemen tersebut dimiringkan sebagai satu unit. Untuk memberi Anda contoh bagaimana melakukannya, kami akan menambahkan efek tilt hover ke kolom dengan modul gambar, modul teks, dan modul tombol.

Tambahkan Baris Baru

Untuk memulai, buat baris kolom seperenam dua pertiga seperenam baru di bawah baris gambar sebelumnya.

Tambahkan Modul Gambar

Di dalam kolom 2 (kolom tengah), tambahkan modul gambar baru.

Unggah gambar ke modul dan atur perataan gambar ke tengah.

Tambahkan Modul Teks

Di bawah modul gambar, tambahkan modul teks dengan judul H2 berikut:

<h2>Local Organic</h2>

Kemudian perbarui gaya heading 2 sebagai berikut:

• Judul 2 font: Berkshire Swash
• Judul 2 Perataan Teks: Tengah
• Judul 2 Warna Teks: #000000
• Judul 2 Ukuran Teks: 60px (desktop), 32px (tablet), 20px (ponsel)
• Pos 2 Tinggi Baris: 1.2em

Tambahkan Modul Tombol

Di bawah Modul Teks, tambahkan modul tombol.

Perbarui teks tombol untuk membaca “Tentang Kami” dan perbarui pengaturan desain sebagai berikut:

• Penjajaran Tombol: centerr
• Ukuran Teks Tombol: 18px
• Warna Teks Tombol: #fff
• Warna Latar Tombol: #000
• Lebar Batas Tombol: 0px
• Radius Batas Tombol: 100px
• Font Tombol: Pasir hisap
• Berat Huruf Tombol: Tebal
• Padding: 16px atas, 16px bawah, 30px kiri, 30px kanan
• Bayangan Kotak: lihat tangkapan layar

Pengaturan Kolom

Setelah ketiga modul selesai, buka pengaturan untuk kolom induk dari modul tersebut (kolom 2) dan perbarui yang berikut:

• Warna Latar Belakang: #f5cee6

• Padding: 50px (atas dan bawah), 20px (kiri dan kanan)

Menambahkan Kelas CSS ke Kolom

Di bawah tab lanjutan, tambahkan Kelas CSS berikut:

• Kelas CSS: et-column-js-tilt

Menambahkan jQuery untuk Menerapkan Efek Kemiringan ke Kolom

Untuk menambahkan efek kemiringan ke kolom, kita dapat menambahkan potongan jQuery serupa lainnya yang menargetkan kolom Kelas CSS. Tempelkan cuplikan berikut di bawah cuplikan sebelumnya yang menargetkan baris.

    $(".et-column-js-tilt").tilt({
      scale: 1.1,
      perspective: 1000,
    });

Berikut adalah hasil akhirnya.

Menambahkan Efek Paralaks 3D ke Elemen Dalam

Untuk efek kemiringan hover yang lebih maju, kita dapat menambahkan efek paralaks 3D ke modul bagian dalam kolom. Menggunakan kombinasi perspektif dan transform:translateZ() , kita dapat membuat setiap modul di dalam kolom muncul dalam ruang 3d saat efek kemiringan melayang aktif.

Berikut cara melakukannya.

Duplikat Baris Sebelumnya

Pertama, duplikat baris sebelumnya dengan efek kemiringan ditambahkan ke kolom tengah.

Tambahkan Kelas Kolom Unik

Kemudian perbarui kolom tengah (kolom 2) dengan Kelas CSS unik sebagai berikut:

• Kelas CSS: et-column-js-tilt-3d

CSS khusus

Untuk memastikan modul bagian dalam mempertahankan efek 3d, tambahkan CSS Kustom berikut ke Elemen Utama Kolom:

transform-style: preserve-3d;

Tambahkan jQuery dan CSS

Kemudian tambahkan beberapa cuplikan jQuery lagi di bawah cuplikan fungsi kemiringan sebelumnya yang menargetkan kolom sebagai berikut:

    const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
      scale: 1.1,
      perspective: 1000,
    });
    columnTilt3d.on("tilt.mouseEnter", function (e) {
      $(e.target).addClass("tilt-active");
    });
    columnTilt3d.on("tilt.mouseLeave", function (e) {
      $(e.target).removeClass("tilt-active");
    });

jQuery ini menambahkan fungsi kemiringan dasar lain ke kolom seperti contoh sebelumnya. Namun, kode tersebut juga mengaktifkan kelas baru (“tilt-active”) ke kolom setiap kali efek kemiringan aktif. Kita dapat menggunakan kelas baru ini untuk menerapkan nilai transform: translateZ() ke setiap modul saat mengarahkan kursor ke kolom. Ini akan menciptakan efek paralaks 3d pop-out.

Untuk melakukannya, tambahkan CSS Kustom berikut ke bagian atas kotak kode/konten, pastikan untuk membungkus CSS dalam tag gaya yang diperlukan.

  .et-column-js-tilt-3d.tilt-active .et_pb_image {
    transform: translateZ(100px);
  }
  .et-column-js-tilt-3d.tilt-active .et_pb_text {
    transform: translateZ(40px);
  }
  .et-column-js-tilt-3d.tilt-active .et_pb_button {
    transform: translateZ(50px);
  }

Sekarang lihat hasil akhirnya. Perhatikan bagaimana ketiga modul muncul dalam ruang 3d saat mereka berputar selama efek kemiringan.

Hasil Akhir

Berikut adalah tampilan lain pada hasil akhir untuk contoh kami.

Pikiran Akhir

Efek kemiringan hover yang ditawarkan oleh Tilt.js benar-benar menyenangkan untuk bereksperimen. Meskipun saya menggunakan beberapa contoh dasar dalam tutorial ini, Anda dapat dengan mudah memiliki hari lapangan menerapkan efek kemiringan melayang-layang ini ke salah satu tata letak siap pakai kami atau di situs Anda sendiri. Menikmati!

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!