Panduan Lengkap Menggunakan Membership Themes di SunnyDay

Overview #

Kini Anda dapat menyesuaikan tampilan halaman produk membership menggunakan berbagai pilihan theme dari SunnyDay. Dengan sistem ini, Anda bisa membangun identitas brand yang konsisten dan memberikan pengalaman pengguna yang profesional.

Langkah 1: Pilih System Theme #

Saat Anda membuat produk baru, secara default sistem akan memilih Classic Theme. Namun, Anda bisa memilih theme lain dari galeri yang telah disediakan agar lebih cocok dengan gaya brand Anda.

Cara memilih theme:

1. Pilih produk yang ingin Anda sesuaikan.
2. Klik Customize.
3. Di dalam Theme Gallery, Anda bisa memilih dan menerapkan theme, atau menyesuaikannya lebih lanjut.

Langkah 2: Kustomisasi Theme Anda #

Klik Customize pada theme untuk membuka builder dan mulai menyesuaikan bagian-bagian halaman produk Anda.

Anda dapat mengatur:

Theme Settings:

• Primary Color: Mewarnai tombol, ikon atas, judul kursus, kategori, progress, dll.
• Secondary Color: Mewarnai deskripsi instruktur, pelajaran, kategori, teks tombol.
• Primary Font: Digunakan pada judul pelajaran, tombol, ikon.
• Secondary Font: Digunakan pada deskripsi instruktur, tombol, dan kategori.
• Logo Placement: Tentukan apakah logo muncul di header atau hero section.
  

Section Customization:

1. Header

• • Latar belakang, perataan teks (kiri, tengah, kanan)
  • Sites->Membership->Products->Customize->Gallery>Customize>Sections—> Header
  • Background: Menentukan warna background
  • Alignment: Bisa ada di Kiri, Kanan, atau Tengah

2. Hero Section

• • Navigation:
    Sites → Membership → Products → Customize → Gallery → Customize → Sections → Hero
  • Ukuran (Size):
    Extra Small, Small, Medium, Large
  • Course Title:
    Font, Alignment
  • Course Description:
    Font, Alignment
  • Background:
    Image‑Size Dev team, Transparency, Color Picker
  • Button:
    Content, Font, BG Color, Alignment

3. Lesson Progress

• • Warna background, font, progress bar

4. Course Body

Navigasi:
Sites → Membership → Products → Customize → Gallery → Customize → Sections → Course Body

Font Kategori (Category Font):

• Type
• Size
• Colour

Font Sub-Kategori (Sub Category Font):

• Type
• Colour
• Size

Font Deskripsi Kategori (Category Description Font):

• Type
• Colour
• Size

Font Pelajaran (Lesson Font):

• Type
• Colour
• Size
  

Font Deskripsi Pelajaran (Lesson Description Font):

• Type
• Colour
• Size
  

Background:

• Image
• Color
• Transparency

5. Instructor Section

Navigasi:
Sites → Membership → Products → Customize → Gallery → Customize → Sections → Instructor

Background:
Warna (Color)

Font Judul:

• Warna (Colour)
• Jenis (Type)
• Ukuran (Size)

Font Nama:

• Warna (Colour)
• Jenis (Type)
• Ukuran (Size)

Font Jabatan:

• Warna (Colour)
• Jenis (Type)
• Ukuran (Size)

Font Bio:

• Warna (Colour)
• Jenis (Type)
• Ukuran (Size)

Set properti berikut dapat diubah di bagian Sections pada halaman Lesson:

1. Lesson Body

Navigasi:
Sites → Membership → Products → Customize → Gallery → Customize → Lesson → Sections → Lesson Body

Latar Belakang (Background):
Warna latar belakang

Judul (Title):

• Jenis Font
• Warna Font

Deskripsi (Description):

• Jenis Font
• Warna Font
  

Tombol (Button):

• Konten
• Warna
• Jenis Font
• Warna Font
  

Pelajaran Selanjutnya (Next Lesson):

