1. 主页
  2. 插件
  3. visual composer教程第二(帮助文档)

visual composer教程第二(帮助文档)

安装

Visual Composer网站生成器安装与任何其他WordPress插件安装没有区别。您只需要拥有访问管理控制台的WordPress网站  如何安装WordPress

Visual Composer网站生成器安装

  1. 下载最新版本的Visual Composer网站构建器。你的电脑上会有visualcomposer.zip。
  2. 打开您的WordPress管理面板www.yoursite.com/wp-admin并使用管理员登录凭证登录。
  3. 从左侧菜单导航到插件部分。
  4. 选择左上角的新增。
  5. 选择左上角的上传插件。
    上传WordPress插件的zip文件
  6. 选择从您的计算机上传visualcomposer.zip,然后单击立即安装。
  7. WordPress现在将安装Visual Composer网站生成器。安装成功后,您将看到一个激活插件的选项。您的插件现在已安装。
    安装后激活WordPress插件
  8. 选择激活插件以继续激活过程

激活

每次安装Visual Composer网站生成器时,都需要完成许可证激活过程。为了让插件从Visual Composer Cloud下载所有必需的扩展。这些扩展是插件工作所必需的。

免费或优质激活Visual Composer网站生成器

插件安装后,您可以选择激活  免费版高级版。如果您还没有Premium许可证,则可以激活免费版本并稍后将其升级到Premium或立即购买Premium许可证  。

激活免费版本

Visual Composer免费版本激活

  1. 安装选择激活插件。您将被重定向到激活屏幕。
  2. 选择免费版本。
  3. 输入有效的电子邮件地址并同意使用条款云访问条款
    注意:建议您为所有Visual Composer网站生成器安装使用一个电子邮件地址,以将您的网站保存在一个Visual Composer帐户下。
  4. 单击立即激活按钮以启动激活过程。
  5. Visual Composer网站生成器现在将下载扩展名,元素模板
    注意:请勿在下载过程中关闭此窗口。
  6. 成功下载后,您将被重定向到最终激活屏幕。
  7. 立即检查您的电子邮件,然后单击Visual Composer的确认电子邮件中的“开始使用Visual Composer网站生成器”。
  8. Visual Composer网站制作器现已在您的WordPress网站上激活。

Visual Composer网站生成器激活屏幕

您现在可以关闭激活屏幕并进入Visual Composer  设置或  使用Visual Composer网站构建器创建您的第一页

成功激活Visual Composer网站生成器

请记住,您可以在Visual Composer网站上购买高级许可证,将免费版本升级到高级版本  。

激活高级版本

感谢您购买Visual Composer Premium许可证 – 几分钟后,您将可以享受高级功能,并通过简单易用的界面构建WordPress网站,无需编码。

在结帐完成时,您的新许可证已添加到您的Visual Composer帐户。Visual Composer帐户是在第一次购买许可证期间自动创建的。

激活您的Visual Composer Premium副本

高级许可证激活

  1. 插件  安装后,选择激活插件或单击Visual Composer菜单中的“Go Premium”按钮。您将被重定向到激活屏幕。 请注意,“Go Premium”链接自1.10版本开始提供。如果您使用较旧的插件版本,请在WP仪表板的插件部分下进行更新。
  2. 选择Premium版本,同意Cloud条款并选择Activate Premium (我们还要求您指定您的行业以帮助我们为您开发正确的内容)。
  3. 您将被重定向到Visual Composer帐户。
    注意:请使用您的帐户凭据(在结帐期间创建的凭据连接到Visual Composer帐户以管理许可证
  4. 从您要激活的列表中选择许可证。激活或取消激活您的Visual Composer许可证
  5. 您将被重定向回您的WordPress网站。
  6. Visual Composer网站生成器现在将下载插件操作的所有扩展名,元素模板
    注意:请勿在下载过程中关闭此窗口。
  7. 成功下载后,您将被重定向到最终的激活屏幕 – 就是这样。

成功激活Visual Composer网站生成器

您现在可以关闭激活屏幕并为Visual Composer网站生成器设置设置,或继续使用Visual Composer网站生成器创建您的第一页并从Visual Composer Cloud下载高级内容。

管理和取消激活许可

要管理您的Visual Composer的网站制作许可证登录  的Visual Composer帐户。有您可以执行以下操作:

  • 激活视觉作曲高级许可证高级版激活过程)。
  • 停用许可证。
  • 开发者创建子许可证(如果您购买的开发许可证)。
  • 概述网站,你使用的可视化编辑器。

要访问可视化编辑器的帐户,你将需要使用在注册时或购买的可视化编辑器高级的创建帐户的凭据。

要关闭您的Visual Composer的许可(例如,你把它用在开发环境和将网站移至生产),只需将许可证并选择取消。

停用并管理您的Visual Composer的高级许可证

注意:取消激活的许可证可以在其他网站上立即被激活。只需启动激活过程的新网站上再次使用许可证。

设置

位于您的WordPress管理控制面板下的Visual Composer网站生成器设置位于Visual Composer菜单下,Premium版本 提供以下选项(免费版本页眉,页脚和侧边栏不可用)

  • 激活(仅在您未激活插件时才可用)
  • 设置
  • 页脚
  • 侧边栏
  • 关于

WP Admin仪表板中的Visual Composer设置菜单

激活

如果您安装了Visual Composer网站构建器但未继续进行激活,则它将是唯一可用的选项。您需要激活插件以验证您的安装并下载插件与Visual Composer Cloud一起使用所需的扩展。

要激活插件,点击激活按钮打开激活屏幕。

设置

Visual Composer网站生成器允许您使用WordPress网站的页面,帖子和自定义帖子类型。在“设置”菜单中,您将看到列出的所有帖子类型,并启用或禁用Visual Composer网站构建器对特定自定义帖子类型的使用。

页面,发布,自定义帖子类型控件在Visual Composer网站生成器 -  WordPress管理仪表板

要允许Visual Composer网站制作工具处理您的内容,请务必将您的网页,帖子和自定义帖子类型设置为ON。

注意:不要忘记通过单击保存更改按钮来确认更改。

重启

恢复出厂设置将从Visual Composer Cloud中删除所有下载的扩展

Visual Composer设置允许您执行重置操作,该操作将删除从云端下载的所有Visual Composer扩展,并使用最新版本重新下载。

