Visual Composer已成为WordPress最畅销的页面构建插件之一。自2011年5月发布以来，该插件已吸引了超过150,000多名客户（这还不包括成千上万的用户收到与主题捆绑在一起的副本），200多种附加组件和扩展程序以及数百项正面评价网络。

如果您尚未拥有自己的插件副本，也许您过去曾经看过它与高级WordPress主题捆绑在一起，或者您在网络上的某个地方遇到了旧的Visual Composer指南。自Visual Composer首次发布以来，发生了很多变化，因此我们想引导您了解构成此强大插件的所有出色功能。

认识Visual Composer

如果您不熟悉，Visual Composer是WordPress的拖放页面构建器插件。这个方便的dandy插件在创建自定义外观的WordPress帖子和页面时省去了很多困难。不需要编码知识。只需安装插件，即可开始创建帖子和页面。它也与大多数免费主题和许多高级主题兼容，并且与诸如Contact Form 7，Slider Revolution和许多其他流行的插件完全兼容（稍后我们将进行介绍）。

安装Visual Composer

在构建自己的页面之前，您需要下载并安装Visual Composer。有两种保护插件副本的方法：购买您自己的副本或购买包含插件的高级主题。无论您选择哪种路由，插件的工作原理都完全相同，这两种方法的唯一区别在于安装方式。

选项1：购买您自己的副本以在WordPress网站上使用

获得Visual Composer副本的第一种方法是亲自购买插件。只需转到CodeCanyon，将Visual Composer的副本添加到您的购物篮（我们建议添加额外的支持，以便您可以使用插件作者的全年服务）并完成购买。

接下来导航到您的下载页面。单击您刚刚购买的Visual Composer插件旁边的绿色下载按钮，然后选择Only Installable WordPress File。

现在，登录到WordPress仪表板并导航至Plugins> Add new。点击屏幕顶部的上传插件按钮。

选择您从CodeCanyon下载的Visual Composer zip文件。然后只需单击以安装并激活插件。

因为您购买了插件，所以您还需要添加许可证代码以完成激活过程。只需单击屏幕顶部的链接，然后单击蓝色的巨大按钮即可激活 Visual Composer 的副本。

这将为您打开一个门户，以允许WPBakery验证您的购买。单击绿色的大批准按钮。不用担心-您只授予WPBakery权限，以确认您的用户名/电子邮件确实购买了Visual Composer的副本。

只需按照提示完成激活并返回到WordPress仪表板即可。现在您可以开始构建了！

选项2：Visual Composer与您的WordPress主题捆绑在一起

如果购买的主题与Visual Composer随附的安装不同，则主题也可能因作者而异。我们将向您展示如何，如果您使用的是WPExplorer主题就像安装插件共  （它应该是与大多数其他付费主题非常相似）。

首先，您需要下载并安装WordPress主题。如果您从Themeforest购买了主题，则该过程与下载Visual Composer的过程相同。登录您的Themeforest帐户，然后转到下载页面。然后找到您的主题，单击下载按钮，然后选择仅可安装的WordPress文件。

接下来登录到WordPress安装，然后单击外观>主题>添加新。然后，单击页面顶部的“ 上载主题”选项。您将必须打开下载的zip文件以找到可安装的WordPress文件。这是因为Total主题捆绑了高级插件，示例数据和PSD文件等附加功能。

找到文件后，您可以上传，安装和激活主题。激活后，Total将提示您安装推荐的插件 -包括Visual Composer。

只需单击链接即可开始安装插件。从批量操作下拉菜单中选择安装，检查所有要安装的插件，然后单击应用。

那就是您要做的！无需通过Envato激活Visual Composer。因为您购买的是主题而不是您自己的插件副本，所以您没有许可证代码可进行验证，并且除非主题作者将其提供给您，否则您将无权访问插件更新。

当然，如果您想购买自己的副本以更快地接收更新，则可以这样做，但是不需要将Visual Composer与您的主题一起使用。使用该插件，您可以继续实际使用该插件。

