你知道 WYSIWYG 網站編輯器嗎？不懂程式也能輕鬆搭建網站的神級工具

傳統要搭建品牌官網、電商網站，需要透過寫程式來達成，不過自從 WYSIWYG 可視化編輯器的出現，不再需要耗費大把的時間自學，或花費昂貴的支出費用請工程師撰寫程式碼，讓廣大網路創業者受益良多！讓我們一起來認識 WYSIWYG 這個好用的工具吧！

WYSIWYG 是什麼？

WYSIWYG 是「What You See Is What You Get」的縮寫，意即「所見即所得」。它是一種使用者介面設計理念，通常用於文字編輯器或其他文件建立程式。WYSIWYG 的意思是，使用者在螢幕上看到的文字或圖像，最終將會與發布的文字或圖像相同。

傳統的網站架設方式是工程師手動編寫 HTML、CSS 和 JavaScript 代碼來構築網站。而 WYSIWYG 編輯器則允許使用者直接在視窗中創建和編輯內容，簡單來說，就是一種「視覺化編輯器」。

WYSIWYG 編輯器特色？

而 WYSIWYG 編輯器最大的優勢之一，是它簡化了頁面創建過程。由於使用者在建置網站時可即時在螢幕上看到頁面的最終樣式，讓使用者能夠透過拖拉的方式將「網站元素」放置到畫面中，甚至有些進階的視覺化編輯器，還有商品區塊、表格、表單等等的功能唷！

因此，WYSIWYG 編輯器能夠讓使用者在不需要熟悉寫程式或其他深奧技術的狀況下，就能輕易搭建網站頁面等內容。

市面上的知名 WYSIWYG 工具？

而坊間相當知名的 WYSIWYG 編輯器的應用，那就莫過於是 WordPress 系統預設的古騰堡（Gutenberg）以及 2016 年推出就迅速累積廣大使用者的第三方頁面編輯器 Elementor 外掛。

其中 Elementor 提供了一個直觀的介面，讓使用者在即時預覽模式下設計和編輯頁面佈局、樣式、內容和元素。它提供了豐富的設計工具和預先設計的範本，使用者能夠輕鬆地建立各種類型的頁面，包括首頁、部落格文章、產品頁面、聯絡頁面等。使用者可以加入文字、圖片、按鈕、影片、表格等元素，也可以自訂背景、顏色、字型等樣式設定。

總的來說，WYSIWYG 編輯器是一個強大功能，適用於那些不具備程式撰寫技能，但期望建立精美網站的使用者。

圖一、Gaillard Chris Elementor WordPress 頁面編輯器 

WYSIWYG 網站編輯器四大優勢：

一、相較於傳統編碼做網站，更簡單好上手：

使用者不需要了解網站建置的 Coding 邏輯等，就可以直接在後台介面中，透過編輯器元件排列，直接看到網站排版等成果。

二、建置網站元素選項豐富又方便：

WYSIWYG 編輯器通常提供了多種工具和選項，像剛剛有提到的表單、表格、甚至是商品區塊、文章列表等，可以讓使用者更輕鬆地創建多樣化的內容。

三、WYSIWYG 通常有方便的檢視功能：

使用者可以在創建網頁的過程中，隨時預覽檢閱內容，確保符畫面呈現上是符合自己需求的。

四、有更好的可維護性：

WYSIWYG 編輯器通常都會提供版本控制和其他維護工具，像是以 WordPress 知名的 WYSIWYG 外掛「Elementor」來說，就可以讓使用者輕鬆地管理外掛版本，減少網站更新造成的相容性衝突等問題，也讓網站管理者更有效率地維護內容。

簡而言之，WYSIWYG 頁面編輯器的技術，能夠讓使用者更輕鬆地創建和管理網站，同時坊間這類型的工具，也都會「提供直觀且易懂」的的使用者介面，讓創建網站效率大提升！

以台灣市場來說，有滿多人會嘗試使用 WordPress 建立網站與部落格等，而如果想要新增電商功能，勢必就需要理解 WordPress 的商務擴充功能「Woocommerce」，James 認為這個對新手開店者來說，在串接金流、物流以及會員系統上，是有一定的難度。

SHOPLINE 推出「SHOP Builder」網頁編輯器功能

圖二、SHOP Builder 編輯器介面

透過 SHOPLINE 在網店頁面建置上，就是應用 WYSIWYG 視覺化編輯器的方式，讓開店者能夠透過拖曳就能排版網站，而去年全面升級的「SHOP Builder 編輯器」便能滿足剛剛提到的各項優點。

對於開店創業者來說，SHOPLINE 提供超過 90 款，由專業設計師設計的網站主題，讓店家可以隨意選用，此外也可透過「產業推薦版型」功能，根據你販售的商品種類，選擇最適合自己產業的電商網站版型，更擁有超過 24 種以上的「精選版型」讓你一鍵套用，輕鬆又快速的搭建網站基礎架構。

另外，SHOP Builder 網頁設計編輯器，還支援 15 種以上的互動元件，不論是商品輪播、優惠券領取、活動倒數和各種圖文排版組合都能夠使用，只要花不用太長的時間，便可以架好合適品牌的網站。