5 Alat Pembuat Web WYSIWYG Terbaik & Evolusi Fiturnya

Saya ingat hari-hari ketika membuat situs web terasa seperti mencoba memecahkan kode bahasa rahasia. Sebelum pembuat web WYSIWYG, satu-satunya cara untuk membangun situs adalah melalui dunia HTML, CSS, dan bahasa pengkodean lainnya yang seringkali misterius.

Kini, lanskap pembuatan web telah berubah secara dramatis. Kami telah berevolusi dari editor kode dasar menjadi editor WYSIWYG (Apa yang Anda Lihat Adalah Apa yang Anda Dapatkan), dan sekarang ke era pembuat blok. Karena evolusi ini, tugas menyusun daftar alat pembuat web WYSIWYG terbaik tidak sesederhana dulu.

Permainan telah berubah, dengan solusi hibrid dan pembuat blok kini menawarkan kemampuan yang sama seperti yang pernah dilakukan oleh editor WYSIWYG tradisional: pratinjau visual backend tentang apa yang akan Anda lihat di frontend.

Oleh karena itu, kami mendefinisikan pembuat web WYSIWYG modern sebagai platform yang menghasilkan pratinjau tersebut di backend, terlepas dari apakah itu menggunakan blok atau pengeditan teks kaya.

Namun, kami memahami bahwa editor WYSIWYG “tradisional” masih memiliki tempatnya, jadi kami akan mengidentifikasi di mana editor tersebut muncul di platform yang kami rekomendasikan.

Definisi pembuat web WYSIWYG, dan perubahannya selama bertahun-tahun

Setelah dirilis, pembuat web WYSIWYG tradisional adalah anugerah bagi kita yang memiliki pengetahuan pengkodean terbatas.

WYSIWYG, singkatan dari “Apa yang Anda Lihat Adalah Apa yang Anda Dapatkan,” memungkinkan kami mendesain halaman web secara visual dan melihat dengan tepat seperti apa hasil akhirnya.

Kemudian, kami mulai melihat munculnya pembuat drag-and-drop, yang memungkinkan kami memilih dan menempatkan elemen sesuai keinginan kami di halaman web.

Mereka serupa dengan pembuat WYSIWYG dalam artian mereka memberikan representasi visual dari hasil akhirnya. Namun, mereka menawarkan pengalaman pengguna yang lebih intuitif dan efisien.

Maju cepat ke masa sekarang, dan kami memiliki apa yang kami sebut pembuat web WYSIWYG “modern”, yang juga dikenal sebagai pembuat blok atau pembuat drag-and-drop.

Banyak pembuat web populer, seperti Wix, Squarespace, dan Shopify, menawarkan gabungan WYSIWYG tradisional dan pembuat blok.

Misalnya, sebagian besar antarmuka Wix berfungsi sebagai pembuat blok, namun saat Anda memasukkan blok paragraf ke dalam desain, Anda masih akan melihat editor WYSIWYG tradisional.

Jadi, apa yang kami anggap sebagai pembuat web WYSIWYG saat ini?

Berikut beberapa elemen yang sering disertakan dalam pembuat web WYSIWYG modern:

• Antarmuka visual tanpa kode
• Pratinjau langsung
• Fungsionalitas seret dan lepas
• Opsi pengeditan kode
• Dukungan konten yang kaya

Secara keseluruhan, pembuat web WYSIWYG telah berkembang pesat sejak awal. Dengan mempertimbangkan definisi baru kami tentang “pembuat web WYSIWYG modern”, mari jelajahi platform terbaik untuk dipertimbangkan. ️

Lima alat pembuat web WYSIWYG teratas

Sekarang setelah kita memahami apa itu pembuat web WYSIWYG dan manfaatnya, mari kita jelajahi alat terbaik dalam kategori ini.

1. WordPress
2. Aliran web
3. Ruang persegi
4. Wix
5. Shopify

1. WordPress

WordPress adalah sistem manajemen konten sumber terbuka yang memungkinkan pengguna membuat situs web atau blog. Ini menyediakan beberapa jenis editor WYSIWYG, memungkinkan Anda memilih jenis antarmuka favorit Anda.

Misalnya, beberapa orang lebih menyukai pembuat blok “Gutenberg”, sementara yang lain tetap menggunakan pendahulunya: editor Klasik.

Di sisi lain, Anda dapat memilih editor Teks/Kode, yang memungkinkan Anda menyesuaikan HTML lalu beralih kembali ke salah satu opsi pengeditan visual.

Fitur modern pembuat web WYSIWYG dari WordPress

• Antarmuka drag-and-drop : Ini memudahkan pengguna untuk menambahkan dan mengatur elemen di situs web mereka.
• Opsi untuk editor WYSIWYG yang sepenuhnya tradisional : Anda dapat menonaktifkan editor berbasis blok dan menggunakan editor teks lama seperti editor TinyMCE.
• Plugin untuk berbagai merek editor WYSIWYG : Biasanya tersedia dalam bentuk editor blok, seperti Elementor atau Beaver Builder.
• HTML dan CSS Khusus : Untuk pengguna tingkat lanjut, WordPress mengizinkan penambahan kode khusus untuk kontrol lebih besar atas desain situs web.
• Pengeditan seluler : WordPress menawarkan aplikasi seluler yang memungkinkan pengguna mengedit situs web mereka dari ponsel cerdas atau tablet.

