Panduan Menu WP Admin: Dashboard Styling (5 Sub-Tab Visual)

Menu RSVPKit > Settings > Dashboard Styling adalah panel kustomisasi antarmuka Dasbor Publik Klien pengantin yang menyediakan 5 sub-tab kontrol visual terpadu: Header & Typography, Stats Cards & Outlines, Stats Icons & Badges, Buttons & Actions, serta Table & Reset Styling untuk menciptakan tampilan profesional yang selaras dengan tema undangan.

Memahami Kebutuhan Visual Dasbor Klien

Dasbor kehadiran mandiri adalah antarmuka yang diakses langsung oleh calon pengantin dan keluarga inti untuk memantau arus RSVP para tamu. Tampilan dasbor yang kaku, polos, atau tidak serasi dengan palet tema pernikahan sering kali menimbulkan kesan bahwa website belum selesai dikerjakan secara tuntas oleh vendor.

Ketidakselarasan visual ini menurunkan persepsi eksklusivitas layanan undangan digital Anda. Terlebih lagi, warna teks yang kurang kontras dapat menyulitkan pengantin membaca angka kuota katering dan daftar ucapan doa saat diakses di bawah pencahayaan luar ruangan pada hari-H acara.

WDP RSVPKit memecahkan masalah ini melalui menu Dashboard Styling. Tanpa memerlukan pemahaman kode CSS manual, Anda dapat menyelaraskan seluruh elemen antarmuka dasbor publik dengan palet warna brand atau tema pernikahan klien hanya melalui kontrol pemilih warna (color picker) interaktif.

Prasyarat Sebelum Konfigurasi

Pastikan hal-hal berikut telah siap sebelum mengatur estetika dasbor:

Lisensi Aktif: WDP RSVPKit berstatus aktif dengan lisensi resmi.
Data Sampel Kehadiran: Minimal terdapat 1 data uji coba RSVP agar efek visual kartu statistik dan tabel dapat langsung diamati.
Kode Warna Tema: Siapkan kode HEX warna utama (primary), aksen (gold/highlight), dan warna latar belakang sesuai konsep desain pengantin.

Tata Letak Antarmuka Panel Pengaturan WDP RSVPKit Dashboard Styling dengan 5 Sub-Tab Visual dan Pemilih Warna Kontrol

Bedah Mendalam 5 Sub-Tab Visual

Untuk membuka panel ini, navigasikan ke menu RSVPKit > Settings di sidebar WP Admin, lalu klik tab Dashboard Styling. Di sisi kiri, Anda akan menemukan 5 sub-tab navigasi vertikal:

1. Sub-Tab Header & Typography

Mengatur area tajuk utama dasbor publik tempat nama mempelai dan ucapan selamat datang ditampilkan:

Header Background: Menentukan warna latar kanvas tajuk (mendukung warna solid maupun gradien gelap elegan).
Heading Font Family: Pilihan tipografi judul utama (tersedia pilihan font serif mewah seperti Playfair Display, Cormorant, atau sans-serif modern seperti Plus Jakarta Sans dan Inter).
Title & Subtitle Color: Pengaturan warna teks nama mempelai serta keterangan tanggal resepsi agar memiliki keterbacaan tinggi.
Header Border Bottom: Ketebalan dan warna garis pemisah antara area tajuk dengan deretan kartu metrik ringkasan.

2. Sub-Tab Stats Cards & Outlines

Mengatur 4 blok kartu metrik ringkasan (Total Respon, Tamu Hadir, Berhalangan, dan Masih Ragu):

