Pengeditan visual datang ke CMS Tanpa Kepala – Beragampengetahuan

Beberapa tahun yang lalu, teman saya Maria meminta saya membuat situs web untuk perusahaan konstruksinya. Untuk proyek seperti ini, saya biasanya menggunakan sistem manajemen konten (CMS) tanpa kepala dan membangun ujung depan khusus, tetapi kali ini saya menyarankan dia menggunakan pembuat situs web seperti Squarespace atau Wix.

Mengapa memilih pembuat situs web? Karena Maria adalah orang yang sangat visual dan kreatif, saya tahu dia ingin segalanya terlihat baik. Dia membutuhkan loop umpan balik visual dari pembuat situs web, dan Squarespace serta Wix adalah dua produk terpenting dalam ruang pengeditan visual.

Dalam pengalaman saya, pembuat konten seperti Maria jauh lebih produktif ketika mereka dapat melihat hasil edit mereka tercermin di situs mereka dalam pratinjau langsung. Masalahnya adalah pengeditan visual secara tradisional hanya didukung oleh pembuat situs, dan sering kali jenis kodenya “rendah” atau “tidak ada”. Pengeditan visual bukanlah hal yang Anda lihat di tumpukan teknologi yang lebih modern seperti CMS tanpa kepala.

Untungnya, pengalaman pengeditan visual ini mulai menemukan jalan menuju CMS headless! Itulah yang ingin saya lakukan dalam artikel singkat ini: memperkenalkan Anda pada CMS tanpa kepala saat ini yang menawarkan pengeditan visual.

Tapi pertama-tama…

Apa itu pengeditan visual?

Pengeditan visual telah ada sejak awal web. Siapa pun yang pernah menggunakan Dreamweaver di masa lalu mungkin pernah mengalami pengeditan visual di versi sebelumnya.

Pengeditan visual berarti Anda dapat melihat pratinjau langsung situs web Anda saat mengedit konten. Ini memberi pembuat konten umpan balik visual instan dan menunjukkan perubahan mereka dalam konteks situs web mereka.

Pengeditan visual memiliki dua karakteristik yang menentukan:

• Dengan pratinjau langsung, pembuat konten dapat melihat perubahan mereka tercermin dalam konteks situs web mereka.
• Elemen halaman yang dapat diklik di pratinjau memudahkan pembuat konten menavigasi ke kolom formulir yang benar.

Pengeditan visual telah menjadi standar dengan pembuat situs web tanpa kode dan kode rendah seperti Squarespace, Wix, dan Webflow. Tetapi alat ini umumnya tidak digunakan oleh pengembang yang ingin mengontrol tumpukan teknologinya. Untungnya, sekarang kita melihat pengeditan visual mulai diterapkan pada CMS headless.

Pengeditan Visual di CMS Tanpa Kepala

CMS tanpa kepala memperlakukan konten Anda lebih seperti database yang terpisah dari presentasi situs web Anda.

Hingga baru-baru ini, CMS headless datang dengan trade-off besar: pembuat konten terputus dari ujung depan, sehingga sulit untuk melihat pratinjau situs mereka. Mereka tidak melihat pembaruan saat melakukannya.

Antarmuka CMS tanpa kepala biasanya hanya menyediakan kolom formulir untuk mengedit konten. Ini tidak memiliki konteks konten pada halaman. Bagi mereka yang terbiasa dengan pengalaman pengeditan real-time dari alat seperti Google Docs, Wix, Webflow, atau Notion, UX ini mungkin terasa kuno.

Untungnya, gelombang baru CMS tanpa kepala menyediakan pengeditan visual dengan cara yang masuk akal bagi pengembang. Ini adalah berita bagus bagi siapa pun yang ingin melalui pengalaman pengeditan yang mirip dengan Wix atau Squarespace tetapi di atas tumpukan sumber terbuka mereka sendiri.

Mari bandingkan pengalaman pengeditan CMS dengan dan tanpa pengeditan visual di beranda Roev.com.

Anda dapat melihat bahwa umpan balik instan dari pratinjau langsung dikombinasikan dengan kemampuan untuk mengklik elemen halaman membuat pengalaman pengeditan visual jauh lebih intuitif. Peningkatan bahkan lebih dramatis ketika konten bersarang jauh di dalam bagian halaman, membuatnya sulit ditemukan tanpa mengklik elemen halaman.

CMS tanpa kepala yang mendukung pengeditan visual

Banyak produk CMS tanpa kepala yang populer saat ini mendukung pengeditan visual. Mari kita lihat beberapa opsi yang lebih populer.

tina

TinaCMS dibuat untuk pengeditan visual, tetapi juga menawarkan mode “pengeditan dasar” yang mirip dengan CMS tradisional. Tina memiliki antarmuka admin sumber terbuka dan API konten tanpa kepala yang dapat tetap sinkron dengan file (seperti Markdown dan JSON) di repositori Git.

blok cerita

Storyblok adalah CMS tanpa kepala yang merupakan pelopor awal dalam penyuntingan visual. Storyblok menyimpan konten Anda di database-nya dan membuatnya tersedia melalui REST dan GraphQL API.

Sanity.io (melalui plugin iframe mereka)

Sanity adalah CMS tanpa kepala tradisional dengan antarmuka administrasi sumber terbuka. Ini mendukung pengeditan visual dengan menggunakan plugin Iframe Pane. Sanity menyimpan konten Anda di database-nya dan membuatnya tersedia melalui API.

builders.io

Builder.io adalah CMS headless sumber tertutup, penyuntingan visual pertama yang menyimpan konten dalam database Builder.io dan membuatnya tersedia melalui API.

sedikit tumpukan

Stackbit adalah antarmuka pengeditan sumber tertutup yang dirancang untuk melengkapi CMS tanpa kepala lainnya. Dengan Stackbit, Anda dapat menggunakan CMS tanpa kepala lainnya untuk menyimpan konten Anda dan mengedit konten tersebut secara visual dengan Stackbit.

Wessel

Meskipun bukan CMS, pratinjau penerapan Vercel dapat menampilkan tombol edit di bilah alat. Tombol edit ini menghamparkan UI yang membantu pembuat konten menavigasi dengan cepat ke lokasi yang benar di CMS.

Kesimpulannya

Sekarang pengembang menambahkan kemampuan pengeditan visual ke situs mereka, saya telah melihat pembuat konten seperti Maria menjadi sangat produktif pada tumpukan yang mengutamakan pengembang. Tim yang lambat memperbarui konten sebelum beralih ke pengeditan visual kini lebih aktif dan produktif.

Ada banyak opsi bagus untuk membangun pengalaman pengeditan visual tanpa mengorbankan kontrol dan skalabilitas pengembang. Janji Dreamweaver akhirnya tiba!

Hasilkan $200 seminggu
Kutipan dari artikel di Smashing Magazine – Untuk Desainer dan Pengembang Web