wpbakery Visual Composer - web网页可视化 编辑器 介紹

wpbakery  Visual Composer web网页可视化 编辑器 介紹

 

 

近日在做關鍵字研究時，無意間發現到這篇文章，放棄 WordPress 選用 Joomla! CMS 的5個理由。內容是由對岸朋友所整理，文中說明五項支持使用 Joomla 的理由，其大意是 Joomla 架構更好、外掛更多、容易客製化。

 

小弟在五年前接案的時候，也曾以 Joomla 做為 CMS 工具，先不論自己建置時的狀況，災難發生在交接給客戶自行維護後，後台介面的操作複雜性，讓我花了許多時間在協助維護以及教學。也許是當時我蓋的不好、或是舊版的 Joomla 還不夠人性化，此篇文章無意爭論誰是最優秀的內容管理系統，只單純從企業的維護角度來看這件事。

 

對於開發者而言，技術或流程都有其熟悉或擅長的工具，這也是 WordPress、Joomla，甚至是 Drupal 會被拿來比較的原因，但因小弟非資訊背景出身，對於 CMS 的要求只有好更新、好維護，相信這也是許多企業內部網站維護人員的希望，在實際用過 Xoops、Joomla、Wordpress 後，不管是自己操作或是教人使用， WordPress 是操作起來最順暢的工具，發佈新內容或修改舊文章，就跟更新部落格一樣簡單易懂，這也是最後我會選擇以 WordPress 做為核心架站工具的原因。

 

但平心而論， WordPress 作為 CMS 在後台操作介面上還是有許多不便之處，除非後臺能高度客製化，根據網站內容與維護流程做調整，才能讓接手的維護人員更容易學習。因此我一直在尋找可以更方便使用者更新內容的工具，最後終於找到了它，Visual Composer 。

 

事實上這套工具在 2011 年就已經出來了，這麼晚才介紹的原因是，要考驗它是否能真正的有效運用在各種專案中，事實證明的結果，讓我決定把這好工具介紹給大家^^，以及幫大家把裡面所有好用的小工具全數翻譯成中文，讓英文苦手的朋友也能輕鬆使用，以下就我的使用心得與經驗，簡單介紹一下這支外掛的強大之處！

 

<一>真，所見即所得編即器

有在使用內容管理系統的朋友都知道，有一種長得像 Office Word 的編輯器來更新網頁內容，但它也跟 Word 一樣，格式非常容易跑掉，因為它是以 HTML 為語法的編輯器，只要某個標籤漏掉，通常就是災難的開始，會寫 HTML 的朋友或許還有辦法自行解決，不會的朋友真的會求助無門，格式怎麼調都不對。

 

另外在 WordPress 之中有一種叫做 shortcode 的簡碼，它長得像是 HTML 但又不太像，專門設計來定義各種特殊功能或是指定版面的欄寬，萬一漏掉某個引號或等號，整個版面爛掉是稀鬆平常的事，更慘的是，它又不是 HTML，更是非常難修復，往往都必須透過專業人士進行解決。

 

所以，有偉大的工程師來解救我們了，不囉唆，一段兩分鐘的影片讓你看見它的強大之處！

 

很想自己玩看看嗎？請登入：http://dotcreativestudio.com/wordpressdemo/wp-login.php

帳號：test

密碼：test

點選新增文章或新增頁面即可使用。

 

透過視覺化的呈現方式、運用滑鼠的拖曳操作，不管在前臺還後臺，都能隨意的進行修改，甚至編排出你自己想要的版面，這才是「真，所見即所得編輯器」。

 

<二>超過四十種小工具

許多製作網頁時的常用工具，都包含於其中，以下就我最常用的幾項工具進行說明：

1.內容相關工具

請參考—>http://dotcreativestudio.com/wordpressdemo/visual-composer-demo/visual-composer-content-widget/