Visual Composer Page Builder入门

现在您已经安装了Visual Composer，现在该开始使用插件设置了。现在，您将在WordPress仪表板中看到一个Visual Composer选项。单击它以打开您的设置页面。

“ 常规设置”标签包含一些简单的选项，用于启用/禁用响应元素在小屏幕上的堆叠（因此，您可以将标准的三列行变成三个单列行，而在移动设备上缩小三列行），选择Google字体子集和休息按钮，用于重新打开Visual Composer向导。

如果您的网站使用多个用户角色，则Visual Composer 角色管理器肯定会派上用场。通过此设置页面，您可以根据角色限制用户对各种Visual Composer功能的访问。这样，您可以允许管理员访问所有功能，同时将编辑者限制为仅博客页面，而贡献者则完全没有。

我们在安装过程中已提到过这一点，但是 如果您购买了自己的插件副本，则可以在“  产品许可证”选项卡上验证许可证代码。如果您的Visual Composer副本与主题捆绑在一起，则可以忽略此部分。

页面构建器元素

Visual Composer带有34个标准页面构建器元素，用于您要添加到页面中的许多功能（上面的屏幕快照显示了所有功能，以及我们稍后讨论的Contact Form 7元素）。许多元素包括添加的颜色，边框，填充，边距，自定义CSS，动画等选项。以下是其中的简要介绍：

• 行是页面的页面。您将使用row元素创建列并插入所有其他页面元素。
• 文本块恰好听起来像是文本块。使用标准的WordPress所见即所得编辑器，您可以使用此模块添加文本并设置其格式。
• 图标包括以下图标库中的字体图标：FontAwesome，Open Iconic，Typicons，Entypo，Linecons和Mono Social。
• 分隔符和带有文本的分隔符是在页面上创建的部分之间创建换行符（和/或文本）的方法。
• 消息框非常适合添加笔记，警报或其他盒装按摩。
• Facebook，Tweet，Google +和Pinterest都是简单的社交共享按钮，您可以添加这些按钮，以便用户共享正在创建的页面。
• 常见问题解答是一种切换按钮，可用于添加用户在阅读您的页面时可以显示的隐藏内容。
• 该单张图像就是这样-与大小，动画，链接，更增添了选择一个简单的图像。
• 选项卡，游览和手风琴  与常见问题类似，它们包含隐藏或可折叠的内容，但第一部分处于打开状态。
• 可分页容器是基本的内容滑块（但是您可以将几乎任何页面构建器元素插入到每个容器“页面”中）。
• 使用自定义标题可以轻松地使用自定义字体，大小，颜色等将您自己的标题添加到节中。
• 使用按钮可以添加到其他页面或外部网站的链接。
• 一个呼吁采取行动是与添加的按钮，渔获用户关注的标注框，让你增添几分说服力的内容。
• 小部件侧边栏允许您在页面上的任何位置插入自己的自定义侧边栏。
• 在视频播放器可以很容易地插入由WordPress支持不同的视频格式。
• Google Maps是另一个简单的选择-只需粘贴您的Google Map代码即可在页面上插入地图。
• 进度条，饼图，圆图和折线图都是绘制或显示数据或技能的方法。
• 空白空间使在元素之间添加垂直分隔符变得简单。
• 帖子，媒体，帖子砌体和媒体砌体网格都是可以添加到页面的自定义网格（可以选择混合和匹配帖子或媒体类型）。

该插件还包含8 个小部件元素  ，如果您愿意的话，可用于构建自己的侧边栏。当您创建侧边栏可能不在典型页面位置的自定义登录页面时，或者如果您的整个网站是一个大型的着陆页网络（没有两个使用相同的侧边栏）时，这些功能将非常有用。

Visual Composer扩展

基本的Visual Compose元素非常适合入门，但是最终您将需要或需要更多的资源来创建自定义页面布局。这可以通过扩展来实现。Visual Composer扩展有几种不同的来源。

