股动脉损伤

注册

 

发新话题 回复该主题

Avada页面编辑器AvadaBuild [复制链接]

1#
雷安萍在哪里出诊 http://www.zherpaint.com/ylbj/zqys/m/2342.html

Avada主题的一个特色之处便是带有自己的页面编辑器,这个插件叫做AvadaBuilder,它是由ThemeFusion公司设计开发的。

AvadaBuilder是确保Avada主题能够正常运作必需要安装激活的两个插件之一(另一个是AvadaCore),而且需要注意的是,在安装AvadaBuilder插件之前,需要先安装AvadaCore插件。

通过这个易于使用且功能齐全的页面编辑器,创建网页变得更加简单,无需具备专业代码知识也可设计复杂的网页布局,创建出高端大气的网页。

后端线框页面编辑器AvadaBuilder

AvadaBuilder在之前的主题的版本中叫做FusionBuilder,是应用在后端接口的线框页面编辑器(back-endwireframeeditor)。

另外,需要注意的是,FusionBuilder从Avada7.0版本开始,已重新更名为AvadaBuilder。

后端线框页面编辑器AvadaBuilder顶部导航工具栏介绍:

这个是固定跟随的导航菜单栏,当你向下滑动页面的时候,这个菜单栏会始终固定在页面编辑器操作界面的顶部位置,以方便你可以随时访问菜单栏上的工具,这些有用的工具包含众多设置选项,可以帮助有效编辑和管理页面。

从左至右,菜单栏上的工具依次是:

Builder:页面编辑器的工作区域。

Library:访问存储库,可快速调用存储库中已保存的模板内容等,部署应用到当前页面。

ToggleAllContainers:将当前页面上的所有容器(Container)进行折叠或展开。

CustomCSS:为当前页面插入自定义的CSS样式,对当前页面进行更灵活的个性化设计。

Savepagelayout:将当前页面布局保存为模板存储到存储库Lirary中。

Deletepagelayout:删除当前页面布局。

History:显示最近25个历史修改记录,可以选择退回到做出相应修改动作前的页面,从这里重新开始进行页面设计。

传统的后端页面编辑器有一个特点,就是可以通过拖拽(drag-and-drop)的方式来自由调整页面模块组件的位置,快速设计出令你满意的页面布局。

而且,为了更好的编辑和管理当前页面内容,还可以选择为每个容器都自定义一个特定的名称,

前端实时页面编辑器AvadaLive

从Avada6.0版本开始,在原来页面编辑器的基础上拓展了一个新功能,增加了一个前端的实时页面编辑器(front-endliveeditor),叫做FusionBuilderLive,做为后端页面编辑器的一个补充,使得网页设计更加直观,简易和快速。

另外,需要注意的是,FusionBuilderLive从Avada7.0版本开始,已重新更名为AvadaLive。

前端实时页面编辑器AvadaLive顶部导航工具栏介绍:

从左至右,菜单栏上的工具依次是:

AvadaBuilderIcon:AvadaBuilder的图标,当鼠标移动到其上面时会显示当前页面编辑器的版本。

ToggleSidebar:打开或关闭左侧侧边栏。

Library:访问存储库,可快速调用存储库中已保存的模板内容等,部署应用到当前页面。

History:显示最近25个历史修改记录,可以选择退回到做出相应修改动作前的页面,从这里重新开始进行页面设计。

Preferences:实时页面编辑器AvadaLive的一些首选项设置。

AddNew:点击可选择添加一个新的Post,Page,Portfolio,FAQ或者AvadaForm。

ClearLayout:删除当前页面布局。

Support:提供了联系支持的链接,官方视频/文档教程链接以及操作AvadaLive的一些常用快捷键。

Responsive:响应式编辑模式,可预览在不同大小设备显示下的页面效果且切换到在当前设备模型下进行页面设计编辑。

ToggleWireframe:将AvadaLive中编辑器界面切换到AvadaBuilder,使用线框组件工具进行页面编辑。

Preview:关闭左侧边栏面板以及顶部导航栏中的左侧工具栏,然后预览当前页面效果。

Publish/Draft:发布当前页面或将当前页面存为草稿。

Save:保存当前页面所有内容。