Card Background Color: Latar kartu statistik (default: #16161e untuk dark surface atau #ffffff untuk tema clean).
Border Stroke & Radius: Ketebalan garis tepi kartu (1px hingga 3px) serta radius lengkungan sudut (border-radius) mulai dari sudut tajam (0px) hingga membulat modern (12px).
Accent Glow & Hover State: Efek sorot halus saat kursor mouse melayang di atas kartu ringkasan.
Counter Metric Typography: Ukuran dan bobot ketebalan angka metrik utama agar terlihat tegas saat pengantin memantau kuota.

3. Sub-Tab Stats Icons & Status Badges

Mengatur elemen penanda visual status kehadiran di dalam kartu dan baris tabel:

Badge Hadir (Confirmed): Warna latar dan teks untuk tamu yang mengonfirmasi kehadiran (rekomendasi: hijau emerald atau soft gold).
Badge Berhalangan (Declined): Warna visual penanda tamu yang menyatakan tidak dapat hadir (rekomendasi: soft rose atau muted grey).
Badge Masih Ragu (Uncertain): Lencana status tamu yang belum memberikan kepastian (rekomendasi: warm amber).
Icon Container Fill: Warna latar lingkaran tempat ikon SVG status kehadiran disematkan.

4. Sub-Tab Buttons & Actions

Mengatur tombol interaktif yang digunakan pengantin untuk mengolah data kehadiran:

Button Export CSV / Excel: Warna latar, teks, dan status hover tombol unduh data spreadsheet.
Button Export PDF Ringkasan: Penyesuaian tombol cetak dokumen rekapitulasi untuk koordinasi tim katering dan wedding organizer.
Search & Filter Input Bar: Warna latar kotak pencarian nama tamu, warna placeholder teks, serta garis fokus saat kolom aktif diketik.
Refresh Data Trigger: Tombol pembaruan data instan tanpa perlu memuat ulang keseluruhan halaman browser.

5. Sub-Tab Table & Reset Styling

Mengatur tabel riwayat konfirmasi kehadiran dan pengaman setelan:

Table Header Striping: Warna baris kepala tabel (kolom Nama, WhatsApp, Status, Pax, dan Waktu Konfirmasi).
Row Hover Highlight: Efek penyorotan baris tabel saat kursor diarahkan untuk mempermudah pengecekan data panjang.
Pagination Controls: Warna tombol navigasi halaman riwayat respon tamu.
1-Click Reset Styling to Default: Tombol darurat pemulihan yang mengembalikan seluruh parameter warna dan ukuran ke pengaturan standar bawaan sistem tanpa menghapus data respon tamu.

Tabel Referensi Parameter Dashboard Styling

Nama Parameter	Kunci Konfigurasi Database	Nilai Standar (Default)	Fungsi & Panduan Penggunaan
Header BG	`rsvpkit_dash_header_bg`	`#14141a`	Warna latar area tajuk utama dasbor publik klien
Title Color	`rsvpkit_dash_title_color`	`#ffffff`	Warna tipografi nama mempelai pada tajuk dasbor
Card Surface	`rsvpkit_dash_card_bg`	`#16161e`	Latar permukaan 4 kartu ringkasan metrik kehadiran
Card Border	`rsvpkit_dash_card_border`	`#2a2a35`	Warna garis keliling kartu statistik kuota tamu
Badge Hadir	`rsvpkit_dash_badge_attending`	`#27c93f`	Warna aksen lencana untuk konfirmasi kehadiran positif
Badge Ragu	`rsvpkit_dash_badge_uncertain`	`#ffbd2e`	Warna aksen lencana status kehadiran yang masih dipertimbangkan
Badge Batal	`rsvpkit_dash_badge_declined`	`#ff5f56`	Warna aksen lencana tamu yang berhalangan hadir
Button Export	`rsvpkit_dash_btn_export_bg`	`#c89556`	Warna tombol ekspor data CSV dan lembar cetak PDF
Border Radius	`rsvpkit_dash_border_radius`	`8px`	Tingkat kebulatan sudut seluruh komponen kartu dan tombol

Skenario Praktik Lapangan: Andy & Zhea

Vendor undangan digital Andy & Zhea sedang menyelesaikan proyek pernikahan bertema Royal Emerald & Gold. Calon pengantin menginginkan dasbor publik yang mereka bagikan ke keluarga inti memiliki nuansa mewah yang selaras dengan kartu undangan fisik:

Penerapan Header: Masuk ke sub-tab Header & Typography, atur warna latar tajuk ke hijau zamrud pekat (#0B2019) dengan teks judul berwarna emas cerah (#E5A93C).
Kustomisasi Kartu Metrik: Pada sub-tab Stats Cards & Outlines, atur garis keliling kartu menggunakan warna emas redup (#C89556) dengan ketebalan 1px dan lengkungan sudut 10px.
Penyelarasan Lencana: Di sub-tab Stats Icons & Badges, ubah lencana Hadir menjadi warna hijau mint lembut dengan latar semi-transparan agar angka 150 pax tamu terlihat anggun dan mudah dibaca.
Hasil Akhir: Saat tautan dasbor dibuka oleh pengantin, seluruh antarmuka tampil serasi dengan konsep resepsi, memberikan kepuasan maksimal pada klien.

Tips & Praktik Terbaik Kustomisasi

Perhatikan Rasio Kontras (WCAG 2.1): Pastikan kontras antara warna teks dan warna latar belakang kartu minimal bernilai 4.5:1 agar data tetap terbaca jelas di layar smartphone keluarga pengantin.
Gunakan Palet Maksimal 3 Warna: Hindari menggunakan terlalu banyak variasi warna berbeda pada kartu statistik agar tampilan tetap berkelas dan tidak mengalihkan perhatian dari angka kuota utama.
Uji Tampilan Mobile: Setelah menyimpan pengaturan, selalu buka tautan dasbor publik melalui perangkat ponsel untuk memastikan padding dan ukuran font proporsional di layar vertikal.
Manfaatkan Tombol Reset: Jangan ragu bereksperimen dengan kombinasi warna baru karena Anda selalu dapat kembali ke setelan awal kapan saja melalui tombol Reset Styling to Default.

Pertanyaan yang Sering Diajukan (FAQ)

Apakah penyesuaian warna di Dashboard Styling mempengaruhi tampilan formulir di halaman Elementor? +

Tidak. Pengaturan Dashboard Styling terisolasi khusus untuk antarmuka Dasbor Publik Klien pengantin (/rsvp/?id=slug). Formulir di halaman landing page tetap dikendalikan penuh oleh tab Style widget Elementor.

Bagaimana cara memulihkan warna ke setelan pabrik jika hasil kustomisasi kurang memuaskan? +

Buka sub-tab ke-5 (Table & Reset Styling) lalu klik tombol 'Reset Styling to Default'. Seluruh palet warna, tipografi, dan spasi akan langsung kembali ke tema bawaan WeddingPress dalam 1 klik.

Apakah kustomisasi warna ini bekerja optimal saat dibuka melalui browser ponsel? +

Ya. Seluruh variabel CSS yang dihasilkan telah diuji dan mendukung tata letak responsif ponsel tanpa ada teks atau tombol yang terpotong.

Apakah saya bisa mengatur warna berbeda untuk setiap pengantin yang berbeda? +

Pengaturan di menu WP Admin bersifat sebagai nilai bawaan global (master fallback). Untuk memberikan warna unik per pasangan, Anda dapat memanfaatkan opsi metabox penimpa styling per postingan undangan.

Mengapa perubahan warna yang saya simpan belum langsung tampak di browser klien? +

Hal tersebut umumnya disebabkan oleh caching browser atau plugin optimasi aset. Lakukan hard refresh (Ctrl + F5) atau bersihkan cache plugin WordPress Anda untuk memuat stylesheet terbaru.