视差背景

如何用WordPress和Avada做HTML5网站

2017年10月7日
如何用WordPress和RT-Theme18做外贸站
2017年10月6日
35个WordPress主题Avada 演示网站
2017年10月14日

课程介绍

适用人群

无建站经验小白(想快速建站),设计师(不懂编程),外贸从业者
WordPress爱好者,Avada主题爱好者

如何学习

本套课程包含大量免费课时,请点击右侧的按钮,到云课堂参加学习。
课程没有时间限制,一次购买,以后追加新内容也可以免费看。

讲师:achair

《用WordPress和Avada主题做H5网站》是我们的旗舰课程,目前有85课时,超过 570分钟,100+人正在学习,买此教程送《WordPress公共课》全额优惠券

本站只提供课程介绍,购买完整版教程、观看更多免费课时,请点击下面的按钮

第一章

Avada5.2 安装与基础操作(2017年)

10 课时      初学者

1安装Avada5.2 准备工作

准备工作: a 域名,主机,域名主机做好绑定 b WordPress和Avada主题安装包,WordPress从官方获取,国外最新,国内慢一步,都可以。主题可以自己购买60美元,也可以跟我要获得学习用源码。

2安装WordPress和Avada

用FTP 上传WordPress和Avada主题,以阿里云虚机为例,上传两个zip,在主机面板解压缩,移动到相应的目录,安装WordPress,填写正确的数据库信息,后台管理员密码记下来……

3安装Avada汉化包

如果需要汉化包请跟我联系,Avada一共有三个mo中文语言文件,分别上传到对应的位置,WordPress设置成中文后,Avada的主题选项和编辑器界面都会变成中文界面。

4安装Avada演示站Demo

安装演示站Demo ,Avada有20多套Demo ,都可以导入其中任意一个。导入方法有两种,一种是在线导入,推荐,一种是用迁移插件导入一个大文件(备份包)。以Avada 经典Demo为例……

5Avada主题操作修改逻辑说明

这节课是Avada操作的基础概论,Avada如何操作,在哪修改,每个主题都有它自己的一套逻辑,我带着大家把这个过一遍,一个地方要修改,关联着后台几个地方。

6新页面导入现成的Demo页面模板库

新建一个空白页面,导入Avada各种Demo 演示站的 不同页面,一键导入。另外这节课有个小插曲,本地网络不好造成了页面加载空白。

7用Avada编辑器从零建立页面内容的方法

从零建立页面的方法,包括容器,布局,元素,页面下面的页面选项,小工具,侧边栏等等讲解。

8Avada首页修改方法

Avada首页修改方法,用这种方法做网站,不用修改代码,都是在后台和编辑器操作。首页内容很多,对浏览器和服务器都是个考验,咱们这节课时间也要长一些,我挑选关键的讲,重复的跳过。

9Avada网站的页头 页眉 页脚修改

网站的页头、Logo、页眉和页脚,Logo视网膜屏的宽高是常规Logo的两倍。页头的几种表现形式,Logo和导航菜单的关系,还有顶部信息的左侧和右侧信息可以定制,页脚信息修改,变成5列,页脚版权信息是一行html代码,可以直接替换文字

10Avada网站的文章 案例 Faq修改方法

文章、案例和FAQ有个共同点,各自是一个内容管理模块,文章是WordPress自带的,案例和FAQ是Avada主题带的。这三块的内容各自发布管理,调用方法都是在页面里有个元素调用。它们的列表页和详情页与页面选项以及主题选项的关系。

第二章

准备篇(2016年制作)

5 课时      初学者

此章节完全免费

1基础准备工作


准备WordPress和Avada,配置,上传等,简单介绍和基础操作。

2安装WordPress、Avada主题


安装WordPress,安装Avada主题,主题介绍讲解,相关说明等。

3导入Avada主题自带Demo Classic


导入过程,注意事项讲解

4WordPress网站搬家和后台速度慢的问题解决


本课视频两个内容 1 在不更换域名的情况下,网站搬家。 2 网站后台速度慢,问题解决与分析

第三章

