Opsi transformasi bawaan dari Divi telah terbukti menjadi alat desain yang sangat berguna, memungkinkan Anda mengubah ukuran, memutar, memiringkan, atau memposisikan elemen apa pun pada halaman dengan mudah. Dan Anda bahkan dapat memilih untuk mengubah item menjadi status melayang untuk efek melayang yang mengagumkan. Jadi hari ini kami akan menunjukkan kepada Anda bagaimana menerapkan animasi ini dalam satu klik.

Metode ini membutuhkan penggunaan jQuery. Hal yang hebat tentang teknik ini adalah Anda dapat menggunakan parameter desain bawaan dari Divi untuk menata properti transformasi, lalu aktifkan (atau nonaktifkan) properti transformasi tersebut dengan satu klik mouse. Ini akan membuka banyak kemungkinan unik untuk diungkapkan isi disembunyikan dengan memindahkan item saat diklik, bukan diarahkan. Dan ini juga membantu mengurangi kebutuhan untuk mengetahui banyak tentang CSS.

Mari kita mulai.

Apa yang Anda butuhkan untuk memulai

Untuk tutorial ini, yang Anda butuhkan hanyalah Divi. Untuk memulai, buka dashboard WordPress Anda. Buat halaman baru, beri judul pada halaman Anda, dan lanjutkan mendesain pada pembuat Divi di latar depan. Pilih opsi “Bangun dari awal”. Sekarang Anda siap berangkat!

Ide dasarnya dijelaskan

Sebelum saya membahas terlalu banyak detail dalam tutorial ini, saya akan memandu Anda melalui cara kerja teknik ini dalam beberapa kata.

Setiap kali Anda menyesuaikan elemen (bagian, garis atau modul) di Divi, Anda menambahkan CSS khusus ke elemen ini di latar belakang. Misalnya, menggunakan pengaturan built-in Divi, Anda dapat menambahkan properti rotasi transformasi ke modul uraian sehingga itu memutar modul sepanjang sumbu Z sebesar 20 derajat.

Uraian pengaturan divi

Namun di balik layar, Anda membuat CSS khusus yang ditambahkan ke modul teks ini dan terlihat seperti ini:

.et_pb_text_0 {transform: rotateZ (20deg); }

Cukup sederhana. Dan katakanlah Anda ingin menambahkan opsi transformasi hover yang sama. Anda hanya perlu menerapkan properti transformasi untuk status hover di pengaturan Divi Builder.

Animasi hover Divi

Dan kodenya akan terlihat seperti ini di belakang layar:

.et_pb_text_0: hover {transform: rotateZ (20deg); }

Namun, jika Anda ingin menerapkan properti transformasi saat diklik, semuanya harus bekerja sedikit berbeda. Anda harus memasukkan kode javascript untuk memicu peristiwa klik pada elemen (atau modul teks).

Dengan contoh kami saat ini, tujuan utama kami pada dasarnya adalah untuk mengaktifkan dan menonaktifkan properti transformasi "transform: rotateZ (20deg)" saat diklik. Cara mudah untuk melakukannya adalah dengan membuat kelas CSS khusus dengan properti "transformer: none!" Penting ”di halaman (atau lembar gaya eksternal). Ini akan terlihat seperti ini.

.toggle-transform-animation {transform: none! important; }

Parameter halaman divi

Dengan CSS itu. Kita dapat menambahkan kelas CSS "toggle-transform-animation" ke elemen modul uraian yang memiliki properti transform kita.

Ringkasan parameter

Ini akan menonaktifkan (menimpa) properti transform dan mencegahnya dari aktivasi awalnya meskipun gaya properti transformasi telah ditambahkan ke dalamnya.

Sekarang yang harus Anda lakukan adalah mengaktifkan (menambah dan menghapus) kelas CSS khusus ini ketika Anda mengklik elemen tersebut. Jadi, setiap kali kita mengklik elemen tersebut, kelas akan dihapus dan properti transformasi (yang Anda tambahkan dengan Divi) akan diterapkan.

Berikut adalah contoh sederhana tentang cara melakukan ini. Pertama, tambahkan kelas CSS lain ke modul uraian bernama "transform_target".

Properti Transform Divi pada Klik

Selanjutnya, buka Divi > Opsi Tema > Integrasi dan tambahkan skrip jQuery berikut ke bagian atas blog Anda:

jQuery(document).ready(function() { 
    jQuery('.transform_target').click(function(){
        jQuery(this).toggleClass('toggle-transform-animation');
    }); 
});

Tambahkan bagian integrasi divi

Itu saja ! Sekarang, setiap kali Anda mengklik modul presentasi, properti transformasi yang Anda tambahkan ke presentasi di Divi akan diaktifkan atau dinonaktifkan.

Bidikan animasi

Sekarang mari kita membuat contoh sehingga Anda dapat melihat bagaimana ini mungkin berguna untuk proyek Anda sendiri.

Cara mengganti properti transformasi pada Klik untuk menampilkan konten di Divi

