Sudah 10 bulan sejak kami meluncurkan Page Builder Sandwich ke publik. Kami sekarang memiliki sekitar 6.000 instalasi aktif, dan itu merupakan pencapaian yang cukup besar bagi kami. Kami juga mendapatkan banyak sekali masukan karenanya, baik yang positif maupun negatif. Namun, konsensusnya adalah orang-orang menikmati betapa mudahnya menyusun tata letak dan membuat konten mereka dibandingkan dengan page builder lain di luar sana.

Sebagian besar masukan yang kami terima adalah permintaan fitur, dan kami telah menambahkan banyak fitur tersebut selama beberapa bulan terakhir. Namun seiring kami terus melakukannya, kami juga mulai perlahan mengubah antarmuka pengguna dalam prosesnya. Dan sebagai konsekuensinya, kami juga mengubah pengalaman pengguna… menjadi lebih buruk. Keadaannya sampai pada titik di mana kami perlu memikirkan kembali antarmukanya, karena antarmuka tersebut tidak lagi berfungsi dengan lancar, dan berbagai fitur yang ada juga tidak lagi selaras dengannya.

Antarmuka yang Sudah Tidak Digunakan Lagi

Pada versi-versi PBS sebelumnya, kami ingin semuanya berupa tombol. Mengapa? Karena tombol mudah digunakan. Anda hanya perlu… mengkliknya. Pada versi inspector yang lebih lama (bilah sisi pada gambar di atas), mengklik tombol akan meningkatkan nilai, lalu shift+klik pada tombol akan menurunkannya. Kedengarannya cukup mudah. Namun dengan penambahan carousel, tab, peta, dan elemen serta fitur baru lainnya, semua tombol tersebut menjadi campuran dari berbagai ikon dengan desain berbeda, dan agak mulai terlihat lebih seperti hieroglif daripada antarmuka yang keren. Ini bukan masalah bagi pengguna berpengalaman, tetapi cukup mengintimidasi untuk dilihat jika Anda baru mengenal PBS.

Selanjutnya, ada beberapa masalah yang muncul pada inspector. Ide aslinya adalah membuat segalanya sederhana dan tersedia di dalam inspector. Dan yang saya maksud dengan segalanya adalah semuanya – mulai dari mengubah teks menjadi judul (heading), hingga mengubah warna latar belakang, warna font, dan lain-lain. Namun dalam keadaannya saat ini, inspector kini memuat banyak opsi yang mengharuskan Anda menggunakan roda mouse untuk terus-menerus menggulir ke atas dan ke bawah. Sangat berbeda dari inspector yang awalnya saya harapkan untuk para pengguna.

Terakhir, baru-baru ini kami memperkenalkan pemetaan shortcode untuk plugin favorit Anda. Fitur ini mengharuskan kami membuat bidang teks, penggeser angka, kotak centang, dan tipe opsi baru tambahan yang diperlukan agar pengalaman pengeditan shortcode Anda lebih menyenangkan. Awalnya, ini adalah ide bagus, dan ya, fitur ini mempermudah Anda memanipulasi shortcode. Namun sekali lagi, fitur ini menyimpang dari antarmuka “hanya tombol” kami. Jika dipikir-pikir kembali, memang mustahil hanya menggunakan tombol untuk mengubah atribut shortcode. Sekarang, pada versi terbaru, kami berakhir dengan 2 tipe kontrol: tombol dan bidang shortcode.

Ada beberapa alasan lagi yang membuat kami memutuskan bahwa antarmuka kami tidak lagi efektif (atau sesuai dengan kebutuhan kami), tetapi poin-poin di atas adalah yang utama. Namun satu hal yang pasti: kami tahu bahwa kami harus memperbarui antarmukanya.

Menentukan Bagaimana Sebuah Page Builder Seharusnya Berfungsi Secara Ideal