扩展Visual Composer的第一种方法是通过主题。一个很好的例子是我们的WordPress总主题，其中包括39个添加的页面构建器元素。这些功能是Total独有的，以使用其功能，因此您必须已安装主题并处于活动状态才能使用它们。总计包括自定义帖子类型（个人鉴定，员工，投资组合），自定义画廊，简单滑块，社交等等的扩展。这使您更轻松地将所需的内容添加到所需的位置。

如果您的主题不包含任何扩展，则可以安装  第三方Visual Composer扩展。这些价格从免费到55美元不等，可从CodeCanyon和网络上的各种作者那里获得。如果您想添加一些额外的功能，例如定价表和社交功能，那么免费的Symple Shortcodes插件是您的最佳选择（毕竟我们在WPExplorer上创建了它）。如果您想增加更多选项，那么高级插件（例如Ultimate Add-on的插件）可能更适合您。实际上有数百个选项–您可以在WPBakery上看到兼容加载项的完整列表。

但是，您选择扩展Visual Composer，我们建议您不要同时使用所有主题和插件扩展。不一定总是越多越好–在这种情况下尤其如此。这不仅会创建很多重叠和重复的选项，而且还会显着降低网站的速度（每个页面构建器元素中都会包含大量代码）。因此，请选择最适合您的扩展名并坚持使用。

后端和前端编辑

使用Visual Composer，您不仅可以构建和编辑页面。使用此功能强大的插件，您可以选择从模块化后端或可视化前端进行更改。

Visual Composer后端编辑器

如果选择使用后端编辑器，则每个元素都显示为模块化元素，您可以将其插入，拖放到适当位置。如果您要快速布局页面外观的线框，则此方法非常有用；如果服务器或Internet连接速度较慢，该方法也可以比前端更快。

后端编辑器非常易于使用。只需单击“ 后端编辑器”的蓝色按钮即可为要编辑的页面或帖子启用Visual Composer。

然后点击绿松石按钮以+添加元素。

从这里您可以开始插入任何您想要的页面元素！

Visual Composer前端编辑器

该前端编辑器提供的最终页的样子，因为它本质上是一个实时的可视化编辑器更好的视图。它允许您插入与后端编辑器相同的所有页面构建器元素，并具有能够实际看到它们而不是模块的附加好处。您可以看到300px图像的实际大小，或者是否真正弹出带有＃6e2f93十六进制值的紫色按钮。

要启用前端编辑，请单击页面或帖子的两个“  前端编辑器”选项之一。

这将刷新您的屏幕，并带您到帖子或页面的实时前端预览，并具有与后端编辑器相同的页面构建选项。

只需单击即可开始添加元素。此处的主要区别在于，您现在可以在插入元素时看到它们，并且可以使用 顶部栏中的预览选项来了解页面在台式机，笔记本电脑，平板电脑和手机上的外观。

添加和编辑页面元素

无论使用后端编辑器还是前端编辑器，都将具有相同的选项来自定义各种页面构建器元素。尽管元素之间的选项确实有所不同，但是在插入元素后，需要注意一些关键功能。

Visual Composer行选项

无论您要添加到页面中什么，都必须首先插入一行。插入后，您可以将鼠标悬停在前端元素上以显示蓝色的  行选项（在后端，这些总是在每行的顶部可见）。

• 您可以单击第一个“ 行”图标将行拖放到页面上的新位置。
• 该铅笔图标会打开你的行设置的选项。这些可能会因您的主题而异。使用“总计”主题，您将看到以下选项：本地滚动ID，行拉伸（对于全角行），全高行，最小高度，移动设备上的可见性，居中内容，等高列，动画，版式，最大宽度，列间距，背景视频或视差以及设计选项（边距，边框，填充，背景颜色/图像）。
• 列用于定义行中的列数。有多达6列的默认选项，但您也可以根据需要定义自己的自定义列布局。
• 加号在正在编辑的行下方添加新行。
• “ 复制”图标将克隆当前行及其所有内容（也就是您已插入到该行的所有元素）。如果您想在同一页面上多次重用行布局，那就太好了。
• 垃圾桶只是删除整个行及其内容。

