傳統要搭建品牌官網、電商網站,需要透過寫程式來達成,不過自從 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 頁面編輯器 
圖一、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 種以上的互動元件,不論是商品輪播、優惠券領取、活動倒數和各種圖文排版組合都能夠使用,只要花不用太長的時間,便可以架好合適品牌的網站。

想用看的?可以訂閱 SHOPLINE YouTube 頻道觀看「店」商即時通唷!

「店」商即時通 EP3

你喜歡這篇文章嗎?

Average rating 5 / 5. 2