更新日期: 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,圆圈填充区域的百 [...]