Pernah dengar kata Hero Slider ketika membuat website? Jika sudah pernah, maka disini kita akan membahas cara membuat Hero Slider menggunakan Elementor free.
Tapi kalau belum pernah mendengan “Hero Slider”, mari kita bahas dulu sedikit mengenai apa itu Hero Slider.
Jadi, istilah Hero dalam website merupakan sebuah elemen berupa gabar, slider (slideshow), atau video yang ditampilkan di bagian atas sebua website, biasanya diletakkan dibawah elemen Header.
Selain itu, Hero biasanya ditampilkan dengan ukuran full width, yang artinya ukuran lebar dari elemen ini akan memenihi ukuran lebar layar dari pojok kiri hingga pojok kanan.
Terus kalau Hero Slider, artinya bagaimana?
Ya, sebenarnya sama saja seperti penjelasan diatas, namun untuk Hero Slider, kita menggunakan gambar Slideshow untuk ditampilkan sehingga gambarnya bisa berubah-ubah dan kita bisa menggunakan lebih banyak gambar atau media promosi hanya didalam satu block.
Masih bingung maksudnya gimana? Coba lihat contoh dibawah ini:
Gimana? sekarang sudah paham kan, maksudnya Hero Slider itu yang seperti apa.
Oke, karena sekarang sudah paham seperti apa bentuk atau tampilan dari Hero Slider, maka disini kita akan membahas cara membuatnya.
Cara Membuat Hero Slider Menggunakan Elementor
Sebelum membuat Hero Slider menggunakan Elementor, pastikan kalian sudah memiliki gambar atau banner yang akan digunakan, minimal 2 gambar.
Selain itu, disarankan untuk setiap banner menggunakan resolusi yang sama, misalnya 1410 x 500 px. Pastikan juga sudah menginstall dan mengaktifkan plugin Elementor Website Builder di website kalian.
1. Buat atau Edit Halaman Menggunakan Elementor
Langkah pertama yang perlu kita lakukan tentu saja membuat atau mengedit halaman yang akan kita tambahkan Hero Slider. Untuk melakukan ini, pastikan kalian login sebagai user yang memiliki akses untuk mengedit atau menambahkan halaman menggunakan Elementor.
Jika login sebagai admin, maka otomatis kalian bisa edit atau menambahkan halaman menggunakan Elementor selama pluginnya aktif.
2. Tambahkan Element Image Carousel
Setelah berada di halaman editor Elementor, maka selanjutnya kita bisa menambahkan elemen Image Carousel untuk mulai menggunakan Hero Slider.
Elemen Image Carousel ini bisa dicari dari kolom pencarian Elementor, sehingga kita bisa lebih mudah dan lebih cepat menemukannya.
3. Set Section Menjadi Full Width
Secara default, section yang ditambahkan di Elementor masih menggunakan mode Boxed dan terdapat jarak atau spasi di bagian kanan dan kiri layar.
Karena Hero Slider merupakan elemen yang sifatnya full width, maka kita perlu mengubah section di Elementor menjadi Full Width dengan cara klik icon dengan titik 6 diatas section, kemudian pilih opsi Full Width di panel Layout
Tidak hanya mengubah opsi Content Width saja, disini kita juga perlu mengubah Columns Gap menjadi No Gap.
4. Tambahkan Gambar Slider
Setelah diubah menjadi Full Width, maka selanjutnya kita bisa menambahkan beberapa gambar dengan cara klik icon Plus (+) yang ada di bagian Image Carousel.
Untuk memunculkan opsi Image Carouse, pastikan kalian klik dulu elemen image Carousel yang sudah ditambahkan ke website.
Setelah berhasil menambahkan gambar, defaultnya masih belum menjadi Hero Slider ya, namun masih seperti galeri biasa.
Supaya bisa menjadi Hero Slider, maka kita perlu melakukan kustomisasi Image Carousel ini.
5. Kustomisasi Image Caraousel
Kustomisasi pertama yang bisa kita lakukan adalah mengubah ukuran gambar. Disini kita bisa menggunakan ukuran gambar custom, atau sesuai dengan preset yang sudah ada. Jika semua ukuran gambar yang digunakan sama, maka kita bisa menggunakan ukuran Full Size tanpa menggunakan opsi custom.
Selanjutnya pada bagian terpenting, kita perlu mengubah jumlah gambar yang ditampilkan dalam satu halaman, atau Slide to show.
Karena disini kita akan membuat Hero Slider, maka ubah jumlah Slide to Show menjadi 1.
Sampai disini, kita sudah berhasil membuat Hero Slider, dan kalian bisa melakukan kustomisasi tambahan lainnya, misalnya mengubah ikon panah, mematikan navigasi dengan ikon titik, dan sebagainya.
Jika dirasa sudah cukup melakukan kustomisasinya, maka kita bisa langsung mempublish halaman, atau menambahkan konten lainnya.
Bagaimana? Mudah bukan cara membuat Hero Slider menggunakan Elementor di WordPress?
Jika mengalami kendala ketika mencoba tutorial ini, jangan sungkan untuk meninggalkan komentar di halaman ini, ya!
KOMENTAR
Memuat...