無論是單欄式、兩欄式到多欄式的版面，Visual Composer 都可以透過簡單的視覺化介面來進行設計，甚至是可以輸入我們想要的分割方式，以便更彈性化的來編排內容。另外基本的內容工具，如文字區塊、頁籤瀏覽、收合選單等等，都能非常方便的建立以及移動，還可以透過複製來快造創造內容。

 

2.圖片相關工具

請參考—>http://dotcreativestudio.com/wordpressdemo/visual-composer-demo/visual-composer-image-widget/

圖片的部份，除了單純的插入單張圖片外，還有提供最常使用的輪播廣告、淡入淡出廣告、排列式廣告等，另外還提供圖片出現的模式切換，可以設定讓圖片由各種角度進入，增加版面的互動性，以及點擊圖片時放大的燈箱效果，均內建其中。

 

3.社群分享功能

請參考—>http://dotcreativestudio.com/wordpressdemo/visual-composer-demo/visual-composer-social-widget/

內建四種社群網站分享按鈕，並可切換不同樣式，含計數與排列位置，皆可針對版面的需求進行選擇。內建按鈕樣式，並可插入預設多達數十種的豐富圖標，再搭配長條圖與圓餅圖，非常容易自行設計頁面內容。

 

4.Wordpress 整合

另外 Visual Composer 也與 WordPress 內建工具無縫整合，我們可以很輕鬆的插入最新文章、最新迴響、自訂選單、標籤雲等小工具，甚至是文章列表也能輕鬆建立，不需撰寫任何程式碼。

 

<三>彈性的客製化空間

許多在 Themeforest 上的熱銷主題商品，像 U-Design、MediCenter、The7 等，都已將該外掛列為基本的套件工具，也就是說，它有能力於各種佈景主題做高度整合。從風格設計開始，在後臺的控制項中可自行定義主色系、背景色、標題色等項目，並可設定元素高度以及欄位間距，如果覺得預設選項不足，還可以直接寫 CSS 於後臺設定中，更便於樣式上的客製化。

 

如果是覺得小工具不足，還可將我們已經寫好的 shortcode，整合到工具面版中，之後在新增時，便可透過選項欄位，來直接增加 shortcode 的內容，增加使用上的便利性。

 

小結

事實上 Visual Composer 所產出的內容，是由非常大量的 shortcode 所組成，不管是從版面的構成或是元素的產出，全部都是透過 shortcode 來處理，這表示整個網頁的結構會變得非常複雜，在維護上如果不透過 Visual Composer 的介面，幾乎沒有辦法管理。另一方面，程式碼的複雜也代表了需要較長的載入時間，這在使用上必須特別小心。

 

個人的建議做法是，在不常變動的頁面，還是利用靜態網頁的方式把它寫死，真正需要用到 Visual Composer 的地方，可以像是活動頁面、或是需要量測轉換率的頁面，透過快速的改變版面以及瀏覽動線配置，來實驗其頁面成效。另外，我也曾使用 Visual Composer 作為與客戶溝通版面設計的工具，因為能直接看到實際運行的效果，在討論上更能具體且節省開發時間。

 

總之，工具是活的，運用工具的是人，不要被工具綁死才是能活用它的關鍵。

 

中文化說明

另外在中文化的過程中，發現作者少了一些語系的設定，我已有與作者反應，之後如有更新版本，將重新整理語系檔再進行發佈，已購買中文化檔案用戶將免費更新，中文化設定方法如下：

 

1.下載 Visual Composer 中文包，並將其解壓縮(此中文包未含主程式)。

2.完成 Visual Composer 的購買與安裝。

3.將 js_composer-zh_TW.mo 與 js_composer-zh_TW.po 置於 plugin/js_composer/locale 裡面。

4.完成中文化。

 

如果大家覺得這支外掛不錯，可以直接去 Themeforest 進行購買，強烈建議不要去對岸下載，你永遠不會知道裡面有包含著什麼東西。 如果不知道該如何在 Themeforest 購買外掛的朋友可以參考這一篇文章。

文章转载：business-website-tool