Cara Mengubah Gaya Beberapa Elemen pada Arahkan atau Klik di Divi

Akhirnya, di dunia desain web, pembuat kode dan non-pembuat kode akan mencari cara untuk menambahkan penyesuaian dan fungsionalitas yang lebih canggih ke situs web Divi mereka. Biasanya, ini melibatkan penggunaan Javascript/JQuery untuk mengubah gaya elemen pada halaman karena alasan yang berbeda. Anda mungkin ingin membuat formulir kontak muncul saat mengklik tombol. Atau Anda mungkin ingin mengubah gambar saat mengarahkan kursor ke tautan.

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 mendesain tata letak bagian. Kemudian kami akan memperkenalkan cuplikan jQuery sederhana yang dapat Anda gunakan dalam kombinasi dengan CSS khusus untuk menyesuaikan gaya elemen apa pun di bagian itu saat mengarahkan atau mengklik tombol. Ini mungkin terdengar rumit (terutama untuk pemula) tetapi Anda mungkin terkejut betapa sederhananya hal itu untuk dicapai.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Berikut adalah desain tata letak bagian yang diubah saat mengarahkan kursor ke tombol.

Dan di sini adalah desain tata letak bagian yang sama yang diubah dengan mengklik tombol. Perhatikan teks tombol juga berubah saat diklik.

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.

Bagian 1: Merancang Tata Letak Bagian

Untuk memulai, buat baris dua kolom baru.

Pengaturan Bagian

Sebelum menambahkan modul apa pun, buka pengaturan untuk bagian tersebut, dan perbarui yang berikut ini:

• Warna Latar Belakang: #ffffff

• Gaya Pembagi Atas: lihat tangkapan layar
• Warna Pembagi Atas: #ffffff
• Tinggi Pembagi Atas: 5vw

• Gaya Pembagi Bawah: sama
• Warna Pembagi Bawah: #ffffff
• Tinggi Pembagi Bawah: 5vw

• Padding: 6vw atas, 6vw bawah

Sebelum Gambar

Di kolom kiri dari baris dua kolom, tambahkan modul gambar baru.

Kemudian unggah gambar yang ingin Anda tampilkan. Untuk tutorial ini, kami menggunakan gambar dari Paket Tata Letak Learning Management (LMS) yang berukuran kira-kira 800px kali 550px.

Di bawah tab desain, perbarui perataan dan aktifkan opsi kekuatan lebar penuh.

• Penjajaran Gambar: tengah
• Paksa Lebar Penuh: YA

Setelah Gambar

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 mengarahkan kursor/klik.

Untuk gambar ini, kami akan memberikannya posisi absolut. Ini akan menyebabkan gambar berada tepat di atas gambar lain tanpa menghabiskan ruang sebenarnya pada halaman.

• Posisi: Absolut

Di bawah tab Desain, ubah opacity di bawah opsi filter sehingga gambar benar-benar tidak terlihat.

• Opasitas: 0%

Tambahkan Judul Teks

Di kolom kanan, tambahkan modul teks baru.

Kemudian rekatkan HTML berikut ke dalam area konten tubuh:

<h3><span>Design</span> Anything You Want <span>with Divi</span></h3>

Perhatikan bahwa beberapa kata dalam teks dibungkus dengan tag span. Ini agar kami dapat menargetkan dan menata kata-kata itu nanti dengan beberapa CSS khusus.

Di bawah tab desain, perbarui opsi gaya H3 sebagai berikut:

• Judul 3 Font: Montserrat
• Judul 3 Berat Font: Ultra Tebal
• Judul 3 Gaya Font: TT
• Judul 3 Ukuran Teks: 65px (desktop dan tablet), 40px (ponsel)
• Spasi Judul 3 Huruf: 0.8em
• Pos 3 Tinggi Baris: 1.3em

Itu menangani tata letak bagian yang menampung elemen desain yang akan kita ubah saat mengarahkan/mengklik tombol. Di bagian berikutnya, kita akan menambahkan tombol yang akan kita gunakan untuk memulai perubahan gaya.

Buat Bagian untuk Tombol

Buat bagian reguler baru di bawah bagian saat ini.

Kemudian tambahkan baris satu kolom ke bagian tersebut.

Tambahkan Tombol

Di kolom, tambahkan modul tombol baru.

Ubah teks tombol untuk membaca "See After".

Lompat ke tab desain dan perbarui desain tombol sebagai berikut:

• Gunakan Gaya Kustom untuk Tombol: YA
• Ukuran Teks Tombol: 16px
• Warna Teks Tombol: #ffffff
• Latar Belakang Tombol: #4b4baf
• Latar Belakang Tombol (arahkan kursor): #67ddc1
• Lebar Batas Tombol: 0px
• Jarak Huruf Tombol: 4px
• Font Tombol: Montserrat
• Berat Huruf Tombol: Semi Tebal
• Gaya Font Tombol: TT

Bagian 2: Menambahkan Kelas CSS ke Elemen

Sekarang desain kita sudah siap, kita akan menyelesaikan sisa perubahan desain 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 mengarahkan/mengklik tombol.

