Cara Mengubah Background Hero Ketika Hover di Elementor

Bosan dengan desain Hero yang gitu-gitu aja? Mungkin kamu perlu mencoba membuat desain yang mampu mengubah background Hero ketika hover di Elementor yang akan dibahas dalam tutorial ini.

Tapi, ngomong-ngomong, maksudnya Hero disini bukan pahlawan di dunia nyata ya, namun bagian besar yang menarik perhatian di bagian atas halaman web, yang sering kali menampilkan elemen visual menonjol seperti gambar, video, atau animasi. Untuk contohnya ketika sudah jadi maka akan seperti ini

Gimana? udah paham kan maksudnya gimana? Kalau sudah, mari lanjut ke langkah-langkah membuat Hero seperti contoh diatas.

Cara Mengubah Background Hero Ketika Hover di Elementor

Sebelum memulai, pastikan di website kamu sudah terinstall plugin berikut:

• Elementor Pro; atau
• Elementor Free + Royal Elementor
• 4 Gambar untuk background yang berbeda

Dalam tutorial ini kita akan menggunakan Elementor Free dan Royal Elementor, sehingga bisa kamu coba juga tanpa harus menggunakan Elementor Pro.

1. Buat Kontainer

Ketika sudah berada dihalaman yang diedit menggunakan Elementor, buat Kontainer baru dengan pengaturan berikut ini

• Content Width: Full Width
• Width: 100%
• Min-Height: 100vh
• Padding: 0x

Pastikan juga untuk menambahkan class main-container-slide kedalam kontainer tersebut dari tab Advanced

2. Tambahkan Custom CSS

Masih di kontainer yang sama dan di tab Advanced, tambahkan Custom CSS dari menu Custom CSS untuk Elementor Pro, atau Custom CSS – Royal Addons untuk Elementor Free + Royal Elementor

1.main-container-slide [class*="slide"]:hover {2    background-color: #CE3A3AA1 !important;3}4.main-container-slide:has(.slide1:hover) {5    background-image: url(https://staging.wpgan.com/gambar1.jpg) !important;6}7
8
9.main-container-slide:has(.slide2:hover) {10    background-image: url(https://staging.wpgan.com/gambar2.jpg) !important;11}12
13
14.main-container-slide:has(.slide3:hover) {15    background-image: url(https://staging.wpgan.com/gambar3.jpg) !important;16}17
18
19.main-container-slide:has(.slide4:hover) {20    background-image: url(https://staging.wpgan.com/gambar4.jpg) !important;21}

Ubah https://staging.wpgan.com/gambar1.jpg, gambar2.jpg, gambar3.jpg, gambar4.jpg dengan URL background yang akan kamu gunakan dan untuk pesan atau notifikasi error di tiap baris bisa diabaikan.

3. Kustomisasi Style Kontainer Utama

Masih berada di Kontainer yang sama, buka tab Style kemudian buat konfigurasi seperti ini:

• Background: Normal
• Background Type: Classic
• Color: Transparent
• Image: *Pilih gambar utama yang akan kamu gunakan ketika tidak di hover
• Image size: Full
• Position: Center Center
• Repeat: No-repeat
• Display Size: Cover

4. Buat Kontainer Baru

Sekarang kamu bisa menambahkan kontainer baru didalam kontainer yang sudah ada dengan konfigurasi ini:

• Content Width: Full Width
• Width: 25%

Pastikan juga untuk menambahkan Class dengan nama slide1 pada kontainer baru dari tab Advanced

5. Duplikat Kontainer Baru

Sekarang kamu bisa menduplikat Kontainer baru dengan cara klik kontainer dan tekan tombol CTRL + D, atau bisa juga dengan klik kanan dan memilih opsi Duplocate sampai ada 4 kontainer, kemudian setiap kontainer diupdate Classnya menjadi slide1, slide2, slide3, slide 4

6. Tambahkan Konten di Setiap Kontainer

Kamu bisa menambahkan konten apapun disetiap kontainer sesuai dengan keperluan dan juga bisa melakukan kustomisasi lain seperti Background Overlay, dan untuk contoh di tutorial ini, maka isi kontainernya seperti ini

7. Periksa Hasilnya dan Publish

Sekarang kamu bisa mencoba melakukan Hover pada setiap kontainer dan background akan berubah seperti ini

Jika sudah seperti itu, maka kamu bisa menambahkan konten lainnya, atau bisa juga langsung publish halaman yang sudah kamu buat.

Itulah cara mudah untuk mengubah background Hero ketika hover di Elementor yang bisa kamu coba. Jika kamu mengalami kendala ketika mencoba ini, silakan bisa meninggalkan komentar dihalaman ini, ya!