Komponen UI dan Tipografi

SaePlus menyediakan komponen artikel yang dirancang untuk blog personal, dokumentasi, tutorial, dan ulasan produk. Semua contoh pada panduan ini dapat dibuat langsung dari editor blok WordPress tanpa menulis HTML atau menghafal shortcode.

Apa yang tersedia di SaePlus?

Komponen tidak dibuat hanya untuk mempercantik halaman. Setiap blok mempunyai fungsi yang jelas: mengarahkan perhatian, merangkum langkah, menyajikan unduhan, menyembunyikan detail panjang, atau membantu pembaca menemukan jawaban lebih cepat.

Komponen	Kegunaan utama	Cocok untuk
Catatan / Alert	Menonjolkan informasi penting	Panduan dan peringatan
Tombol Ikon	Membuat tindakan utama lebih jelas	Demo, kontak, dan tautan
Kotak Unduhan	Menampilkan detail berkas	Template dan produk digital
Spoiler	Menyimpan detail agar halaman tetap ringkas	Jawaban dan kode panjang
FAQ Schema	Menyajikan tanya jawab terstruktur	Dokumentasi dan halaman bantuan
Langkah	Membuat urutan tutorial mudah diikuti	Instalasi dan konfigurasi
Tabs	Mengelompokkan beberapa topik	Perbandingan dan dokumentasi
Artikel Terkait	Menghubungkan pembaca ke konten relevan	Semua jenis artikel

Mulai dari editor blok

Alur penulisannya tetap mengikuti WordPress. Penulis dapat mencampur paragraf, judul, gambar, daftar, tabel, serta blok SaePlus dalam satu artikel. Tidak ada editor terpisah, sehingga konten tetap mudah dipindahkan dan dikelola.

Tipografi yang nyaman dibaca

Artikel panjang menjadi nyaman ketika pembaca dapat memindai isinya dengan cepat. Gunakan satu judul utama, bagi topik menjadi beberapa judul tingkat dua, lalu gunakan judul tingkat tiga hanya ketika sebuah bagian benar-benar memiliki subtopik. Paragraf sebaiknya pendek dan hanya memuat satu gagasan utama.

Hierarki judul

• H1 dibuat otomatis dari judul artikel dan tidak perlu diulang di dalam isi.
• H2 digunakan untuk bagian utama, misalnya instalasi, konfigurasi, dan pertanyaan umum.
• H3 digunakan untuk rincian dari sebuah H2.
• Teks tebal menandai kata penting, sedangkan tautan dipakai ketika pembaca perlu membuka sumber lain.

Desain yang baik tidak membuat pembaca memperhatikan antarmukanya. Desain membantu mereka menemukan informasi tanpa tersesat.

Prinsip penulisan SaePlus

Kode dan istilah teknis

Gunakan blok Kode untuk potongan yang perlu disalin. Jelaskan tujuan kode sebelum menampilkannya, lalu beri tahu bagian mana yang boleh diubah. Contoh sederhana berikut menunjukkan urutan kerja yang mudah dipahami penulis baru.

1. Buka editor artikeln2. Pilih kategori blok SaePlusn3. Tambahkan komponenn4. Isi pengaturan di sidebarn5. Pratinjau lalu terbitkan

Catatan dan alert untuk konteks penting

Jangan menggunakan terlalu banyak kotak berwarna dalam satu layar. Pilih status berdasarkan makna, bukan hanya berdasarkan warna yang disukai.

Tombol dengan ikon bawaan

Blok Tombol Ikon memakai pustaka SVG bawaan SaePlus, sehingga ikon di editor sama dengan ikon di halaman publik. Penulis dapat memilih gaya isi warna atau garis luar, posisi ikon kiri atau kanan, serta opsi membuka tautan di tab baru.

Kotak unduhan yang informatif

Sebelum pembaca menekan tombol unduh, tampilkan nama berkas, format, dan ukuran. Detail kecil ini membantu pembaca mengenali berkas yang benar dan memperkirakan waktu unduhan.

Spoiler untuk detail tambahan

Spoiler cocok untuk jawaban, log perubahan, atau penjelasan lanjutan yang tidak harus langsung terlihat. Konten tetap berada di halaman, tetapi pembaca menentukan kapan ingin membukanya.

Tabs untuk mengelompokkan informasi

Tabs berguna ketika beberapa penjelasan memiliki posisi yang setara. Contoh berikut membedakan peran SaePlus, SaeCore, dan WordPress tanpa membuat halaman terasa terlalu panjang.

Integrasi SaeCore

SaePlus mendaftarkan identitas produk, versi, kemampuan, dan nilai bawaan ke SaeCore. Ketika SaeCore aktif, tema dapat membaca pengaturan dari pusat kontrol tersebut. Jika SaeCore belum aktif, Customizer tetap menjadi cadangan agar website publik tidak rusak.

• Pengaturan global: identitas visual dan konfigurasi yang dipakai tema dapat dikelola dari satu panel.
• Integrasi produk: SaePlus mengenalkan skema pengaturannya tanpa bergantung keras pada satu versi API.
• Lisensi dan pembaruan: SaeCore disiapkan sebagai jalur aktivasi produk dan distribusi pembaruan SaeTheme.
• Fallback aman: nilai Customizer digunakan ketika fungsi SaeCore tidak tersedia.
• Pemberitahuan admin: administrator mendapat pengingat apabila plugin pendamping belum aktif, tetapi halaman publik tetap dapat dibuka.

Fitur pembaca yang bekerja otomatis

Komponen di dalam isi artikel hanya satu bagian dari pengalaman membaca. SaePlus juga menambahkan fitur di tingkat tema agar artikel panjang tetap mudah dinavigasi di desktop dan ponsel.

• Daftar isi otomatis dari struktur judul artikel.
• Perkiraan waktu baca dan jumlah tayangan.
• Mode terang, gelap, dan sistem.
• Bookmark yang tersimpan pada browser pengunjung.
• Tombol berbagi dan komentar yang mudah dijangkau.
• Menu bawah khusus ponsel dengan ikon bawaan.
• Pencarian langsung dan artikel terkait.
• SafeLink bertanda tangan untuk tautan yang memang dipilih pemilik situs.

Resep artikel panjang yang tetap ringan

Aksesibilitas dan performa

Artikel yang cantik belum tentu mudah digunakan. Pastikan teks tetap terbaca ketika diperbesar, jangan menyampaikan arti hanya melalui warna, dan tulis label tombol yang menjelaskan tujuan. Untuk gambar, isi teks alternatif berdasarkan informasi yang benar-benar terlihat.

• Gunakan kalimat singkat dan kontras teks yang cukup.
• Jangan melewati tingkat judul hanya demi ukuran visual.
• Kompres gambar dan pilih dimensi yang sesuai kebutuhan.
• Gunakan blok YouTube Lazy agar iframe baru dimuat setelah pengunjung berinteraksi.
• Batasi animasi dan hindari terlalu banyak komponen dalam satu layar.
• Uji navigasi memakai keyboard serta layar ponsel sempit.

Pertanyaan umum

Kesimpulan

SaePlus memberi penulis seperangkat komponen yang konsisten tanpa mengambil alih cara kerja WordPress. Mulailah dengan struktur tulisan yang jelas, pilih komponen hanya ketika membantu pembaca, dan gunakan SaeCore untuk menjaga konfigurasi produk SaeTheme tetap terpusat.