3 menit
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
.main-container-slide [class*="slide"]:hover {
background-color: #CE3A3AA1 !important;
}
.main-container-slide:has(.slide1:hover) {
background-image: url(https://wpgan.com/gambar1.jpg) !important;
}
.main-container-slide:has(.slide2:hover) {
background-image: url(https://wpgan.com/gambar2.jpg) !important;
}
.main-container-slide:has(.slide3:hover) {
background-image: url(https://wpgan.com/gambar3.jpg) !important;
}
.main-container-slide:has(.slide4:hover) {
background-image: url(https://wpgan.com/gambar4.jpg) !important;
}Ubah https://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!
Terima kasih telah berkunjung ke WPGan.com dan membaca Cara Mengubah Background Hero Ketika Hover di Elementor. Dapatkan saldo $100 di Vultr gratis untuk uji coba VPS dari [Halaman Ini]