Apakah Anda ingin mengubah gambar saat mengarahkan kursor ke teks 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:

ubah gambar saat mengarahkan kursor ke teks dengan Elemen Pembuat Halaman

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

Temukan juga panduan kami di:  Cara Membuat Kartu Efek Portofolio 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.

ubah gambar saat mengarahkan kursor ke teks dengan Elemen Pembuat Halaman

Di tab Gaya ayo pilih Jenis latar belakang en cliquant sur klasik, lalu ubah couleur di# F9F9F9

ubah gambar saat mengarahkan kursor ke teks dengan Elemen Pembuat Halaman

Di tab maju, ubah semua Margin internal di 25

Sekarang mari kita ubah lebar kolom menjadi 40% untuk kolom kiri dan 60% untuk kolom kanan.

ubah gambar saat mengarahkan kursor ke teks dengan Elemen Pembuat Halaman

Di kolom kiri, let's drop a Widget Editor Teks, lalu rekatkan Teks di dalamnya dan ubah Ukuran Judul teks tentang Judul 3.

Di tab maju, masukkan sebagai Margin Internal 10-25-10-30 masing-masing untuk margin internal atas, kanan, bawah dan kiri

Di bagian latar belakang tab maju, klik GAMBARAN, lalu pilih jenis latar belakang di klasik, ayo masuk warna #DFF5FF et Durasi Transisi di 0.5.

Jika kita mengarahkan kursor ke teks, kita akan memiliki kesempatan untuk menemukan warna latar belakang yang indah saat mengarahkan kursor.

Sekarang mari kita pergi ke bagian perbatasan, dan klik GAMBARAN, lalu pilih Continue untuk tipe perbatasan et mari kita nonaktifkan tautan antar perbatasan memasuki 4 untuk batas kiri. Yuk pilih warnanya #002FA7 dan tambahkan durasi transisi ke 0.5

Jika kita mengarahkan kursor ke kotak teks kita sekali lagi, kita akan melihat animasi yang lebih menonjol dengan batas di sebelah kiri.

Di bagian Perbatasan, mari kembali ke tab NORMAL, mari kita pilih jenis perbatasan pada Continue, ayo matikan ikatan antar perbatasan, ambil 4 untuk batas kiri dan membuatnya sangat transparan.

Jika kita mengarahkan kursor ke teks sekali lagi, kita akan melihat transisi yang sangat mulus.

Baca juga: Cara menampilkan teks di atas gambar dengan Elementor

Mari duplikat teks ini dua kali dan ubah teksnya masing-masing isi seperti ini.

Di kolom kanan, seret a widget gambar, dan menyisipkan gambar dari perpustakaan kami.

Kami akan membuat ruang di sekitar gambar ini dengan pergi ke Tab Lanjutan kolom dan masukkan 10 – 10 – 10 – 50 untuk semua margin internal Atas, Kanan, Bawah dan Kiri.

Mari kita pilih gambar dan di tab maju dari yang terakhir, mari kita pergi ke bagian Efek gerak kemudian Animasi Masuk, Pilih Fade In

Ayo masuk ke bagian maju dari Tab Tingkat Lanjut dan tambahkan beberapa nama kelas di bidang Kelas CSS. Jadi mari kita dapatkan semua-img img-1

Mari kita menduplikasi gambar kita 2 kali.

Mari kita pilih gambar kedua dan ubah img-1 menjadi img-2, lalu ubah gambar menjadi gambar baru.

Lihat juga: Cara membuat galeri gambar dengan Elementor

Untuk gambar ketiga mari kita ubah saja img-1 menjadi img-3, lalu ubah gambar tersebut menjadi gambar baru.

ubah gambar saat mengarahkan kursor ke teks dengan Elemen Pembuat Halaman

Mari pilih bagian kita dan buka tabnya maju. Di bagian Kustom CSS, salin dan tempel cuplikan kode berikut:

selector .all-img{
    display: none;
}
selector .img-1{
    display: block;
}

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

ubah gambar saat mengarahkan kursor ke teks dengan Elemen Pembuat Halaman

Mari kita pilih editor teks pertama kita dan pergi ke tab Advanced dan ke Bagian atribut. Di lapangan atribut, salin dan tempel cuplikan kode berikut:

data-showme|img-1

Lakukan ini untuk editor teks lain sambil mengubah img-1 ke img-2 atau ke img-3

Sekarang mari tambahkan widget HTML ke halaman kita. Salin dan tempel skrip berikut:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').hover( function(){
        event.preventDefault();
        var showme = $(this).attr('data-showme')
        
        $('.all-img').hide()
        $('.' + showme).show()
        
    })
})
</script>
ubah gambar saat mengarahkan kursor ke teks dengan Elemen Pembuat Halaman

Sekarang simpan atau perbarui halaman Anda dan lihat pratinjaunya.

ubah gambar saat mengarahkan kursor ke teks dengan Elemen Pembuat Halaman

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.

...