Apakah Anda ingin mengubah gambar dengan mengklik tombol dengan Halaman Builder Elementor ? Dalam tutorial baru ini, kami akan menunjukkan cara melakukannya.

Jika Anda tidak tahu apa yang ingin kami bicarakan hari ini, kami mengundang Anda untuk menonton video berikut:

Kalau begitu mari kita kembali ke mengapa kita ada di sini.

Baca juga: Cara mengubah gambar saat mengarahkan kursor ke teks dengan Elementor

Untuk menyelesaikan tutorial ini, Anda perlu versi Pro dari Elementor, karena kami akan menggunakan kode CSS khusus yang hanya didukung oleh versi iniElementor.

Mari kita buat bagian dengan 2 kolom, lalu di panel samping, mari kita definisikan Kesombongan di Tinggi Mindan kemudian Tinggi minimal ayo klik VH dan atur penggeser ke 100.

Mari seret widget Gambar ke kolom kiri dan sisipkan gambar dari perpustakaan kita.

Di kolom kanan, mari kita masukkan a Widget Judul berjudul Pilih Yang Terbaik. di tab Gaya ayo klik tipografi dan memodifikasi Tinggi baris pada 1.

Lihat juga: Bagaimana cara mengubah gambar?ge di arahkan kursor ke teks dengan Elementor

Mari tambahkan di bawah widget Judul, a Widget Editor Teks.

Di atas widget Judul, mari letakkan Widget Pemisah ke dalam tabnya Isi, ayo ambil 270 untuk lebar. Mari klik Teks untuk Tambahkan elemen, lalu enter kecenderungan sebagai teks. di tab Gaya, modifikasi Gemuk dan kesenjangan di 2.

Temukan juga: Cara menampilkan teks di atas gambar dengan Elementor

Di bagian Teks, klik tipografi, ayo ganti fontnya, Ukuran di 18, yang gemuk di 600.

Di bawah widget Editor isi, ayo ajukan a Bagian dalam, hapus salah satu kolom Bagian Internal dan masukkan yang terakhir a tombol-widget

Mari kita ubah tombolnya dengan masuk ke panel samping dan di tab Isi, klik perpustakaan ikon di icon dan masukkan ikon Tas Belanja, mari kita juga mengosongkan isi tombol on teks

Ayo pergi ke tab Gaya tombol dan di Radius Perbatasan, klik % dan rebut 50 untuk semua radius tepi jalan dan dalam Margin internal, ayo ambil 20.

Mari sesuaikan warna tombol dengan mengubah warna tombol terakhir dengan mengklik klasik untuk Jenis Latar Belakang dan Mari kita ubah warnanya sesuai dengan warna highlight pada gambar.

Kemudian klik Tab maju tombol kami, lalu on positioning dan Lebar ayo pilih Sebaris (Otomatis). Di bagian Lanjutan dariTab tingkat lanjut, ayo ambil 10 untuk margin kanan.

Mari kita duplikat tombol ini 4 kali dan ubah warna tombol ini.

Selanjutnya, mari kita duplikat widget Gambar kita 4 kali, lalu ubah gambarnya.

Di L 'Tab Lanjutan, ayo ambil semua gambar di lapangan kelas CSS dari setiap gambar kita.

Kemudian di lapangan ID CSS masukkan gambar merah untuk gambar dengan highlight merah, gambar hijau untuk gambar dengan highlight hijau, dan gambar coklat untuk gambar dengan highlight coklat, dan seterusnya.

Mari kita pilih Bagian dan diTab tingkat lanjut, di lapangan Kustom CSS salin dan tempel cuplikan kode berikut:

.all-images{
    display: none;
}
#red-image{
    display: block;
}

(Jika Anda tidak memiliki bagian ini maka Anda tidak memiliki versi Pro, jika Anda ingin melanjutkan, Anda perlu meningkatkan versi Anda)

Selanjutnya, mari letakkan widget HTML ke halaman kita, salin dan tempel cuplikan kode berikut ke bagian Kode HTML:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
        
        $('.all-images').hide()
        $('#' + showme).show()
    })
})
</script>

Mari kita pilih tombol pertama, di lapangan Atribut Kustom dari Bagian atribut, salin dan tempel cuplikan kode berikut:

data-showme|IMAGE-ID-NAME

Mari kita ubah bagian IMAGE-ID-NAME dengan ID tombol Anda, ini adalah ID gambar merah, gambar hijau dan gambar biru, dan seterusnya.

Jadi untuk setiap tombol, mari kita ubah kode IMAGE-ID-NAME menjadi warna tombol yang sesuai

Perbarui pekerjaan Anda dan pratinjau dalam mode desktop, tablet, dan ponsel cerdas saat menguji tombol Anda.

Dalam mode ponsel cerdas, Anda dapat, misalnya, menyelaraskan tombol di tengah, mengurangi margin, dan banyak lagi.

Ini dia, Anda baru saja melakukan tugas ini dengan mudah.

Dapatkan Elementor Pro Sekarang!

Kesimpulan

Itu ada ! Itu saja untuk artikel ini yang menunjukkan cara mengubah gambar saat mengarahkan kursor ke teks. Jika Anda memiliki kekhawatiran tentang cara menuju ke sana, beri tahu kami di dalam komentar.

Namun, Anda juga bisa 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.

...