基础操作篇(2016年制作)

8 课时      初学者

1用Avada编辑器编辑“关于我们”页面

编辑器是网站编辑的基础,编辑器的操作介绍,元素属性设置等等,页面是网站的技术,从最基本开始。

2设置菜单和LOGO

Logo标志是一个网站的重要属性,讲解WordPress全局菜单设置,LOGO位置调整。

3网站首页讲解

Avada首页,一步一步操作,零基础讲解功能、特效、元素和属性。

4案例Portfolio讲解(1)

案例的列表页,单页,设置等操作

5案例Portfolio详解(2)

Avada 控制板中 关于Portfolio的设置,创建一个新的案例,详解。

6联系我们与表单提交(SMTP插件)

联系我们页面修改方法,主要讲解Avada自带表单提交,让更多主机支持发送邮件功能。我们是用的虚机或者服务器默认不支持发邮件,需要安装个SMTP插件,如何设置,请看本课内容。

7博客Blog(1)页面设置和视差效果设置

博客首页或者页面首页,Avada自带多种博客相关页面讲解。最后是背景图Parallax视差效果设置讲解。视差效果有的适合桌面电脑,有的适合移动端。

8博客Blog(2)选项设置和时间戳

博客的统一选项设置,博客列表页和单页,时间格式如何设置对应的效果,比如默认的英文日历格式如何改成中文的日历格式。

第四章

中文汉化篇

12 课时      中级课

1Avada中文汉化语言包与原理

Avada可以变成中文,Avada后台选项和编辑器都可以变成中文,只需要增加两个文件。如何操作请看视频。如需要这两个汉化文件请给我留言。

2用Poedit修改Avada的语言包PO和MO

Poedit是Avada字体库PO的编辑器,用它来修改并生成MO文件,手工翻译,自动翻译,具体操作方法见视频

3Windows版的Poedit复数介绍以及如何更新POT文件

Poedit中文翻译有个复数的问题需要注意。每次Avada版本升级,POT也会升级,如何把老的MO扩充适合新的Avada MO,请看课程内容。

4全站变微软雅黑字体,小图标显示正常

网站全部显示微软雅黑字体,另外注意有些小图标会变成方块,这个视频有解决办法。

5中文路径自动翻译成英文路径

WordPress支持中文路径,用这个插件搭配有道云翻译的API,让网站维护简单、高效,更利于SEO。

6优美的中文排版(字号和粗细的秘密)

如果直接把WordPress英文主题翻译成中文,不改样式,是很难看的。这节课主要解决这个问题,合理的设置文字的字号、粗细、颜色,让中文文字的排版更舒服、高雅、优美。

7字体设置和前台页面位置的对应关系

Avada主题不需要修改CSS代码,直接从后台修改:字号、行高、粗细、字间距、外边界。Avada对前台页面的很多位置进行调节,这节课让我们来看看每一项的对应关系,以及从哪里找对应关系。

8后台字体列表增加“微软雅黑”

WordPress和Avada 后台字体列表默认不支持中文,这个视频教大家一个方法,只需要加一行代码,就可以让网站后台字体列表中选择微软雅黑字体,还有一些小技巧。

9网页中嵌入“百度地图”

Avada原生支持关闭谷歌地图,教大家一个方法,可以在页面中加载百度地图,本地化服务好啊 ^_^

10WordPress版本更新


WordPress发布新版本,该如何更新呢?需要注意什么?请看本集视频。

11升级Avada注意事项


升级Avada主题的正确步骤,1先备份主题和数据库,2切换WordPress默认主题,3删除avada老版本……

123.9.4升级4.0.1演示教程


如何从3.9.4升级4.0.1 ,同样适用于Avada其他版本升级,先看上一级《Avada升级注意事项》

第五章

运营篇(本地化、速度优化)

11 课时      中级课

1一个“加速插件”给WordPress前后台加速

360的前端库useso越来越慢,用这个插件可以选择其他前端库,还支持WordPress后台,好方便啊。

2把WordPress文章分享到微博和微信朋友圈

把网站内容分享到社会化网络中(微博,微信朋友圈,QQ空间等等)