Exit:暂停启用并退出AvadaLive页面编辑器,有3个选项可选,直接在当前页面退出AvadaLIve但仍旧停留在当前页面,退出并跳转到后端线框页面编辑器AvadaBuilder,退出并跳转到Avada主题后台仪表盘。

启用AvadaLive的时候是直接在前端浏览器界面可视化编辑设计页面内容,所作的任何更改都会立即更新并作用于页面,所见即所得的工作方式可实时预览页面效果。同时,用AvadaLive创建编辑网页的时候,可以在创建的当前页面中直接访问AvadaGlobalOptions以及AvadaPageOptions并对页面效果进行相应的设置,这可以大大加快工作流程,提高工作效率。

AvadaBuilderVSAvadaLive

总的来说,在最新的Avada主题的AvadaBuilder页面编辑器插件中,共提供有前端和后端两个不同的应用接口,分别是AvadaBuilder(支持后端模块化页面编辑)和AvadaLive(支持前端可视化页面编辑),可根据个人实际需求自由切换使用。AvadaBuilder和AvadaLive除了在工作界面和工作流程上存在一些细微差异之外,这两个版本的页面编辑器本质上是一样的,使用的都是相同的结构和控件(容器-列-元素)来创建或编辑页面,这两个编辑器创建页面生成的内容相同,代码一致,因而它们之间具有完全的兼容性。你甚至可以在AvadaLive中将编辑器界面视图切换到AvadaBuilder,使用线框组件工具进行页面编辑,此时它本质上就是在前端AvadaLive工作界面中的后端AvadaBuilder页面编辑器。

如何访问Avada页面编辑器?

首先,这里有一个地方需要注意一下的,那就是在创建一个新的Page或者Post的时候,AvadaBuilder默认是没有激活启用的,但可以通过设置来全局启用AvadaBuilder为默认的页面编辑器。

方法如下:在后台Avada仪表盘的顶部菜单栏中找到OptionsBuilderOptionsAvadaBuilderAutoActivation,点击On启用。

启用后,以后每当你在你编辑页面的时候,页面编辑器AvadaBuilder就会自动加载启用。但如果不设置则wordpress后台默认是启用wordpress自带的页面编辑器的。

最后,别忘记保存设置

好,那么现在就来看一下如何能够找到这个页面编辑器AvadaBuilder:

有几种方法都可以访问AvadaBuilder,具体取决于你当前所在的位置。

方式一:如果你在Wordpress默认的编辑器中打开了一个页面page或者帖子post的时候,如下所示:

此时,通过点击顶部的这两个按钮,都可以访问启用Avada后端页面编辑器Avadabuilder或者Avada前端页面编辑器AvadaLive,而且当前是没有设置默认的页面编辑器是AvadaBuilder的,如果设置了全局启用AvadaBuilder为默认的编辑器的话之后,则在新建或者编辑页面的时候,看到的页面会是这样子的:

此时页面默认启用的就是AvadaBuilder而不是Wordpress默认的编辑器了,当然你也可以点击按钮DefultEditor,切换回来。

方式二:在登录到Wordpress后台的状态下,选择一个page页面或者post在前端浏览器中打开,如下所示:

此时,在顶部导航条中可找到EditPage和EditLive这两个菜单选项卡,其中,

点击EditPage则当前页面就会以编辑状态跳转到一个新页面中打开并启用Avada后端编辑器AvadaBuilder(当然,这里的前提是你已经设置AvadaBuilder为默认的页面编辑器了,否则新页面中打开的就是Wordpress默认的页面编辑器);点击EditLive则当前页面就会以编辑状态跳转到一个新页面中打开并启用Avada前端编辑器AvadaLive。

方式三:如果你此时在Wordpress后台的page或者post版块的位置,如下所示:

鼠标移动到page标题上面的时候,下方就会显示一个操作菜单列表,此时,点击Edit,当前页面就会以编辑状态跳转打开并启用Avada后端编辑器AvadaBuilder(当然,这里的前提依然是你已经设置AvadaBuilder为默认的页面编辑器了);点击AvadaLive则当前页面就会以编辑状态跳转打开并启用Avada前端编辑器AvadaLive。

