WordPress Visual Composer 視覺化編輯器外掛

05/26 | wordpress分享留言(72)

<前言>

有在注意國外 WordPress 市集的朋友,應該有發現到不管是 theme 還是 plugin,功能都相當的全面且完整,小弟也常常購買相關產品,的確幫了我不少的忙。

然而語系的整理往往會佔據我開發上的許多時間,再加上自己本身也踩過幾次地雷,買到不堪用的外掛卻無法退費,demo 頁面也只能看到前臺卻看不到後臺,能夠評估是否值得購買的中文說明往往都是對岸同胞的 Google 翻譯火星文,

於是我就想如果有更清楚的說明以及前後臺的實際操作畫面,是否能幫助更多朋友來使用這些方便的工具,所以我把自己曾購買過並已經使用在好幾個專案中的工具整理了一下,生出了這系列的廣告文加中文語系檔的付費下載,希望能幫助到有需要的朋友,也能幫助到自己的荷包XD~

 

WordPress Visual Composer 視覺化編輯器外掛介紹

 

wordpress-for-business-website-tool-1

 

<重大更新消息>

因收到許多朋友表示 Visual Composer 內建中文翻譯的問題,現有翻譯完成度不到30%,還有近 1,400 多筆沒有翻譯,造成使用上的麻煩。另一方面,有許多第一次接觸 WordPress 的朋友不知道 Visual Composer 該怎麼購買、該租用什麼規格的主機,或是外掛如何安裝使用,這兩個問題讓許多朋友在使用 WordPress 上造成不小的困擾。因此在團隊思考過後,我們決定幫大家重新完整翻譯了一套 2017 版的中文化版本,目前已翻譯完成,曾經與我們購買過中文化的朋友都會透過電子郵件收到最新版的中文化檔案,另外我們還準備了一套 WordPress 主機租用並內建 Visual Compser 的解決方案,有興趣的朋友可以在文末處了解更多。
了解 WordPress Visual Composer 顧問計劃

 

近日在做關鍵字研究時,無意間發現到這篇文章,放棄 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,更是非常難修復,往往都必須透過專業人士進行解決。

 

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

 

很想自己玩看看嗎?請登入:https://dotcreativestudio.com/visual-composer/wp-admin/post.php?post=7&action=edit

帳號:demo

密碼:demo

進入後即可編輯文章。

 

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

 

一、超過四十種小工具

 

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

 

1.內容相關工具

 

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

 

2.圖片相關工具

 

wordpress-for-business-website-tool-3

 

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

 

3.社群分享功能

 

wordpress-for-business-website-tool-4

 

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

 

4.Wordpress 整合

 

wordpress-for-business-website-tool-5

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

 

二、彈性的客製化空間

 

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

 

wordpress-for-business-website-tool-6

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

 

三、內建大量現成版型(NEW)

 

最新版的 Visual Composer 中,提供了多達近 100 種的頁面版型,可以更方便的從現成的組合中創造出屬於你的網站。

 

 

記得在下載版型前,要先啟用購買授權,才能順利下載版型,下載完後記得要更新頁面,剛下載好的版型才會出現在版型清單中,點選加號就能將版型加入至頁面中。

 

四、列表版型編輯器(NEW)

 

在 WordPress 網站中,我們最常使用的區塊就是列表了,不管是最新訊息列表、作品集列表、分類文章列表或是媒體影片列表,要呈現最新的網站內容時,使用列表是提供使用者瀏覽網站的最佳入口。在新版的 Visual Composer 中,提供了列表版型編輯工具,以下為官方展示影片。

 

 

列表版型編輯器提供了每個列表內容的外觀樣式編輯以及滑鼠停留時的顯示狀態,更能依照你的需求設計單欄或是多欄的列表,還可以設定列表出現的動畫效果。當列表版型設定好的同時,在編輯頁面選擇文章列表工具,就可以使用自行新增或是內建的版型。

 

小結

 

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

 

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

 

甚至是在選擇版型前,可以運用 EveryTheme 來快速合成公司 LOGO 來看效果—>更多 EveryTheme 介紹

 

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

 

中文化說明

 

目前前往 Themeforest 購買的 Visual Composer 已有內建中文語系,但完成度不到 30%,此次 2017 中文化更新版已全數重譯翻譯完成,之前有贊助本工作室的朋友可以在信箱中免費收到最新的翻譯檔,其它朋友也可以透過下方的贊助連結來支持我們持續更新 Visual Composer 的翻譯作業,我們會在收到贊助後將中文包寄送至您的信箱。

 

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

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

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

