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:
- Pilih produk yang ingin Anda sesuaikan.
- Klik Customize.
- 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:
- 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
- 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
- Lesson Progress
- Warna background, font, progress bar
- 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
- 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: #
-
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.
Menambahkan Informasi Instruktur, Favicon, dan Logo
- Masuk ke pengaturan produk.
- Klik Customizations.
- Perbarui informasi instruktur, favicon, dan logo Anda.