Alih-alih langsung terjun dan mengubah banyak hal sekaligus, kami mundur seratus langkah untuk melihat seluruh pengalaman page builder. Kami ingin menghidupkan kembali antarmuka ini. Sejujurnya, kami tidak ingin terus membangunnya kembali dari tahun ke tahun. Itu  sangat melelahkan dan tentu saja tidak membawa bantuan yang signifikan bagi komunitas WordPress. Kali ini, kami memutuskan untuk melakukan berbagai hal secara perlahan dan hati-hati. Kami telah mempelajari setiap sudut Page Builder Sandwich dan apa yang membuatnya menjadi page builder yang bagus, dan akhirnya  menuangkan seluruh pengalaman pengeditan ini ke dalam beberapa konsep inti.

Konsep Esensial #1: Mengetik Langsung di Konten Anda untuk Mengedit Sesuatu

Salah satu alasan utama memasang page builder adalah untuk terlepas dari keterbatasan editor teks backend WordPress. Bukannya editor backend itu tidak bagus, tetapi saat membuat halaman web, editor tersebut tidak langsung menunjukkan bagaimana tampilan halaman web Anda bagi pengunjung situs, dan juga tidak memungkinkan Anda mengatur tata letak konten di luar tata letak satu kolom. Anda hanya dapat melihat teks Anda di sana dan beberapa gambar, tetapi tidak ada hal-hal yang lebih rumit (misalnya formulir kontak). Anda bisa menambahkan shortcode, ya, tetapi shortcode tersebut tidak akan muncul dalam bentuk visual yang dirender*.

* Ada plugin yang dibuat oleh pihak lain untuk mengatasi hal ini seperti Shortcake UI, tetapi itu di luar topik bahasan.

Di situlah peran front-end page builder. Mereka membawa pengalaman pengeditan keluar dari backend, dan masuk ke front-end, dengan Anda mengedit situs persis seperti apa yang benar-benar akan dilihat oleh pengunjung Anda. Seperti yang diungkapkan Pippin: What you see is what you get (WYSIWYG).

Hal baik lainnya tentang editor frontend adalah bahwa ini memungkinkan Anda mengedit teks secara langsung. Mengetik di judul dan paragraf memberikan kemudahan selayaknya menggunakan pengolah kata biasa dalam pembuatan situs web. Tombol dan label tab juga seharusnya dapat diubah hanya dengan mengkliknya dan mengetik.

Inilah area di mana sebagian besar page builder lain tidak memberikan hasil yang baik. Sebagian besar dari mereka memaksa Anda mengetik di dalam bidang teks untuk mengedit semuanya. Sekali lagi, hal ini seharusnya tidak terjadi pada front-end page builder yang sesungguhnya. Mengetik dan mengedit teks secara langsung telah menjadi keunggulan Page Builder Sandwich sejak versi 2, dan kami memastikan hal ini tetap dipertahankan di versi 3.

Konsep Esensial #2: Memanfaatkan Mouse untuk Penyesuaian Cepat

Mouse adalah alat canggih yang sering kali terabaikan dalam page builder. Sering kali, page builder menggunakannya untuk memungkinkan orang menyeret berbagai hal dan meletakkannya di lokasi berbeda, atau untuk mengklik tombol atau bidang input. Meskipun hal ini tidak masalah, masih ada banyak hal lain yang dapat Anda lakukan dengan mouse dalam pembuatan halaman.

Salah satunya, terdapat umpan balik visual yang luar biasa saat menggunakan mouse sebagai alat dalam mengedit halaman, terutama dalam menyesuaikan properti visual seperti margin, padding, dan ukuran. Sekarang, menyesuaikan elemen Anda menjadi pengalaman yang alami.

Di PBS versi 3, Anda akan dapat menyesuaikan sejumlah hal menggunakan mouse Anda. Anda dapat menyesuaikan margin/jarak antar elemen individual, padding di dalam kolom Anda, serta ukuran gambar, ikon, dan peta. Kami juga telah mengganti tombol yang memungkinkan Anda mengubah nilai numerik menjadi penggeser.

Konsep Esensial #3: Teks Harus Mudah Ditata Gayanya

