Menambahkan Widget Judul di Menu Hexaflate

Cara menambahkan widget judul di menu Hexaflate

Panduan Menambahkan Widget Judul di Menu Hexaflate

Tujuan

Menambahkan judul/section title pada halaman menu di Canvas, lalu publish agar tampil di aplikasi client.

Langkah-langkah

1. Masuk ke Layout Aplikasi

  1. Buka Panel Admin Hexaflate
  2. Pilih menu Layout Aplikasi dari sidebar
  3. Otomatis masuk ke tab Canvas

Canvas - Widget Judul di Panel Widget

Widget Judul - Properti

Penjelasan:

  • Sidebar di sebelah kiri menampilkan menu navigasi
  • Tab Canvas sudah aktif secara default
  • Area tengah menampilkan preview mobile
  • Panel widget di sebelah kiri untuk menambah komponen
  • Panel properti akan muncul di kanan setelah memilih widget

2. Pilih Layar (Screen)

  1. Pada bagian Layar (di panel kiri), pilih screen yang ingin diedit
    • Contoh: home (10 widget)
  2. Pastikan preview halaman tampil di tengah (mode Mobile)
  3. Layar yang dipilih akan menampilkan semua widget yang ada di dalamnya

3. Tambahkan Widget Judul

  1. Di panel Widget (sebelah kiri), scroll ke bawah hingga menemukan Widget Judul
  2. Klik pada Widget Judul
  3. Widget akan langsung muncul di bagian bawah layar pada preview mobile

Widget ditambahkan - preview langsung terlihat di Canvas

Catatan:

  • Widget baru akan ditambahkan di posisi paling bawah
  • Anda dapat menggeser posisi widget setelah ditambahkan
  • Widget yang baru ditambahkan otomatis terseleksi

4. Atur Properti Judul

Setelah widget ditambahkan, panel Properti akan muncul di sebelah kanan. Klik pada bagian Properti Judul untuk mengembangkannya dan mengatur properti berikut:

Properties Panel - lihat gambar Properti Judul di atas

Properti yang dapat diatur:

  1. Teks

    • Isi judul yang diinginkan
    • Contoh: Hot Product
    • Ketik langsung di field input "Masukkan teks"

  2. Jenis (Heading Level)

    • Pilih level heading dari dropdown
    • Pilihan: H1, H2, H3, H4, H5, H6
    • Contoh: Pilih H5 untuk sub-heading
    • Semakin besar angka, semakin kecil ukuran teks

  3. Posisi

    • Pilih perataan teks dari dropdown
    • Pilihan: Kiri, Tengah, Kanan
    • Default: Kiri

  4. Warna Otomatis

    • Warna judul menggunakan "On Surface (Teks Utama)" dari 15-color semantic palette
    • Untuk mengubah warna, buka Global Config di tab atas
    • Warna otomatis menyesuaikan dengan mode terang/gelap

Properti diedit - perubahan langsung terlihat di preview

Hasil setelah edit:

  • Teks berubah dari "Judul Baru" menjadi "Hot Product"
  • Heading level berubah menjadi H5 (ukuran lebih kecil)
  • Perubahan langsung terlihat di preview mobile

5. Preview di Mobile

Setelah mengatur properti, Anda dapat melihat hasilnya langsung di preview mobile di bagian tengah layar.

Preview Mobile - tampil di tengah Canvas

Yang terlihat di preview:

  • Widget judul "Hot Product" muncul dengan styling yang telah diatur
  • Posisi widget sesuai dengan urutan di layar
  • Preview menampilkan tampilan yang mendekati hasil akhir di aplikasi

Catatan: Tampilan ini hanya preview — lihat di aplikasi mobile untuk hasil sebenarnya.

6. Atur Posisi Widget (Opsional)

Jika perlu mengatur posisi widget:

  1. Klik dan drag widget judul di preview mobile
  2. Geser ke posisi yang diinginkan
  3. Pastikan judul berada di atas menu/grid yang relevan
  4. Lepaskan untuk menempatkan widget

Tips:

  • Tempatkan widget judul di atas grup menu atau komponen terkait
  • Gunakan widget judul untuk membagi section yang berbeda
  • Atur jarak dengan widget lain untuk visual yang lebih baik

7. Publish ke Client

Setelah selesai mengatur widget, publikasikan perubahan agar tampil di aplikasi client:

  1. Klik tombol Publish di kanan atas
  2. Sistem akan memproses perubahan
  3. Tunggu konfirmasi publish berhasil

Publish - klik tombol Publish di kanan atas

  1. Buka aplikasi client atau reload aplikasi
  2. Widget judul akan tampil di halaman menu sesuai pengaturan

Penting: Perubahan hanya akan tampil di aplikasi client setelah di-publish!

Hasil Akhir

Setelah mengikuti langkah-langkah di atas:

✅ Widget judul berhasil ditambahkan dengan teks "Hot Product" ✅ Styling sesuai dengan heading level H5 dan posisi kiri ✅ Warna otomatis menyesuaikan mode terang/gelap ✅ Tampil di preview mobile di Canvas ✅ Terpublikasi dan tampil di aplikasi client

Manfaat:

  • Judul tampil sebagai pemisah section yang jelas
  • Memudahkan navigasi visual untuk pengguna
  • Konsisten di mode terang & gelap
  • Langsung termuat di aplikasi client setelah publish

Tips Tambahan

  1. Gunakan hirarki heading dengan bijak

    • H1-H2 untuk judul utama
    • H3-H4 untuk sub-judul section
    • H5-H6 untuk label atau keterangan kecil

  2. Perhatikan spacing

    • Gunakan widget Separator jika perlu jarak lebih
    • Atur padding di Global Config untuk konsistensi

  3. Naming convention

    • Gunakan nama yang jelas dan deskriptif
    • Contoh: "Hot Product", "Promo Spesial", "Menu Utama"

  4. Testing

    • Selalu test di aplikasi client setelah publish
    • Periksa di mode terang dan gelap
    • Pastikan readable di berbagai ukuran layar

Troubleshooting

Widget tidak muncul di preview?

  • Pastikan layar yang benar sudah dipilih
  • Refresh halaman Canvas
  • Periksa apakah widget ter-hidden

Perubahan tidak tampil di aplikasi?

  • Pastikan sudah klik tombol Publish
  • Reload aplikasi client sepenuhnya
  • Clear cache aplikasi jika perlu

Warna tidak sesuai?

  • Periksa pengaturan Global Config
  • Pastikan semantic palette sudah diatur dengan benar
  • Test di mode terang dan gelap

Referensi