Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Visual Composer 入門

by
Difficulty:BeginnerLength:LongLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Chinese (Traditional) (中文(繁體)) translation by Fuhuan (you can also view the original English article)

WordPress 是世界上最受歡迎的 CMS,因為它具有簡單的界面,高度可定制的主題和各種強大的插件。 它甚至為大多數業余用戶簡化了網站開發和管理過程。

但是,有時妳會看到某個網站設計,它立即引起妳的註意,並且妳希望修改自己的網站以顯示相同的內容。 不幸的是,如果妳是壹個完全的業余愛好者,即使是使用 WordPress,妳也無法做很多事情,因為主題修改需要壹定程度的 HTML,CSS,PHP 和其他技能的專業知識,這取決於妳的主題的性質。 即使妳是程序員,也可能需要幾個小時才能進行所需的修改。

幸運的是,WordPress Visual Composer 插件簡化了這個問題。 有了這個很棒的頁面構建插件,即使是最基本的 WordPress 用戶也可以修改主題設計並為他們的網站創建壹個完全獨特的外觀。 對於 WordPress 專家來說,這是壹個節省大量時間,可以幫助他們在幾分鐘內修改頁面。 即使妳是程序員,也可能需要幾個小時才能進行所需的修改。

因此,在此背景下,讓我向妳介紹 Visual Composer 的壹些主要功能,以及如何為妳的 WordPress 網站設置它。

主要特點

Visual Composer 由 WP Bakery 的人員設計。 這是壹個付費插件,在 WordPress 插件目錄中不公開。 妳只能從 CodeCanyon 下載它。

它已被超過 70,000 名用戶下載,它似乎只會取得更大的成功! Visual Composer 具有幾個非常有用的功能,可以使頁面構建在 WordPress 中非常愉快。 這裏有壹些快速瀏覽壹下。

前端和後端頁面構建

Visual Composer 最強大的功能是它為妳提供了壹個簡單的拖放頁面構建器,可以從標準的 WordPress 頁面 / 後期編輯區域或直接從前端使用。

通用主題兼容性

Visual Composer 不是特定於主題的。 這意味著妳可以將其與任何 WordPress 主題壹起使用,而無需對現有代碼進行任何調整。

高度可定制的布局

Visual Composer 的拖放元素具有默認布局和主題。 但是,妳可以根據網站的配色方案和外觀對其進行修改。

超過 40 個準備使用的設計元素

Visual Composer 的拖放界面有超過 40 個隨時可用的拖放元素,可用於在幾分鐘內為妳的網站創建獨特的布局。

完全響應元素

使用 Visual Composer 創建的設計和頁面元素具有完全響應和移動就緒功能。

開發者友好

Visual Composer 充滿了多種拖放元素。 如果妳想添加更多內容,可以輕松完成,這要歸功於它的開發人員友好性。

插件安裝和配置

正如我之前提到的,Visual Composer 是壹個付費插件。 因此,妳需要先購買它,然後將其上傳到妳的 WordPress 網站。

步驟 1

安裝過程與任何其他 WordPress 插件相同。 激活後,插件將顯示在主 WordPress 儀表板左側菜單的 “設置” 選項中。

第 2 步

在這裏,妳可以調整壹些基本的插件設置。


第 3 步

妳可以為頁面和帖子或其中任何壹個啟用 Visual Composer。 妳還可以為各個用戶類型設置特定的訪問權限。 對於每種用戶類型,妳可以選擇在後期編輯區域和標準 WordPress 編輯器中同時顯示 Visual Composer,也可以只顯示 Visual Composer。 妳還可以為不同的用戶啟用或禁用單個 Visual Composer 元素。

第 4 步