Jika Anda mundur sejenak dari monitor Anda, Anda akan menyadari bahwa sebagian besar dari apa yang Anda tambahkan di halaman web Anda adalah konten teks. Ya, kita memang memiliki gambar dan ikon di sana untuk mendampinginya – dan belakangan ini kita cenderung menambahkan gambar yang lebih besar di situs kita. Namun mayoritas konten penting semuanya berupa teks: judul, daftar poin, paragraf, kutipan, dll. Seiring dengan hal itu adalah bagaimana kita menata gaya teks kita agar sesuai dengan desain kita. Kita dapat mengubah ukuran dan warnanya, atau menjadikannya tebal atau miring. Ini dilakukan agar konten kita lebih mudah dibaca, relevan, dan menarik bagi para pembaca.

Karena kita sering menata gaya teks, tombol yang memungkinkan kita mengubah gaya harus sangat mudah diakses. Tombol-tombol tersebut tidak boleh tersembunyi di dalam kotak pop-up yang harus kita buka terlebih dahulu. Sebagian besar page builder menderita masalah ini. Agar antarmuka pengguna mereka dapat dilabeli sebagai ‘bebas kekacauan’, bahkan opsi yang paling sering digunakan pun disembunyikan dari pandangan langsung.

Untuk mengatasi hal ini, kami mengamati pengolah kata yang paling umum digunakan. Kami memperhatikan bahwa pengolah kata biasanya memiliki satu baris dengan banyak tombol di dekat bagian atas layar yang digunakan untuk memformat teks, dan kami meniru tata letak yang sama untuk versi 3. Kami sekarang memiliki satu baris berisi semua tombol penataan gaya teks yang selalu ada di bagian atas layar Anda. Ini membuat penataan gaya menjadi sangat cepat dan terasa begitu alami dalam pengeditan teks.

Konsep Esensial #4: Opsi Penataan Gaya Tingkat Lanjut Harus Fleksibel Namun Mudah Dipahami

Intinya, page builder harus memungkinkan orang membuat desain yang memukau dengan mudah. Ini berarti kita harus menyediakan banyak pengaturan dan opsi berbeda tanpa memaksakan kurva pembelajaran yang sulit. Mampu menyesuaikan margin, padding, dan menata gaya teks memang bagus, tetapi itu hanya bisa melakukan sejauh itu. Anda akan memerlukan opsi yang jauh lebih mendalam untuk menyelesaikan pekerjaan, seperti gambar latar belakang, pola, batas (border), latar belakang tetap, dan banyak lagi. Menumpuk semua pengaturan berbeda tersebut bisa terasa sedikit membingungkan, jadi kami telah menyederhanakan beberapa di antaranya dan mengaturnya ke dalam kategori agar lebih ramah pengguna di versi 3.

Konsep Esensial #5: Dukungan Shortcode

Terakhir, jangan lupa bahwa page builder kami berdiri di atas WordPress. Kita harus merangkul platform tersebut beserta fitur-fiturnya dan tidak membatasinya atau menyimpang darinya. Satu fitur besar yang disediakan WordPress adalah shortcode. Ini bukan berarti seluruh konten harus tersusun dari shortcode – itu akan berantakan – melainkan kita seharusnya kompatibel dengannya. Banyak plugin dan tema menggunakan shortcode, dan akan sangat disayangkan jika mengabaikan semuanya. Faktanya, shortcode memberi pengguna fleksibilitas maksimal dalam membuat halaman.

Beberapa minggu yang lalu kami memperkenalkan sistem pemetaan shortcode kami, dan karenanya kami telah memetakan ratusan shortcode dari ratusan plugin. Kami telah memprioritaskan plugin paling populer yang ditemukan di direktori plugin WordPress, sehingga besar kemungkinan Anda akan menjumpainya di situs Anda sendiri. Ini semakin diperkuat dalam versi 3, dan kami akan terus meningkatkannya ke depan.

Kesimpulan

Kami telah mengambil semua karakteristik penting di atas dan menerapkannya ke dalam Page Builder Sandwich versi 3. Ini adalah page builder terbaik yang telah kami bangun untuk WordPress sejauh ini. Lebih intuitif dan lebih alami untuk digunakan, berkinerja lebih cepat, lebih mudah digunakan, dan lebih ramah dari sebelumnya.

Jika Anda memiliki pemikiran tentang fitur page builder yang esensial, beri tahu kami dengan berkomentar di bawah ini.