魏艾斯笔记LayerSlider插件可以提供 wordpress幻灯片切换效果，广泛使用在 wordpress网站中。那么 Avada主题LayerSlider幻灯片是怎么做的呢？老魏会在本文中分享实现过程。
Avada主题 是themeforest中销量第一的wordpress主题，感兴趣可以点我去看看，那里面有上万个国外主题销售。目前在 themeforest上面这款主题是一次付款终身使用，和别的主题每年付费相比还是蛮划算的。更多关于Avada主题的内容请看Avada专题
学习选择 1核2g配置的服务器，建站选择 2核4g配置会更流畅。
国内服务器：阿里云、腾讯云（都有代金券，付款时抵用省钱） 不知道如何选择地域、配置请在页面右侧+老魏的联系方式，我们一起研究。
外贸、B2C/C2C等网站建议在国外注册域名。打开namesilo官网，在搜索框里输入并选择好后注册，记得使用优惠码省钱。优惠码点击国外域名商Namesilo域名注册教程获取。
外贸网站建议选择Hostinger虚拟主机，价格便宜，性价比极高！Hostinger专题
SiteGround虚拟主机价格适中服务好！SiteGround专题
我们先来看 LayerSlider幻灯片效果是什么样的，如下图所示：
多幅图片切换，图片可以按需选择，上传后按照设置好的参数自动切换。
图片可以按照网站主要内容选择，比如个人博客可以放个人相关内容，外贸网站放工厂图片、产品图等，效果比静态图片要好很多。
LayerSlider插件安装
登陆 wordpress后台 > Avada > Plugins/add-on，直接 install安装 LayerSlider插件并启用。
LayerSlider插件设置
在 wordpress后台左侧栏目的最下面点击 LayerSlider > sliders，点击 Add New Slider，在 NAME YOUR NEW SLIDER下面起个名字：home slider，点击add slider创建，接下来会自动跳转到设置页面，如下图所示。
页面上方选项栏有 SLIDER SETTING(设置)/ SLIDES(添加幻灯片)，整个过程中主要使用这两项。
先看下面的LAYOUT布局，默认 Responsive也是自动响应模式，会随着不同访问设备的屏幕宽度自动缩放尺寸，幻灯片尺寸随着变化。对于 avada主题来说这种模式是常用的。
- width宽度 1200，与站点宽度相同；
- height：200；
- max-width 设置幻灯片展示效果与站点宽度相同还是 100%屏幕宽度；
- 其他设置默认。
save changes保存参数，响应式的好处就是如果屏幕分辨率变小比如手机、平板、笔记本等不同设备屏幕，宽度高度都会等比例缩放。
这里长度和宽度根据图片尺寸定，一开始你可能把握不好，做出来的幻灯片效果好不好看，多试几次就知道了。
创建Sliders幻灯片
点击下图的 SLIDES，看到 slide #1，点击下面的 click to set把提前做好的图片上传。
- 这几张图片的宽度高度都要相同，这样幻灯片效果才能美观。
- 至少上传2张图片，否则做不出幻灯片切换效果。
添加 slide #1 之后，点击 Add New+号，继续添加 slide #2；
每个 slide 的 Slide Timing 设置如下：
- duration：3000；
- shift：1000；
save changes保存参数，成功创建homepage slider 。
Home页选择Sliders幻灯片
在 wordpress后台 > Page > all pages，编辑提前添加好的 Home页面。
打开 home页面后拉到页面最下面，在 Avada Page Options 的 sliders 中选择如下：
- Slider Type：LayerSlider；
- Select LayerSlider：home slider；
- Slider Position：below；
右侧栏上面点击update更新 page页面内容。
刷新网站首页并看到显示了Avada主题LayerSlider幻灯片的效果，如本文开头第一张图片所示，还是蛮不错的。如果有需要可以在多个页面都显示，不过老魏建议只在首页显示（或不使用）因为这个效果比较耗费系统资源、影响网站打开速度，等待时间过长容易引起访客反感，关闭页面走人。