方式四:在Wordpress后台的pages或者post版块的位置,如下所示,在顶部的Page右侧的AddNew菜单栏中,在下拉菜单列表,选择创建一个新页面,选择AddNew并点击右侧下拉提示框按钮,如下所示:

此时,便可以在下拉框中选择启用Avada后端页面编辑器或者是启用Avada前端页面编辑器来创建新页面了,而第三个选择则是Wordpress后台默认的页面编辑器古腾堡。

AvadaBuilder启动页面StarterPage

无论什么时候,当用AvadaBuilder页面编辑器创建新页面或者编辑一个空页面的时候,首先会看到starterpage,这个就是页面编辑器的启动页面,叫做StarterPage。无论是使用AvadaBuilder或者是AvadaLive,都会从Starterpage开始页面的创建及编辑。这个是从Avada5.0版本开始新增加的一个功能,启动页面starterpage中主要包含了一些有用的向导信息和链接可以帮助用户更快更方便的开始页面的创作。

这是后端线框页面编辑器AvadaBuilder的starterpage启动页面,其中:

+Container按钮:为当前页面添加线框组件Container(容器)。

+PrebuiltPage:直接从存储库中导入演示站点的单页面或者已保存的页面模板。

IconControlDescriptions:在使用AvadaBuilder页面编辑器过程中经常会遇到的一些工具图标的简要描述。例如导航栏上常用的一些工具图标也会在这里有相应的对应简短说明

GettingStartedVideo:有关AvadaBuilder页面编辑器的官方视频教程。

这是前端实时页面编辑器AvadaLive的starterpage启动页面,其中:

+Container按钮:为当前页面添加线框组件Container(容器)。

+PrebuiltPage:直接从存储库中导入演示站点的单页面或者已保存的页面模板。

WatchOurGetStartedVideo:有关AvadaBuilder页面编辑器的官方视频教程。

AvadaBuilderDocs:有关AvadaBuilder页面编辑器的官方帮助文档。

可以看到,前端页面编辑器AvadaLive的启动页面跟后端页面编辑器AvadaBuilder的启动页面几乎是相同的。不同的地方就在于,当你在AvadaLive中创建一个新页面或者编辑一个空页面的时候,侧边栏中会默认打开PageOptions的PageSettings设置选项卡,便于可以快速的为当前页面设置标题,选择模板,添加特色图片等。

AvadaBuilder页面编辑器新建页面工作流程

Avada页面编辑器AvadaBuilder的核心是由容器-列-元素(container-column-element)这三个组件构成的页面设计系统,无论是使用传统的后端线框页面编辑器AvadaBuilder,或者是使用前端实时页面编辑器AvadaLive,新建页面的工作流程都是一样的:先往页面添加容器,接着往容器中添加列,最后往列中添加元素。

首先,添加容器,

在这里,可以选择添加一个空容器或者添加一个已经包含了列的容器,一般情况下都是选择往页面中添加已经设计好了的结构恰当的包含了一列或多列的容器。

添加容器之后,接下来便是往容器中添加列了,但如果在添加容器的时候,选择的那些已经包含了列的容器的话,这里就直接可以往列中添加元素了,

点击+Element按钮,将会弹出Elements窗口,显示所有可添加到列中的元素(例如图片/视频/表格等),目前AvadaBuilder页面编辑器中共有80多个可用的元素,且这些元素都会不定时的更新优化以及为来还会继续添加新元素。

另外,可单独选中容器Container,列Column或者元素Element,并点击右键,此时通过单击右键的弹出菜单框中可快速访问一些常用功能操作指令(例如编辑/复制/移动/保存等)以及存储库Library。

当在当前页面中添加了具体的容器-列-元素之外,当前页面就已经具有了一定的内容了,此时可以通过预览来查看下具体的页面效果,例如:

这是在新建的页面添加一个表格的效果预览,当然,你可以继续在当前页面中继续添加容器,列和元素,

如上图所示,你可以在当前页面中添加任意多的容器Container,列Column以及元素Element,直至设计出令你满意的页面。

以上便是关于AvadaBuilder页面编辑器的整体情况概览,如果你也在使用Avada主题的话,那么衷心希望本文能对你有所帮助。

分享 转发
TOP
发新话题 回复该主题