Banner Slider

Banner slider digunakan untuk Menarik perhatian pelanggan sejak saat pertama mereka berada di situs. Sorot promosi, kampanye, atau acara apa pun Anda dengan menggunakan spanduk korsel. Perhatian pelanggan langsung terhadap penawaran khusus. Memasukkan slider dengan mudah menggunakan widget Magento, tidak perlu pengkodean dan penjadwalan visibilitas banner secara otomatis.


Cara Membuat Banner oleh Admin

Magento Backoffice > Weltpixel > Banners for Sliders

Klik Add New Banner 

  • Title : Atur nama banner yang diinginkan 

  • Show Title : adalah Judul / nama yang akan muncul pada banner di halaman Store.

  • Description : mengatur deskripsi untuk Banner yang dibuat 

  • Slider :  Pilih slider mana yang akan digunakan untuk pengaplikasian banner yang telah dibuat

  • URL : adalah url dimana banner akan terhubung ketika di klik.

  Note :  Atur URL tanpa baseurl store, contoh : /women.html; 

  • Target : pilih dimana tautan banner / tombol harus dibuka

  • Button Text : adalah tulisan yang akan muncul pada button

  • Banner Type : adalah tipe banner yang dapat berupa Gambar (unggah gambar seluler dan desktop), Video (sisipkan embed iframe) atau Custom (masukkan HTML khusus).

  • Alt Text : adalah teks alternatif jika Banner jika suatu Gambar; maka image hover akan ditampilkan sebagai tooltip.

  • Banner Valid From/To  : Adalah jangka waktu yang ditentukan kapan banner akan muncu

Cara Konfigurasi Slider oleh Admin

Magento Backoffice > Weltpixel > Sliders Manager > Add new slider

  • Title - Adalah Judul / nama slider yang akan dibuat

  • Show Title [Yes / No] - Adalah opsi yang diberikan untuk menampilkan judul pada halaman store. Set yes untuk mengaktifkan

  • Slider Status [Enabled / Disabled] - Adalah opsi yang diberikan untuk mengaktifkan judul pada halaman store. Enable untuk mengaktifkan. 

  • Next/Prev buttons [True / False] - Adalah opsi yang diberikan untuk menampilkan tombol navigasi Slider. Set True untuk menampilkan.

  • Dots [True / False] - Pengaturan untuk memperlihatkan titik navigasi pada area bawah slider.

  • Banner Transition Effect [Slide / Fade] - Adalah pengaturan transisi slide pada store view.

  • Center Item [True / False] - Menampilkan banner tepat di tengah dan juga menampilkan banner yang ada di samping

Note: Opsi tengah hanya tersedia untuk Efek Transisi Banner: Slide

  • Stage Padding - Menampilkan banner di tengah tengah slide dan slider selanjutnya sesuai dengan padding yang telah ditentukan.
    Note: Hanya tersedia ketika Transisi: Slide and Center :False

  • Margin - Adalah pengaturan Jarak Slider yang akan muncul pada store view.

  • Items - Adalah jumlah banner yang akan muncul pada slider.

  • Loop [True / False] : Adalah opsi pengaturan loop pada slider. Set True untuk Mengaktifkan. set false untuk tidak mengaktifkan.

  • Lazy load [True / False] : Memuat delay gambar yang akan muncul. Set True untuk Mengaktifkan. set false untuk tidak mengaktifkan.

  • Autoplay [True / False] : Opsi putar otomatis. Set True untuk Mengaktifkan. set false untuk tidak mengaktifkan.

  • Autoplay Timeout [True / False] : Opsi pengaturan pergantian banner pada slider. Set True untuk Mengaktifkan. set false untuk tidak mengaktifkan.

  • Autoplay Hover Pause [True / False] : atur autoplay untuk menjeda pada hover mouse. Set True untuk Mengaktifkan. set false untuk tidak mengaktifkan.

  • Auto Height [True / False] : Opsi pengaturan otomatis ketinggian banner. 


Note Breakpoint Responsive Slider :


Pengaturan responsif di bawah ini akan menimpa General Configuration

Breakpoints sudah di konfigurasikan di Admin > WeltPixel > OWL Product Carousels > General Configuration for OWL Product Carousels and Banner Sliders..


Jika perlu dapat mengubah pengaturan default dengan yang Anda butuhkan sesua project yang ada.


Cara Memasukan Banner pada Slider oleh Admin

  • Klik slider banner 

  • Klik Reset Filter untuk menampilkan semua Banner yang telah dibauat.

  • Pilih banner yang ingin ditampilkan pada slider.

  • Isi urutan spanduk di slider, dimulai dengan posisi 0. Jika tidak terisi, spanduk akan secara default menyortir ‘0’.

  • Klik save slider.



Cara Menambahkan Banner Slider pada homepage oleh Admin

Magento Backoffice > Content > Pages 

Image Placeholder
                                                      Gambar 1. Tampilan Menu page pada catalog

Pilih page yang ingin digunakan

Pilih pada tab Content pilih show editor


Gambar 2. Tampilan Menu Show / Hide editor pada Content

Klik Insert widget untuk Menyisipkan widget yang akan digunakan


Gambar 3. Tampilan insert widget,

  • Widget Type : tipe widget yang akan digunakan (Jika ingin membuat slider maka pilihlah WeltPixel - Custom Slider Widget)

  • Custom slider : Pilih slider yang ada / telah dibuat

Klik save page



Tampilan Banner slider pada store view.

Image Placeholder

Gambar 4. Banner slider pada store view