Avada主题建站

>>Avada主题
Avada主题2018-01-30T21:29:22+00:00

更新日期: 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介绍的足够详尽,随着主题的更新,也会逐渐修改文章内容以便能适合最新的更新。

2018-01-30T20:10:14+00:00

了解网站页面布局结构

更新日期: 2017-10-09 在具体了解如何使用Avada之前,我们还需要对网页的布局结构做一些了解,对后面理解和使用Avada的Theme Options来做设置会有帮助。 网站通常会包含很多个页面,比如网站首页、产品分类页、产品详情页、关于我们、联系我们、证书等等一系列页面,每一 [...]

2018-05-27T08:38:19+00:00

Theme Options简介

更新日期: 2017-10-14 Avada强大在于它提供的设置选项相当多,可以不通过代码就能自定义的功能也就相对更多了。 在5.2.2版本中,Theme Options中一级菜单就有25项,如下图所示: 下面我们来做些介绍,看看每项里面都有些什么功能,哪些常用,哪些可以不用太管它: [...]

2018-01-30T20:11:30+00:00

创建和设置Menu

更新日期: 2017-10-16 在创建Menu之前,需要已经新建了Page、Portfolio之类的页面。通常,我比较建议在去完善每一个具体页面内容之前,先把我们这网站上准备要做的有哪些页面都先规划好,先把这些页面都新建好放那。主体的框架结构都搭好之后,补充内容就是慢慢装修的过程了。比如 [...]

2018-01-30T20:11:37+00:00

设置Header部分

更新日期: 2017-10-16 在Header区域,主要需要设置的地方包括: Header布局 Logo Menu(Main Menu、Top Navigation) 进行设置的地方主要是: Theme Options中的Header、Menu、Logo以及Appearance中的Men [...]

2018-01-30T20:11:43+00:00

设置Page Title Bar部分

更新日期: 2017-10-17 关于Page Title Bar的样式调整设置,参考《Theme Options简介中Page Title Bar部分》。 在Theme Options中的设置项中如果有“This option has a dependency for a corres [...]

2018-01-30T20:11:48+00:00

设置Sidebar部分

更新日期: 2017-10-19 我们通常会在侧边栏中放置 分类导航、联系信息/表单、资料下载、Call to Action 等信息。 在规划内容的时候,我们可能会希望做到针对不同的一些页面,他们的侧边栏的内容/位置可能都不一样。 以USEON网站为例,我们对不同类型的侧边栏做了区分: [...]

2018-01-30T20:11:55+00:00

设置Footer部分

更新日期: 2017-10-20 在Avada主题中,Footer中的内容也是在Widgets中进行添加修改,但是和Sidebar有些不一样的是,不需要自己去 Add New Widget Section。直接就能在页面中找到 Footer Widget 1 / Footer Widge [...]

2018-01-30T20:12:02+00:00

建立产品详情/分类页

更新日期: 2017-10-20 在Wordrepss默认主题情况下,有Post和Page两种类型来制作不同需求的页面,而在使用了大多数付费主题之后,通常会新增了一个Portfolio类型的可以用来制作页面。 在Post、Page和Portfolio三种不同的页面类型中,建立产品页、分类 [...]

2018-01-30T20:12:08+00:00

设置移动端适配

更新日期: 2017-10-10 在默认设置情况下,Avada主题本身也是可以根据设备情况做到一定程度的自适应。比如: 有Sidebar的会自动的放到页面的最下面的位置,不管Sidebar是左侧还是右侧位置的; Footer不管是3栏还是4栏,会依次的把这些栏展示在页面的最下面的位置; [...]

2018-01-30T20:13:08+00:00

Text Block

更新日期: 2017-10-26 编辑界面 功能 添加文字 调整文字的格式、添加链接等 添加图片 给图片添加链接 插入Fusion Builder Elements 和Wordpress默认的编辑器功能一样,可用性相当高。 [...]

2018-01-30T20:13:15+00:00

Title

更新日期: 2017-10-26 编辑界面 这是一个在官方Demo中没有演示可参考的Element。 设置选项 General Title,填写标题内容,虽然编辑界面和Text Block类似,不过通常只需要在这里输入文字即可; Margin,标题上、下的间距,输入的数字需要 [...]