页眉,页脚,侧边栏

Visual Composer Premium版本允许您创建无限数量的独特页眉,页脚和侧边栏。页眉,页脚和侧边栏将作为模板存储(可以选择设置默认值),并可插入到Visual Composer布局中

关于

关于页面将打开Visual Composer Website Builder的介绍页面,演示核心插件功能以及创建第一个空白页面的选项。

入门

根据您的偏好,可以通过几种方法开始使用Visual Composer网站构建器。

从激活页面

激活后,您将看到一个确认屏幕,其中包含一个按钮创建空白页面。单击此按钮将立即创建一个空白的新自动草稿页面,并将其重定向到默认情况下激活空白页面向导的Visual Composer网站构建器的前端编辑器

只需点击一次即可在WordPress中创建空白页

新页面,发布或自定义帖子类型

使用Visual Composer网站构建器创建新页面,发布或自定义帖子类型:

  1. 在您的WordPress管理仪表板中,导航到左侧菜单中的页面,发布或自定义帖子类型部分。
  2. 点击左上角的默认WordPress选项“新增”。
  3. WordPress将打开一个空白的新页面,发布或自定义帖子类型,并且可以选择切换到前端编辑器
    注意:确保允许Visual Composer网站构建器在WordPress管理仪表板的Visual Composer设置使用帖子和自定义帖子类型
    切换到前端编辑器,后端编辑器,WordPress Classic编辑器

编辑现有页面(编辑页面)

Visual Composer网站生成器与您现有的内容一起工作。在第一次编辑时,您现有的内容将被自动包装到文本块中。

使用现有页面:

  1. 导航到您的WordPress管理仪表板中的页面,帖子或自定义帖子类型部分。
    注意:确保允许Visual Composer网站构建器在WordPress管理仪表板的Visual Composer设置使用帖子和自定义帖子类型
  2. 点击编辑打开WordPress页面编辑。
  3. 单击使用Visual Composer编辑以使用Visual Composer网站生成器前端编辑器编辑内容。
    使用Visual Composer网站构建器编辑WordPress页面
  4. 您将被自动重定向到Visual Composer网站构建器的相应编辑器。

空白页面向导

当您创建新页面时,Visual Composer网站构建器会自动打开空白页面向导以帮助您。在空白页面向导中,您可以选择预定义的Visual Composer布局之一或使用主题默认布局。Visual Composer Premium附带一组布局模板:

  • 空白的盒装
  • 空白全宽
  • 标题,内容和页脚
  • 标题,带有右侧边栏的内容和页脚
  • 标题,内容与左侧栏和页脚
  • 主题默认(由您的WordPress主题定义)

具有布局选择器的Visual Composer空白页面

要开始构建,请选择其中一个布局并  添加第一个内容元素  或从Visual Composer Hub添加一个预定义模板。

前端编辑器

前端编辑器是一个真正的所见即所得的实时编辑器,它代表了发布后显示内容的实际外观。您可以立即看到设计工作的最终结果,并调整最小的细节(例如填充,颜色,形状)

用于WordPress的Live Frontend编辑器,具有所见即所得的功能和拖放功能

您在前端编辑器中所做的所有更改将立即在编辑器中应用,但需要您的批准才能发布

要进入Visual Composer网站生成器的前端编辑器,请执行以下操作:

  • 编辑页面时,在WordPress管理仪表板中使用编辑器开关控件。
    切换到前端编辑器,后端编辑器,WordPress Classic编辑器
  • 如果您正在使用现有内容,请选择使用Visual Composer编辑。
    使用Visual Composer网站构建器编辑WordPress页面

注意:前端编辑器允许您根据自己的喜好调整导航栏的位置。

注意:由于前端编辑器的性质,所有链接,自动旋转动画和类似操作都被禁用。为了最终审查,请使用预览选项

页眉,页脚,侧边栏编辑器

WordPress的主题可以限制在选项和布局,你的要求和想法不是。有时候你需要对页眉或页脚进行简单的修改,而这些修改是无需编码就无法完成的。从现在起,事情将会永远改变。

Visual Composer Premium为您提供了页眉,页脚和补充工具栏编辑器来创建您自己的独特模板。创建无限数量的页眉和页脚,并在您的网站上使用它们。按照您应得的方式控制标题的位置和属性。

使用Visual Composer创建自定义页眉,页脚和侧边栏

用Visual Composer创建一个新的标题是一块蛋糕。您将拥有一个非常熟悉的Visual Composer编辑器,可以在几分钟(甚至几秒)内构建自定义页眉,页脚或边栏

创建新的页眉,页脚或侧边栏

  1. 在WordPress管理面板中导航到Visual Composer设置并选择您想要创建的内容
  2. 添加新模板
  3. 给你的新模板命名
  4. 使用内容元素和模板来创建页眉,页脚和侧边栏
  5. 保存你的模板

WP Admin仪表板中的Visual Composer设置菜单

注意:您可以创建无限数量的模板。

应用页眉,页脚,边栏模板

一旦你准备好你的模板,现在是时候在你的全新网站上试一试了。添加页眉,页脚或侧边栏导航到您的页面(或创建一个新页面)。

通过空白页面向导页面布局选项更改页面布局,并从下拉列表中选择新创建的模板。

使用Visual Composer网站构建器选择/更改页面布局

注意:确保选择包含页眉,页脚或边栏的布局以查看下拉选项。

设置默认页眉,页脚,侧栏

我们知道你有大部分时间使用的这个最喜欢的标题。将其设为默认值,忘记每次创建新页面时添加它。

使用Visual Composer为您的站点选择默认页眉,页脚或边栏

设置默认页眉,页脚或侧边栏

  1. 在WP管理面板的Visual Composer设置中导航到页眉,页脚或侧栏
  2. 悬停您选择的模板
  3. 点击“设置为默认值”

来自Hub模板的页眉,页脚和侧边栏

有时使用随时可用的页眉,页脚和侧栏更容易。Visual Composer Hub为您提供各种页眉,页脚和边栏模板的列表,以作为您自己作品的基础。

只需从Visual Composer Hub下载页眉,页脚和边栏模板,并将它们添加到页眉,页脚或侧边栏编辑器中即可。

