Pendahuluan
Pernahkah Anda beralih dari Page Builder (seperti Elementor atau Divi) ke WordPress Native Block Editor (Gutenberg/FSE), lalu merasa ada yang “hilang”?
Biasanya, pertanyaan pertama yang muncul di benak pengguna baru adalah: “Di mana tombol untuk mengatur margin khusus Mobile?” “Kenapa tidak ada ikon Tablet untuk mengecilkan ukuran font ini?”
Di era Page Builder klasik, kita dimanjakan dengan kendali penuh atas setiap piksel. Kita terbiasa mengatur secara manual: “Di Desktop font ini 16px, tapi di HP tolong ubah jadi 12px.”
Namun, di ekosistem Full Site Editing (FSE), tombol-tombol spesifik tersebut seolah “absen”. Apakah ini kekurangan fitur? Jawabannya: Tidak.
Absennya tombol-tombol tersebut bukanlah bug, melainkan sebuah keputusan desain menuju era baru website yang lebih modern: Intrinsic Web Design1.
Berhenti Menjadi “Mikromanajer2” Piksel
Untuk memahami FSE, kita perlu mengubah sedikit pola pikir kita.
Cara lama (Page Builder) adalah Explicit Control4. Kita mendikte browser secara manual untuk setiap ukuran layar. Hasilnya? Kita lelah mengatur ratusan opsi, dan kode website menjadi “gemuk” (bloated).
Cara baru (FSE) adalah Intrinsic Design. Kita tidak mendikte ukuran pasti, melainkan memberikan “aturan main” dan membiarkan konten menyesuaikan diri dengan wadahnya secara otomatis.
Lalu pertanyaannya, “Kalau tidak ada tombol Mobile, bagaimana cara saya mengatur agar tulisan tidak kebesaran di HP?”
Solusinya: Kendali Visual, Bukan Hanya Coding
Dulu, ada anggapan bahwa untuk membuat font responsif di Gutenberg, kita harus menjadi programmer yang paham kode. Anggapan itu salah besar.
WordPress versi terbaru telah menghadirkan fitur canggih bernama Fluid Typography langsung ke dalam panel Global Styles. Fitur ini memungkinkan Anda mengatur responsivitas teks semudah menggeser tombol, tanpa menyentuh kode sama sekali.
Coba perhatikan gambar di atas. Di panel Styles, Anda cukup:
- Mengaktifkan tombol Fluid typography.
- Mengatur Minimum Size (ukuran font tertekan di layar HP).
- Mengatur Maximum Size (ukuran font maksimal di layar Desktop).
Misalnya, Anda mengatur Minimum 2.5 rem dan Maximum 3.27 rem.
Maka secara otomatis, sistem WordPress akan melakukan “sihir matematika” di belakang layar. Teks Anda akan membesar dan mengecil secara halus (fluid) mengikuti lebar layar. Tidak ada lagi cerita teks kekecilan di HP atau teks raksasa yang memenuhi layar monitor.
Silahkan bisa baca lebih lengkap disini tentang Pengaturan Global Typography.
Anda tetap memegang kendali, tapi dengan cara yang lebih cerdas: Anda mengatur Batasan (Range), bukan mengatur Breakpoint satu per satu.
Baca Juga
Bagaimana dengan Layout Kolom?
“Oke, teks sudah aman. Tapi bagaimana mengubah 3 kolom di Desktop menjadi 1 kolom di HP?”
Sekali lagi, Anda tidak perlu tombol manual. Block Editor menggunakan sistem Flexbox dan Grid yang cerdas.
Pada blok Group atau Row, terdapat pengaturan layout dasar. Saat layar menyempit (Mobile), elemen-elemen yang tadinya berjajar ke samping akan otomatis turun ke bawah (stacking) jika ruangnya tidak cukup. Semuanya terjadi secara natural tanpa Anda perlu klik tombol “Hide on Mobile” atau sejenisnya.
Mengapa Sebaiknya Tidak Menyembunyikan Konten di Mobile?
Banyak pengguna Page Builder terbiasa menggunakan fitur “Hide on Mobile” untuk menyembunyikan elemen yang sulit diatur. Di era FSE, kebiasaan ini mulai ditinggalkan demi prinsip Content Parity4.
Prinsipnya sederhana: Jika sebuah informasi (judul, gambar, atau teks) itu PENTING bagi pengguna Desktop, mengapa pengguna Mobile (yang jumlahnya kini mayoritas) tidak berhak melihatnya?
FSE memaksa kita untuk membuat desain yang inklusif. Daripada menyembunyikan elemen, FSE mengajak kita menyusun elemen tersebut agar tetap terbaca dengan baik di semua perangkat melalui fitur intrinsic tadi.
Tanya Jawab (FAQ)
Anda tetap bisa, tetapi pendekatannya berbeda. Di FSE, Anda tidak lagi mengatur ukuran piksel secara manual untuk setiap perangkat (misal: 16px di Desktop, 12px di HP). Sebaliknya, Anda menggunakan sistem Fluid Typography dan Layout Rules. Dengan cara ini, desain Anda otomatis menyesuaikan diri dengan ribuan jenis ukuran layar HP yang ada di pasaran, bukan hanya satu atau dua ukuran saja.
Meskipun tidak ada tombol instan “Hide on Mobile”, Anda tetap bisa melakukannya menggunakan fitur Additional CSS Class yang ada di setiap blok. Namun, kami sangat menyarankan untuk meninjau kembali strategi konten Anda. Prinsip web modern mengutamakan Content Parity, di mana pengguna HP berhak mendapatkan informasi yang sama lengkapnya dengan pengguna Desktop.
Justru sebaliknya. Metode ini jauh lebih ringan dibandingkan metode Page Builder. Karena “kecerdasan” responsifnya sudah tertanam di sistem browser (lewat CSS modern seperti clamp dan flexbox), server tidak perlu memuat kode JavaScript atau CSS berlebihan hanya untuk mengatur layout. Hasilnya adalah website yang sangat cepat (Green Score di Google PageSpeed).
Kesimpulan: Masa Depan yang Lebih Ringan
Transisi ke WordPress FSE memang menuntut adaptasi kebiasaan. Kita mungkin kehilangan tombol-tombol manual yang biasa kita mainkan, tetapi kita mendapatkan sesuatu yang jauh lebih berharga:
- Performa Tinggi: Website jauh lebih ringan karena minim kode CSS tambahan.
- Konsistensi: Desain tipografi terjaga rapi di seluruh halaman.
- Kemudahan: Tidak perlu kerja dua kali (edit desktop, lalu edit mobile). Sistem yang bekerja untuk Anda.
Jadi, Gutenberg bukan kekurangan fitur responsif. Justru, ia menawarkan cara yang lebih efisien, modern, dan “masa depan-proof” untuk menangani keragaman layar gadget yang terus bertambah.
Sudah siap mengubah pola pikir dan beralih ke Native Block?
Siap Memiliki Website yang Cepat & Modern?
Anda sudah membaca mengapa Native WordPress (FSE) adalah masa depan. Website yang dibangun dengan metode ini terbukti jauh lebih ringan, cepat diakses, dan mudah dirawat jangka panjang karena tidak tergantung pada plugin page builder yang berat.
Jika Anda adalah pemilik bisnis yang menginginkan website performa tinggi tanpa bloatware, saatnya beralih sekarang.
Saya berspesialisasi dalam membangun website berbasis ekosistem Gutenberg yang murni dan powerful. Saya tidak sekadar mendesain, saya membangun fondasi digital yang kuat untuk bisnis Anda.
👉 Konsultasikan Project Website FSE Anda di Sini Mari diskusikan bagaimana Native WordPress bisa meningkatkan performa bisnis digital Anda.
Catatan Kaki
- Intrinsic Web Design (Desain Web Intrinsik) Pendekatan modern yang diadopsi oleh WordPress FSE. Alih-alih mendikte ukuran pasti, kita memberikan “aturan main” yang fleksibel. Konten (teks/gambar) dibiarkan mengatur dirinya sendiri secara alami menyesuaikan wadah (layar) yang tersedia. Ini seperti air yang otomatis mengikuti bentuk gelasnya. ↩︎
- Mikromanajer (Micromanager) Istilah metafora yang saya gunakan untuk menggambarkan kebiasaan pengguna Page Builder yang terobsesi mengontrol setiap piksel kecil di setiap perangkat. Di era FSE, kita diajak berhenti menjadi mikromanajer dan mulai mempercayai sistem cerdas yang bekerja di belakang layar. ↩︎
- Explicit Control (Kontrol Eksplisit) Cara lama dalam mendesain web, di mana kita sebagai desainer harus “menyuapi” browser dengan instruksi manual yang kaku. Contoh: “Hei browser, kalau layarmu lebarnya 768px, ubah font judul jadi 20px ya!”. Ini metode yang melelahkan karena kita harus mengatur setiap kemungkinan ukuran layar. ↩︎
- Content Parity (Kesetaraan Konten) Sebuah prinsip desain yang meyakini bahwa pengguna HP berhak mendapatkan informasi yang sama lengkapnya dengan pengguna Komputer. Tidak boleh ada konten penting (seperti deskripsi produk atau tombol beli) yang disembunyikan di HP hanya demi alasan “agar terlihat rapi”. ↩︎
Leave a Reply