2018-01-30T20:13:21+00:00

Image Frame

更新日期: 2017-10-26 编辑界面 Image Frame用于上传并设置图片格式、效果。 设置选项 General Image,上传图片 Frame Style Type,可以设置图片外框的样式(Glow / Drop Shadow / Bottom Shadow) [...]

2018-01-30T20:13:26+00:00

Button

更新日期: 2017-10-26 编辑界面 Button,按钮,用于设置Call to Action。 设置选项 General Button URL,设置点击按钮后跳转到的链接Button Text,按钮上显示的文字内容Button Title Attribute,给butt [...]

2018-01-30T20:13:58+00:00

Portfolio

更新日期: 2017-10-27 编辑界面 Portfolio Element,主要可以用来创建产品分类页的时候,在页面中调用创建好的产品详情信息。 设置选项 General 选择不同的Layout之后,对应的选项也会有所不同: 在Casourel(跑马灯)的这种布局下,适 [...]

2018-01-30T20:14:04+00:00

Recent Posts

更新日期: 2017-10-29 编辑界面 Recent Posts用来调用Post文章,可以在做新闻汇总页面的时候用到,里面的设置选项和Portfolio有些类似。 设置选项 General Layout,有3种布局方式 Standard/Thumbnails on Sid [...]

2018-01-30T20:25:18+00:00

Modal

更新日期: 2017-10-30 编辑界面 和Button配合使用,可用来做弹出窗口的功能。 设置选项 Modal的设置很简单,也不像其他的有Animation设置。 Name Of Modal,弹出窗口的“名字”,在Button中会需要填入这个名称,才能把Button和Mod [...]

2018-01-30T20:25:39+00:00

Youtube

更新日期: 2017-10-30 Youtube Element,用于将Youtube上的视频嵌入到网站中来。在给外贸网站添加视频的时候,务必注意不要像上传图片一样直接把视频上传到自己服务器上,而应该把视频托管到第三方的视频平台中,再嵌入到网站中,这样视频的加载和播放速度才不会受我们服务 [...]

2018-01-30T20:25:46+00:00

Tabs

更新日期: 2017-10-30 Tabs可以用于在一个页面中做切换,大家在JD/TB购物的时候,商品详情页中经常能看到这种效果,商品介绍、规格与包装、售后保障 等内容,可以切换看,但其实内容是在一个页面中,并没有跳转到另外的页面。 编辑界面 设置选项 Add / Ed [...]

2018-01-30T20:25:53+00:00

Image Carousel

更新日期: 2017-11-01 Image Carousel,旋转木马,跑马灯。比如我们需要循环滚动的展示一些客户案例、循环滚动的展示证书之类的图片,可以参考类似下面动图所示的效果: 编辑界面 设置选项 Add / Edit Items,用于新增或编辑Image,在新 [...]

2018-01-30T20:26:01+00:00

Tagline Box

更新日期: 2017-10-30 只用Button做Call to Action觉得太过苍白无力? 试试Tagline Box,一个可以带上两句“广告语”和一个Button的组合样式。 编辑界面 设置选项 General Background Color,设置这个bo [...]

2018-01-30T20:26:07+00:00

Testimonials

更新日期: 2017-11-01 用来展示客户评价的一种方式。 编辑界面 设置选项 General Add / Edit Items,用于新增客户评价信息 Name,姓名 Avatar,头像,可以自己上传照片 Company,公司 Link,添加客户的链接 Testi [...]

2018-01-30T20:27:50+00:00

Counter Circles

更新日期: 2017-11-01 用来实现这种效果,圈的颜色、大小、圈内文字/icon等都是可设置调整的。 编辑界面 设置选项 Add / Edit Items,可以新增和编辑相应的元素,会有如下设置选项: Filled Area Percentage,圆圈填充区域的百 [...]

2018-01-30T20:27:55+00:00

Separator

更新日期: 2017-11-01 在内容和内容之间做些区分,可能要用到这个Separator Element,比如下图所示: 编辑界面 设置选项 General Style,分割线的样式,单横线(Single Border)、双横线(Double Border)这两种 [...]