Category: Article

Collection of Articles

  • Responsif di Era WordPress FSE: Mengapa Tombol “Edit Mobile” Hilang?

    Responsif di Era WordPress FSE: Mengapa Tombol “Edit Mobile” Hilang?

    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.

    Daftar Isi
    1. Berhenti Menjadi “Mikromanajer” Piksel
    2. Solusinya: Kendali Visual, Bukan Hanya Coding
    3. Bagaimana dengan Layout Kolom?
    4. Mengapa Sebaiknya Tidak Menyembunyikan Konten di Mobile?
    5. Tanya Jawab (FAQ)
    6. Kesimpulan

    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.

    Pengaturan Fluid Typography di WordPress FSE

    Coba perhatikan gambar di atas. Di panel Styles, Anda cukup:

    1. Mengaktifkan tombol Fluid typography.
    2. Mengatur Minimum Size (ukuran font tertekan di layar HP).
    3. 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.

    Pengaturan stack di WordPress

    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:

    1. Performa Tinggi: Website jauh lebih ringan karena minim kode CSS tambahan.
    2. Konsistensi: Desain tipografi terjaga rapi di seluruh halaman.
    3. 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

    1. 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. ↩︎
    2. 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. ↩︎
    3. 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. ↩︎
    4. 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”. ↩︎
  • Fleksibilitas Gutenberg: Benarkah Kaku? Ini Pengalaman Saya

    Fleksibilitas Gutenberg: Benarkah Kaku? Ini Pengalaman Saya

    Pendahuluan

    Sebagai pengguna WordPress, dulu saya sering mendengar anggapan bahwa Block Editor (Gutenberg) itu kaku. Desainnya kotak-kotak, fiturnya terbatas, dan tidak sebebas kalau kita pakai Page Builder pihak ketiga.

    Namun, sudah 2 tahun ini saya belajar untuk menyelam lebih dalam. Saya mulai mempelajari fitur-fitur native yang sudah tertanam di core WordPress, mulai dari Full Site Editing (FSE), Site Editor, hingga penggunaan Block Patterns.

    Jujur, awalnya memang terasa ada “tembok”. Kita tidak disuguhi ribuan tombol pengaturan instan di sidebar. Tapi, seiring saya belajar memahami struktur Group Block, memainkan logika Row & Stack, dan menyisipkan sedikit sentuhan Additional CSS, pandangan saya berubah total.

    Ternyata, Gutenberg bukan kaku. Dia hanya “jujur”. Dia memberikan kita kanvas dasar yang bersih, ringan, dan siap dibentuk menjadi apa saja asalkan kita mau sedikit bereksperimen memahami dasarnya.

    Daftar Isi
    1. Menanggapi Penilaian “Menengah” pada Fleksibilitas
    2. Fleksibilitas Itu Bernama “Kendali Penuh”
    3. “Senjata Rahasia” Bernama Block Builder/Plugin
    4. Tanya Jawab (FAQ)
    5. Kesimpulan

    Menanggapi Penilaian “Menengah” pada Fleksibilitas

    Barusan saya coba search google dengan kata kunci page builder tahun 2026, lalu saya tertarik membaca sebuah artikel yang membandingkan peta kekuatan builder di tahun 2026 ini. Dalam sebuah tabel perbandingan di artikel berjudul 3 Builder WordPress Terbaik di Tahun 2026 dari blog Zhien.id, terdapat poin yang menarik perhatian saya.

    sumber tabel: https://zhien.id/blog/3-builder-wordpress-terbaik-di-tahun-2026/

    Di tabel tersebut, Fleksibilitas Desain Gutenberg diberi nilai “Menengah”.

    Sepintas, penilaian ini sangat masuk akal dan saya setuju. Jika definisinya adalah “kemudahan drag-and-drop instan tanpa menyentuh koding sama sekali”, Gutenberg bawaan (default) memang ada di tengah-tengah. Ia tidak se-instan builder visual populer lainnya.

    Tapi dari pengalaman saya langsung di lapangan, label “Menengah” ini sebenarnya menyimpan potensi tersembunyi yang luar biasa jika kita mau menggali sedikit lebih dalam.

    Fleksibilitas Itu Bernama “Kendali Penuh”

    Apa yang membuat Gutenberg kini terasa sangat fleksibel bagi saya justru terletak pada kesederhanaannya. Berikut adalah beberapa poinnya:

    1. Ringan & Native: Karena tidak memuat banyak aset eksternal atau bloatware, kita bisa membuat layout yang kompleks tapi website tetap ngebut. Ini adalah fleksibilitas performa yang mahal harganya.
    2. FSE (Full Site Editing): Dulu, mengubah Header atau Footer itu menakutkan karena harus bongkar file PHP tema. Sekarang? Lewat Site Editor, kita bisa mengubah struktur global website secara visual, blok demi blok.
    3. Kombinasi CSS: Hanya dengan menambahkan custom class dan sedikit sentuhan CSS pada blok standar, blok yang tadinya kaku bisa disulap menjadi desain yang unik dan personal.

    Bagi saya pribadi, fleksibilitas Gutenberg itu seperti mainan LEGO. Potongan dasarnya memang sederhana, tapi justru karena itulah kita bisa membangun bentuk apa saja tanpa batas.

    Gutenberg tidak membatasi desain Anda, dia hanya meminta Anda untuk memahami cara kerja web yang sebenarnya (HTML & CSS), bukan sekadar menjadi operator tool.

    Baca Juga

    “Senjata Rahasia” Bernama Block Builder/Plugin

    Selain fitur bawaan, ada satu hal lagi yang sering luput dari perhatian yang membuat nilai “Menengah” tadi melonjak naik: Ekosistem Block.

    Jika Anda merasa fitur bawaan Core masih kurang fleksibel tapi tidak ingin coding CSS, kita bisa menggunakan Block Builder (sering disebut Gutenberg Addons).

    Sudah banyak sekali pengembang hebat yang merilis tools untuk “memperkaya” Gutenberg tanpa merusak struktur native-nya. Sebut saja:

    • Gutenverse & Spectra: Yang menambahkan puluhan blok canggih dan fitur layout presisi.
    • Ollie WP: Sebuah Block Theme yang membawa standar desain modern langsung ke editor.
    • Nexter, ABlocks, Greenshift, Generateblock, Kadenceblock, WPmozoBlock: Dan masih banyak lagi yang terus bertambah.

    Tools tersebut bekerja dengan cara menambahkan Block dan Fungsi, bukan menggantinya secara total. Hasilnya? Kita mendapatkan fleksibilitas desain setara Page Builder premium, tapi dengan performa yang tetap ringan khas Gutenberg.

    Jadi, kalau digabungkan (Core Features + Block Builder/Plugin), fleksibilitas Gutenberg itu sebenarnya sudah Tak Terbatas.

    Tanya Jawab (FAQ)

    Karena secara bawaan (default), Gutenberg tidak menampilkan ribuan tombol pengaturan visual yang instan seperti di Elementor. Untuk mencapai desain yang kompleks, Gutenberg menuntut penggunanya untuk lebih memahami struktur blok, menggunakan fitur Full Site Editing (FSE), atau menambahkan plugin blok tambahan, sehingga tidak terasa “se-instan” builder lainnya.

    Tidak wajib, tapi memahaminya akan menjadi nilai tambah yang besar. Jika Anda tidak ingin menyentuh kode sama sekali, Anda bisa menggunakan bantuan Block Builder (seperti Spectra, Gutenverse, atau Greenshift). Plugin-plugin ini membuka fitur desain canggih secara visual tanpa perlu menulis kode manual.

    Berdasarkan pengalaman dan tren tahun 2026, Gutenberg (Native) jauh lebih aman untuk investasi jangka panjang. Karena Gutenberg adalah bagian inti (Core) dari WordPress, Anda tidak perlu khawatir soal isu kompatibilitas, performa website yang memberat, atau risiko plugin yang ditinggalkan pengembangnya di masa depan.

    Kesimpulan: Pilih Alat Sesuai Misi

    Tentu saja, setiap tools diciptakan untuk penggunanya masing-masing. Informasi dari tabel referensi di atas tetap valid sebagai panduan umum bagi pemula. Namun, jangan jadikan label “Menengah” sebagai alasan untuk takut mencoba Gutenberg.

    • Jika Anda butuh hasil visual super cepat dengan fitur melimpah tanpa memikirkan struktur kode, Page Builder visual mungkin jodoh Anda.
    • Tapi jika Anda, seperti saya, ingin investasi jangka panjang di ekosistem Native WordPress, yang mengutamakan performa, struktur data yang rapi, dan kemudahan maintenance di masa depan, maka Gutenberg sangat layak untuk ditekuni.

    “Kalo kalah di Tools, harus menang di Kreativitas. Kalo kalah di Akselerasi, harus menang di Konsistensi.” — Orang GoBlocks

    Mari terus belajar dan berkarya dengan tools WordPress andalan masing-masing 🚀

    Tertarik Beralih ke WordPress Native tapi Tidak Punya Waktu untuk “Ngulik”?

    Seperti yang saya tulis di atas, Gutenberg menawarkan performa dan fleksibilitas luar biasa, namun memang membutuhkan waktu untuk memahami struktur Full Site Editing (FSE) agar hasilnya maksimal.

    Jika Anda ingin memiliki website yang ringan, mudah diedit, dan siap menghadapi masa depan (future-proof) tanpa harus pusing memikirkan teknisnya, saya siap membantu.

    Saya spesialis dalam membangun website berbasis WordPress Native (Block Editor) yang dioptimasi dengan sentuhan CSS khusus.

    Hubungi Saya

    Beberapa Hasil Karya Saya

    • PT. Gumilang Maju Selaras (GMS): Website korporat responsif yang dibangun dengan Full Site Editing (FSE), integrasi API WhatsApp, dan animasi kustom berbasis Intersection Observer untuk pengalaman pengguna yang dinamis.
    • GoBlocks.id: Pustaka pola (Block Patterns) Gutenberg yang dapat digunakan ulang untuk pemula, freelancer, atau developer.
    • KangFadhil.id: Website portofolio profesional yang mengoptimalkan Site Editor untuk kemudahan update.
    • GoMasjid: Template web untuk masjid yang dibangun sepenuhnya dengan block native.
    • QurbanYuk: Landing page musiman untuk layanan Qurban dengan fokus pada konversi tinggi.
    • GoShop: Demo katalog e-commerce ringan yang memanfaatkan fitur-fitur bawaan WordPress.
    • GBlog: Template bergaya majalah minimalis yang fokus pada tipografi dan keterbacaan.
    • Jualand: Desain website untuk jualan desain landing page.
    • dan masih banyak lagi …….
  • Mengapa Clean Code? “People Buy Why You Do It” dan Filosofi Menggunakan Fitur Bawaan WordPress

    Mengapa Clean Code? “People Buy Why You Do It” dan Filosofi Menggunakan Fitur Bawaan WordPress

    Pendahuluan

    Halo teman-teman pembangun website WordPress

    Sedikit sharing pemahaman saya di dunia WordPress saat ini, mungkin saja tulisan ini TIDAK penting, tapi mungkin bisa membuka cara pandang kita dari sisi yang lain.

    Pernah dengar kutipan terkenal dari ahli marketing Simon Sinek? “People don’t buy what you do, They buy why you do it.”

    Kutipan tersebut bukan hanya berlaku untuk menjual produk, tapi sangat relevan untuk cara kita membangun website di WordPress. (yang saya tau) masih banyak designer atau developer fokus pada “WHAT” (hasil instan: website cantik, banyak fitur), sehingga mereka langsung install puluhan plugin dan page builder yang berat.

    Namun, di era Block Editor (Gutenberg) dan Full Site Editing (FSE) ini, kita diajak kembali ke filosofi dasar: Mengapa kita membangun dengan cara yang paling bersih dan mandiri?

    Mari kita bahas secara singkat mengapa memilih fitur bawaan WordPress adalah investasi terbaik untuk masa depan situs Anda.

    Daftar Isi
    1. Memahami Perbedaan: ‘WHAT’ vs. ‘WHY’ dalam Website Building
    2. 3 Alasan Mendalam (WHY) Kita Memilih Fitur Bawaan WordPress
    3. Realitas Lapangan: Kapan Kita Perlu Bantuan ‘Magic’ (Plugin Tambahan)?
    4. Tanya Jawab (FAQ)
    5. Kesimpulan

    Memahami Perbedaan: ‘WHAT’ vs. ‘WHY’ dalam Website Building

    Untuk membangun website yang sehat, kita harus membedakan fokus kita:

    “WHAT” (Apa yang Kamu Lakukan)“WHY” (Mengapa Kamu Melakukannya)
    Fokus: Hasil akhir yang terlihat, fitur yang canggih, tampilan yang menarik.Fokus: Nilai, prinsip, dan fondasi yang mendasari proses pembuatan website tersebut.
    Resiko: Ketergantungan plugin berlebihan, loading lambat, kesulitan maintenance.Resiko: Fokus pada proses yang lebih panjang di awal, namun menjamin sustainability jangka panjang.

    Orang mungkin melihat website Kamu cepat (WHAT), tetapi mereka akan percaya pada website Kamu karena Kamu membangunnya dengan prinsip clean code (WHY).

    3 Alasan Mendalam (WHY) Kita Memilih Fitur Bawaan WordPress

    Inilah filosofi WHY yang mendasari setiap keputusan kita menggunakan Blok Grup, Row, Template, dan Global Styles bawaan WordPress:

    1. Kebebasan dari Ketergantungan (Freedom)

    Kita memilih Blok Bawaan karena kita ingin bebas dari risiko plugin lock-in.

    Bayangkan skenario terburuk: Page Builder atau plugin utama Anda tiba-tiba berhenti update atau mengenakan biaya langganan yang mahal. Jika situs Anda dibangun 100% dari code mereka, situs Anda berpotensi error atau bahkan runtuh. Sebaliknya, situs yang dibangun menggunakan Blok dan Template FSE bawaan akan aman dan tetap berfungsi karena didukung oleh sistem core WordPress itu sendiri.

    2. Performa dan Filosofi Clean Code

    WHY kita adalah kita ingin website yang sehat, ringan, dan ngebut.

    Setiap plugin tambahan membawa beban code (CSS dan JavaScript) yang tidak perlu. Fitur bawaan WordPress dirancang untuk menghasilkan code yang paling minimal dan efisien. Ini berdampak langsung pada skor Lighthouse dan metrik Core Web Vitals Google yang dapat membuat situs Anda lebih disukai oleh mesin pencari.

    3. Mendukung Nilai Open Source

    Kita memilih alat bawaan karena kita mendukung filosofi Open Source WordPress. Kita percaya bahwa alat terbaik untuk membangun website harus terus dikembangkan, tersedia, dan dapat diakses oleh semua orang, bukan dikunci di balik paywall plugin berbayar.

    Baca Juga

    Realitas Lapangan: Kapan Kita Perlu Bantuan ‘Magic’ (Plugin Tambahan)?

    Ini adalah bagian penting. Tentu saja, fitur bawaan memiliki batasan. Kita tidak anti plugin, tetapi kita harus selektif.

    Gunakan Prinsip Minimum:

    • Fokus 90% pada Bawaan: Pastikan 90% dari desain struktural situs (Header, Footer, tata letak konten, styling dasar) dibuat menggunakan Blok Editor dan FSE.
    • Identifikasi Kebutuhan Sejati (Functional Gap): Gunakan plugin tambahan hanya untuk fungsionalitas inti yang tidak bisa direplikasi oleh Blok Bawaan (misalnya, sistem e-commerce seperti WooCommerce, form yang terintegrasi dengan CRM, atau sistem membership khusus).
    • Jangan Overkill: Jangan gunakan plugin hanya untuk header sticky atau membuat smooth scroll (karena ini sudah bisa dilakukan dengan Blok bawaan/CSS sederhana).

    Tanya Jawab (FAQ)

    Untuk tata letak dan design toko (layout produk, halaman depan), ya, FSE sudah sangat kuat. Namun, untuk fungsionalitas inti e-commerce (manajemen stok, payment gateway, perhitungan pajak), Anda mutlak membutuhkan plugin khusus seperti WooCommerce.

    Plugin koleksi Blok berguna ketika Anda membutuhkan Blok spesifik yang belum tersedia di bawaan (misalnya Blok Container dengan Flexbox tingkat lanjut, atau Blok Carousel). Namun, pastikan Anda hanya menggunakan Blok yang dibutuhkan, bukan untuk mengambil alih design global.

    Migrasi dari Page Builder harus hati-hati. Disarankan membangun ulang Template menggunakan FSE. Jangan hapus Page Builder lama sebelum semua konten lama berhasil di-transfer. Selalu lakukan backup penuh sebelum proses migrasi.

    Kesimpulan: Membangun WHY yang Kokoh

    Memilih menggunakan fitur bawaan WordPress adalah keputusan filosofis. Ini adalah komitmen untuk membangun situs yang tidak hanya cantik (WHAT), tetapi juga cepat, aman, ringan, dan mandiri (WHY).

    Pada akhirnya, website yang paling berharga adalah yang paling berkelanjutan dan bebas dari ketergantungan.

    🔥 Saatnya Bertindak!

    Jangan tunggu update besar memaksa Anda. Jangan biarkan plugin berlebihan menjadi rantai yang mengikat performa situs Anda.

    Mulai sekarang, ubah kebiasaan Anda: Ngulik Blok Bawaan, pahami Global Styles, dan kuasai Site Editor.

    Jangan Bingung Harus Mulai dari Mana!

    Membangun dari dasar tidak serumit yang dibayangkan. Fokuslah pada tiga elemen utama ini untuk menguasai fitur bawaan WordPress:

    1. Pahami Blok Struktur: Pelajari cara kerja Blok Grup, Row, dan Grid untuk mengontrol tata letak responsif (layaknya Flexbox atau Grid sederhana). Ini adalah pengganti utama Page Builder.
    2. Kuasai Global Styles: Pahami cara kerja Site Editor (FSE) dan panel Gaya Global. Di sinilah Anda mengatur setting tipografi, warna, dan layout sekali jalan untuk seluruh website Anda, menjamin konsistensi dan clean code.
    3. Eksplorasi Template Parts: Belajar cara mengedit Header dan Footer melalui Template Parts di Site Editor. Ini adalah kunci kemandirian desain FSE.

    Sumber Belajar yang Bisa Anda Akses:

    Lihat dan buktikan sendiri: Lihat bagaimana hasil belajar saya dalam membuat desain website dengan menggunakan Blok Bawaan.

    Maka, sebelum terpaksa, mulailah dari dasar sekarang juga!

  • Revolusi WordPress: Panduan Mendalam Gutenberg, Block Editor, FSE, dan Site Editor (Plus Strategi Jitu untuk Melesatkan Peringkat SEO)

    Revolusi WordPress: Panduan Mendalam Gutenberg, Block Editor, FSE, dan Site Editor (Plus Strategi Jitu untuk Melesatkan Peringkat SEO)

    Revolusi WordPress

    Sejak WordPress 5.0, ekosistem web development telah mengalami transformasi monumental. Empat istilah seperti Gutenberg, Block Editor, Full Site Editing (FSE), dan Site Editor bukan sekadar istilah teknis, melainkan arsitektur baru yang menjadi kunci utama performa, struktur, dan pada akhirnya, peringkat SEO (Search Engine Optimization) situs Anda di Google.

    Artikel mendalam ini akan mengupas tuntas setiap konsep, dan yang terpenting, menjelaskan secara rinci bagaimana Anda dapat memanfaatkan fitur-fitur ini untuk mendapatkan keunggulan kompetitif di hasil pencarian.

    Daftar Isi
    1. Blok: Fondasi Baru WordPress dan Keuntungannya untuk SEO On-Page
    2. Full Site Editing (FSE) dan Site Editor: Kunci Utama Performa dan Konsistensi (Technical SEO)
    3. Strategi Peringkat SEO Menggunakan FSE dan Block Editor
    4. FAQ
    5. Kesimpulan

    Blok: Fondasi Baru WordPress dan Keuntungannya untuk SEO On-Page

    Revolusi ini bermula dari konsep yang sederhana: Blok.

    1. Block Editor: Alat untuk Menciptakan Struktur SEO yang Sempurna

    Block Editor, sering juga disebut Gutenberg Editor (meskipun itu adalah nama proyeknya), adalah antarmuka utama yang Anda gunakan untuk membuat konten di dalam postingan dan halaman.

    AspekBlock Editor (Modern)Classic Editor (Lama)Manfaat SEO
    StrukturKonten terbagi menjadi blok-blok modular.Konten adalah satu kotak teks besar.Memudahkan Technical SEO dan perayapan Google.
    HeadingPengaturan Blok Judul (H1, H2, H3, dst.) yang jelas.Harus manual memformat tag H.Memastikan Hirarki Judul Logis (kunci On-Page SEO).
    MediaBlok Gambar dengan kolom Alt Text yang wajib diisi.Sering terlewatkan.Optimasi gambar lebih mudah, meningkatkan SEO Gambar.
    SkemaMudah menambahkan blok khusus (Reviews, FAQ) yang didukung skema.Membutuhkan kode atau plugin eksternal.Memberikan Rich Snippets di SERP, meningkatkan CTR.

    Block Editor adalah alat On-Page SEO terbaik yang disematkan langsung di WordPress. Ia memaksa pengguna untuk menciptakan konten dengan struktur yang bersih dan semantik yang benar, hal yang dicintai Google.

    2. Gutenberg: Payung Besar Revolusi WordPress

    Gutenberg adalah nama proyek yang memayungi semua perubahan ini, termasuk Block Editor (Fase I) dan Full Site Editing (Fase II). Tanpa proyek Gutenberg, tidak ada Block yang kita kenal saat ini.

    Full Site Editing (FSE) dan Site Editor: Kunci Utama Performa dan Konsistensi (Technical SEO)

    Sementara Block Editor berfokus pada konten, FSE dan Site Editor berfokus pada struktur global website, yang secara langsung berdampak pada Technical SEO.

    3. Full Site Editing (FSE): Visi Struktur Bebas Kode

    FSE adalah filosofi atau inisiatif yang memperluas penggunaan Blok ke seluruh bagian situs. Inti dari FSE adalah keyakinan bahwa setiap elemen di situs web harus dapat dikustomisasi, termasuk yang dulunya hanya bisa diubah melalui kode PHP tema (header, footer, sidebar).

    Persyaratan FSE: Untuk mengaktifkan FSE, Anda harus menggunakan Tema Berbasis Blok (Block Theme), seperti Twenty Twenty-Four atau tema modern lainnya.

    4. Site Editor: Pusat Kendali Technical SEO

    Site Editor adalah alat atau antarmuka tempat FSE diwujudkan (diakses melalui Tampilan > Editor). Site Editor memungkinkan Anda mengedit struktur situs Anda, yang sangat penting bagi peringkat Google.

    Dampak Site Editor pada Peringkat SEO:

    Fitur Site EditorDampak Langsung pada SEO
    Tema Berbasis BlokMenghasilkan kode HTML/CSS yang minimalis. Ini secara drastis mengurangi code bloat dan ukuran halaman, yang menjadi kunci utama Kecepatan Situs (Core Web Vitals).
    Kontrol Templat GlobalMemungkinkan Anda memastikan bahwa semua halaman arsip, halaman postingan tunggal, dan halaman 404 memiliki struktur heading dan navigasi yang konsisten.
    Konsistensi DesainPengaturan Gaya Global (Global Styles) menciptakan desain yang seragam. Ini meningkatkan User Experience (UX). Google sangat menghargai UX yang baik, tercermin dari metrik Time on Site yang tinggi dan Bounce Rate yang rendah.
    Navigasi dengan BlokNavigasi (menu) adalah elemen krusial SEO karena membantu perayap Google (crawler) memahami struktur situs Anda. Dengan Site Editor, Anda dapat memastikan blok navigasi diatur secara logis dan dioptimalkan di semua header atau footer.

    Baca Juga

    Strategi Peringkat SEO Menggunakan FSE dan Block Editor

    Untuk melesatkan peringkat Google Anda, gabungkan kekuatan Block Editor dan Site Editor dalam strategi yang terpadu:

    Strategi 1: Memaksimalkan Kecepatan dengan Tema Blok

    • Pilih Tema Blok: Selalu utamakan tema berbasis blok. Lakukan tes kecepatan menggunakan alat seperti Google PageSpeed Insights; situs FSE umumnya mendapatkan skor yang jauh lebih tinggi.
    • Gaya Global yang Tepat: Gunakan fitur Styles di Site Editor untuk menetapkan satu set warna dan tipografi. Konsistensi ini mengurangi kode CSS tambahan dan mempercepat rendering halaman.

    Strategi 2: Mengoptimalkan Struktur Konten (On-Page)

    • Hirarki Judul Jelas: Dalam Block Editor, gunakan satu Blok Judul H1 untuk judul utama postingan/halaman. Gunakan H2 untuk topik utama dan H3 untuk sub-topik. Hirarki yang tepat membantu Google mengindeks relevansi konten Anda.
    • Blok Gambar yang Disiplin: Selalu isi kolom Teks Alternatif (Alt Text) pada setiap Blok Gambar. Ini adalah On-Page SEO mendasar untuk gambar.
    • Internal Linking Cerdas: Gunakan Blok Tautan (Link Block) untuk menautkan ke konten relevan lain di situs Anda. Jaringan tautan internal yang kuat adalah pilar SEO Off-Page.

    Strategi 3: Konsistensi Global untuk Crawlability

    • Footer yang Informatif: Gunakan Site Editor untuk menempatkan blok teks atau navigasi di footer yang menyertakan tautan ke halaman penting (Kontak, Kebijakan Privasi). Ini membantu perayap Google (crawler) menemukan semua halaman penting.
    • Optimasi Templat Arsip: Edit templat arsip di Site Editor untuk memastikan halaman kategori dan tag memiliki judul yang unik dan deskripsi singkat di atas daftar postingan. Halaman arsip yang dioptimalkan dapat menarik lalu lintas long-tail keyword.

    Tanya Jawab (Q&A): Menerapkan FSE dan SEO

    Apakah saya masih butuh plugin SEO (seperti Yoast/Rank Math) jika saya menggunakan FSE?

    Ya, Anda masih membutuhkannya. FSE membantu Technical SEO dan performa, tetapi plugin SEO bertugas menyediakan fitur penting seperti: XML Sitemaps, kontrol atas Meta Description, Canonical URL, Schema Markup lanjutan, dan alat analisis konten. FSE dan plugin SEO bekerja saling melengkapi.

    Bagaimana FSE memastikan situs saya mobile-friendly?

    Tema berbasis blok yang dibangun untuk FSE secara default sudah dirancang dengan prinsip mobile-first dan responsive CSS. Kontrol tata letak di Site Editor (seperti blok Kolom, Grup, dan Tumpukan) telah dilengkapi dengan pengaturan responsif yang memudahkan Anda memastikan tampilan sempurna di semua perangkat, hal yang sangat ditekankan oleh Google.

    Jika saya menggunakan Block Editor, apakah saya harus membuang semua shortcode dari tema lama saya?

    Sebaiknya ya. Shortcode seringkali menyebabkan code bloat dan tidak mudah dipahami oleh Block Editor. Tujuan dari FSE adalah menggantikan shortcode dengan Block yang visual. Mengganti shortcode dengan blok bawaan akan membuat kode Anda lebih bersih dan cepat.

    Apakah kecepatan situs FSE lebih unggul dari page builder (Elementor/Divi)?

    Secara umum, ya. Situs FSE yang menggunakan Block Theme memiliki kode yang jauh lebih ringan dan memuat lebih sedikit aset eksternal (CSS/JS) dibandingkan sebagian besar page builder yang berat. Keunggulan performa ini adalah alasan terbesar mengapa FSE sangat baik untuk Technical SEO.

    Kesimpulan

    Sejak diperkenalkannya Editor Blok pada tahun 2018, WordPress telah mengalami revolusi besar. Empat istilah seperti Gutenberg, Block Editor, FSE, dan Site Editor seringkali muncul bersamaan dan membingungkan. Padahal, keempatnya adalah bagian dari sebuah visi tunggal untuk mengubah WordPress menjadi platform drag-and-drop yang modern.

    • Gutenberg adalah nama kode atau nama proyek besar yang diluncurkan oleh tim inti WordPress.
    • Block Editor adalah produk pertama yang dihasilkan dari Proyek Gutenberg. Inilah alat yang Anda gunakan untuk menulis dan menyusun konten di dalam postingan atau halaman.
    • Full Site Editing (FSE) adalah fase kedua dan visi dari Proyek Gutenberg yang memperluas Block Editor ke seluruh bagian situs.
    • Site Editor adalah alat atau antarmuka yang memungkinkan Anda melakukan Full Site Editing.

    Revolusi Gutenberg telah mengubah WordPress dari CMS yang berfokus pada konten menjadi Site Builder yang berfokus pada performa.

    Block Editor memberikan Anda kontrol atas On-Page SEO melalui struktur konten. Full Site Editing (FSE) dan Site Editor memberikan Anda kontrol penuh atas Technical SEO melalui arsitektur situs yang ringan dan konsisten.

    Dengan memahami dan memanfaatkan keempat pilar ini, Gutenberg, Block Editor, FSE, dan Site Editor, Anda tidak hanya membangun website yang lebih mudah dikelola, tetapi juga menyiapkan fondasi yang kuat untuk dominasi jangka panjang di hasil pencarian Google.

    Langkah Selanjutnya: Jangan Hanya Menjadi Pengguna, Jadilah Arsitek Website Anda

    Setelah memahami betapa pentingnya Site Editor dan FSE bagi performa situs (SEO), kini Anda tahu bahwa kontrol penuh atas desain website tidak lagi memerlukan kode atau page builder pihak ketiga yang berat.

    Saatnya beralih dari sekadar mengedit konten menjadi menguasai struktur situs Anda. Tingkatkan skill Anda dari pembuat konten menjadi arsitek website yang mampu membangun fondasi digital yang cepat dan powerful untuk bisnis Anda.

    JANGAN LEWATKAN KESEMPATAN INI: WORKSHOP SITE EDITOR JAKARTA 2025

    Bergabunglah dengan para profesional dan pemula yang siap mengambil kendali penuh atas website mereka. Pelajari teknik-teknik FSE, Global Styles, dan strategi optimasi tema berbasis blok yang akan melipatgandakan kecepatan dan efisiensi kerja Anda.

    Ambil kendali penuh atas desain dan SEO website Anda!

    Info & Pendaftaran: Kuasai Site Editor di Workshop Jakarta 2025

    Sumber Bacaan

  • Roadmap WordPress 6.9: Cerita di Balik Fitur Baru dan Kenapa Penting Buat Pemula

    Roadmap WordPress 6.9: Cerita di Balik Fitur Baru dan Kenapa Penting Buat Pemula

    WordPress Itu Selalu Bergerak

    Kalau kamu sudah cukup lama main WordPress, pasti sadar kalau platform ini nggak pernah berhenti berkembang. Dari awalnya hanya platform blogging sederhana di tahun 2003, sampai sekarang jadi CMS paling populer di dunia yang dipakai lebih dari 40% website.

    Nah, setiap tahunnya WordPress punya beberapa versi besar. Dan kabar gembira buat kita semua: akhir tahun 2025, tepatnya 2 Desember 2025, WordPress bakal merilis versi 6.9.

    Sebagai pemula, mungkin kamu bertanya:
    “Apa sih yang spesial dari WordPress 6.9? Bakal ngaruh nggak buat website saya?”

    Jawabannya: iya, ngaruh banget. Karena di 6.9, fokusnya adalah mempermudah pengalaman pengguna supaya bikin website nggak lagi ribet, bahkan tanpa perlu plugin tambahan.

    Daftar Isi
    1. Timeline: Dari Alpha sampai Rilis Final
    2. Fitur-Fitur Baru WordPress 6.9
    3. Work in Progress (WIP)
    4. Kenapa Nggak Ada Tema Default Baru?
    5. FAQ
    6. Kesimpulan

    Timeline: Dari Alpha sampai Rilis Final

    Sebelum bahas fitur, mari kita lihat perjalanan rilisnya:

    • Alpha (25 Maret 2025) → fase awal di mana fitur mulai dikembangkan.
    • Beta 1 (21 Oktober 2025) → versi percobaan pertama yang bisa dicoba publik.
    • Release Candidate (11 November 2025) → hampir final, fokus pada perbaikan bug.
    • Final Release (2 Desember 2025) → versi stabil yang siap dipakai semua orang.

    Jadi, buat kamu yang suka nyobain lebih awal, bisa coba WordPress Beta Tester Plugin sekitar akhir Oktober nanti.

    WordPress 6.9 Development Cycle

    Fitur-Fitur Baru WordPress 6.9

    Oke, sekarang masuk ke bagian paling ditunggu: apa aja yang baru di 6.9? Yuk kita bahas satu per satu dengan gaya cerita biar lebih mudah dipahami.

    1. Editor Situs dengan Mode Sederhana

    Coba bayangin kamu baru pertama kali buka Site Editor WordPress. Panel di kiri kanan, menu styling, block inserter, dan banyak tombol lain kadang bikin pemula bingung harus klik yang mana dulu.

    Nah, di WordPress 6.9 akan ada mode editing simpel. Mode ini membuat tampilan editor jadi lebih bersih, fokus ke teks dan gambar aja. Jadi kalau tujuanmu cuma “edit konten cepat”, kamu nggak perlu disuguhi semua alat desain sekaligus.

    Gimana kalau nanti butuh desain lanjutan? Tinggal switch aja ke mode lengkap.

    2. Manajemen Template Lebih Pintar

    Banyak pemula yang bingung soal template. “Kalau saya bikin template baru, apakah template lama hilang? Kalau ganti tema, apakah desainnya reset lagi?”

    Di WordPress 6.9, sistem template jauh lebih ramah pengguna:

    • Bisa punya beberapa versi template dengan slug sama → cocok buat uji coba desain.
    • Bisa simpan template sebagai draft sebelum dipakai.
    • Template tetap aman meskipun kamu ganti tema.
    • Ada opsi sembunyikan blok di front-end tapi tetap terlihat di backend (berguna buat testing).

    Jadi, kamu bisa lebih percaya diri bereksperimen tanpa takut hasil kerja hilang.

    3. Kolaborasi Lebih Mudah dengan Komentar di Blok

    Kalau kamu nulis artikel bareng tim, biasanya komunikasi dilakukan lewat chat atau Google Docs. Nah, di WordPress 6.9 ada fitur baru: Block-Level Commenting.

    Artinya, editor atau tim kamu bisa kasih komentar langsung di blok tertentu. Misalnya:

    • “Judul ini bisa lebih singkat.”
    • “Ganti gambar ini pakai yang resolusi lebih tinggi.”

    Mirip banget kayak kolaborasi di Google Docs, tapi bedanya: semua langsung di WordPress.

    4. Command Palette Super Canggih

    Command Palette itu semacam “pencarian cepat” di WordPress. Kalau kamu pencet Cmd/Ctrl + K, sebuah kotak pencarian muncul.

    Di versi sebelumnya, fiturnya masih terbatas. Tapi di 6.9, kemampuannya makin luas:

    • Bisa bikin postingan baru langsung dari palette.
    • Bisa navigasi ke halaman tertentu tanpa buka menu.
    • Bisa akses setting plugin lebih cepat.

    Intinya: semakin sedikit klik, semakin cepat kerja kamu.

    5. API Baru & Performa yang Lebih Kencang

    Nah, bagian ini mungkin agak teknis, tapi tetap penting buat kamu yang pemula.

    Ada dua API baru di WordPress 6.9:

    • Interactivity API → bikin interaksi di website lebih cepat, misalnya klik tombol tanpa reload seluruh halaman.
    • Abilities API → bikin WordPress lebih mudah dihubungkan dengan AI atau sistem eksternal lain.

    Selain itu, caching halaman dan penggunaan resource makin efisien. Hasilnya? Website WordPress kamu bakal lebih cepat dan hemat tenaga server.

    About the Interactivity API

    Baca Juga

    Work in Progress (WIP)

    Menurut Anne McCarthy (kontributor WordPress Core), roadmap ini masih dalam tahap pengerjaan. Saat artikel ini ditulis, tim fokus menyelesaikan fitur sebelum Beta 1 di Oktober 2025.

    Jadi masih ada kemungkinan beberapa detail berubah, tapi garis besar fitur di atas sudah cukup jelas jadi “menu utama” WordPress 6.9.

    Exploring work in progress for WordPress 6.9

    Kenapa Nggak Ada Tema Default Baru?

    Setiap tahun biasanya kita dapat tema default “Twenty Something”, misalnya Twenty Twenty-Five. Tapi di versi 6.9, tidak ada tema default baru.

    Alasannya cukup sederhana:

    • Tim ingin fokus memperkuat editor, template, dan performa.
    • Tema blok yang ada sekarang sudah cukup matang untuk jadi starter theme.

    Buat pemula, ini kabar baik. Artinya kamu tidak perlu bingung memilih tema baru cukup eksplorasi theme blok yang sudah ada.

    FAQ

    Apakah saya wajib upgrade ke WordPress 6.9?

    Tidak wajib, tapi sangat disarankan demi keamanan dan fitur baru.

    Apakah fitur baru bikin website lama saya rusak?

    Tidak. WordPress selalu menjaga kompatibilitas ke belakang. Tapi tetap, sebaiknya coba dulu di staging site.

    Bagaimana cara mencoba WordPress 6.9 sebelum rilis resmi?

    Install plugin WordPress Beta Tester dan aktifkan channel beta.

    Apakah fitur Block Commenting butuh plugin tambahan?

    Tidak, fitur ini bawaan WordPress 6.9.

    Apa bedanya dengan WordPress 6.8 sebelumnya?

    Kalau 6.8 fokus ke “Foundation for Collaboration”, maka 6.9 adalah lanjutan dengan fitur editing simpel, manajemen template lebih canggih, dan performa lebih baik.

    Kesimpulan

    WordPress 6.9 membawa banyak hal baru yang intinya bikin hidup pemula lebih mudah:

    • Editing lebih fokus dan nggak bikin pusing.
    • Template yang lebih fleksibel dan aman.
    • Kolaborasi lancar kayak Google Docs.
    • Navigasi cepat lewat Command Palette.
    • Website makin cepat berkat API baru.

    Kalau kamu baru mulai dengan WordPress, ini versi yang tepat untuk belajar. Kalau sudah lama pakai, ini saatnya nikmati efisiensi baru yang disiapkan tim WordPress Core.

    Jangan lupa: rilis final 2 Desember 2025. Yuk siapkan website kamu, dan kalau mau lebih seru, join komunitas seperti WordPress Bandung buat diskusi langsung bareng sesama pengguna.

    Pertanyaan untukmu:
    Fitur mana yang paling bikin kamu penasaran di WordPress 6.9? Tulis jawabanmu di komentar, yuk!

    Sumber Bacaan

  • Tren Desain WordPress 2025: Panduan Web Designer Profesional

    Tren Desain WordPress 2025: Panduan Web Designer Profesional

    Bandung – 10 Juli 2025 – Dunia WordPress terus berevolusi, terutama di ranah desain situs. Di artikel ini, kamu akan menemukan insight utama untuk web designer: dari teknologi interaktif 3D, dark mode, hingga AI dan kecepatan performa, semuanya disusun agar mudah dipahami dan siap dijadikan template atau pattern.

    Daftar Isi
    1. 3D & Elemen Interaktif
    2. Dark Mode & Minimalism
    3. AI-Powered Imagery & Personalization
    4. Performance & Mobile-First
    5. FAQ
    6. Kesimpulan

    3D & Elemen Interaktif

    Trend desain terbesar di 2025 adalah elemen web 3D interaktif. Menambahkan depth dan realisme, desain jadi lebih immersive—ideal untuk portofolio, landing page, atau produk showcase. Platform seperti Elementor kini memungkinkan:

    • 3D tilt effect
    • Mouse parallax
    • Animasi objek 3D ringan

    Untuk web designer, ini berarti pembelajaran WebGL ringan, SVG interaktif, dan optimization agar tetap responsif dan cepat.

    Dark Mode & Bold Minimalism

    Dark mode dan desain minimalis tetap kuat di 2025. Gabungan warna kontras dan banyak whitespace menonjolkan konten utama. Bold typography makin menekankan pesan tydak perlu banyak visual—cukup rapi dan elegan. Ini cocok untuk:

    • Brand premium
    • Portofolio digital
    • Website service profesional

    Baca Juga

    AI-Powered Imagery & Personalization

    AI kini bukan sekadar fitur—tapi jadi bagian desain utama. Web designer makin sering:

    • Menggunakan AI image generator untuk custom visuals
    • Mengandalkan AI image optimizer
    • Menyajikan konten personalized berdasarkan perilaku pengguna

    Elemen ini membuat desain jadi cepat diproduksi, unik, tapi tetap relevan.

    Performance & Mobile-First

    Performan dan mobile-ready masih jadi prioritas utama. Tren developer sekarang meliputi:

    • Tema lightweight, non-jQuery, lazy loading
    • Implementasi responsive grid dan fluid typography
    • Optimasi untuk Core Web Vitals guna mendukung SEO

    Bagi web designer, artinya: desain kini harus selaras dengan struktur kode minimal, CSS modular, dan pengujian kecepatan secara rutin.

    WordPress Design

    FAQ

    Haruskah saya belajar 3D/WebGL?

    Untuk niche desain interaktif, ya. Tapi penerapan hematis ringan dengan CSS/SVG kecil pun cukup efektif.

    Bagaimana dark mode ditambahkan?

    Gunakan variabel CSS (prefers-color-scheme) dan sediakan 2 set warna. Banyak tema FSE kini mendukung toggle dark mode.

    Apakah AI menggantikan designer?

    Tidak. AI bantu stylist work, tetapi selera desain dan storytelling tetap jadi pekerjaan web designer

    Kesimpulan

    Tren desain WordPress 2025 menuntut web designer lebih kreatif (3D, dark mode), efisien (AI), dan cepat (lightweight + responsive). Semua makin terealisasi lewat block theme dan editor modern.

    Yuk, adaptasi tren ini di website-mu
    Bagi yang ingin belajar interaktif 3D, dark mode toggle, atau integrasi AI di Block Editor, tinggalkan komentar atau hubungi saya siap support project desain kamu.

    Sumber Bacaan

  • Cerita di Balik Project Redesign Website kangfadhil.id

    Cerita di Balik Project Redesign Website kangfadhil.id

    Setiap website punya cerita. Tapi bagi saya, justru proses mendesain ulang sebuah website menyimpan lebih banyak kisah — tentang pemiliknya, tentang tujuannya, dan tentu saja… tentang tantangan di balik layarnya.

    Mendesain ulang website bukan sekadar mempercantik tampilan. Tapi menyelaraskan wajah digital dengan identitas dan perjalanan sang pemiliknya.

    Kali ini, saya ingin membagikan pengalaman saya sebagai desainer web dalam proyek redesign website kangfadhil.id, sebuah situs pribadi milik Kang Fadhil Dzikri — seorang Digital Marketing Enthusiast dari Bandung yang aktif berbagi insight, membangun komunitas, dan terus tumbuh sebagai profesional di dunia digital.

    Latar Belakang Project

    Saat saya menerima tantangan untuk me-redesign website Kang Fadhil Dzikri, seorang Digital Marketing Enthusiast dari Bandung yang aktif berbagi insight dan edukasi tentang SEO dan strategi konten digital, saya langsung paham: website ini harus berubah arah — bukan hanya tampilannya, tapi juga cara menyampaikan pesannya dan kecepatan akses webnya.

    Brief & Tantangan

    Tampilan website versi sebelumnya sudah rapi, tapi terlalu generik. Padahal Kang Fadhil adalah figur yang:

    • Aktif berbagi ilmu
    • Dekat dengan komunitasnya
    • Selalu punya energi baru dalam menyampaikan edukasi digital

    Tantangan utama saya: membuat website yang lebih personal, lebih hangat, dan lebih fleksibel untuk mengelola konten edukasi digital.

    Proses Desain Ulang

    Saya memilih menggunakan WordPress Block Editor (FSE) agar seluruh desain fleksibel dan ringan, tanpa bergantung pada plugin page builder tambahan. Dengan tools bawaan WordPress, saya dapat menyusun ulang struktur halaman dari nol, dan membangun ulang identitas visual yang lebih merepresentasikan Kang Fadhil sebagai seorang praktisi dan mentor.

    Elemen Desain Utama

    Bagian Homepage: Misi Utama, Sorotan Utama

    Saat saya pertama kali melihat homepage lama dari website Kang Fadhil, hal yang langsung terlintas di kepala adalah: “Ini harus lebih dari sekadar ‘kartu nama digital’.” Karena Kang Fadhil bukan sembarang praktisi digital, tapi Growth Business Specialist dengan pengalaman SEO sejak 2009. Maka saya mulai menyusun ulang homepage sebagai etalase personal brand yang benar-benar kuat.

    Desain Home Page Lama

    Hero Section: Perkenalan Penuh Karakter

    Saya mulai dengan membuat Hero Section yang langsung memperkenalkan siapa Kang Fadhil, lengkap dengan jabatan “Digital Marketing Enthusiast”, ditambah CTA ganda: Hubungi Saya & Lihat Profil. Agar tidak sekadar teks, saya padukan dengan ilustrasi dan foto profesional Kang Fadhil yang menyatu dengan grafis lingkaran — mewakili perjalanan & pertumbuhan yang terus berputar.

    Quote Section: Personal & Emosional

    Bagian ini penting — saya tampilkan foto close-up Kang Fadhil mengenakan hoodie merah disertai kutipan motivasi tentang makna sukses. Ini memberi nuansa manusiawi & empatik, mengingatkan kita bahwa dibalik strategi bisnis ada nilai hidup yang dijunjung.

    Trust Element: Angka yang Bicara

    Tepat di bawahnya, saya munculkan angka-angka pencapaian: jumlah klien, project, dan tahun pengalaman. Karena, kita tahu, angka lebih mudah dipercaya dibanding janji. Desain dibuat bersih, simetris, dan mudah dicerna.

    Layanan Utama: Fokus & Jelas

    Selanjutnya, saya perkenalkan layanan Kang Fadhil sebagai Growth Business Specialist. Saya pecah menjadi 4 box:

    • SEO Technical
    • Campaign SEO
    • SEO Strategy
    • Conversion Rate

    Setiap box punya ikon dan deskripsi ringkas agar mudah dipahami bahkan oleh yang awam SEO.

    Produk Digital: E-Book & Bootcamp

    Untuk bagian produk, saya munculkan dua unggulan:

    • E-Book: Menjadi SEO Specialist Itu Asik Loh!
    • Bootcamp: SEO Foundation Academy

    Visualnya dibuat atraktif dan profesional, dengan harga dan tanggal kelas agar mudah diakses calon peserta.

    Ruang Belajar (Blog Section)

    Karena edukasi adalah bagian dari brand Kang Fadhil, saya munculkan artikel terbaru dari blog dalam bentuk card 3 kolom. Setiap card punya thumbnail, judul, dan CTA baca selengkapnya. Ini memperkuat positioning beliau sebagai thought leader.

    CTA Penutup: Ajak Kolaborasi

    Saya tutup homepage dengan ajakan langsung: “Let’s Work Together”. Visual jembatan kota Bandung di malam hari menambah kesan lokal, profesional, dan siap melayani siapa pun yang ingin berkolaborasi.

    Desain homepage ini bukan sekadar layout, tapi perjalanan mendesain ulang citra profesional Kang Fadhil secara digital.

    Tujuannya satu: website ini bukan hanya bisa dilihat, tapi bisa dipercaya.

    Halaman Produk: Gak Cuma Jualan, Tapi Juga Meyakinkan

    Di halaman produk ini, saya ingin memastikan setiap orang yang membuka link e-book dan bootcamp langsung paham nilai dari produknya — tanpa harus mikir panjang. Jadi, yang saya lakukan pertama adalah menyusun ulang strukturnya jadi lebih rapi dan fokus ke konversi.

    Produk 1: Panduan Menjadi SEO Specialist Itu Asik Loh!

    📍 Link halaman

    Untuk e-book ini, saya bikin tampilannya mirip landing page sederhana:

    • Gambar cover e-book yang besar dan jelas di bagian atas.
    • Judul dan deskripsi produk saya susun dalam grid dua kolom biar rapi.
    • Saya sematkan highlight fitur seperti apa yang akan kamu pelajari dan untuk siapa e-book ini cocok — semuanya ditampilkan dalam bentuk poin-poin supaya mudah dicerna.
    • CTA beli diarahkan ke marketplace digital dengan gaya tombol besar dan menonjol, biar gampang diklik.

    Produk 2: Bootcamp SEO Foundation Academy Batch 2

    📍 Link halaman

    Halaman bootcamp saya desain dengan pendekatan semi-event:

    • Ada poster digital kelas di sisi kanan dan deskripsi mendetail di sisi kiri.
    • Saya tambahkan info teknis seperti jadwal, platform (Zoom), hingga benefit peserta, disajikan secara berurutan.
    • Bagian bonus dan harga spesial saya desain dengan gaya highlight, agar terlihat menarik dan tidak tenggelam oleh teks lainnya.
    • Sama seperti e-book, tombol CTA diarahkan ke WhatsApp atau halaman pembayaran.

    Intinya, saya buat halaman produk ini bukan hanya “kelihatan keren”, tapi juga nyaman dibaca dan mudah dibeli.

    Halaman Artikel: Belajar SEO Gak Perlu Ribet

    📍 Link halaman

    Untuk halaman artikel, saya pastikan tampilannya tetap simpel tapi tetap punya identitas visual yang kuat.

    • Saya susun artikel dalam layout 3 kolom menggunakan blok post grid bawaan, agar efisien dan tetap responsif.
    • Tiap card artikel tampil dengan thumbnail gambar, judul yang clickable, dan excerpt ringkas. Desainnya bersih dan modern, jadi nyaman dilihat, terutama di layar mobile.
    • Di bagian atas halaman, saya tambahkan judul section “Ruang Belajar” sebagai pemanis dan penguat identitas brand edukatif dari Kang Fadhil.

    Fungsinya jelas: siapa pun yang datang ke halaman ini bisa langsung lihat dan klik artikel terbaru yang relevan — baik pemula maupun yang sudah paham SEO.

    Kalau homepage adalah pintu masuknya, maka halaman produk dan artikel ini adalah ruang interaksi dan edukasi. Saya pastikan semuanya terstruktur, jelas, dan tetap dalam gaya visual brand Kang Fadhil: profesional tapi tetap ramah dan approachable.

    Halaman CV: Bukan Sekadar Daftar Riwayat Hidup

    📍 Link halaman

    Salah satu tantangan seru dalam project redesign ini adalah bikin halaman CV Kang Fadhil tetap informal tapi tetap powerful. Saya gak ingin halaman ini sekadar daftar panjang pengalaman kerja — tapi juga jadi ajang pamer kredibilitas yang elegan.

    Makanya, saya mulai dari Foto dan Nama Kang Fadhil lalu tambahkan siapa Kang Fadhil dan quote yang singkat tapi berkesan. Lalu masuk ke bagian inti yang saya susun dalam tampilan 2 kolom:

    Kiri: Informasi Personal dan Kemampuan

    • Kontak, Pendidikan, kemampuan, dan bahasa saya susun rapi di bagian kiri
    • Saya tambahkan juga logo kecil biar tampilannya gak kaku.

    Kanan: Pengalaman

    • Saya pisahkan antara Pengalaman Kerja dan Pengalaman Pembicara.
    • Bagian Pengalaman Pembicara, saya susun dalam grid layout biar tampil modern.

    Saya tetap jaga tone desain dari homepage dan produk, dengan font dan warna yang senada. Tujuannya: menjaga brand consistency. Dan tentu saja, pastikan halaman ini tetap cepat dimuat dan nyaman dilihat di mobile.

    Halaman ini bukan cuma tempat pamer CV, tapi ruang personal branding versi digital — dan saya pastikan tampilannya segar dan profesional.

    Halaman Single Post: Bikin Pembaca Betah Sampai Habis

    Saat mengerjakan bagian halaman artikel/single post, saya tahu betul kalau ini bukan cuma soal nulis dan baca — tapi soal mengajak pengunjung stay lebih lama dan nyaman menyerap isi konten.

    Makanya, begitu masuk ke halaman artikel seperti “Website Hilang di Google? Ini 7 Penyebab & Solusinya!”, hal pertama yang saya tata adalah:

    Struktur Layout yang Rapi

    • Bagian header artikel saya desain tegas dengan judul besar yang langsung nangkep mata, dilengkapi dengan breadcrumb sebagai navigasi mini biar user gak nyasar.
    • Saya tambahkan juga gambar featured image yang ukurannya pas dan kontekstual — biar tampilannya menarik saat artikel dishare ke media sosial.

    Tipografi yang Nyaman

    Saya pilih ukuran font yang readable untuk desktop maupun mobile. Jarak antar paragraf juga saya atur biar mata gak cepat lelah.

    Komponen di Bawah Artikel

    • Saya sisipkan kolom penulis lengkap dengan avatar, siapa penulis dan tombol sosial media.
    • Saya sisipkan juga navigasi artikel terbaru di bagian bawah. Ini penting buat menjaga user tetap muter-muter di website — alias engagement boost.

    Saya tutup homepage dengan ajakan langsung: “Let’s Work Together”. Visual jembatan kota Bandung di malam hari menambah kesan lokal, profesional, dan siap melayani siapa pun yang ingin berkolaborasi.

    Mobile Friendly? Wajib!

    Saya pastikan desain tetap smooth di HP. Mulai dari margin, padding, sampai ukuran teks — semua saya cek agar user bisa baca dengan nyaman sambil rebahan 😁.

    Di halaman artikel ini, tujuan saya sederhana: bikin pembaca nyaman, gak cepat kabur, dan langsung tertarik lanjut baca artikel lainnya. Dan itu harus didukung desain yang clean dan ramah mata.

    Tools & Teknologi yang Saya Gunakan

    Nah, setelah ngobrolin bagian depan layar yang penuh visual dan pengalaman pengguna, sekarang waktunya saya bongkar sedikit “dapur teknis” dari website kangfadhil.id yang saya redesign.

    CMS: WordPress

    Website Kang Fadhil ini dibangun menggunakan WordPress — karena fleksibel, powerful, dan komunitasnya luas banget. Terutama untuk personal branding, WordPress adalah pilihan yang solid.

    Tema: Block Theme Modern

    Saya pakai tema berbasis Full Site Editing (FSE) alias block theme modern yang mendukung Block Editor bawaan WordPress 100%. Tema yang digunakan adalah tema bawaan WordPress terbaru yaitu Twenty Twenty-Five, tema ini dikenal karena kesederhanaan, fleksibilitas, dan fitur-fitur yang berorientasi pada block editor bawaan.

    Plugin: Seperlunya, Bukan Sebanyak-banyaknya

    Biar website tetap ringan dan cepat diakses, saat ini saya hanya pasang plugin yang benar-benar bisa membantu saya khususnya untuk meningkatkan performance website, seperti:

    • Rank Math untuk optimasi mesin pencari.
    • LiteSpeed Cache untuk mempercepat loading.
    • Twentig untuk menambahkan fitur-fitur penting dan kreatif ke block editor WordPress.

    Ya, saat ini hanya 3 plugin itu yang saya aktifkan di website kangfadhil.id, tidak ada plugin page builder. Semua layout saya buat langsung pakai Block Editor bawaan WordPress, yang ternyata cukup andal dan menyenangkan dipakai kalau sudah terbiasa.

    Hasil Akhir

    Dengan desain baru ini, pengunjung tidak hanya melihat siapa Kang Fadhil — tapi juga merasakan bagaimana ia berbicara, mengajar, dan membangun hubungan. Desainnya bersih, cepat, responsif, dan tetap mudah digunakan oleh Kang Fadhil untuk mengelola sendiri kontennya di masa depan.

    Insight Pribadi

    Proyek ini mengingatkan saya bahwa desain bukan tentang “yang terlihat keren”, tapi tentang bagaimana website bisa bicara untuk pemiliknya. Saya belajar langsung dari kepribadian Kang Fadhil, cara dia menyapa audiens, dan bagaimana ia menyusun edukasi digital. Semua itu saya tuangkan ke dalam desain yang sekarang bisa kamu lihat di kangfadhil.id.

    Penutup dari Saya

    Bagi saya, setiap project desain website bukan hanya soal “membuatnya lebih bagus”. Tapi soal mewakili siapa pemiliknya di dunia digital.

    Terima kasih untuk Kang Fadhil atas kepercayaannya.

    Dan untuk kamu yang sedang berpikir untuk membangun atau me-redesign website personalmu… mungkin ini saatnya.

    Ingin website personal kamu di-redesign juga? Yuk ngobrol.

  • Memperkenalkan PootleWriter: Pendamping Penulisan WordPress Bebas Hambatan

    Memperkenalkan PootleWriter: Pendamping Penulisan WordPress Bebas Hambatan

    Ucapkan selamat tinggal pada alat tulis yang merepotkan dan sambut PootleWriter – aplikasi menulis revolusioner yang menghadirkan kesederhanaan dan kecepatan di ujung jari Anda.

    Tidak seperti alternatif bertenaga AI, PootleWriter adalah solusi yang dirancang manusia yang memprioritaskan pengalaman menulis Anda.

    Fitur Utama:

    1. Tidak Perlu Login: Langsung menulis tanpa hambatan apa pun.
    Cepat Secepat Kilat: Tuangkan pikiran Anda dengan cepat dan mudah.
    Antarmuka Bebas Gangguan: Fokus hanya pada kata-kata Anda, bukan teknologi yang rumit.
    2. Publikasikan ke WordPress : Penerbitan satu klik ke situs web WordPress Anda.
    Mode offline : PootleWriter bekerja offline berkat arsitekturnya yang mengutamakan lokal.

    PootleWriter bukan tentang AI yang mengambil alih proses menulis Anda. Sebaliknya, ini adalah alat yang dibuat untuk meningkatkan kreativitas alami Anda. Teknologi ini menghilang ke latar belakang, memungkinkan ide-ide Anda mengalir bebas ke halaman.

    Baik Anda seorang pelajar yang dikejar tenggat waktu, seorang profesional yang menyusun dokumen penting, atau seorang yang kreatif dalam mengeksplorasi ide-ide baru, PootleWriter dapat disesuaikan dengan kebutuhan Anda. Ini adalah pendamping menulis yang memberdayakan Anda untuk menghasilkan karya terbaik tanpa menghalangi Anda.

    Rasakan kegembiraan menulis tanpa hambatan dengan PootleWriter – tempat kesederhanaan bertemu produktivitas, dan kata-kata Anda menjadi pusat perhatian.

    Created by JamieMarsland

    Info lengkapnya dibawah ini

    Introducing PootleWriter: Your Friction-Free WordPress Writing Companion

  • Menjadi Creator CapCut: Digaji Dollar Per Minggu

    Menjadi Creator CapCut: Digaji Dollar Per Minggu

    By Habis Kerja

    Meraup Dollar dari Aplikasi CapCut!

    Apakah kamu ingin menjadi freelancer modal hp aja? mau jadi content creator tapi nggak mau menampilkan wajah?

    Jika iya, kamu harus mulai mempelajari aplikasi CapCut!

    CapCut sendiri adalah aplikasi pengeditan video paling mudah dan populer yang bisa digunakan dimanapun dan kapanpun.  Kamu dapat menghasilkan uang dengan cara menjual Jasa Editing Video dan menjadi Content Creator CapCut.

    Taukah kamu kamu akan digaji tiap minggu jika kamu menjadi menjadi Content Creator CapCut? Plus kamu dibayar menggunakan Dollar! Pencairannya pun sangat mudah!

    Dapatkan Diskon 74% Khusus Hari ini

    Rp. 99.000

    Rp. 383.000

    Daftar Sekarang
    Lihat Lebih Lengkap
  • Strategi Dibayar Dollar, Jual Foto di Shutterstock

    Strategi Dibayar Dollar, Jual Foto di Shutterstock

    By Habis Kerja

    Jual Foto Dibayar Dollar Hanya Modal HP

    Apakah kamu ingin mendapatkan uang tambahan dengan cara dan modal yang mudah?

    Jika iya, kamu dapat memulai hobi baru seperti saya yaitu dengan mencoba photography.  Jangan kawatir jika tidak memiliki kamera yang bagus karena saya pun memotret objek hanya menggunakan handphone. 

    Lalu bagaimana cara saya menghasilkan uangnya?  

    Saya memulai dengan menemukan objek yang simple dan mudah ditemukan di kehidupan sehari-hari contohnya perabotan rumah, daun, buah dan lain-lain yang tidak memerlukan model khusus didalamnya.  Hasil jepretan saya tersebut kemudian saya upload dan jual di Shutterstock.  Dari sanalah foto-foto saya dibeli dengan dollar.

    Dapatkan Diskon 72% Khusus Hari ini

    Rp. 99.000

    Rp. 358.000

    Daftar Sekarang
    Lihat Lebih Lengkap