Apakah Anda ingin mengubah gaya beberapa elemen Divi di hover atau setelah klik?
Dalam tutorial ini, kami akan menunjukkan cara mengubah gaya beberapa elemen saat mengarahkan kursor atau mengklik Divi.
Pertama, kita akan memanfaatkan opsi desain bawaan Divi untuk merancang tata letak bagian.
Selanjutnya, kami akan menyajikan cuplikan jQuery sederhana yang dapat Anda gunakan dalam kombinasi dengan CSS khusus untuk menyesuaikan gaya elemen apa pun di bagian ini saat Anda mengarahkan kursor atau mengklik tombol.
Ini mungkin terdengar rumit (terutama untuk pemula), tetapi Anda mungkin terkejut betapa sederhananya melakukannya.
Mari kita mulai!
penelitian
Berikut adalah gambaran singkat dari desain yang akan kita capai dalam tutorial ini.
Mengubah elemen pada tombol melayang
Modifikasi elemen setelah mengklik tombol
Mari kita mulai dengan membuat halaman dengan Divi Builder
Lihat juga: Divi: Cara membuat menu roda berputar di hover
Dari dasbor WordPress, buka Halaman> Tambah Baru untuk membuat halaman baru.
Berikan judul yang masuk akal bagi Anda dan klik Gunakan Divi Builder
kemudian klik Mulai Membangun (Bangun Dari Awal)
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Bagian 1: Desain Tata Letak Bagian
Untuk memulai, buat baris baru dengan dua kolom.
Pengaturan bagian
Sebelum menambahkan modul, buka pengaturan bagian dan perbarui yang berikut:
- Latar belakang: #ffffff
Mari tambahkan pemisah bagian
- Pembagi (Atas)
- Gaya: lihat tangkapan layar
- Warna: #ffffff
- Tinggi: 5vw
- Pembagi (Bawah)
- Gaya: lihat tangkapan
- Warna: #ffffff
- Tinggi: 5vw
- Padding (Atas dan Bawah): 6vw
Gambar (Sebelum mengarahkan kursor)
Di kolom kiri dari baris dua kolom, tambahkan modul gambar baru.
Selanjutnya, unggah gambar yang ingin Anda sorot.
Di bawah tab Mendesain, perbarui perataan dan aktifkan opsi Kekuatan Lebar Penuh.
- Perataan gambar: terpusat
- Kekuatan Lebar Penuh: YA
Gambar (Saat mengarahkan atau setelah klik)
Selanjutnya, kita akan membuat gambar lain yang akan kita tampilkan saat kita mengarahkan/mengklik tombol.
Untuk membuat gambar, duplikat modul gambar sebelumnya.
Kemudian unggah gambar baru. Gambar harus berukuran sama dengan gambar lainnya karena akan menggantikan gambar lain saat di-hover/diklik.
Untuk gambar ini, kami akan memberikannya posisi absolut. Ini akan menyebabkan gambar berada tepat di atas gambar lain tanpa mengambil ruang nyata di halaman.
- Posisi: Absolut
Di bawah tab Mendesain, ubah opacity di bawah opsi filter sehingga gambar benar-benar tidak terlihat.
- Opasitas: 0%
Tambahkan modul Teks
Di kolom kanan, tambahkan modul Teks baru.
Kemudian paste kode HTML berikut ke dalam kotak isi dari tubuh:
<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>
Perhatikan bahwa beberapa kata dalam teks dikelilingi oleh tag merentang. Ini adalah bagaimana kita dapat menargetkan dan menyesuaikan kata-kata ini nanti dengan CSS khusus.
Di bawah tab Mendesain, perbarui opsi gaya H3 sebagai berikut:
- Judul 3:
- Font: Montserrat
- Bobot Font Bobot Font: Sangat Tebal
- Gaya: TT
- Ukuran Teks: 60 px (komputer dan tablet), 40 px (ponsel)
- Spasi Huruf: 0,06em
- Tinggi Garis: 2 em
Di bagian berikutnya, kita akan menambahkan tombol yang akan kita gunakan untuk memulai perubahan gaya.
Buat bagian untuk tombol
Pertama kita perlu membuat bagian reguler baru di bawah bagian saat ini.
Kemudian tambahkan baris ke kolom ke bagian.
Menambahkan tombol
Di kolom, tambahkan modul baru Tombol.
Ubah teks tombol menjadi "Lanjutan...".
Beralih ke tab Mendesain dan perbarui desain tombol sebagai berikut:
- Gunakan Gaya Kustom Untuk Tombol: YA
- Ukuran Teks: 16px
- Warna Teks: #ffffff
- Latar Belakang Tombol (Desktop): #4b4baf
- Tombol Backround (Hover): #67ddc1
- Lebar Perbatasan: 0 piksel
Baca juga: Divi: Cara menambahkan ikon hamburger ke modul Menu
- Jarak Huruf Tombol: 4px
- Font: Montserrat
- Berat Huruf: Semi Tebal
- Gaya Font Tombol: TT
- Margin (Bawah): 0px
- Padding (Atas dan Bawah): 1.5em
- Padding (Kiri dan Kanan): 4em
Bagian 2: Tambahkan Kelas CSS ke Elemen
Sekarang desain kita sudah siap, kita akan membuat perubahan desain lainnya menggunakan kode kustom (CSS dan JQuery).
Tapi sebelum kita mulai menambahkan kode kustom kita, kita perlu menambahkan kelas CSS ke semua elemen yang ingin kita ubah saat kita mengarahkan/mengklik tombol.
Tambahkan kelas CSS ke bagian
Untuk menambahkan kelas CSS ke bagian, buka pengaturan bagian dan klik tab Advanced. Kemudian masukkan kelas CSS berikut:
- Kelas CSS: et-change-style_section
Tambahkan kelas CSS ke modul Gambar
Selanjutnya, buka pengaturan untuk gambar pertama di kolom kiri dan tambahkan kelas CSS berikut:
- Kelas CSS: et-before-image
Ini akan menjadi gambar yang akan ditampilkan "sebelum" arahkan/klik tombol.
Menggunakan modal lapisan, buka pengaturan untuk gambar kedua (yang disembunyikan dengan filter opacity) dan tambahkan kelas CSS berikut:
- Kelas CSS: et-after-image
Ini akan menjadi gambar yang akan ditampilkan "setelah" melayang/mengklik tombol.
Tambahkan kelas CSS ke modul Teks
Selanjutnya, tambahkan kelas CSS berikut ke modul teks di kolom kanan:
- Kelas CSS: et-style-text
Tambahkan kelas CSS ke modul Button
Terakhir, tambahkan kelas CSS khusus ke tombol di bagian bawah sebagai berikut:
- Kelas CSS: et-toggle-button
Kami membutuhkan kelas ini untuk menargetkan tombol untuk fungsionalitas hover/klik dalam kode nanti.
Bagian 3: Tambahkan kode khusus untuk mengubah gaya saat mengarahkan atau mengklik
Sekarang setelah semua kelas CSS kita berada di tempatnya, kita dapat menambahkan kode yang diperlukan untuk mengubah gaya semua elemen ini saat Anda mengarahkan/mengklik tombol.
Tambahkan modul Kode
Untuk menambahkan kode, tambahkan modul Kode di bawah tombol di bagian bawah.
Tempel kode jQuery
Kemudian rekatkan JQuery berikut. Pastikan untuk membungkus kode dalam tag skrip saat kami menambahkan kode ke dokumen HTML (bukan file JS).
(function($) {
$(document).ready(function(){
$('.et-toggle-button').hover(function(){
$('.et-change-style_section').toggleClass('et-change-style_active');
var $this = $(this);
$this.toggleClass('et-toggle-button_active');
});
});
})( jQuery );
Ubah gaya elemen dengan CSS khusus
Buka modul Kode dan tempel CSS khusus berikut di atas skrip JQuery, pastikan untuk membungkusnya dengan tag gaya yang diperlukan.
.et_pb_section.et-change-style_section.et-change-style_active {
background-color:#484db0 !important;
}
Kemudian rekatkan CSS tambahan berikut ke dalam tag gaya.
.et-change-style_active .et-after-image {
filter: opacity(100%);
}
.et-change-style_active .et-before-image {
filter: opacity(0%);
} 
Kemudian tempel sisa CSS di dalam tag gaya:
.et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
color: #ffffff;
}
.et-change-style_active .et-style-text h3 span {
color: #67ddc1;
}
.et-toggle-button_active {
transform: scale(1.1);
background-color: #67ddc1 !important;
}
.et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3 {
transition: all 0.3s;
}Cuplikan CSS ini menggunakan konsep yang sama untuk mengubah gaya elemen ketika bagian (atau tombol) memiliki kelas baru.
Hasil akhir (ikhtisar)
Setelah kode ditambahkan, simpan perubahan dan buka halaman untuk melihat hasilnya. Perhatikan bagaimana item yang kami targetkan berubah saat Anda mengarahkan kursor ke tombol.
Ubah gaya saat klik
Untuk menambahkan fungsionalitas klik, ganti JQuery saat ini dengan yang berikut (sekali lagi, pastikan itu dibungkus dengan tag skrip):
(function($) {
$(document).ready(function(){
$('.et-toggle-button').click(function(e){
e.preventDefault();
$('.et-change-style_section').toggleClass('et-change-style_active');
var $this = $(this);
$this.toggleClass('et-toggle-button_active');
if ($this.hasClass('et-toggle-button_active')){
$this.text('Précédent...');
} else {
$this.text('Suite...');
}
});
});
})( jQuery );
Inilah hasil akhirnya.
Unduh DIVI Sekarang!!!
Kesimpulan
Mampu menargetkan dan menata beberapa elemen pada halaman saat Anda mengarahkan kursor atau mengklik sesuatu adalah keterampilan yang berguna dalam desain web.
Anda dapat menggunakan teknik ini untuk berbagai kasus penggunaan (sebelum dan sesudah, CTA, dll.)
Tentu saja, ada baiknya mengetahui sedikit CSS dan JS/JQuery. Namun, seperti yang telah Anda lihat dalam tutorial ini, Anda tidak memerlukan pengetahuan pengkodean yang mendalam untuk mendapatkan hasil yang luar biasa!
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