Untuk contoh ini, kami akan tetap menggunakan contoh uraian sederhana yang digunakan di atas. Selanjutnya, kami akan menambahkan uraian tambahan di belakang ini sehingga setiap kali Anda mengeklik uraian di atas, uraian tersebut akan bergerak keluar untuk menampilkan isi uraian tambahan yang ada di belakang dokumen.

Membuat modul Blurb depan dan belakang

Kemudian tambahkan modul presentasi ke kolom 1.

Memodulasi ringkasan diviPerbarui isi uraian untuk hanya menyertakan judul (hapus konten isi default), lalu tambahkan ikon uraian.

Sesuaikan modul ringkasan diviKemudian perbarui parameter desain sebagai berikut:

Warna latar belakang: #4c5866
Warna Ikon: #ffffff
Orientasi teks: tengah
Warna teks
: Margin Khusus Ringan: 0px di bagian bawah
Padding khusus: 15% di atas, 15% di bawah, 10% di kiri, 10% di kanan

Ubah jarak modul divi

Kita akan kembali ke modul ini nanti, tetapi untuk saat ini, kita perlu membuat modul Blurb kedua yang akan berfungsi sebagai modul "kembali" dengan konten tambahan.

Untuk melakukan ini, duplikat modul presentasi yang baru saja Anda buat.

Gandakan modul ringkasan divi

Kemudian, pada modul kedua, hapus ikon presentasi (dan gambar default) dan tambahkan kembali konten tubuh ke modul. Kemudian perbarui parameter desain sebagai berikut:

Warna latar belakang: rgba (76,88,102,0.3)
Warna teks: Hitam
Padding khusus: 20% teratas

Ubah font dan latar belakang divi

Posisikan modul sebelum Ringkasan

Sekarang setelah dua uraian kita diberi gaya, kita perlu kembali ke uraian depan (atas) kita dan memposisikannya di atas uraian belakang (bawah). Untuk melakukan ini, kami akan memberikannya posisi absolut dengan tinggi 100% dan lebar 100%.

Pertama, buka pengaturan modul presentasi atas / depan dan perbarui yang berikut:

tinggi: 100%;
lebar: 100%;

Properti Transform Divi pada Klik

Kemudian tambahkan kode CSS khusus berikut ke elemen utama:

posisi: absolut! penting; transisi: semua .5s;

Kemudian perbarui indeks z sebagai berikut:

Indeks Z: 2000

Sesuaikan modul divi css

Posisi absolut, dikombinasikan dengan 100% tinggi dan lebar serta indeks z, memastikan bahwa modul uraian tetap berada di atas modul uraian di belakangnya. Properti transisi sebenarnya adalah durasi transisi dari opsi transformasi yang akan kita terapkan pada klik berikutnya. Dan "cursor: pointer" adalah untuk mengubah kursor sehingga elemen yang muncul dapat diklik oleh pengguna.

Menambahkan opsi transformasi dan kelas khusus ke tampilan depan

Sekarang saatnya menambahkan properti transformasi kita ke uraian depan. Kami kemudian akan menambahkan kelas CSS khusus yang diperlukan untuk jQuery kami untuk mengaktifkan properti ini saat diklik.

Di bawah parameter desain uraian depan, tambahkan properti transformasi berikut:

Skala transformasi X dan y: 20%

Transformasi Divi

Transformasi asal: tengah atas

Modifikasi transformasi divi

Ingatlah bahwa desain transformasi yang Anda lihat pada saat ini akan menjadi yang dipicu saat diklik. Kami hanya memanfaatkan pembuat Divi untuk mendapatkan desain yang diinginkan. Dalam hal ini, uraian depan berkontraksi dan menjadi tengah di atasnya seperti ikon yang dapat diklik.

Setelah selesai, tambahkan dua kelas CSS yang diperlukan untuk menargetkan uraian depan dengan jQuery sebagai berikut:

Kelas CSS: beralih-ubah-animasi transform_target

(pastikan untuk memisahkan setiap nama kelas dengan spasi)

Properti Transform Divi pada Klik

Kemudian tambahkan potongan kode CSS khusus berikut yang akan digunakan untuk mengaktifkan dan menonaktifkan properti transformasi dengan jQuery.

.toggle-transform-animation {transform: none! important; }

Pengaturan halaman DiviAnda akan melihat bahwa properti transformasi uraian sebelumnya ditambahkan telah dinonaktifkan karena kelas ini telah diterapkan untuk itu.

Sekarang buka Divi> Opsi tema> Integrasi dan tambahkan skrip jQuery berikut ke kepala blog:

jQuery(document).ready(function() { 
    jQuery('.transform_target').click(function(){
        jQuery(this).toggleClass('toggle-transform-animation');
    }); 
});

Tambahkan bagian integrasi divi

Mari kita lihat hasil akhirnya.

Uraian modul animasi divi

Anda dapat menggunakan contoh ini untuk membuat desain yang lebih mengesankan. Jangan ragu untuk membagikan pendapat Anda di bagian komentar.