Tambahkan Kelas CSS ke Bagian

Untuk menambahkan Kelas CSS ke bagian, buka pengaturan bagian, dan klik tab lanjutan. Kemudian masukkan Kelas CSS berikut:

• Kelas CSS: et-change-style_section

Tambahkan Kelas CSS ke Gambar

Selanjutnya, buka pengaturan untuk gambar pertama di kolom kiri dan tambahkan Kelas CSS berikut:

• Kelas CSS: et-sebelum-gambar

Ini akan menjadi gambar yang ditampilkan "sebelum" tombol hover/klik.

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 ditampilkan "setelah" tombol hover/klik.

Tambahkan Kelas CSS ke Teks

Selanjutnya, tambahkan Kelas CSS berikut ke Modul Teks di kolom kanan:

• Kelas CSS: et-style-text

Tambahkan Kelas CSS ke Tombol

Terakhir, tambahkan Kelas CSS khusus 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 Kustom untuk Mengubah Gaya pada Arahkan atau Klik

Sekarang setelah semua Kelas CSS kita berada di tempatnya, sekarang kita dapat menambahkan kode yang diperlukan untuk mengubah gaya semua elemen tersebut saat 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 karena 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 );

Jika Anda melihat kodenya, Anda harus mengenali Kelas CSS yang kami tambahkan ke tombol dan bagian.

Kelas Tombol (".et-toggle-button") digunakan untuk menargetkan elemen yang akan memulai fungsi saat melayang.

Saat mengarahkan kursor, fungsi akan menemukan elemen dengan kelas bagian “.et-change-style_section” dan beralih/menambahkan kelas baru (“.et-change-style-active”) saat kursor melayang di atas tombol.

Tombol juga ditargetkan (melalui “$this”) untuk mengaktifkan kelas baru (“.et-toggle-button_active”) dalam status melayang.

Kunci untuk mengubah gaya elemen ini saat mengarahkan kursor adalah menambahkan/mengalihkan Kelas CSS baru tambahan ini ke bagian dan tombol.

Misalnya, setelah bagian dengan kelas “.et-change-style_section” diberikan kelas tambahan tersebut (“.et-change-style_active”), kita dapat menggunakan CSS Khusus untuk mengubah gaya bagian yang awalnya diberikan melalui opsi Divi bawaan.

Mengubah Gaya Elemen dengan CSS Kustom

Buka modul kode dan tempel CSS Kustom 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;
 }

Perhatikan bahwa kelas bagian awal digabungkan dengan kelas baru sebagai pemilih. CSS berikut hanya akan berlaku untuk bagian ketika kelas baru itu dilampirkan. Ketika tidak terpasang, desain asli akan ditampilkan. Dalam contoh ini, warna latar belakang bagian akan berubah saat mengarahkan kursor ke tombol.

Selanjutnya, rekatkan CSS tambahan berikut di dalam tag gaya.

  .et-change-style_active .et-after-image {
    filter: opacity(100%);
  }
  .et-change-style_active .et-before-image {
    filter: opacity(0%);
  }  

Karena bagian induk diberikan kelas saat mengarahkan kursor, Anda dapat menargetkan elemen turunan dari bagian tersebut (seperti gambar) menggunakan kelas CSS yang sama. Tetapi karena ini adalah kelas dalam wadah/bagian induk, Kelas CSS harus mendahului kelas elemen yang ingin Anda ubah. Dalam contoh ini, Kelas CSS (“.et-change-style_active”) yang diberikan ke bagian induk muncul sebelum kelas yang diberi gambar anak (“.et-after-image” dan “.et-before-image”).

CSS untuk gambar setelahnya akan menampilkan gambar pada tombol hover. Dan CSS untuk gambar sebelumnya akan menyembunyikan gambar pada tombol hover. Hasilnya adalah gambar awal berubah menjadi yang baru pada tombol hover.

Selanjutnya tempel di 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 (Arahkan Arahkan kursor)

Setelah kode ditambahkan, simpan perubahan, dan buka halaman untuk melihat hasilnya. Perhatikan bagaimana elemen yang kami targetkan diubah saat mengarahkan kursor ke tombol.

Mengubah Gaya saat Klik Alih-alih Arahkan kursor

Jika Anda ingin mengubah gaya elemen yang sama saat mengklik tombol (daripada melayang), yang perlu Anda lakukan hanyalah membuat beberapa perubahan pada JQuery. Sebagian besar kode akan tetap sama. Perbedaan utama adalah bahwa metode "melayang" diganti dengan "klik". Dan kami telah menambahkan potongan kode bermanfaat yang mengubah teks tombol saat diklik.

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('See Before');
            } else {
                $this.text('See After');
            }
        });
    });
})( jQuery );

Berikut adalah hasil akhirnya.

Pikiran Akhir

Mampu menargetkan dan mengubah gaya beberapa elemen pada halaman saat mengarahkan 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, mengetahui sedikit CSS dan JS/JQuery akan membantu. Namun, seperti yang telah Anda lihat dalam tutorial ini, Anda tidak perlu mengetahui nada kode untuk mendapatkan hasil yang mengejutkan!

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!