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


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

 

wpbakery Visual Composer - web网页可视化 编辑器 介紹_第1张图片

 

近日在做關鍵字研究時,無意間發現到這篇文章,放棄 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.內容相關工具

wpbakery Visual Composer - web网页可视化 编辑器 介紹_第2张图片

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

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

 

2.圖片相關工具

wpbakery Visual Composer - web网页可视化 编辑器 介紹_第3张图片

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

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

 

3.社群分享功能

wpbakery Visual Composer - web网页可视化 编辑器 介紹_第4张图片

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

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

 

4.Wordpress 整合

wpbakery Visual Composer - web网页可视化 编辑器 介紹_第5张图片

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

 

<三>彈性的客製化空間

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

 

wpbakery Visual Composer - web网页可视化 编辑器 介紹_第6张图片

如果是覺得小工具不足,還可將我們已經寫好的 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


你可能感兴趣的:(wordpress,web前端,前端开发,joomla)