3为WordPress加速-W3TC缓存Cache插件(静态页)

WordPress默认都是动态链接,生成静态页面(缓存Cache),便于搜索引擎收录和用户访问,降低服务器效能。

4主动推送到百度站长平台提高百度收录

WordPress发布文章,自动通过token推送到百度站长平台,百度官方出品。每天限制500篇,很实用的工具

5原生Facebook、Twitter图标变微博、微信、QQ空间

Avada页脚原生社会化图标,Facebook、Twitter等图标和链接修改成微博、微信二维码、QQ空间等图标和链接。

6网站优化SEO:修改标题、关键词、描述,友好支持百度和谷歌

WordPress的SEO基础,简单方便的维护首页、页面和文章的标题、关键词、描述。让你的网站油耗支持百度和谷歌搜索引擎。

7复合巨大菜单Mega Menu

让下拉菜单可以排版,插入图片和文字描述,下拉出现那种巨大的宽幅菜单。

8给图片加水印和WordPress默认图片尺寸介绍

简单设置,自动给上传的每张图片加入水印保护,控制水印大小、位置。WordPress原生图片尺寸有大中小三种,具体修改操作见视频。

9阅读次数和WordPress目录权限(安全相关)

管理员自己看到文章、页面的被阅读的次数。WordPress不同目录给予不同的权限,777还是755,防微杜渐。(适合Linux主机)

10如何在Avada官方寻找答案

当我们遇到问题改如何寻求帮助呢?Avada官方的技术支持:官方文档、知识库、论坛、工单。

11图片优化:高清、大图、透明PNG、小尺寸

大图片,1920x1080,高清晰,透明PNG,两种办法让文件变成小尺寸,具体方法,请看视频。

第六章

Slider 幻灯片 滑块篇

6 课时      中级课

1Avada 自带 Elastic Slider 弹性滑块的使用方法

Elastic Slider (弹性滑块)是这四个Slider中最简单的,操作简单,要求不高的网站建议使用,具体操作方法见课程。

2如何转换网站本地视频格式MP4和WebM

很多Slider支持视频,通常要求上传两种视频格式MP4和WebM,分别用两种软件来分别转换。WebM格式最大的亮点是开源,可以用 Miro Video Converter 来转换。具体操作方法见教程。

3Avada 自带 Fusion Slider 融合滑块的使用方法

Fusion Slider 也是Avada自带的插件,可以在后台关闭(禁用),用他来做一组幻灯片,一页是视频背景,一页是图片背景,具体步骤请看教程。

4Layer Slider 图层滑块介绍

Layer Slider 是一个插件,零售版售价18美元,Avada集成这个插件,功能强大,本课程只介绍此插件的基本操作方法,大家看完教程可以修改Avada导入的Layer Slider作品。

5Slider Revolution 革命滑块Demo演示

Slider Revolution 是一个插件,零售版售价19美元,Avada集成了这个插件,这节课先看看他的官网用Slider Revolution能做成什么样子。

6Slider Revolution 革命滑块操作演示

Slider Revolution (革命滑块)功能很强大,时间关系,我带大家把Slider Revolution 具体的操作设置方法过一遍,希望大家看完视频可以设置并修改Avada主题自带的滑块内容,把背景、文字、图片换成你们公司的内容,并按照你希望的动画来表演。

第七章

补充

9 课时      中级课

1WooCommerce独立商城介绍和页面调用

本课程不讲WooCommerce具体使用方法,讲Avada主题的页面如何调用WooCommerce。WooCommerce具体使用方法请百度或者优酷搜索免费版本。

2WooCommerce独立商城设置

Avada主题选项有一些关于WooCommerce插件的设置,详见视频教程吧。

3Avada4 后台字体列表增加 “微软雅黑”的方法

F以前有一期课程是后台字体列表增加“微软雅黑“的方法,不过那是”Avada 3.9.x。自从Avada升级到4之后,那招不好用了,这个方法适合Avada4,请看教程。

4用phpMyAdmin 备份和恢复网站mysql数据库