在 “ 設計選項” 選項卡中,妳可以根據網站的主題修改 Visual Composer 元素的外觀。 “ 自定義 CSS” 選項卡允許妳在不更改任何其他文件的情況下修改 CSS,而 “產品許可證” 選項卡允許妳集成 Envato 帳戶以啟用支持和自動更新。 在 “ 我的短代碼” 選項卡中,妳可以將任何其他手動開發的短代碼添加到 Visual Composer 中的現有短代碼列表中。

現在讓我們繼續討論插件的實際用法!

在頁面和帖子上使用 VC

如上所述,妳可以為帖子,頁面或其中任何壹個啟用 Visual Composer。 激活插件後,妳將在標準 WordPress 文本編輯器的頂部看到 Visual Editor 選項卡。

顯示在文本編輯器頂部的兩個選項卡是 Backend Editor 和 Frontend Editor。 這些選項使這個插件使用起來非常愉快。 從這裏,妳可以創建所需的任何頁面結構。 讓我們從後端編輯器開始。

後端編輯器

步驟 1

單擊後端編輯器選項卡時,文本編輯器區域將變為拖放框,妳只需從列表中選擇元素即可添加元素。 但首先,妳需要添加壹行。 從這裏開始,限制妳設計的唯壹因素就是妳的想象力。

第 2 步

妳可以在行中添加不同的元素,也可以通過將鼠標指針懸停在內容編輯器上方的按鈕上來為每行選擇不同的列布局。 妳可以從 “ 添加元素” 選項卡添加不同的元素來設計頁面。 “ 添加元素” 框包含設計網站所需的壹切。

元素分為內容,社交,網站結構,新元素和 WordPress 小部件類別,但妳也可以壹起查看所有元素。 無論妳需要哪個選項,只需單擊它並將其拖動到妳的內容框中即可。 妳的頁面基本上分為不同的行。 妳可以繼續在這些行中添加新行和新元素。

第 3 步

要編輯,刪除或復制任何特定行,只需使用每個行框頂部的圖標即可。

第 4 步

妳可以將特定內容排列保存為隨時可用的模板,可以在需要時隨時從列表中加載。

第 5 步

Visual Composer 還允許妳為單個頁面和帖子添加自定義 CSS。 此自定義 CSS 的效果僅限於該特定頁面或僅限帖子。

Visual Composer 還支持幾種著名的 WordPress 插件,如 Contact Form 7,Layer Slider,Revolution Slider 和 Gravity Forms。 如果妳安裝了任何這些插件,它們將自動添加到 “ 添加元素” 框中。 當妳從元素列表中選擇任何壹個元素時,它將直接插入妳的頁面,而無需添加任何短代碼。 後端編輯器為妳提供了如此多的靈活性和選項,即使妳是業余用戶,也可以創建任何類型的設計。

前端編輯

前端編輯器允許妳在實時頁面視圖中拖放頁面元素。 它還可以讓妳更輕松地立即查看更改的影響,同時擁有後端編輯器的所有選項。

步驟 1

從左側開始,妳可以通過單擊 + 號添加新元素,然後使用旁邊的列按鈕編輯列的布局。

第 2 步

妳還可以在頁面內容中的 + 號中添加新行或列。

第 3 步

Visual Composer 的所有元素都是完全響應和移動就緒的。 妳可以從下面的圖標中獲取前端編輯器中不同設備的實時預覽。

第 4 步

盡管具有所有這些功能和廣泛的元素,Visual Composer 還允許妳添加自己的短代碼和設計元素。 妳可以自己創建元素,也可以從任何第三方服務中導入元素。

綜上所述

WordPress 壹直是壹個靈活的平臺,它可以通過其插件支持不同的功能。 但是使用 Visual Composer 頁面構建器插件,即使是曾經僅限於高級用戶的 WordPress 的設計方面,現在也可以在非常快的時間內進行編輯。

對我個人來說,Visual Composer 大大減少了我花在客戶網站設計和編輯上的時間,從幾個小時到幾分鐘。 隨著這個插件越來越受歡迎,我只能看到越來越多的 WordPress 用戶越來越依賴它。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.