{"id":13681,"date":"2023-04-21T02:01:00","date_gmt":"2023-04-20T19:01:00","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=13681"},"modified":"2023-04-12T15:19:33","modified_gmt":"2023-04-12T08:19:33","slug":"apa-itu-wysiwyg","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/apa-itu-wysiwyg\/","title":{"rendered":"Apa Itu WYSIWYG, Perannya dalam Web Design, dan Contohnya"},"content":{"rendered":"\n

Ada yang masih belum kenalan dengan WYSIWYG? Apa pula lah itu.! Kalian mau tahu apa itu WYSIWYG lebih lanjut? Langsung saja simak Apa Itu WYSIWYG, Perannya dalam Web Design, dan Contohnya<\/strong><\/p>\n\n\n\n

Apa Itu WYSIWYG?<\/strong><\/h2>\n\n\n\n

WYSIWYG adalah salah satu jenis HTML editor terbaik untuk mengedit halaman website sekaligus melihat hasil akhir dari pengeditan tersebut. Jadi, WYSIWYG ini singkatan dari \u201cWhat You See Is What You Get\u201d, dan dibaca wiz-ee-wig<\/em>.<\/p>\n\n\n\n

WYSIWYG ini dapat membantu dalam belajar pemrograman web dengan mudah, seperti membuat halaman HTML<\/a>.<\/p>\n\n\n\n

Sebab, prinsip utama What You See Is What You Get adalah menampilkan visual halaman web saat sedang diedit. Hal ini memudahkan untuk mengira-ngira bagaimana hasil akhir website ketika sudah kelar.<\/p>\n\n\n\n

Cara Kerja WYSIWYG<\/strong><\/h2>\n\n\n\n

Cara kerja WYSIWYG adalah dengan menyediakan antarmuka berbasis GUI (Graphical User Interface<\/em>). Sehingga bisa menciptakan website secara lebih mudah dibandingkan dengan opsi coding <\/em>manual.<\/p>\n\n\n\n

Misal nih, kalian menggunakan WYSIWYG editor untuk membuat sebuah halaman HTML. Kalian kan bisa mengatur tata letak elemen, seperti teks, gambar, video, dan tabel pada posisi yang diinginkan. Output yang bisa dilihat di mode pengeditan akan menampilkan hasil akhir dari tampilan halaman HTML. <\/p>\n\n\n\n

Peranan WYSIWYG dalam Web Design<\/strong><\/h2>\n\n\n\n

Anyway, WYSIWYG bisa menjadi alternatif bagi yang ingin membuat halaman web namun tidak familiar dengan bahasa pemrograman HTML. Sebab, kalian bisa menyesuaikan berbagai elemen visual di halaman.<\/p>\n\n\n\n

WYSIWYG juga membantu mempercepat proses desain loh dan meminimalkan risiko error <\/em>yang mungkin bisa terjadi pada halaman HTML. Sebab, kalian bisa melihat hasil akhir halaman secara real time<\/em>. Iya, kan?<\/p>\n\n\n\n

Contoh Software WYSIWYG<\/strong><\/h2>\n\n\n\n

Untuk mendesain halaman situs, ada dua jenis program WYSIWYG yang bisa digunakan, yaitu page builder <\/em>dan HTML editor.<\/p>\n\n\n\n

Contoh WYSIWYG untuk Page Builder<\/strong><\/h3>\n\n\n\n

Berikut ini beberapa contoh software page builder<\/em> berbasis WYSIWYG:<\/p>\n\n\n\n

1. Elementor<\/strong><\/h4>\n\n\n\n

Siapa sih yang belum kenal Elementor? Elementor <\/a>adalah salah satu plugin page builder<\/em> WordPress terbaik dan terpopuler yang menggunakan konsep WYSIWYG. Kalian dapat membuat layout <\/em>halaman situs secara mudah dan cepat dengan metode drag and drop<\/em>.<\/p>\n\n\n\n

2. Beaver Builder<\/strong><\/h4>\n\n\n\n

Beaver Builder<\/a> adalah plugin page builder<\/em> WordPress agar dapat membuat halaman HTML tanpa harus menguasai bahasa pemrograman. Kalian bisa memposisikan elemen-elemen halaman sesuai keinginan dengan bantuan template <\/em>yang tersedia.\u00a0<\/p>\n\n\n

\n
\"apa<\/a><\/figure><\/div>\n\n\n

Beaver Builder juga memiliki fitur-fitur pendukung lain yang oke, loh. Seperti, modul slider, peta Google Maps, sampai integrasi dengan WooCommerce dan Yoast SEO.<\/p>\n\n\n\n

3. Divi Builder<\/strong><\/h4>\n\n\n\n

Divi Builder juga alternatif plugin page builder<\/em> berbasis WYSIWYG. Plugin buatan Elegant Themes ini memudahkan untuk menciptakan halaman website dengan metode drag and drop<\/em>.<\/p>\n\n\n\n

Oia, page builder <\/em>ini punya fitur-fitur pendukung lainnya juga, seperti modul gambar, slider<\/em>, form<\/em>, dan integrasi WooCommerce.<\/p>\n\n\n\n

Contoh WYSIWYG HTML Editor<\/strong><\/h3>\n\n\n\n

Berikut ini program WYSIWYG editor untuk membuat website HTML:<\/p>\n\n\n\n

1. Adobe Dreamweaver<\/strong><\/h4>\n\n\n\n

Adobe Dreamweaver adalah salah satu WYSIWYG editor terpopuler saat ini. Melalui antarmuka yang intuitif, Dreamweaver memungkinkan untuk membuat dan mengedit halaman website dengan cepat dan mudah.<\/p>\n\n\n

\n
\"apa<\/a><\/figure><\/div>\n\n\n

Anyway, fitur-fitur unggulan pada Adobe Dreamweaver seperti drag and drop<\/em>, code highlighting<\/em>, serta autocomplete <\/em>membuat pengalaman mendesain website menjadi lebih menyenangkan.<\/p>\n\n\n\n

2. CKEditor<\/strong><\/h4>\n\n\n\n

Editor satu ini dikenal karena poin fleksibilitas serta dukungan terhadap berbagai platform <\/em>lain.<\/p>\n\n\n\n

FYI, CKEditor punya berbagai fitur menarik, loh. Seperti, pengeditan secara inline<\/em>, dukungan beberapa bahasa pemrograman, serta integrasi ke beberapa framework <\/em>JavaScript terbaik seperti Angular dan React.<\/p>\n\n\n\n

3. Froala<\/strong><\/h4>\n\n\n\n

Froala juga merupakan editor HTML WYSIWYG yang memungkinkan membuat halaman web dengan mudah. Santuy, hasil akhir tampilan akan tetap responsif, tetap bisa menyesuaikan dengan perangkat yang mengakses.<\/p>\n\n\n\n

Fiturnya juga tidak jauh berbeda dengan pesaingnya, seperti inline editing<\/em>, drag and drop<\/em>, serta dukungan untuk berbagai format file. FYI, dengan interface <\/em>yang user friendly<\/em>, level pemula juga tidak akan kesulitan menggunakan Froala.<\/p>\n\n\n\n

Kalian Tertarik Membuat Website dengan Bantuan WYSIWYG?<\/strong><\/h2>\n\n\n\n

Saat ini konsep WYSIWYG banyak diadopsi oleh program page builder<\/em> untuk WordPress. Kalian bisa mendesain website WordPress tanpa butuh keahlian teknis yang tinggi. Iya, kan?<\/p>\n\n\n\n

Nah, makanya penting untuk memilih layanan hosting yang dirancang khusus untuk WordPress, seperti WordPress Hosting Jetorbit<\/a>. Yuk gunakan WordPress Hosting Jetorbit sekarang!<\/p>\n","protected":false},"excerpt":{"rendered":"

Ada yang masih belum kenalan dengan WYSIWYG? Apa pula lah itu.! Kalian mau tahu apa itu WYSIWYG lebih lanjut? Langsung saja simak Apa Itu WYSIWYG, Perannya dalam Web Design, dan Contohnya Apa Itu WYSIWYG? WYSIWYG adalah salah satu jenis HTML editor terbaik untuk mengedit halaman website sekaligus melihat hasil akhir dari pengeditan tersebut. Jadi, WYSIWYG … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":13684,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"generate_page_header":"","footnotes":""},"categories":[25],"tags":[4632,4634,283,7,4635,4636,4633],"class_list":["post-13681","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-info","tag-apa-itu-wysiwyg","tag-cara-kerja-wysiwyg","tag-domain-murah","tag-hosting-murah","tag-peran-wysiwyg-dalam-web-design","tag-software-wysiwyg","tag-wysiwyg-adalah","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"_links":{"self":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/13681","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/comments?post=13681"}],"version-history":[{"count":1,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/13681\/revisions"}],"predecessor-version":[{"id":13685,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/13681\/revisions\/13685"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media\/13684"}],"wp:attachment":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media?parent=13681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/categories?post=13681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/tags?post=13681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}