Visual Composer Hub的页眉,页脚和边栏模板

您只需更改徽标并指定菜单源。当然,您可以通过更改布局或添加更多内容元素来进一步实现 – 这一切都取决于您的需求。

从Visual Composer Hub添加模板

  1. Visual Composer设置中导航到页眉,页脚或侧边栏编辑器(在WP管理面板中)
  2. 创建一个新的模板并为其命名
  3. 打开Visual Composer Hub并选择Header,Footer或Sidebar类别
  4. 下载您选择的模板
  5. 打开模板窗口并添加您的模板
  6. 可选:应用您的更改
  7. 保存页眉,页脚或侧边栏

您的新模板将出现在页面布局

选项的列表和下拉菜单中。

树视图

树状视图模式允许您通过树状导航来查看并与您的内容进行交互。在树状视图模式下,您将以紧凑的方式看到完整的布局结构。

树视图模式在前端编辑器导航栏中可用。您在树视图中所做的所有更改也将立即在前端编辑器中进行

在Visual Composer网站构建器中使用图层进行树视图导航,如Photoshop和Sketch中的图层导航

要访问树视图,请单击导航栏中的树视图图标。

Visual Composer网站构建器的树视图中的WordPress页面结构

为了与某个元素进行交互,请将鼠标悬停在您选择的元素上以发现完整的元素控件,包括拖放选项。

移动编辑

客人离开时是否对网站进行了一些更改?通常,您将查找台式计算机,但不会使用Visual Composer网站构建器。我们为您提供专为移动设备量身定制的界面,以便您可以通过手机或平板电脑管理您的内容。

更改每日优惠或将新照片上传到您的博客是一件小事。Visual Composer Mobile Edit提供桌面版本可用的所有功能,但制作成适合您的口袋。

使用双击打开元素编辑窗口或打开树视图以便于移动设备访问所有选项。

使用Visual Composer通过手机或桌面编辑您的WordPress网站

没有特殊的配置或应用程序需要,Visual Composer网站生成器可以识别您的设备并自动适应它。我们相信响应式网站和工具。

内联编辑器

在线编辑器,可以即时编辑的段落和标题内容元素前端编辑器可视化编辑器网站制作的。

要访问内联编辑器,请在前端编辑器中单击一个段落以开始编辑。对于基于TinyMCE编辑器的常规段落,允许控制文本的其他样式 – 粗体,斜体,下划线。对于Google字体标题,可以使用内嵌编辑器编辑文本。

要退出内联编辑器,请单击标有灰色叠加层的外部编辑器区域。

导航栏

Visual Composer网站生成器的主要控制是导航栏。使用导航栏,您可以访问Visual Composer网站构建器可用的所有选项。任何其他窗口和选项都直接链接到导航栏。

导航栏

前端编辑器中的导航栏默认位于屏幕的左侧。但是,可以将导航栏的位置更改为任何位置:

  • 剩下
  • 最佳
  • 底部
  • 独立(放置在内容以上的任何位置)

要更改位置,请单击位于导航栏左侧角的拖动处理程序并开始拖动。

前端编辑器中的Visual Composer网站生成器导航栏

注意:在分离时,允许更改导航栏的长度。部分导航栏上的选项和控件将隐藏在三明治菜单下(位于右侧)

前端编辑器中的导航栏有以下选项:

拖放

Visual Composer网站生成器是一个拖放编辑器,这意味着您可以通过拖放选项来控制布局。通过拖放,您可以重新排列布局的结构元素

允许:

要执行拖放操作,可以使用元素控件或单击并在元素上按住鼠标。它也允许使用元素图标拖放元素。

用易于使用的处理程序在WordPress中拖放编辑器

要完成拖放,只需在您想要设置元素的位置看到确切的占位符,只需释放鼠标按钮即可。

注意:您也可以直接将元素从添加元素窗口拖到画布中。

元素控件

Visual Composer网站构建器的每个元素都有自己的控件来操作。取决于元素的类型,有3种不同的控制可用:

  • 行控件
  • 列控件
  • 元素控件

悬停元素后,确切的控件将显示在元素的左上角。在悬停控件时,Visual Composer网站构建器将使用以下颜色显示元素的边框:

  • 蓝色的行
  • 黄色的列
  • 绿色的元素

在Visual Composer网站构建器中使用颜色的元素边框轮廓

注意:更复杂的元素(如标签(即将推出))也将使用蓝色和黄色颜色来显示选项卡组和单独的选项卡容器。

Visual Composer网站构建器的控件也将显示布局的层次结构。它会显示当前悬停的所有元素(包括父元素)。这种方法允许您快速访问悬停时的任何父元素。在同一时刻可以显示多少个父母元素控件没有限制。

用于WordPress的Visual Composer网站生成器中的元素控件和层次结构

另外,最后一个元素将在元素图标旁边显示编辑和删除选项以便快速操作。

示例:如果您悬停插入到行/列中文本块,则会看到行,列和文本块的控件。

行控件

用易于使用的处理程序在WordPress中拖放编辑器

行元素控件将在悬停时显示蓝色边框,并在下拉菜单中显示以下选项:

  • 移动行-选项来拖放
  • 添加列 – 选项将100%宽度列添加到特定行
  • 编辑 – 编辑行参数
  • 行布局 – 编辑特定行内的列数和列行为
  • 设计选项 – 访问行设计选项
  • 克隆 – 克隆行(它将复制包含所有内容的行)
  • 隐藏 – 在公共和前端编辑器中临时隐藏元素的选项
  • 删除 – 删除行

列控件

元素控制列以在WordPress中编辑您的布局

悬停时会以黄色边框显示列元素控件,并在下拉菜单中显示以下选项:

  • 移动列 – 选择  拖放
  • 添加元素 – 添加元素到特定列的选项
  • 编辑 – 编辑列参数
  • 设计选项 – 访问列设计选项
  • 克隆 – 克隆列(它将复制包含父行内所有内容的列)
  • 粘贴 – 将元素粘贴到已复制的列中
  • 删除 – 删除列

内容元素控件

在Visual Composer网站构建器中使用颜色的元素边框轮廓