4.完成中文化。

 

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

 

購買 Visual Composer

中文化贊助下載 NT$249

 

WordPress 網站營運專業諮詢顧問計劃 - Visual Composer

如果您在購買 Visual Composer 遇到問題,或是不知道該如何租用主機,甚至是想了解更多關於如何規劃網站、經營網站的 Know How,那您可以參考我們的 WordPress 網站營運專業諮詢顧問計劃,我們專業的 WordPress 網站架構師將會提供您進行一對一的線上諮詢服務,除了提供您最寶貴、最務實的網站建議外,更有專業的 WordPress 工程師協助您租用主機、代管網站,避免任何因舊版系統入侵而造成的商業損失,從主機維護到網站經營,WordPress 網站營運專業諮詢顧問計劃協助您照顧好網站經營的每一個環節。詳細計劃內容如下:

WordPress 環境安裝與程式代管安心服務

  • WordPress 安裝維護
  • Visual Composer 中文化正版授權安裝維護
  • Visual Composer Start Theme 中文化版本預設主題(可自由安裝其它佈景主題)
  • 協助安裝網站免費 SSL 加密服務
  • 協助申請免費頂級網域
  • 協助設定 DNS 對應

網站經營專屬顧問

  • WordPress 操作疑難雜症排除
  • WordPress 外掛使用諮詢
  • 網站規劃實務諮詢
  • 網路行銷實務諮詢
  • 網站優化實務諮詢
  • 使用者介面設計諮詢
  • 網站數據報表分析
  • 網站使用行為分析

WordPress 高效能專用主機

  • 獨立虛擬專屬主機 VPS
  • 記憶體 1GB、CPU 2 核心、SSD 50GB
  • 不限網站流量
  • 定期主機檔案、資料庫備份
  • 每月一次免費資料還原服務
  • 防火牆及入侵 IP 偵測封鎖
  • Plesk 主機管理介面
  • FTP 傳輸

我們相信網站的營運要能持續進步並且不斷創新,因此本計劃將以年為單位,加入此計劃的朋友在未來的一年內皆能得到我們所提供的全部服務內容以及軟體更新。計劃開通後,您會得到一組 WordPress 後台帳密,所有安裝細節我們全部幫您搞定,您需要的就是發揮您的創意,全心設計屬於自己的網站,遇到困難也不用怕,我們隨時都在身邊支援您。目前本計劃原價為每年新台幣 7,450 元,現在申請的朋友可立即享有專案特惠價 6,990 元,一個月不到六百元就能同時享有網站顧問與 WordPress 全方位的專業服務。

立即申請

FB Messenger 線上諮詢

*開通後即代表您同意本服務之使用者條款

 

