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 (Simplified) (中文(简体)) translation by Fuhuan (you can also view the original English article)

WordPress 是世界上最受欢迎的 CMS,因为它具有简单的界面,高度可定制的主题和各种强大的插件。 它甚至为大多数业余用户简化了网站开发和管理过程。

但是,有时你会看到某个网站设计,它立即引起你的注意,并且你希望修改自己的网站以显示相同的内容。 不幸的是,如果你是一个完全的业余爱好者,即使是使用 WordPress,你也无法做很多事情,因为主题修改需要一定程度的 HTML,CSS,PHP 和其他技能的专业知识,这取决于你的主题的性质。 即使你是程序员,也可能需要几个小时才能进行所需的修改。

幸运的是,WordPress Visual Composer 插件简化了这个问题。 有了这个很棒的页面构建插件,即使是最基本的 WordPress 用户也可以修改主题设计并为他们的网站创建一个完全独特的外观。 对于 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
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.