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.
Sebelum memulai, pastikan di website kamu sudah terinstall plugin berikut:
Dalam tutorial ini kita akan menggunakan Elementor Free dan Royal Elementor, sehingga bisa kamu coba juga tanpa harus menggunakan Elementor Pro.
Ketika sudah berada dihalaman yang diedit menggunakan Elementor, buat Kontainer baru dengan pengaturan berikut ini
Pastikan juga untuk menambahkan class main-container-slide kedalam kontainer tersebut dari tab Advanced
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://staging.wpgan.com/gambar1.jpg) !important;}
.main-container-slide:has(.slide2:hover) { background-image: url(https://staging.wpgan.com/gambar2.jpg) !important;}
.main-container-slide:has(.slide3:hover) { background-image: url(https://staging.wpgan.com/gambar3.jpg) !important;}
.main-container-slide:has(.slide4:hover) { background-image: url(https://staging.wpgan.com/gambar4.jpg) !important;}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.
Masih berada di Kontainer yang sama, buka tab Style kemudian buat konfigurasi seperti ini:
Sekarang kamu bisa menambahkan kontainer baru didalam kontainer yang sudah ada dengan konfigurasi ini:
Pastikan juga untuk menambahkan Class dengan nama slide1 pada kontainer baru dari tab Advanced
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
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
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!
KOMENTAR
Memuat...