72 篇留言

  1. 請問這有內含微軟正黑體字型嗎?

    • admin 說:

      沒有喔,如果您是使用 win7 之後的作業系統,微軟正黑體都有內建在作業系統中,萬一沒有可以到這邊下載—>http://www.microsoft.com/zh-tw/download/details.aspx?id=12072

  2. Oberon Lai 說:

    沒有喔,如果您是使用 win7 之後的作業系統,微軟正黑體都有內建在作業系統中,萬一沒有可以到這邊下載—>http://www.microsoft.com/zh-tw/download/details.aspx?id=12072

  3. kk 說:

    我Visual Composer 中文化錢付了能告訴我到那下載嗎?謝謝!

  4. 阿緯 說:

    請問Demo裡(https://dotcreativestudio.com/wordpressdemo/wp-login.php)
    已經不提供試用Visual Composer這個外掛了嗎?

  5. 程小Q 說:

    請問…您說The7已將Visual Composer外掛內含了嗎?
    也就是說我買了The7佈景主題,就可以直接購買你的中文化套用?

  6. 程小Q 說:

    版主你好:

    The7附贈的 Visual Composer包在裡面了,但是仔細搜尋之後,

    發覺沒有plugin/js_composer/locale這個路徑,

    無法套用,我想應該是要獨力買版本是嗎?

    • admin 說:

      理論上如果是把 Visual Composer 內建的主題,通常它會放在 theme 的資料夾底下,如果是他們家的應該是會放在 wp-content/themes/the7/wpbakery/js_composer/locale 這邊,您再找看看~

      • 程小Q 說:

        版主你好:

        我有找到wp-content/themes/the7/wpbakery/js_composer/這資料夾

        只是沒有locale這資料夾…..還是要自己新增呢? 謝謝!!

        • 程小Q 說:

          剛剛試了,自行新增無效,可能這中文化只適合獨立套件版本!

          • admin 說:

            我們是以獨立的版本來翻譯的,但可能是這個主題有再客製化 Visual Composer ,所以我們翻的這支不管用 >< ,不好意思沒能幫上忙...

  7. 程小Q 說:

    版主..沒關係,留著以後也許用的到也說不定,

    針對於The套裝Visual Composer的繁化,

    我目前著手進行中,初步看起來還不錯,繼續中@@

  8. eric 說:

    我想要購買中文化,請問付款完是直接下載還是會寄到信箱去

  9. 趙先生 說:

    已付費下載, 但解壓縮後的檔案是”wordpress-visual-composer-zh-TW.zip.cpgz” ( 我用的是MAC )
    找不到” js_composer-zh_TW.mo 與 js_composer-zh_TW.po”
    可以寄中文化檔案給我嗎? 謝謝~

    • admin 說:

      不好意思現在才看到您的留言,請問有收到檔案嗎?安裝上有任何問題再跟我說,感謝支持!

  10. 鼎匋 說:

    您好:我有購買the7 這套佈景主題,但是很奇怪的是,無法使用classic mode ,點下去裡頭都是空的,除非到使用者點選「關閉視覺化編輯器」,但這樣不就沒有功能了嗎?不知道您瞭解我的問題嗎?謝謝!

    • admin 說:

      您好,目前我看到 The7 的介紹頁上有支援到的 wordpress 版本是 4.0,也許您已經更新到最新版的 4.0.1,您可能可以用 4.0 的環境下再安裝看看。或是您可以使用 chrome 瀏覽器瀏覽有問題的頁面,然後在頁面上任何地方按右鍵,會出現選單,選單最下方有檢查元素,點進去後可以查看有沒有錯誤訊息,如果有的話,把錯誤訊息丟進 google 看看,也許能找到解決辦法,您再試看看囉~

  11. 這是你開發的嗎

    還是只是單純中文化

    • admin 說:

      您好!不是我們開發的,關於開發者可以參考這邊—>http://vc.wpbakery.com/
      我們做的不僅是中文化,更希望可以推廣許多好用的 wordpress plugin 給台灣的朋友使用,進而吸引更多的 wordpress 使用者以及開發者,人多一點比較熱鬧 ^ ^

  12. peter 說:

    您好:昨晚已傳費用,檔案何時可以收到?謝謝!

  13. wang 說:

    請問付款後就會寄發嗎?
    謝謝

  14. W 說:

    你好已付款了…再麻煩寄出

    謝謝

  15. wain 說:

    您好,Visual Composer中文化已付款,再請您處理,感謝

    • admin 說:

      hello~稍早已把檔案寄給您了,再幫我確認一下,使用上有任何問題都可以再問我,感謝支持!!!

  16. 李明軒 說:

    您好,請問是否會中文化這個外掛 ^_^?

    Ultimate Addons for Visual Composer
    http://codecanyon.net/item/ultimate-addons-for-visual-composer/6892199

    • admin 說:

      感謝建議,最近也有觀察到 Visual Composer 的衍伸外掛越來越多,但我都還沒用過,我可能先買您推薦的這套試用看看,如果夠強大&自己專案上用的到的話,應該就會中文化了吧XDD

  17. 蔡俊賢 說:

    已經付款,不知何時可以收到? 感謝您。

    • admin 說:

      蔡先生您好!稍早已將中文化檔案寄給您,再煩請確認看看,使用上有任何問題都可以再跟我說,感謝支持囉!^^

  18. 剛購買的人 說:

    請問下載後的檔案附檔案名稱為何?無法解壓縮?

    • oberon 說:

      不好意思,現在才看到您的留言,前些日子已將中文化檔案寄給您,不知是否有解決您的問題?有任何問題再跟我說,感謝您的支持!

  19. VC 說:

    請問Visual Composer是否有開放的API可以套用在自己的網站上?或者有類似的東西可使用?

    • oberon 說:

      您是指非 WordPress 的網站嗎?就我理解它只有支援 WordPress,因為透過它介面所產出的內容,皆為 WordPress 專用的 shortcode,官網提供的 API 也是 WordPress 的函式—>https://wpbakery.atlassian.net/wiki/display/VC/Inner+API

  20. oneal 說:

    請問現在版本是v4.4.2 , 中文化的有支援嗎?

    • oberon 說:

      有支援,但最新版本變動較大,舊有翻譯僅約80%,近期將再推出完整翻譯的版本,完成後會再通知您,感謝支持!^^

  21. lii 說:

    hi,請問這個贊助的中文化外掛裡面內含主程式嗎?

    • oberon 說:

      沒有喔~請至這邊購買—>http://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431?ref=oberonlai

  22. aids4002004 說:

    版主你好 我有使用此編輯器 但他與我目前使用的布景相衝(CSS呈現不完全) 請問有什麼解決方法嗎?

    WordPress版本:4.1.1
    WPBakery Visual Composer:4.4.3
    佈景:Educator 1.3.0

    • oberon 說:

      您好!
      Visual Composer在設定選項裡有可以貼入自訂CSS的功能,您可以把佈景的CSS貼入看看,或是看衝突的元素為何,另給它一個ID或Class來給CSS下樣式,應該就能解決了!

  23. 之前購買的客戶 說:

    之前購買的, 請為有更新嗎?看你三月份說有更新要釋出,不知道完成了嗎?

  24. 狐狸 說:

    請問我買了以後他是只能用在1個WordPress而已嗎??
    還是以後我可以無限個網站都可以附加進去我的WordPress外掛裡?

    • oberon 說:

      依照 Themeforest 的版權規定是只能將本次購買的外掛使用在一個網域下的網站內,如果需要在別的網站也使用,則需要再次進行購買。

  25. yoyo 說:

    現在還有再販售嗎?^^
    謝謝

    • oberon 說:

      您好,因目前本人無暇更新中文化檔案,所以已提交 .po 檔案給原開發商,只要購買該外掛內建就有小弟翻譯的版本,但完成度約 70% 左右,待善心人士接手了~

  26. eva jean 說:

    請問一下~~我是新手~~~有購買主題~~~可是如何看購買低主題是不是付費低ㄋ~~~

    如果購買幾個主題~~~我們要從哪看購買紀錄ㄋ~~~~

    如果我用fontpage~~作網頁~~可以用在wrodpress嗎?

    我購買的主題~~~標題下有本身的電話~~~要如何改ㄋ~~~~我怎麼改也改不掉~~~怎麼辦?

    • oberon 說:

      您好~

      1.請問您是在那個網站購買主題?
      2.wordpress簡單說就是一堆已寫好的網頁程式,所以用任何網頁編輯器都能開啟 wordpress 內的檔案來進行修改。
      3.因每套主題寫法不同,但通常有三種可能
      一、寫在主題內建的控制選項內,英文可能叫 theme option,可以找找 header 或 logo 裡面的設定
      二、寫在外觀->小工具內,看有沒有 header 的區塊
      三、寫在程式裡面,這時就可以用 frontpage 來修改,但這個機率最低,理論上付費 theme 都會有許多設定來改變網站外觀。

      以上資訊提供您參考!

  27. Grace 說:

    板主您好:

    試用網址
    https://dotcreativestudio.com/wordpressdemo/wp-login.php
    用test/test無法登入,請問沒有提供試用了嗎?

    謝謝

  28. 陳宜德 說:

    版大在你的網站看到很多滿實用的插件請問要如何訂購?

    • oberon 說:

      您好!

      如果您是指 Visual Composer 可以在這邊購買—>http://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431?ref=oberonlai
      如果是其它 WordPress 外掛可以到這邊購買—>http://codecanyon.net/category/wordpress?ref=oberonlai

  29. mijo 說:

    請問一下 Visual Composer 上面寫34塊,那是指美金嗎???
    然後有使用期限嗎??

    • oberon 說:

      您好!沒有使用期限,但有只能使用在一個網址下的版權限制,如果需要延長保固也需再另行付費。

  30. 高啟峰 說:

    請問一下,買某些版面,裡面有附這個外掛,那還要另外買版權嗎?還是表示有贈送?

    • oberon 說:

      您好,這表示這個版面有購買 Visual Composer 的授權,如您已購買該版面,則可以安心使用!

  31. 蔡昀臻 說:

    您好~
    我是買免費的版型
    請問也適用這個外掛嗎?

  32. belazheng 說:

    我想要購買中文化

    • oberon 說:

      您好~中文化已內建於 Visual Composer,只要購買該外掛的當下就會包含中文化,但此中文化語系包已年久失修,本工作室將評估更新的作業時間,如有新版本釋出再行通知!

回覆文章