Menambahkan Banner Slider

Cara menambahkan banner slider ke aplikasi

Panduan Menambahkan Banner Slider

Gaya sama seperti menu & submenu sebelumnya, tapi khusus banner.

Tujuan

  1. Menambahkan widget Banner Slider di Canvas
  2. Mengatur layout & dimensi banner
  3. Menambahkan banner item (gambar + judul + styling)
  4. Mengatur navigasi banner (opsional)
  5. Publish agar tampil di aplikasi client

A. Menambahkan Widget Banner Slider

1. Masuk ke Canvas

  1. Panel Admin → Layout Aplikasi
  2. Masuk tab Canvas
  3. Pilih layar, contoh: home (8 widget)

2. Tambahkan Banner Slider

  1. Di panel Widget, klik Banner Slider
  2. Banner langsung muncul di preview (tengah)
  3. Klik banner di canvas untuk membuka Properti

3. Atur Layout & Dimensi

Di panel Properti → Layout & Dimensi:

  • Varian: Contoh Monocle (Monocle tidak otomatis slide)
  • Tinggi: 185
  • Lebar: 150
  • Jarak: 10
  • Border Radius: 12
  • Warna Background: #ffffff (opsional)

Banner Slider - Layout & Dimensi

4. Opsi Banner

Masuk ke Opsi Banner:

  • Aktifkan Auto-slide jika ingin banner berjalan otomatis (Kecuali Monocle)

B. Mengelola Item Banner

5. Buka Kelola Banner

Di Properti → Item Banner:

  • Klik Kelola Banner

Akan terbuka modal Kelola Banner.

6. Tambah Banner Baru

Jika masih kosong:

  • Klik + Tambah Banner atau
  • Tambah Banner Pertama

Banner baru akan muncul sebagai Banner 1.

C. Edit Banner (Detail)

Klik banner untuk membuka detail pengaturan.

7. Gambar & Judul

Di bagian Gambar & Judul:

  • URL Gambar Contoh: https://example.com/banner1.jpg
  • Judul Contoh: Promo Spesial

Gambar & Judul - dapat diakses melalui modal Kelola Banner

8. Styling Judul

Masuk ke Styling Judul:

  • Font Size: 14

  • Border Radius: 12

  • Opsi:

    • Shadow (bayangan teks)
    • Center (posisi teks tengah)

Digunakan untuk kontras judul di atas gambar.

Styling Judul - dapat diakses melalui modal Kelola Banner

9. Posisi & Padding

Masuk ke Posisi & Padding:

  • Title Position Atur posisi teks (Top / Bottom / Left / Right)

  • Banner Padding Contoh:

    • Top: 8
    • Left: 60
    • Bottom: 8
    • Right: 8

Ini menentukan jarak teks dan tepi banner.

10. Navigasi (Opsional)

Masuk ke Navigasi:

  • Route Contoh: Produk

    • Operators: TSELREG
    • Hint Text: Nomor HP Pelanggan

  • URL Untuk link eksternal

  • Tidak Ada Jika banner hanya visual (tidak bisa diklik)

Pilih sesuai kebutuhan menu.

Opsi Banner - Auto-slide

11. Simpan Banner

  • Klik Simpan Perubahan di modal Kelola Banner
  • Pastikan tidak ada warning perubahan belum disimpan

D. Simpan & Publish

12. Publish Layout

  1. Tutup modal Kelola Banner
  2. Kembali ke halaman Canvas
  3. Klik Publish

Hasil Akhir

  • Banner slider tampil di halaman Home
  • Bisa auto-slide atau statis
  • Setiap banner punya styling sendiri
  • Navigasi banner fleksibel (route / URL / none)
  • Perubahan aktif di aplikasi client setelah publish