Visual Composer列选项

当您在前端编辑器中将鼠标悬停在一行上时，您还将看到黄色的列选项（在后端，您会发现每列上方显示相同的选项和图标）。

• 第一个“ 列”图标与行相同–单击它可以拖放和重新排列行中的列。
• 该铅笔是将军柱设置。与行类似，列选项可能会根据您使用的主题而有所不同。使用“总计”时，可以使用以下选项：在移动设备上的可见性，动画，版式，最小高度，设计选项（边距，边框，边距，背景）和响应性设置（基于设备的自定义偏移，宽度或隐藏选项）。
• 对于列，加号图标将在该列的顶部添加一个元素，该元素位于已插入的任何其他元素之上。
• 同样，“ 废纸 icon”图标将删除整个列及其内容。删除一列后，其余列将保持其尺寸（如果删除3列中的1列，其余2列仍将是1/3大小的列），因此请记住在删除后编辑列宽。

Visual Composer页面元素选项

在行或列中，您将使用加号图标插入页面元素。在上面的屏幕截图中，我们添加了一个消息框。插入元素时，设置将自动打开。要编辑已添加的元素，只需将鼠标悬停在前端或后端编辑器中的元素上即可显示以下选项：

• 该铅笔图标会打开设置（如下所述）。
• “ 复制”图标将完全克隆您的页面元素（设置和全部）。
• 最后，垃圾箱将仅删除您的页面构建器元素。从插入行或列的位置开始，其他所有元素保持不变。

页面元素常规选项

插入新元素或单击某个元素的铅笔图标时，将打开“页面构建器”元素设置。这些（大部分情况下）分为多个选项卡，使您可以轻松查看所有可用的自定义选项。除了“设置”选项卡之外，右上角还有一个齿轮图标，您可以使用该图标将所选设置保存为预设，以供日后重用，也可以将其默认为每次插入此特定元素时自动使用的默认设置。

在常规选项卡包括您的页面元素的常规选项。这些将根据您插入的元素而有所不同（但在每种情况下，编辑就像使用下拉菜单，颜色选择器，复选框或文本框一样简单）。例如，上面的屏幕截图中的消息框包括样式，形状，颜色，图标，文本和动画的选项。但是，如果您插入按钮，则会找到文本，URL，样式，形状，颜色，大小，对齐方式，图标和动画的选项。

页面元素设计选项

“ 设计选项”选项卡是您几乎在每个页面构建器元素上都会看到的第二个标准选项卡。在这里，您可以向元素添加自定义背景（颜色或图像），边框，填充和边距。简化控件的选项减少了CSS框选项，因此您可以为每个选项（边距，边框和边距）输入一个通用值。需要记住的一个注意事项：当您应用背景时，背景会包含在边框内。因此，增加填充将增加在元素周围添加的可见背景，但是如果增加边距，则将增加页面元素周围的空白区域（显示其后面的行/页面）

当然，取决于插入模块的模块，您可能还会有更多选项卡。例如，Visual Composer Post Grid已为“数据设置”和“项目设计”添加了选项选项卡。而且，如果您通过诸如Total Staff Grid之类的扩展程序使用自定义页面元素，则取决于扩展程序的种类，可以内置更多的选项（例如查询选项，自定义图像裁剪，元数据，社交链接，摘录等）。作者已包括在内。

注意：  您可以在《Total Builder模块指南》中签出完整的元素列表。但是，了解每个模块的功能的最佳方法是使用Visual Composer。创建一个测试页并练习插入和编辑元素。您将很快掌握它，并像专业人士一样构建页面！

流行的兼容插件

