更新日期: 2017-09-25
我从Avada的3.4版本开始用它来建站和做建站教程，到目前5.2.2版本，已经发生了很大的变化。Avada在3.6版本之前，还是通过shortcode添加代码的方式来去做布局，从3.6之后，才有了后来的fusion builder，可以进行可视化的编辑操作。一直以来，这个主题都是Themeforest上WP主题的NO.1。
关于Avada能实现什么样的效果，主要参考官方的Demo: https://avada.theme-fusion.com/
Avada主题建站的相关内容，主要以 www.useongroup.com 这个网站重新建设为例来介绍相关功能和实现方法。
现在大家能看到的是新版本的，老版本的网站可以访问 olduseon.yizhiyong.com 查看。
基于一些历史原因，老版本网站存在一些弊端，有必要考虑重新改版：
- 网站没有管理后台，加新闻和展会信息，需要直接改PHP文件，不太方便
- 老网站在移动端/平板上显示不佳，Logo都展示不完整，未做自适应的配置
- 部分图片过大，影响加载速度
- 网站自2014年改版也已有3年多，需要适当的换个新面貌
当然，也有不少好的地方在新版中要继续保持：
- 模块方面的设置
- 文案都是找老外重新rewrite过
- 因为没有使用MySQL，网站打开速度还算不错
所以我们决定使用Wordpress+Avada主题来重新进行一次改版，基于原来的版式设计做些调整和优化：
- 适配移动端，不是简单的自动适配，而是针对移动或PC端，可以展示不同的内容；
- 尽量使用合适的图片尺寸，确保网站打开速度够快
- 增加一些内容，比如Videos、Testimonial页面
在整个网站建设的过程中，会涵盖到很多内容，每一部分我们都会有单独的文章内容进行介绍，主要可能会包含以下内容：
- 如何布局内容
- 如何使用Avada的Elements
- 如何通过Theme Options来做一些通用设置
- 如何更好的适配移动设备
- 如何在改版过程中做好301重定向
- 如何通过自定义CSS来调整一些样式
我尽量介绍详细，以便大家有所收获。但是毕竟每个人的站都会是相对个性化的，通过一个案例不足以涵盖建站的所有使用技巧和问题。
希望通过接下来一些列的文章，可以把Avada介绍的足够详尽，随着主题的更新，也会逐渐修改文章内容以便能适合最新的更新。
了解网站页面布局结构
更新日期: 2017-10-09 在具体了解如何使用Avada之前，我们还需要对网页的布局结构做一些了解，对后面理解和使用Avada的Theme Options来做设置会有帮助。 网站通常会包含很多个页面，比如网站首页、产品分类页、产品详情页、关于我们、联系我们、证书等等一系列页面，每一 [...]
Theme Options简介
更新日期: 2017-10-14 Avada强大在于它提供的设置选项相当多，可以不通过代码就能自定义的功能也就相对更多了。 在5.2.2版本中，Theme Options中一级菜单就有25项，如下图所示： 下面我们来做些介绍，看看每项里面都有些什么功能，哪些常用，哪些可以不用太管它： [...]
设置Header部分
更新日期: 2017-10-16 在Header区域，主要需要设置的地方包括： Header布局 Logo Menu（Main Menu、Top Navigation） 进行设置的地方主要是： Theme Options中的Header、Menu、Logo以及Appearance中的Men [...]
设置Page Title Bar部分
更新日期: 2017-10-17 关于Page Title Bar的样式调整设置，参考《Theme Options简介中Page Title Bar部分》。 在Theme Options中的设置项中如果有“This option has a dependency for a corres [...]
设置Sidebar部分
更新日期: 2017-10-19 我们通常会在侧边栏中放置 分类导航、联系信息/表单、资料下载、Call to Action 等信息。 在规划内容的时候，我们可能会希望做到针对不同的一些页面，他们的侧边栏的内容/位置可能都不一样。 以USEON网站为例，我们对不同类型的侧边栏做了区分： [...]
设置Footer部分
更新日期: 2017-10-20 在Avada主题中，Footer中的内容也是在Widgets中进行添加修改，但是和Sidebar有些不一样的是，不需要自己去 Add New Widget Section。直接就能在页面中找到 Footer Widget 1 / Footer Widge [...]
建立产品详情/分类页
更新日期: 2017-10-20 在Wordrepss默认主题情况下，有Post和Page两种类型来制作不同需求的页面，而在使用了大多数付费主题之后，通常会新增了一个Portfolio类型的可以用来制作页面。 在Post、Page和Portfolio三种不同的页面类型中，建立产品页、分类 [...]
Text Block
更新日期: 2017-10-26 编辑界面 功能 添加文字 调整文字的格式、添加链接等 添加图片 给图片添加链接 插入Fusion Builder Elements 和Wordpress默认的编辑器功能一样，可用性相当高。 [...]
Image Frame
更新日期: 2017-10-26 编辑界面 Image Frame用于上传并设置图片格式、效果。 设置选项 General Image，上传图片 Frame Style Type，可以设置图片外框的样式（Glow / Drop Shadow / Bottom Shadow） [...]
Recent Posts
更新日期: 2017-10-29 编辑界面 Recent Posts用来调用Post文章，可以在做新闻汇总页面的时候用到，里面的设置选项和Portfolio有些类似。 设置选项 General Layout，有3种布局方式 Standard/Thumbnails on Sid [...]
Image Carousel
更新日期: 2017-11-01 Image Carousel，旋转木马，跑马灯。比如我们需要循环滚动的展示一些客户案例、循环滚动的展示证书之类的图片，可以参考类似下面动图所示的效果： 编辑界面 设置选项 Add / Edit Items，用于新增或编辑Image，在新 [...]
Tagline Box
更新日期: 2017-10-30 只用Button做Call to Action觉得太过苍白无力？ 试试Tagline Box，一个可以带上两句“广告语”和一个Button的组合样式。 编辑界面 设置选项 General Background Color，设置这个bo [...]
Testimonials
更新日期: 2017-11-01 用来展示客户评价的一种方式。 编辑界面 设置选项 General Add / Edit Items，用于新增客户评价信息 Name，姓名 Avatar，头像，可以自己上传照片 Company，公司 Link，添加客户的链接 Testi [...]
Counter Circles
更新日期: 2017-11-01 用来实现这种效果，圈的颜色、大小、圈内文字/icon等都是可设置调整的。 编辑界面 设置选项 Add / Edit Items，可以新增和编辑相应的元素，会有如下设置选项： Filled Area Percentage，圆圈填充区域的百 [...]