Di mana Anda dapat menemukan alat pengeditan WYSIWYG tradisional di WordPress?

Anda dapat menemukan alat pengeditan WYSIWYG tradisional di editor posting/halaman di WordPress. Saat Anda membuat atau mengedit postingan atau halaman, Anda dapat beralih antara mode Visual dan Teks . Mode Visual menawarkan editor WYSIWYG, tempat Anda dapat memformat teks, menambahkan tautan, dan menyisipkan media.

Editor Klasik

Penulis: Kontributor WordPress

Versi Saat Ini: 1.6.3

Terakhir Diperbarui: 9 November 2023

editor-klasik.1.6.3.zip

Peringkat 98% 5.000.000+ Pemasangan WP 4.9+ Membutuhkan

Secara default, WordPress tidak memiliki editor tradisional (sebagai gantinya, ia memiliki pembuat blok), jadi Anda harus menggunakan plugin Editor Klasik untuk mendapatkannya.

Pembuat blok (Gutenberg) juga menyediakan elemen WYSIWYG tradisional, seperti bagaimana semua media, judul, dan kotak teks muncul seperti yang Anda lihat di frontend.

2. Aliran web

Webflow adalah alat desain web yang memungkinkan pengguna merancang, membangun, dan meluncurkan situs web responsif secara visual. Ia menawarkan editor WYSIWYG yang memberikan umpan balik visual secara real-time tentang seperti apa tampilan situs web akhir.

Faktanya, tim di balik Webflow membuat Webflow dengan tujuan utama menyesuaikan pengkodean backend secara real-time saat Anda menyesuaikan gaya aspek visual situs web Anda.

Fitur modern pembuat web WYSIWYG dari Webflow

• Kisi CSS visual : Ini memungkinkan pengguna membuat tata letak yang kompleks dengan antarmuka visual yang sederhana.
• Interaksi dan animasi : Webflow memungkinkan pengguna menambahkan interaksi dan animasi yang kompleks tanpa perlu menulis kode.
• Transformasi 3D : Pengguna dapat memindahkan dan memutar objek dalam ruang 3D.
• Flexbox : Ini memungkinkan tata letak yang fleksibel dan penyelarasan elemen yang lebih mudah.
• Desain responsif : Webflow secara otomatis menskalakan desain Anda untuk berbagai ukuran layar.

Di mana Anda dapat menemukan alat pengeditan WYSIWYG tradisional di Webflow?

Anda dapat menemukan alat pengeditan WYSIWYG tradisional di Webflow di panel Desainer. Di sini, Webflow menyediakan antarmuka yang kuat dengan akses ke alat drag-and-drop dan pengeditan WYSIWYG biasa. Ada juga perubahan kode yang langsung terlihat saat Anda memindahkan blok media atau mengubah ukuran sesuatu menggunakan pengaturan umum.

Area lain di dasbor Webflow, seperti bagian Entri Blog , juga memiliki editor WYSIWYG sederhana. Di sini, Anda dapat membuat postingan blog dengan cepat dan tetap melihat format dan gambar sebelum dipublikasikan.

3. Ruang persegi

Squarespace jelas merupakan salah satu platform dengan struktur WYSIWYG hybrid. Editornya tampak seperti bagian depan situs web Anda, dengan blok yang dapat diseret untuk memindahkan konten, namun banyak dari blok tersebut menyertakan editor WYSIWYG tradisional di dalam modul pengaturannya.

Fitur modern pembuat web WYSIWYG dari Squarespace

• Antarmuka drag-and-drop : Ini memudahkan untuk menambahkan dan mengatur elemen pada halaman.
• Editor gaya : Ini memungkinkan pengguna untuk menyesuaikan font, warna, dan opsi gaya lanjutan lainnya.
• Pengeditan seluler : Squarespace menawarkan aplikasi seluler yang memungkinkan pengguna mengedit situs web mereka dari ponsel cerdas atau tablet.
• Akses mudah ke editor header dan footer : Editor halaman WYSIWYG sebelumnya tetap terpisah dari area header dan footer, namun Squarespace memberi Anda akses langsung ke header dan footer dari panel desain utamanya.
• Desain berbasis grid : Banyak pembuat web “seret dan lepas” membatasi di mana Anda dapat memindahkan modul, namun Squarespace menggunakan sistem grid sehingga Anda dapat mengambil dan memindahkan elemen desain secara virtual ke mana saja di halaman.

Di mana Anda dapat menemukan alat pengeditan WYSIWYG tradisional di Squarespace?

Blok berbasis teks apa pun memiliki pembuat web WYSIWYG yang menampilkan pengaturan untuk judul, teks tebal, dan penyesuaian bagian lain dari pemformatan Anda.