内容元素控件将在悬停时显示绿色边框,并在下拉菜单中显示以下选项:

  • 移动元素 – 选择  拖放内容元素
  • 编辑 – 编辑元素参数
  • 设计选项 – 访问元素设计选项
  • 克隆 – 克隆元素(它将复制父列中的元素)
  • 复制 – 将元素复制到剪贴板(您可以通过列控制将元素粘贴到列中)
  • 隐藏 – 在公共和前端编辑器中临时隐藏元素的选项
  • 删除 – 删除元素

复制粘贴

除了克隆选项,Visual Composer网站生成器可以选择复制布局中的任何元素并将其粘贴到列中。复制/粘贴元素:

  1. 悬停元素以查看元素控件
  2. 选择复制(它会将元素复制到剪贴板)
    在Visual Composer网站构建器中使用颜色的元素边框轮廓
  3. 悬停列您要粘贴元素的位置
    元素控制列以在WordPress中编辑您的布局
  4. 选择粘贴(它会将元素粘贴到列中)

您也可以使用树视图进行复制/粘贴。要访问复制/粘贴,请将该元素悬停在树视图中并选择复制。之后,将该列悬停在树视图中并选择粘贴选项。

通过控件在树视图中复制/粘贴元素

注意:复制的元素将存储在剪贴板中,并且您可以随时将其粘贴到列中。即使在不同的页面上。

隐藏元素

Visual Composer允许在Frontend编辑器和Public上临时隐藏元素。要隐藏元素,您可以使用:

为了隐藏元素:

  1. 悬停元素,你想隐藏
    在Visual Composer网站构建器中使用颜色的元素边框轮廓
  2. 找到隐藏控制并启用隐藏模式
    注意:如果您在前端编辑器中工作,您的元素也将隐藏在那里。要启用元素,请使用树视图

要启用元素回来:

  1. 打开树视图和悬停元素
    Visual Composer网站构建器的树视图中的WordPress页面结构
  2. 选择隐藏模式并将其关闭。

要使用Design Options禁用/启用元素,请导航到任何元素的Design Options并将“Show element”切换设置为OFF。

删除元素

Visual Composer提供了几种关于如何删除  内容元素的方法

  • 元素控件
  • 回收站
  • 树视图

元素控件

一旦您将鼠标悬停在Visual Composer的任何元素上,就可以使用包含“删除”选项的多个元素控件

在Visual Composer网站构建器中使用颜色的元素边框轮廓

点击元素控件下拉菜单中的删除即可从布局中删除元素。

树视图

树视图模式下,将鼠标悬停在要删除的元素上,然后单击位于右侧的删除图标。它会立即从布局中删除一个元素。

回收站

回收站允许您通过简单的拖放功能从布局中删除任何元素。一旦你开始拖动一个元素,你会看到回收站图标出现在屏幕的右下角。拖动元素时将鼠标悬停在回收站图标上 – 它会立即通知您关于红色的删除选项,释放鼠标点击以删除元素。

通过简单的拖放操作删除元素到回收站。

如果您决定在移动设备上使用Visual Composer编辑内容,此选项非常有用。回收站仅在前端编辑器中可用。

编辑元素

Visual Composer网站生成器允许您通过元素编辑窗口访问它的参数来编辑布局的任何元素。要打开元素编辑窗口,请悬停元素控件并从下拉菜单中选择编辑。

编辑窗口的元素由几个组组成(取决于元素类型),通过手风琴分割。这些组允许将参数划分为逻辑部分并减少参数压倒性。所有手风琴同时开放也是可能的。

使用Visual Composer for WordPress编辑元素设置

注:每个元素都可以通过元素控件打开任何一个手风琴部分(例如,您可以通过元素控件打开设计选项部分)

要编辑元素参数,只需打开元素编辑窗口并更改所选参数。您的更改将立即在Visual Composer网站构建器的编辑器中生效。无需确认更改,只需在工作结束时保存/发布所有更改。

一些参数可能有一个默认的占位符,可以随时通过输入自己的值来改变。

注意:通过使用撤销/重做选项,可以恢复您在编辑窗口中所做的更改(就像任何其他更改一样)

内容元素和结构

Visual Composer网站构建器的主要资产是元素。您的所有布局将包含2种元素:

  • 结构元素
  • 内容元素

结构元素定义了您的内容的结构。他们将你的内容分成可以放置在另一个之下(或另一个之内)的行容器。而,它允许将行容器成列。行和列元素以每次添加行的方式链接,Visual Composer网站构建器将自动在此特定行内添加一列。您将需要使用行和列来构建布局的初始结构。

将内容元素添加到您的WordPress网站

内容元素是常规元素(例如文本块,按钮,图像),可放置在列中(位于行内)。然后可以借助对于特定类型的内容元素对于内容元素可用的通用参数唯一的参数来调整内容元素

进一步阅读

添加内容元素

有几种方法可以将内容元素添加到布局中:

  • 添加元素菜单
  • 拖放(从添加元素菜单)
  • 底部菜单
  • 列控件
  • 空的专栏
  • 元素底部控件

添加元素菜单

将元素添加到布局的最常用方法是使用“添加元素”菜单,可通过导航栏进行操作

要添加一个元素:

  1. 打开添加元素窗口
  2. 找到您想要添加的元素
  3. 悬停元素(查看预览)
  4. 点击元素
  5. 该元素将被添加到布局的最底部。

带说明的内容元素预览

注意:由于Visual Composer网站构建器会自动将新添加的内容元素包装到行/列中,因此不需要添加行/列容器(除非您想提前设置多个列)

拖放(从添加元素菜单)

允许元素从“添加元素”菜单中直接拖放到画布上。

拖放元素:

  1. 打开添加元素窗口
  2. 找到您想要添加的元素
  3. 点击并拖动元素到您的画布上
  4. 等待拖放占位符出现
  5. 释放鼠标的按钮

通过使用拖放元素选项,您可以快速将元素放置在其他元素或内容块之间。

底部菜单

快速菜单将行和内容元素添加到您的WordPress网站

在布局的最底部,您会看到一个底部菜单,它允许您快速添加最流行的行/列布局 (从1到5个相同的列),设置自定义行/列布局,文本块或打开添加元素窗口。

列控件

元素控制列以在WordPress中编辑您的布局

通过列控制将内容元素添加到列:

  1. 悬停列控件(您要添加元素的位置)
  2. 从下拉菜单中选择添加元素选项
  3. 从“添加元素”窗口中选择一个元素