除了Visual Composer扩展之外，许多流行的插件都与Visual Composer兼容，并自动添加其自己的页面构建元素。以下是您将很高兴听到的许多插件，它们可以与Visual Composer插件无缝协作以实现更好的页面构建。

WooCommerce：如果您想使用WordPress建立商店，那么WooCommerce是您的最佳选择。该插件不仅免费且具有强大功能，而且与Visual Composer完全兼容。安装并激活后，WooCommerce不仅会添加自己的设置和选项，还会添加 17个新的页面构建器元素供您使用。

Slider Revolution：Slider是在任何页面上添加引人注意和内容打包部分的好方法，而Slider Revolution是一个完美的插件。使用此插件，您可以拖放文本，按钮，图像甚至视频等元素，并添加动画和效果，以创建令人印象深刻的滑块。在我们的许多 Total演示中看到它的实际效果！

LayerSlider：滑块的另一个不错的选择是LayerSlider插件。它与Slider Revolution一样出色，但界面和选项略有不同。它甚至包括一个自定义过渡生成器，因此您可以创建一种动画。它也是与Total WordPress主题捆绑在一起的两个高级滑块之一，因此您知道它很棒。

联络表7：联络表是任何网站的重要组成部分-无论您是拥有商务咨询表的博客作者还是拥有约会表的牙医。Contact Form 7是完全免费，灵活的，并且使用Visual Composer插入联系人表单时，使用自定义表单元素很容易。

WPML：如果您需要创建一个多语言的网站，WPML是翻译您的帖子和页面的主要选择之一。另外WPML与Visual Composer完全兼容，因此可以转换您构建的每个自定义页面。

Polylang：如果您不想投资WPML，Polylang是一个很好的免费选项，它与Visual Composer完全兼容（它是我们建议使您的WordPress网站多语言化的免费插件之一）。

Yoast SEO：Yoast使任何用户都可以轻松地改进现场SEO。SEO有许多重要功能，包括站点地图，元描述，面包屑等。最重要的是– Yoast SEO与Visual Composer的结合很好，因此您可以担心创建更好的页面而不是研究SEO。

Templatera：该插件不仅兼容-它是由WPBakery（Visual Composer的作者）创建的，用于扩展其页面构建器的功能。Templatera使保存和重复使用模板成为可能，因此轻松构建重复页面。安装后，该插件在WordPress仪表板的Visual Composer设置中添加了自己的选项，因此导入，导出和重用模板都很简单（我们认为这是一个很棒的功能，我们也将该插件与 Total捆绑在一起 ）。

而且我们确定还有更多出色的兼容插件！如果您不确定新插件与Visual Composer的兼容性，请与新插件的作者联系并询问。

Visual Composer的高级选项

对于更高级的用户，Visual Composer中有几个额外的选项，您可以用来将自定义短代码添加到页面构建器并创建自定义媒体网格。

首先是  Shortcode Mapper。该选项位于Visual Composer设置内，可用于将您自己的自定义短代码映射到Visual Composer。如果您有自己喜欢的短代码（例如价格表中的某个短代码）默认情况下不包含在Visual Composer中，那么这非常好。

第二个高级选项是随附的Grid Builder。使用此功能，您可以使用自己的内容自定义布局来创建自定义网格（类似于媒体和后发布网格）。例如，您可以创建带有圆形图像的自定义博客帖子网格，以粗体自定义字体发布的作者姓名，自定义摘录长度，一个“更多”按钮和一个链接到推荐产品的第二个按钮。有主意吗？您可以使用大量的元素，颜色，边距，边框等选项构建所需的任何网格布局。

---

---

需要提供WordPress主题/插件的汉化服务可以随时联系我们！另外成品WordPress网站以及半成品WordPress网站建设，海外Google SEO优化托管服务，百度SEO优化托管服务，Centos/Debian服务器WP专用环境搭建，WP缓存服务器搭建，我们都是你的首选，拥有多年WP开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！