WordPress网站的备份,主要是ftp和mysql数据库,这课讲的是mysql的备份与恢复

5WordPress升级和Avada4升级(快速版)

WordPress升级,Avada 升级(4.0.1 升级到 4.0.2)。带大家快速过一遍,升级之前回顾经验。如果你是第一次升级,建议先看之前的完整升级教程。

6为网站添加百度统计代码

Avada网站增加第三方统计功能,以百度统计为例。其它cnzz,谷歌统计的增加方法类似。

7首页调用博客新闻,中文摘要字数截取
WordPress网站的新闻用的Blog文章,首页调用新闻有几种不同的方法和布局。另外文章摘要文字,如果是中文汉字,需要单独设置,与英文字数截取不同,具体方法见教程。
8找回菜单编辑“在新窗口打开”选项
WordPress菜单链接默认带“_blank”,但是启用Avada主题后,这个设置消失了,视频中教大家打开这个功能。
9阿里云CDN+缓存插件+阅读量+安全狗联合解决方案
实战了一次阿里云 CDN,最近用了个新的缓存插件,阅读次数正常刷新,以及服务器安全狗白名单,一整套联合解决方案,目标只有一个,给网站加速。

第八章

问答 Q&A

9 课时      中级课

1新手安装主题是容易出错的几个地方
安装主题时几个注意事项,也是经常被问的几个问题 1 不能后台上传主题文件,要用FTP上传,主题文件很大,本地网络速度,服务器环境限制和带宽,我们不要找那个麻烦 2 不建议本地搭建测试环境、安装和导入Demo。找个虚拟主机,或者服务器,导入过程是从avada服务器抓资料,本地测试不适真正的外网环境 3 主题压缩包内容讲解,关键要找到压缩包中的主题包
2Avada编辑器白屏的解决办法
页面又长又复杂比如首页,需要更多资源,如果虚拟主机资源不够,或者检测环境不达标,会造成Avada编辑器白屏,无法正常运行。判断方法,新建一个空页面,打开看看是否能打开Avada编辑器。如果能打开内容很少的页面,打不开内容很长的页面应该就是虚拟主机资源不足,需要升级主机。如果连小页面都打不开,也许是环境不能运行Avada编辑器。还有一个原因,编辑器需要谷歌字体,360镜像库被广泛使用,很忙,可以更换其他的谷歌镜像库。
3官方购买的Avada如何激活,自动更新吗?
激活步骤看教程吧,不建议自动更新,因为国外网速不稳定,而且主题包文件很大,另外,正常从Themeforest那里下载也很慢,还容易断,最好用VPN,选个中国的早晨下载,那时服务器比较闲,速度快。
4Avada发布新版本如何才能知道?Avada官方文档和视频教程


如何获得Avada更新通知,有几个方法,比如Themeforest的邮件通知,Avada官方更新日志,微信订阅号通知等,详见视频介绍
5网上找的Avada主题,功能是否受限?如何更新?


Avada并没有依赖购买代码、注册(License许可证)来限制、制约Avada主题功能。通过这几年使用经验来看,没有购买代码不能注册,网站前台并不会有版权水印、广告之类的东西、功能也不会受限,网站速度也不会变慢(Avada网站慢和这个购买代码无关)。
6Avada集成的Slider Revolution 功能有限制么?


Slider Revolution有两个渠道,一是从ThemeForest上花19美元 购买的单独零售版,这个和Avada无关。另一种是Avada主题集成的Slider Revolution是个OEM版,区别是:19美元零售版有购买代码,可以用“购买代码”激活注册Slider Revolution,相比OEM版拥有三项好处,详见视频。
7SEO:让每篇文章的描述Description的自动出现
这节课讲SEO一项重要的东西,文章摘要。文章SEO三要素 标题,描述和关键词,现在关键词几乎无用了,另两个还是挺重要的,标题显而易见,但描述容易忽略。因为默认摘要是空的,需要手工录入。最简易有效的方法是:自动截取文章正文的一些文字作为摘要,自动完成。这需要之前讲过的SEO插件,当时讲的时候主要是关键词Keywords,那个插件可以实现自动摘要,但需要手工设置一下。具体看操作
8图片压缩优化:另存为 web 格式
在维护网站新闻和产品时,照片图片一定要压缩,先修改尺寸在另存为 web 格式,切记。有很一些同学直接把iPhone 拍照的原图2MB 上传网站,一定不要这样做哦。
9有问有答-云课堂讨论区
当同学们遇到问题该怎么办,请先看教程,特别是开始的部分,安装和导入DEMO,最近新做了一个Avada5的全新安装教程,操作之前先看下。如果遇到没有讲到的章节或者没弄明白的同学,请在讨论区留言,我每天找时间上去看并回复。在讨论区,大家也能看到其他同学的提问和回复。