空的专栏

使用'添加图标'使用Visual Composer网站构建器将元素添加到WordPress页面中的空白列

如果您的列为空且不包含任何内容元素,您将在空列中看到添加元素图标作为占位符。将元素添加到空列,点击里面的添加元素图标,并选择添加元素窗口中的元素。

元素底部控件

易于使用的控件将元素添加到WordPress页面中的现有布局

要在其他内容元素之间插入内容元素,请使用将在元素悬停上显示的底部控件。

在特定元素之后添加元素:

  1. 将鼠标悬停在要插入新元素的元素之后
  2. 点击添加元素图标(加号)打开添加元素窗口
  3. 选择您选择的元素

网格布局:行和列

行和列是Visual Composer网站构建器元素层次结构的核心。您可以使用行和列元素通过行/列容器创建初始结构,并用其他内容元素填充它。

注意:允许将行/列元素插入到另一行/列元素中以创建复杂的布局。

在您的布局中添加一行后,它将自动包含行的整个宽度中的列元素。通过行布局控制可以控制特定行内列的数量和大小。

理解行控制和参数与整个容器相关并且可以同时应用于多个列(在同一行内)非常重要

借助WordPress中的行和列创建布局

示例:您可以访问行元素控件,并将此行中的所有列设置为相等的高度或控制列之间的间距。同时,您可以访问列控件以与精确列进行交互,并且不会影响同一行内的其他列。

与其他内容元素相比,行和列元素具有高级设计选项,可以更好地控制容器样式和效果。

行布局(列数)

您可以通过编辑特定行的行布局来控制行内的列数。

两列放置在一行内的布局

编辑行布局:

  1. 打开行的编辑窗口或在行元素控制下拉列表中选择行布局
  2. 导航到行布局部分
  3. 从预定义选项中选择值或输入自定义值

在Visual Composer网站生成器中使用反向堆栈选项对网格布局进行控制

行布局选项允许添加以下值:

  • 百分比
  • 分数
  • 自动值

默认情况下,你会看到Auto值,这意味着列努力是行宽的100%。如果你将有2个自动值,这意味着这两列将努力适应100% – 结果将是2个相等的列(相同的原则适用于更多的自动值)

注意:无论何时使用行元素控件下拉列中的添加列选项,它都会自动为您的行布局添加新的自动值。

可以设置百分比和分数值,甚至可以将它们混合在一起以创建具有多个列的行,每列的大小都不相同。

例如:如果在行布局中输入70%,30%,则将有一行包含2列,第一列占宽度的70%,第二列占宽度的30%。

注意:可以将行布局的总和设置为高于或低于100%(如果使用分数,则为1)。如果您的总价值低于100%,则会在行容器中留下空白空间。如果您的总价值将高于100%,部分列将堆叠到下一行,但仍将保留在同一行中。

列大小调整

通过实时预览和简单的拖放功能来调整列大小选项

也可以通过Frontend编辑器上的Resize控制机制调整列的大小:

  1. 悬停你选择的行
  2. 在要调整大小的两列之间移动鼠标光标。
  3. 调整大小控制将出现
  4. 点击并按住鼠标
  5. 向左或向右滑动即可调整列的大小
  6. 释放鼠标以使调整大小生效

列堆叠(响应)

Visual Composer网站生成器会自动处理您的移动布局,并在屏幕宽度方便移动时进行列堆叠。

WordPress中的响应式列和内容堆叠

例如:如果在移动的第二列上有一列有2列(50%,50%)的列将在第一列下移动,并且两列都将是全宽以填充行容器。

默认情况下,堆叠从左到右进行,这意味着左侧列将保持在最前面,而右侧列将逐个重新定位。然而,有些情况下您需要执行反向堆栈,这意味着正确的列应该保持在最前面。在这种情况下,您需要在行布局中使用反向堆叠切换,并将其设置为ON。

禁用列堆叠

借助Visual Composer,您可以禁用布局中任何行的列堆叠。如果您觉得您的布局需要移动设备上的多个列,只需选择编辑行布局并通过切换切换禁用行堆叠为ON来禁用此行的列堆叠。

使用Visual Composer在移动设备上禁用列堆叠。

行选项

Visual Composer为您提供了使用行容器属性进行操作的选项,并立即影响其包含的所有列。只需点击几下,您就可以控制行/列宽度,列间距,列和内容位置等等。

行和列宽度

默认情况下,行宽由您的WordPress主题定义并与内容区域对齐。然而,有时候你希望你的行是你的浏览器屏幕的全部宽度(例如,你想要一个带有’Call to Action’区块的特色图片)

将行设置为全宽或装盒

在Row 元素控件中(选择编辑行),可以看到具有以下选项的行宽:

  • 盒装:当行和列对齐WordPress主题的内容部分时的默认值;
  • 拉伸行:行将是你的浏览器屏幕的全部宽度,而列将保持与内容区域对齐(例如,行的背景图像将是全宽,而列中的标题将被装箱) ;
  • 拉伸的行和列:行和行中的所有列将是全宽(例如拉伸的行和列中的英雄部分将是浏览器屏幕的整个宽度)

列间隙

列间距允许您控制一行内的列之间的空间。您可以通过行选项控制一行中所有列之间的间隔。

控制连续的列之间的间隙/空间

列之间的缺口的默认值是30,但您可以插入任何数字来更改它。如果要删除列之间的空格,只需在列间距值中输入0即可。

全高行

全高选项允许您将任何行设置为浏览器屏幕的整个高度。这意味着你的行的最小高度将是屏幕的整个高度,并且如果屏幕的高度有更多内容则会增加。

将行设置为浏览器屏幕的全高和控制列的垂直位置

如果您希望确保只有一行可以在移除干扰时清除干扰(例如英雄图像行中包含“呼叫行动”标题和按钮),则可以使用全高选项。

列位置

一旦将行设置为全高,您将可以选择控制此行内的列垂直位置。默认情况下,所有列都有垂直位置:顶部。但是,有时您可能需要将内容放置在行的中间或底部,或将列设置为浏览器屏幕的整个高度。

总而言之,全高度行有以下列位置可用:

  • 最佳
  • 中间
  • 底部
  • 全高