Bahkan blok gambar menyertakan pengaturan WYSIWYG standar, di mana Anda akan melihat tombol untuk mengunggah gambar, menambahkan teks alternatif, dan melihat tautan gambar.

4. Wix

Sama seperti Squarespace, Wix mendedikasikan sebagian besar ruang desainnya untuk antarmuka visual sepenuhnya yang terlihat persis seperti bagian depan situs web Anda.

Oleh karena itu, kami mengklasifikasikan Wix sebagai pembuat web WYSIWYG modern, karena ia menggabungkan elemen-elemen baru – seperti modul yang dapat diseret – dan editor WYSIWYG tradisional yang kita kenal di masa lalu.

Fitur modern pembuat web WYSIWYG dari Wix

• Antarmuka seret dan lepas : Anda dapat memindahkan elemen apa pun di situs web Anda, mulai dari gambar, paragraf, dan video hingga judul.
• Pengeditan tampilan seluler : Wix menawarkan editor tampilan seluler yang memungkinkan pengguna menyesuaikan tampilan situs web di perangkat seluler.
• Animasi : Pengguna dapat menambahkan animasi ke modul yang dapat diseret di situs web mereka.
• Pengeditan header dan footer cepat : Kontrol tampilan dan format header dan footer tanpa meninggalkan editor halaman utama.
• Pengeditan berbasis grid : Dengan Wix, Anda dapat menyeret blok di mana saja pada halaman berkat sistem gridnya.

Di mana Anda dapat menemukan alat pengeditan WYSIWYG tradisional di Wix?

Editor situs web Wix berisi semua alat desain WYSIWYG modern dan tradisional.

Editor situs web menampilkan pratinjau waktu nyata tentang tampilan situs Anda setelah modifikasi.

Setiap blok, setelah diklik, menyediakan bagian WYSIWYG yang lebih tradisional, seperti bagaimana modul Pengaturan Teks menampilkan opsi dan efek pemformatan.

Untuk area yang terlihat seperti editor WYSIWYG di masa lalu, cukup buat postingan blog di Wix. Bagian ini memungkinkan Anda mengetik konten, menambahkan gambar, dan memformat dengan item seperti judul, poin, dan kutipan menarik, yang semuanya terlihat saat mengetik di editor (seperti yang Anda lihat di frontend).

5. Shopify

Untuk pembuat web WYSIWYG yang berfokus sepenuhnya pada toko online, Anda bisa mengunjungi Shopify. Platform Shopify menyediakan alat desain WYSIWYG modern dan tradisional dengan fungsionalitas e-niaga yang terikat.

Fitur modern pembuat web WYSIWYG dari Shopify

• Bagian yang dapat diseret : Meskipun bukan perancang seret dan lepas yang sebenarnya, Shopify menampilkan bagian yang dapat Anda pindahkan ke atas dan ke bawah pada halaman.
• Pembuatan teks AI terintegrasi : Shopify memiliki tombol kecerdasan buatan di setiap editor WYSIWYG untuk membuat deskripsi produk, konten halaman, dan judul dengan cepat.
• Tampilan cepat kode : Setiap editor WYSIWYG di Shopify menyediakan tab HTML.
• Sumber konten dinamis : Editor WYSIWYG di Shopify memiliki opsi untuk menambahkan konten sumber dinamis yang menyesuaikan berdasarkan aturan. Misalnya, Anda dapat menyertakan panduan ukuran di semua halaman produk yang berubah berdasarkan produk.
• Pengeditan tampilan seluler : Editor Shopify menawarkan pengeditan tampilan seluler untuk mendesain seperti apa antarmuka tablet dan ponsel cerdas.

Di mana Anda dapat menemukan alat pengeditan WYSIWYG tradisional di Shopify?

Sebagian besar antarmuka Shopify memiliki alat pembuat web WYSIWYG yang sangat tradisional. Editor beranda, misalnya, menampilkan editor WYSIWYG standar setiap kali Anda mengklik blok teks.

Hal ini terutama berlaku ketika Anda mengedit halaman selain halaman beranda, seperti halaman produk atau informasi. Halaman-halaman tersebut masih dikontrol oleh editor pembuat web WYSIWYG tradisional; mereka menggunakan tombol cepat untuk memformat di bagian atas dan memberikan gambaran tentang bagaimana konten akan muncul setelah dipublikasikan.

Coba pembuat web WYSIWYG hari ini

Ingat, pembuat web WYSIWYG terbaik adalah yang memenuhi kebutuhan spesifik Anda, dan seringkali itu berarti menanyakan apakah Anda lebih suka WYSIWYG (pembuatan blok) modern atau WYSIWYG tradisional (pengeditan teks kaya dengan pratinjau konten).

Untuk melihat beberapa alat lain yang dapat membantu Anda membuat situs web tanpa perlu mengetahui kodenya, Anda mungkin juga tertarik dengan kumpulan pembuat situs web terbaik kami. ️️

Beri tahu kami di komentar bagaimana perasaan Anda tentang evolusi pembuat web WYSIWYG .