• Warna Latar Belakang
• Judul: Font, Warna
• Tombol Next Lesson: Warna, Jenis Font, Warna Font
• Judul Pelajaran: Warna Font

2. Course Navigation:

• Warna Latar Belakang
• Kategori: Jenis Font, Warna Font
• Pelajaran: Jenis Font, Warna Font
• Sorotan (Highlight): Warna, Warna Font
• Bread Crumb: Jenis Font, Warna Font
• Kategori Selanjutnya (Next Category): Warna Latar Belakang, Jenis Font, Warna Font
  

3. Instruktur 

Navigasi:
Sites → Membership → Products → Customize → Gallery → Customize → Sections → Instructor

Latar Belakang:
Warna

Font Judul:

• Warna
• Jenis
• Ukuran

Font Nama:

• Warna
• Jenis
• Ukuran

Font Jabatan:

• Warna
• Jenis
• Ukuran

Font Bio:

• Warna
• Jenis
• Ukuran
  

Catatan Penting:

• Saat tombol “Save Changes” diklik setelah melakukan kustomisasi pada pengaturan tema, perubahan akan langsung tercermin di tampilan pratinjau (preview).
• “Reset to default” akan mengembalikan semua pengaturan ke nilai default dari tema.
• Jika bagian (sections) dikustomisasi setelah perubahan tema dilakukan, maka kustomisasi section akan menggantikan kustomisasi dari pengaturan tema.

Langkah 3: Terapkan atau Simpan Theme #

Setelah memilih dan menyesuaikan theme Anda:

• Klik Apply pada theme yang dipilih untuk langsung menerapkannya pada produk.
• Klik Save Changes untuk menyimpan penyesuaian di produk saat ini.
• Klik Save Theme jika Anda ingin menyimpan theme tersebut untuk digunakan di lokasi lain secara global.

Catatan Penting:

• Save Changes menyimpan draft di produk itu saja (tidak global).
• Save Theme menyimpan theme agar bisa digunakan di lokasi lain (global).
• Reset to default akan mengembalikan semua pengaturan ke awal.
• Jika Anda kustomisasi section setelah kustomisasi theme settings, maka perubahan section akan menimpa setting sebelumnya.
  

Menerapkan Tema #

Menerapkan Tema ke Produk Tertentu

Mengklik tombol “Apply” dari galeri tema akan langsung menerapkan tema tersebut ke produk yang dipilih.

Kamu juga dapat menyesuaikan tema terlebih dahulu, lalu setelah mengklik “Save Changes”, klik tombol “Apply” untuk menerapkan tema ke produk tertentu. Tombol Apply akan berubah menjadi Applied setelah tema berhasil diterapkan.

Catatan Penting:

Saat tema diterapkan menggunakan tombol Apply, tema hanya akan diterapkan ke produk yang dipilih. Kustomisasi yang dilakukan tidak akan berlaku secara global ke lokasi lain.

Save Changes: #

Kamu dapat menyesuaikan dan menyimpan versi draft dari sebuah tema di level produk. Artinya, kamu bisa mengedit tema bawaan sistem dan menyimpannya sebagai draft tanpa harus langsung menerapkannya ke produk manapun.

Ketika kamu mengklik “Save Changes”, perubahan akan disimpan sebagai draft dari tema tersebut.

Tema draft (dengan perubahan) dapat diterapkan ke produk di kemudian hari. Tema draft bersifat lokal dan tidak tersedia secara global di semua lokasi.

Catatan Tambahan:

Jika kamu mengklik “Save Changes” pada tema yang belum diterapkan ke produk mana pun, maka tema tersebut akan diperbarui dengan perubahan tersebut dan bisa digunakan nanti untuk produk yang sama. Namun, perubahan ini tidak akan memengaruhi properti tema secara global.

Menambahkan Informasi Instruktur, Favicon, dan Logo #

1. Masuk ke pengaturan produk.
2. Klik Customizations.
3. Perbarui informasi instruktur, favicon, dan logo Anda.