注意:您的布局的第一行可能会有一个小的高度值,因为它会为WordPress主题的标题部分保留空间。结果是,一旦开始向下滚动,布局的下一行就会出现。

列等高

列等高选项允许您将一行内的所有列设置为相同的高度。高度将通过与一排中最高的列对齐自动计算。要使用等高栏,只需在行选项中启用等高栏切换控件即可。

等高线控制连续的列

例如,您可以使用相等高度的列来填充具有背景色的列,并确保所有列具有相同的高度以具有漂亮的布局设计。

内容在列中的位置

Visual Composer允许您直接从行选项控制特定行的列内的内容垂直位置。有以下可用的内容位置:

  • 顶部(默认)
  • 中间
  • 底部

垂直位置控制列中的内容

注意:建议将此选项与Column等高切换组合,以确保所有列中的所有内容将根据您的偏好进行垂直对齐。

内容元素

内容元素是常规内容块(例如文本块,按钮,图标),可以将其添加到布局以形成实际内容。您可以通过导航栏中的添加元素窗口访问内容元素。

Visual Composer网站构建器免费提供WordPress的可用内容元素列表

内容元素只能插入到列中,并且可以随时通过拖放在布局中重新排列。

在免费的Visual Composer网站生成器中,大约有30个独特的内容元素(不包括行/列进行操作。Premium版本附带Visual Composer Cloud的所有可用元素。这些元素分为以下逻辑组:

  • 基本
  • 媒体
  • 容器(仅包含行/列元素)
  • 社会
  • WordPress的
  • 内容

高级内容元素

高级内容元素是具有复杂结构和可用参数的全面列表的内容元素。这些元素与其他任何基本内容元素没有区别,但可能包含其他元素的全部或部分功能。

高级内容元素,嵌套在WordPress的复杂布局的子元素

注意:内容元素的一个很好的例子是Hero Section和Feature Section。这两个元素都包含Button元素。

高级内容元素提供了其他可用选项之外的额外功能。它允许用相同类型的元素替换内置到高级元素中的基本元素。

示例:您可以用“大纲”按钮替换“英雄”部分中显示的“基本”按钮元素。

元素替换

替换高级元素中的元素:

  1. 打开高级内容元素的编辑窗口
  2. 导航到子元素部分
  3. 选择替换选项并等待出现替代元素
    替换Visual Composer网站构建器的WordPress网站布局元素中的按钮
  4. 选择新元素替换以前的子元素
    将按钮选项替换为列出的所有按钮
  5. 关闭替换菜单窗口

菜单元素

添加一个菜单到你的WordPress网站是创建它的一个重要部分。我们希望尽可能简化您的工作。使用Visual Composer网站构建器时,您可以在多个菜单元素之间进行选择,以提升网站的外观,并使访问者可以轻松浏览网站。简单的,打开Visual Composer Hub并找到要下载的菜单内容元素。

使用Visual Composer将菜单添加到您的WordPress网站

要为您的WordPress网站添加菜单,您需要遵循以下简单步骤:

  1. 在WordPress管理仪表板 – 外观 – 菜单中创建你的菜单(阅读关于如何在WordPress中创建菜单的教程) ;
  2. 在页面中,找到要添加菜单的页面,然后选择’使用Visual Composer编辑’;
  3. 打开  Visual Composer Hub并下载要添加的菜单元素(下载后,菜单元素将出现在Add Element窗口下) ;
  4. 添加菜单元素并在菜单源中选择您在步骤1中创建的菜单。

选择WordPress菜单添加到您的网站

Visual Composer网站生成器提供各种类型的菜单,如三明治或常规文本菜单。我们还定期使用新的内容元素更新Visual Composer Hub。Visual Composer令人敬畏的部分是,您可以在网站上的任何位置添加菜单。例如,您想在网站的右上角添加一个三明治风格菜单 – 只需下载菜单元素并将其放置在列中即可。

WordPress小部件

Visual Composer网站生成器允许在任何地方将WordPress默认和自定义小部件添加到您的布局。

WordPress的默认小部件

WordPress Widget内容元素允许您添加任何WordPress默认小部件。

插入WordPress默认窗口小部件的内容元素

要添加WordPress小部件,请打开添加元素窗口并搜索WordPress小部件元素。将元素添加到布局后,您将看到具有参数的编辑窗口和下拉选择特定窗口小部件。

WordPress Widget会自动检索所有可用的小部件,并将它们设置为下拉菜单中的一个选项。

WordPress自定义小部件

WordPress自定义小工具内容元素允许您添加通过第三方插件或主题添加到WordPress站点的任何自定义小工具。

插入WordPress自定义小部件的内容元素

要添加自定义小部件,请打开“ 添加元素”窗口并搜索WordPress自定义小部件元素。将元素添加到布局后,您将看到具有参数的编辑窗口和下拉列表以选择特定的自定义窗口小部件。

WordPress自定义小部件将自动检索所有可用的自定义小部件(根据WordPress Codex标准编码),并将其设置为下拉菜单中的一个选项。

简码元素

简码元素允许您将任何WordPress简码添加到您的布局。Visual Composer网站生成器将执行并呈现此简码,并将结果显示在  前端编辑器和您的网站访问者中。

在Visual Composer网站生成器中使用shortcode元素将任何简码添加到您的WordPress网站

如何将WordPress简码添加到页面?

要将WordPress简码添加到您的页面,请打开添加元素窗口并搜索简码元素。将元素添加到布局后,您将看到具有参数和选项的编辑窗口,以输入简码。复制/粘贴或使用其属性输入简码。

兼容性元素

WordPress可能是一个复杂的环境,在您的网站上安装了许多不同的插件。我们相信我们知道其中很少,至少是最受欢迎和最好的。这就是Visual Composer团队为您提供定期更新的可从Visual Composer Hub下载的兼容性元素的列表的原因。

这些元素将帮助您添加最受欢迎的插件选项和简码,如Slider Revolution,Ninja Forms,Envira Gallery等等。

Visual Composer与最受欢迎的WordPress插件兼容

我们确信您会在那里发现您最喜欢的插件,并且我们承诺您定期更新新兼容列表。

注意:为了使兼容性插件正常工作,您需要在您的站点上安装相应的第三方插件(例如,使用Slider Revolution元素,确保安装Slider Revolution插件。)

自定义HTML和Javascript

如果您需要将自定义HTML或Javascript代码插入到您的网站布局中,则可以使用Visual Composer网站构建器中提供的Raw HTML或Raw JS元素。

自定义HTML和Javascript的原始HTML和原始JS内容元素

一旦添加了其中一个元素,您将看到一个编辑窗口,您可以选择将代码插入支持标记的文本区域。代码将立即呈现在Visual Composer的前端编辑器中。

自定义HTML和Javascript的标记编辑器

注意:由于安全建议,禁止通过Visual Composer添加PHP代码 – 任何PHP代码都必须直接添加到服务器上的* .php文件中。

元素ID和附加类名称

Visual Composer网站生成器为每个内容元素提供与元素ID和自定义类名称相关的通用参数。

唯一元素ID

为您的内容元素添加唯一的ID并通过锚点直接链接到这些元素

元素ID是可用于Visual Composer网站构建器的所有内容元素的预定义参数。元素ID允许将唯一ID添加到任何内容元素,并从自定义CSS或CSS或JavaScript文件中引用它。另外,您可以在页面URL中将其用作锚点。

注意:每当您向该元素添加ID时,请确保它是您网站上的唯一值。

额外的班级名称

额外类名是预定义参数,可用于Visual Composer网站构建器的所有  内容元素。它允许您将自定义CSS类添加到您的  内容元素,并从本地CSS全局CSS选项或您的CSS或JavaScript文件中引用它。

在用于WordPress的Visual Composer网站生成器中通过额外的类名添加自定义CSS类

设计选项

Visual Composer网站构建器最强大的功能之一是元素设计选项。这是Visual Composer网站构建器所有元素可用的一组参数。
“设计选项”允许您通过应用最常见的样式属性和效果来添加或修改内容元素的现有样式。

设计选项通过控制边距,填充,边框,边框半径,背景等等进行控制

在Visual Composer网站制作工具中有两种类型的设计选项:

  • 容器设计选项
  • 设计选项

常规设计选项可用于所有内容元素,并包括边距,边框,填充和边框半径的洋葱控件。另外,常规的设计选项可以控制背景和CSS动画。

容器设计选项包含常规设计选项可用的所有选项,以及其他背景样式属性,如图像幻灯片,视频背景,css渐变叠加和视差效果。容器设计选项可用于行和列元素。

要访问设计选项,请选择编辑内容元素,然后在编辑窗口中导航至设计选项部分。另一种方法是直接从元素控件中选择设计选项。

注:在大多数情况下,设计选项适用于元素的整体部分,但很少有选项也可能影响元素的内部部分。

进一步阅读

模板

模板已准备好使用由内容元素组成并具有预定义结构的块。要访问模板选项,请单击位于导航栏中的模板图标。

在Visual Composer网站生成器中,有两种类型的模板:

  • 预定义的模板
  • 用户模板

预定义的模板

预定义模板是在插件激活时从Visual Composer Cloud下载的高级模板。这些模板可以从“ 空白页面向导”作为起点或通过“模板”窗口获得。预定义的模板旨在涵盖具有不同目的的网站的基础知识,并允许内容替换。

Visual Composer网站构建器的模板窗口中WordPress的高级模板列表

要在添加之前查看预定义模板,请将鼠标悬停在模板缩略图上以触发自动预览。

将页面模板添加到您的WordPress网站

要将模板添加到布局,请将鼠标悬停在模板缩略图上,然后单击添加(加号)图标。

注意:无法从Visual Composer网站构建器中删除或修改预定义的模板。

用户模板

用户模板选项允许您将当前的页面内容保存为模板。所有用户模板都与“预定义模板” (带有过滤器选项)一起位于“模板”窗口下。

可以使用模板快速保存您的布局,并将其重新用于其他页面,发布或自定义帖子类型。

将当前内容保存为模板:

  1. 打开模板窗口
  2. 命名您的模板
    将您的WordPress布局保存为模板
  3. 点击保存模板
  4. 保存成功后,您的新模板将显示在模板列表中。
    WordPress中的页面,帖子和自定义帖子类型的用户模板

注意:用户模板会根据模板标题的第一个字母自动生成缩略图。

要添加用户模板,请将鼠标悬停在模板缩略图上,然后选择添加(加号)图标。该模板将自动添加到您的布局。

将由用户创建的模板添加到您的WordPress页面

要从用户模板中删除用户模板,请将鼠标悬停在模板缩略图上,然后选择删除图标。

注意: Visual Composer网站生成器的免费版本没有全局模板。更新模板不会更改使用该模板的页面的内容。

TinyMCE编辑器

TinyMCE是WordPress 使用的内容编辑器(在Visual Composer网站生成器中,我们依靠此默认编辑器)。它允许您在网站上编写,编辑和格式化文本。这是一种使用已经熟悉的工具管理所有文本的简单方法。

无论何时添加包含文本段落的Visual Composer 的内容元素,您都可以选择使用TinyMCE编辑器。

撤消和重做

“撤消和重做”选项允许您快速恢复在Visual Composer网站构建器中进行当前内容编辑期间所做的更改。

使用Visual Composer网站构建器,撤销和重做功能可以快速恢复WordPress最近的内容更改

要访问“撤消”或“重做”,请从导航栏中选择“撤消”或“重做”图标。

注意:如果没有可用的撤销或重做操作,相应的图标将显示为非活动状态。

自定义CSS和Javascript

Visual Composer网站生成器允许您直接从编辑器添加额外的CSS或Javascript代码并以两种方式应用它:

  • 本地
  • 全球

要添加本地或全局CSS或Javascript,请导航到导航栏中的 “设置”选项,然后选择本地或全局添加的CSS或Javascript。添加完代码后,请确保保存更改。

注意:完整更改将在您保存设置和发布/保存页面后应用。

通过本地或全球CSS设置将自定义CSS添加到您的WordPress网站

本地CSS和Javascript

本地选项允许将自定义CSS和Javascript添加到您当前编辑的特定页面。如果您希望代码只影响特定页面并避免将其加载到您的WordPress网站的任何其他页面上,则使用本地代码很方便。

全球CSS和Javascript

全局选项允许向整个网站添加自定义CSS和Javascript,这意味着它将加载到WordPress网站的每个页面上,并可能影响样式。

请参阅特定元素

为了引用布局中的特定元素,请确保通过元素编辑窗口(或元素组)额外类名添加到此元素。之后,通过点(例如.myclass)引用您的自定义CSS类。

页面布局和选项

你的WordPress主题通常有一个默认的页眉,页脚和侧栏布局定义。不过,有些情况下需要空白页来创建布局。例如,您可以为您的营销活动创建一个简单的登录页面。或者你想创建自定义页眉,页脚和侧边栏。

Visual Composer网站生成器可让您将任何页面,文章或自定义文章类型转换为空白布局,并通过Visual Composer设置调整选项。

使用Visual Composer网站构建器选择/更改页面布局

要选择/更改页面布局,您需要完成以下简单步骤:

  1. 创建一个新页面或’编辑’现有页面;
  2. 在Visual Composer设置中点击您选择的布局图标;
  3. 可选:指定页眉,页脚或侧栏模板;

注意:更改将立即发生在您的前端编辑器中,要应用更改,请确保单击保存/发布。

页面标题

每一页,文章或自定义文章类型都有一个标题,对吧?现在,为了改变它,你不需要退出Visual Composer。只需打开Visual Composer页面设置并输入您的页面标题。

注意:如果您正在使用主题布局并希望摆脱页面上的标题显示,请单击切换选项以隐藏页面标题。

类似Instagram的过滤器

你喜欢Instagram吗?这是一个简单的方法,使您的照片看起来更好用真棒过滤器的帮助。我们希望你对你的网站也一样。借助Visual Composer,您可以通过应用漂亮的预定义过滤器来改进您的任何内容图像。而且,您可以通过这种方式确保您的所有图片具有相同的风格,以使您的网站看起来更加一致。

使用Visual Composer为您的网站添加类似Instagram的过滤器

在Visual Composer中添加Instagram类似的过滤器非常简单:

  1. 只需添加包含一个或多个图像的元素(单个图像或图像库) ;
  2. 从Media Libray中选择图像(或上传新图像) ;
  3. 切换切换启用类似Instagram的滤镜到ON以访问滤镜菜单(切换将在元素编辑窗口的图像选择器下可用) ;
  4. 使用水平滚动条浏览可用过滤器并选择您想要的过滤器。

恭喜!你刚刚让你的网站更加棒。

提供图像过滤选项的几个元素是单图,图像库和特征部分。

注意:类似Instagram的滤镜可用于未放置为背景图像的内容图像(例如,“设计选项”中的背景图像没有可用的滤镜选项。)

最近的颜色

您的网站上有最常用的颜色。这些颜色可以来自您的品牌书或其他任何地方。无论来源是什么,您都不希望在计算机旁边保留HEX颜色代码,并且每次都复制/粘贴它们。

Visual Composer会记住您最近的颜色选择并将它们存储在拾色器中。

Visual Composer会记住您在网站上最常用的颜色,并将它们存储在颜色选择器的最近调色板中。颜色选择器的第一行将是空的,并自动填充您选择的颜色,以便您可以轻松地重复使用它们。现在你心爱的颜色只需点击一下即可。

键盘快捷键

对于专业网站开发人员和设计师,Visual Composer网站制作工具提供键盘快捷键,以便您可以更快地工作。通过一个简单的快捷方式,您可以打开“添加元素窗口”或“撤消”最近的更改,而无需鼠标。此外,根据当前状态,很少的快捷方式(如“打开树视图”)将打开或关闭选项。

可用快捷方式列表
一个 打开添加元素
大号 打开模板
Ť 打开树视图
Cmd / Ctrl + S 保存/发布
Cmd / Ctrl + Shift + P 预习
Cmd / Ctrl + Z 解开
Cmd / Ctrl + Shift + Z 重做
退出 退出键。关闭活动窗口

响应式设计

Visual Composer网站制作工具负责您的网站响应式设计。这意味着编辑器的每个元素都能够响应并适应任何设备大小。行布局和  设计选项中提供了响应式设计的额外控件  。

注意:某些元素可能在元素编辑窗口下具有更多响应式设计控件。

响应式视图

Visual Composer网站生成器允许您立即检查最流行设备类型的布局:

  • 桌面
  • 片剂景观
  • 片剂的肖像
  • 移动景观
  • 移动肖像

为了访问响应式视图,请导航到导航栏中的响应控件,并选择要为您的布局激活的设备类型。

在WordPress中创建响应式网站,并即时查看预览以调整响应式设置

默认情况下,自动响应类型被激活,这意味着您的浏览器大小会影响响应。

注意:  响应式视图选项仅在前端编辑器中可用。

保存,发布,查看,预览

Visual Composer网站生成器提供所有用于保存,发布,查看和预览内容的默认选项。所有这些选项都可以使用默认的WordPress方式并可用:

  • 在前端编辑器中:在导航栏的最底部(或右侧)
    保存,发布,查看和预览选项在Visual Composer网站生成器前端编辑器为WordPress
  • 在WordPress管理区域,只需点击本地发布按钮即可。
    在WordPress管理面板中发布,预览,保存草稿

注意:请务必在离开Visual Composer网站构建器之前确保发布(保存)您的内容。

插件取消激活

借助Visual Composer网站构建器,您将永远拥有您的内容。您可以不用担心停用Visual Composer网站构建器。但是,为了确保您的内容仍能正确格式化,您需要采取一些早期步骤。

停用插件:

  1. 从WordPress管理控制台导航到插件部分。
  2. 在您的插件列表中,选择Visual Composer网站构建器旁边的取消激活。
  3. 按照将出现的通知中的链接,通知您安装CoSSa (A内容样式救主)插件。
  4. 在新的浏览器选项卡中打开CoSSa插件的链接。
  5. 确认停用Visual Composer网站构建器。
  6. 下载CoSSa插件并将其安装到您的WordPress网站上。
  7. 激活CoSSa插件以进行正确的内容格式化。

安全的方式来停用WordPress插件

注意:如果没有Visual Composer网站构建器,WordPress将不知道哪些CSS文件必须应用于您的内容以确保正确的内容格式。CoSSa插件会通知WordPress有关必要的文件,以保持您的内容格式化。确保在停用Visual Composer网站构建器后始终保持CoSSa插件的激活状态。

更新于 2018年12月4日

帮到你了吗?

相关文章