第九章

Avada5专区

6 课时      初级课

1Avada5 全新安装+导入DEMO+导入W3TC配置文件


Avada5是一次大更新,导入方式需要注册产品,注册产品需要envato的API,本课为全新安装Avada5,在阿里云的共享虚机上操作演示,全程演示以及说明见教程。
2Avada4 升级到 Avada5 演示及相关问题说明


Avada403升级到Avada502实际操作视频教程,升级之前先备份,特别是数据库,因为Avada5的编辑器不能识别Avada的代码,升级过程需要转换,详见视频教程。
3Avada5 主机环境要求(国内外虚机,阿里云ECS,PHP.ini)
很多同学都会卡在Avada5环境上,有的启动编辑器插件后白屏,有的启动核心插件白屏,启动顺序是,先核心后编辑器,更多的是导入demo失败,提示检查环境。有的同学是用的本地环境,装个xampp之类的php环境,不建议这么做,因为这种打包的环境,参数不统一,容易遇到各种奇怪的问题……更多相关内容请看视频
4Avada5 汉化文件上传
Avada5 和汉化文件与之前版本有区别,详见视频教程
5Avada5 编辑器和之前不一样了
Avada5编辑器的使用方法讲解,简单讲解,引导一下,更多详细内容还要看之前的设置。另外时间倒计时这个元素有个小问题,及如何避免。
6Avada5 案例和FAQ
Avada5的案例和FAQ的设置方法与之前版本不同。这个视频做了对比,特别是案例portfolio,在哪些位置可以找到相关设置。

第十章

Avada5 导入 DEMO 方法汇总

6 课时      初级课

1Avada5 后台一键自动更新(操作演示)
Avada 主题升级,不建议后台一键自动更新,但有很多同学容易点击一键更新,用这个视频说明下这个问题。
2Avada5 一键导入 DEMO 的失败与成功(经验分享)
自从升级到 Avada5,随着小版本升级,很多同学向我反映导入 DEMO 失败,我特意做了几个课,争取把导入 DEMO 的相关问题说清楚,这是第一个。
3Avada5 手工导入 DEMO(自创方法)
目前这个阶段,如果一键导入不成功,只能手工导入,官方手工导入 DEMO 教程需要从 Avada4开始,我研究了一套 Avada5的手工导入方法,见视频。
4Avada4 手工导入 Demo,再升级Avada5
这种方法是目前最稳妥的导入 DEMO 方法,需要从 Avada4开始,操作有点繁琐,但实用。
5Avada5 一键导入 DEMO(阿里云共享虚机版)
Avada5目前导入 DEMO 还是挑环境的,这个共享虚机竟然成功导入了 Avada5的 DEMO。个人感觉主机环境是否为绿色也不是唯一标准了,建议 PHP 版本高一些吧。
6Avada5 手动导入本地Demo演示文件方法(2017.9)
手动安装Avada主题Demo的方法。Demo就是网站演示数据,我们看Avada官方演示站,目前共有30个Demo,可以任选一个,安装到我们自己的WordPress网站上。 之前教大家安装Demo的方法,大部分都是在线安装导入Demo数据,有的同学由于主机环境原因,在线安装Demo失败,可以试试这种手动安装的方法。
 

Avada完整版课程

本站只提供课程介绍,购买完整版教程、观看更多免费课时,请点击下面的按钮

在线学习