17713433920 info@mac163.com
Slider Revolution WordPress插件指南
Slider Revolution WordPress插件指南

Slider Revolution是一款高级滑块,可作为WordPress插件,jQuery插件和Joomla插件使用。由于它的广泛功能和易用性,它在WordPress社区中获得了极大的普及。

在本概述中,我们将仅介绍Slider Revolution WordPress插件的主要功能,然后我们将向您展示从头开始制作自己的滑块是多么容易。

免费获取Slider Revolution! 购买我们的Total WordPress Theme会免费提供Slider Revolution插件, 因此您不仅会获得一个很棒的插件,还将获得Total主题以及Visual Composer插件  ,该插件也免费提供!

进行滑块革命

Slider Revolution:是什么使这个WordPress插件如此出色

Slider Revolution内置了许多重要功能,可轻松为您的网站创建自定义滑块。这是我们的一些最爱。

响应式布局

该插件已做好响应准备,并包含多个滑块布局选项,使您的生活更轻松。首先选择您的滑块类型:标准滑块,英雄场景(单个滑块)或轮播滑块。然后选择一种布局:自动,全角或全屏。

该自动布局选项,您可以使用精确的像素,具有额外的选项来设置各种不同屏幕宽度(台式机,笔记本电脑,平板电脑和手机)的滑块大小来设置滑块的大小。如果将此选项保留为默认设置,它将把滑块拉伸到WordPress主题定义的主容器宽度。

在全宽度的布局正是这听起来像-这将全面准确舒展从左至右全宽滑块选项。您仍然需要定义滑块的高度。

最独特的布局选项是全屏。使用此选项,无论浏览器或设备的大小如何,您都可以创建几乎覆盖整个屏幕的出色滑块(您甚至可以使用此选项添加带有视频的全屏滑块,以产生更大的影响力)。

多个内容来源

是否想为您的帖子创建一个滑块?还是您的WooCommerce产品?没问题- 在创建滑块时,可以从11种不同的内容源中进行选择。

在撰写本文时,Slider Revolution支持基于博客帖子,特定帖子,当前帖子/页面(如果要在博客帖子或投资组合项目中添加特色滑块)的内容,Flickr,Instagram,WooCommerce,Twitter,Facebook ,YouTube,Vimeo或默认滑块(上传您自己的图像/视频)。

简单的选择

Slider Revolution通过添加几乎所有内容的选项,使您轻松创建自定义滑块。使用插件中的下拉菜单,选择幻灯片延迟,导航箭头,自定义字体,添加视差背景,滑块位置(添加边距),添加媒体层,插入按钮,选择幻灯片过渡等。

最重要的是,您几乎可以自定义所有内容,甚至可以保存自己的预设,以使重用字体样式,幻灯片过渡,图层动画等更加轻松。

媒体支持

只需单击几下鼠标即可添加文本,链接,图像和视频。这使您能够创建信息丰富的幻灯片,您的读者和客户将可以识别这些幻灯片。另外,每种媒体类型都将添加为自己的图层,并具有您使用Slider Revolution的超级选项设置的独特动画,时间和样式。

滑块革命安装

首先,您需要获取Slider Revolution WordPress插件的副本。有几种不同的安装插件的方法,具体取决于您是否购买了自己的插件副本或高级主题中是否包含该插件。

1.安装您的Slider Revolution副本

下载slider-revolution插件
下载slider-revolution插件

如果您从CodeCanyon 购买了自己的Slider Revolution副本,请登录您的Envato帐户并进入下载页面(您可以通过将用户名悬停在此页面上)。然后找到您的Slider Revolution副本,然后为“仅可安装的WordPress文件”选择下载选项。

upload-pluing-zip-file
upload-pluing-zip-file

接下来,登录到您的WordPress网站,然后导航至“ 插件”>“添加新内容”,然后单击屏幕左上方的“上传插件”按钮。

在这里,使用“选择文件”按钮选择您刚刚从CodeCanyon下载的插件文件,然后单击“立即安装”按钮。之后,只需激活插件,您就可以开始构建滑块了!

解压插件文件
解压插件文件

注意:您还可以通过登录到服务器并将提取的(解压缩的)插件上传到位于wp-content / plugins的文件夹中,通过FTP安装插件。

2.安装高级主题随附的Slider Revolution

许多高级主题都包含带有主题下载的高级插件的副本。如果这是您要安装Slider Revolution副本的方式,则需要参考主题的文档。但是大多数开发人员会尽力简化此过程。

安装高级主题随附的Slider Revolution
安装高级主题随附的Slider Revolution

例如,如果您使用的是Total WordPress主题,则应该在屏幕上看到一条提示,建议您安装Slider Revolution(以及该主题附带的其他插件)。只需单击链接即可开始安装,然后激活插件。

install-sliders-with-total
install-sliders-with-total

Total还在演示导入器中包括一个自定义选项,用于在导入样本数据时安装和激活Slider Revolution。如果使用Slider Revolution创建了要导入的演示,则将提示您安装插件,如上所示。

import-sliders-with-total
import-sliders-with-total

然后,只需确保选择了“导入滑块”选项,主题就会自动从演示中导入所有自定义滑块。简单!

滑块革命指南

安装插件后,它将在主WordPress仪表板中添加一个菜单项。单击以转到“ Slider Revolution”滑块管理主页面。

main-slider-settings
main-slider-settings

在这里,您可以创建或编辑滑块,如果您购买了自己的插件副本,则可以激活许可证(如果主题中包含滑块,则可以忽略此部分),并查看插件副本是否为最新版本。

滑块革命全局设置

在开始构建之前,我们建议您访问“ 全局设置”选项(这是“ Slider Revolution”下面的子菜单项)。

slider-revolution-global-settings
slider-revolution-global-settings

这里有许多重要的选项,用于默认的响应式网格设置(在构建新的滑块时适用),自定义字体加载URL,为插件创建数据库等。但是我们建议您进行两种调整。

您应该考虑编辑的第一个选项是“ 查看插件权限”,您可以使用它来将插件访问权限限制为仅管理员。这是确保您,您的Web设计师或其他管理员是唯一在您的网站上创建滑块的人的简便方法(如果您的博客中有来宾作者,则特别有用)。

您可能要禁用的第二个选项是“ 启用通知”选项。如果您使用的是高级主题随附的Slider Revolution副本,则在不需要时可能会看到“升级”或“输入许可证”的通知。只需禁用此选项即可隐藏通知。然后保存您的设置。

现在,您可以开始构建滑块了!您有三个选择–从头开始,从Slider Revolution“使用示例”中获取免费的导出文件,或导入主题中随附的示例滑块。

导入样本滑块

slider-revolution-sample-sliders
slider-revolution-sample-sliders

如果您选择从Slider Revolution的用法示例中导入示例滑块,请先从其站点下载滑块文件,然后单击“ 导入滑块”选项导航回WordPress  。在此处浏览您下载的示例文件,然后点击上传。这应该添加示例滑块及其所有设置,因此您可以将其用作新滑块的基础。

创建一个新的滑块

如果要从头开始制作滑块,请单击“ 新建滑块”选项。现在从顶部开始

创建一个新的滑块
创建一个新的滑块

选择内容来源:选择您想如何向滑块添加内容。有11种内容来源可供选择,但是在大多数情况下,您需要选择默认选项。

revolution-slider-title-shortcode
revolution-slider-title-shortcode

添加滑条标题和简码:为滑条选择一个名称,以帮助您记住滑条包含的内容或在其上使用的页面。您也可以在这里找到用于滑块的简单简码,以将其插入到帖子和页面中。

revolution-slider-type
revolution-slider-type

选择滑块类型:选择滑块类型,然后选择一个预设以加载插件中包含的预设。

revolution-slider-layout
revolution-slider-layout

选择幻灯片布局:选择滑块布局和网格(以像素为单位)。您可以根据屏幕大小设置自定义网格大小,尽管全屏将填满整个浏览器屏幕。无论选择哪个选项,都需要添加一个网格宽度和高度,该宽度和高度将确定图层容器的大小。

接下来,滚动回到屏幕顶部,以开始编辑滑块的常规设置。

滑块设置

在右侧,您会看到许多滑块选项。

general-settings-slideshow
general-settings-slideshow
general-settings-defaults
general-settings-defaults
general-settings-progress-bar
general-settings-progress-bar
general-settings-first-slide
general-settings-first-slide

常规设置:设置幻灯片显示选项,设置默认幻灯片持续时间(显示幻灯片的时间长度),编辑默认转场/动画和背景,启用进度条(以及编辑位置和样式),编辑第一个幻灯片设置,启用下一张幻灯片聚焦并禁用模糊。

布局和视觉:编辑阴影,叠加层,主滑块背景,启用装载程序微调器,在移动设备上(或指定宽度以下)禁用滑块,并选择页面上的滑块位置。

导航:自定义侧边箭头,项目符号,标签和缩略图的选项和设置。同时启用触摸导航,滑动,键盘导航和鼠标滚动。

视差和3D:启用视差和/或3D支持,以及编辑鼠标灵敏度和视差深度级别。

性能和SEO:启用延迟加载和监视滑块性能。

问题处理:启用后备功能并解决所有滑块错误。

Google字体:专门为您的滑块加载自定义Google字体系列(添加您可能需要或需要添加与网站其余部分匹配的文本层的任何字体到幻灯片)。

导入/导出/替换:导入自定义模板,导出当前的滑块以在另一个网站上重复使用,并使用选项替换滑块中的URL。

API函数:编辑api方法和事件(除非您是高级开发人员,否则建议您忽略此选项卡)。

完成选择后,单击屏幕顶部的绿色文件以保存更改。之后,单击蓝色铅笔开始编辑幻灯片!

添加或编辑幻灯片

现在您可以开始添加幻灯片了。根据您是从头开始还是使用示例滑块,有两个或三个幻灯片选项:“ 静态/全局图层”,任何已创建的幻灯片和“ 添加幻灯片”。

静态/全局图层将被视为您创建的任何幻灯片上的叠加层。这是添加徽标或水印的好方法,包括为您的产品添加“立即购买”按钮,甚至是订阅新闻通讯的链接。

选择一个现有幻灯片以对您先前创建或作为示例滑块一部分导入的幻灯片进行更改。如果您是该插件的新手,这是开始使用Slider Revolution的最简单方法之一,因为他们的示例滑块展示了如何正确使用各种插件功能来创建令人印象深刻的滑块。

单击添加幻灯片开始从头开始创建幻灯片。

首先,使用“ 主要背景”选项来选择幻灯片背景:图像,外部URL,透明(请注意-如果您在常规滑块设置中设置了主要的滑块背景,它将可见),纯色或视频。然后,如果您想进一步自定义幻灯片,请使用选项进行媒体源设置,滤镜,视差水平(%)和Ken Burns(动画平移和缩放效果)。

接下来,进入“ 常规设置”。如果您不希望滑块在加载后立即进行动画处理,可以在此处设置幻灯片延迟时间,编辑幻灯片循环选项或添加有效期(如果您为假期或促销活动创建滑块,则很棒)。此选项卡上的另一个有用功能是可以将幻灯片状态设置为未发布 -这样一来,您可以继续编辑幻灯片并在网站的后端进行预览,而新的幻灯片不会对网站访问者可见。

如果您为滑块使用缩略图导航,则“ 缩略图”选项卡提供用于选择自定义幻灯片图像和尺寸的选项。但是,如果您选择不使用此导航样式,则可以跳过此选项卡。

完成此操作后,您可以切换到“ 幻灯片动画”选项卡以自定义滑块过渡动画。旋转,持续时间和缓动有超过80种动画可供选择。

Revolution Slider还提供“ 链接和SEO”设置,“ 幻灯片信息”(自定义参数和描述)和“ 导航覆盖”选项,可为幻灯片添加专门的自定义导航箭头,项目符号或缩略图。

现在是单击屏幕顶部的绿色文件图标以保存设置,然后再向幻灯片中添加图层和样式的好时机。

添加幻灯片层

在添加或编辑幻灯片时,Slider Revolution包含很多选项,并且它们会不断出现。您可以从8种不同的“ 添加图层”选项中进行选择:

  • 文本/ HTML图层非常适合添加标题,描述甚至链接。在幻灯片上添加您想说的任何内容。
  • 图像非常适合插入徽标,增加视差幻灯片的深度,在设置之前/之后插入等等。
  • 音频和  视频层相当简单。选择您要插入的媒体,然后从媒体库中选择一个文件或插入一个链接(YouTube,SoundCloud等)。然后添加设置以启用循环播放,自动播放,下一张幻灯片播放,基本音量,片段开始/结束和预加载。这是将真实推荐书添加到滑块,介绍性视频或教程中的简便方法。
  • 按钮图层选项包括21个大小和边框半径组合,您可以编辑它们的颜色,背景,边框颜色,图标,字体,悬停状态和文本。此外,还有许多有用的预设,可用于社交链接的动画鼠标滚动图标,汉堡菜单甚至播放/暂停。
  • 形状 可用于添加效果(例如在按钮后面产生脉冲或放射颜色),定义文本层的一部分(使用形状仅突出显示一个单词或短语)或增加视觉趣味。选择背景,边框颜色/大小,形状边框半径(0为正方形,100为圆形),形状大小(以像素为单位)和填充。
  • 对象层可用于从ThemePunch的免费资源库中插入png,jpg,svg或图标。
  • 导入  可从库中的另一个滑块复制图层或幻灯片。快速简单!

单击蓝色的“添加图层”按钮开始使用,然后使用选项进行真正的自定义或图层化。

图层选项

如果您只是在主滑块预览部分的北部看,应该会看到一个带有大量选项的白色条,您可以在添加图层时用来编辑和自定义图层。

使用样式选项来编辑字体,颜色和图层位置。其中包括自定义Google字体,字体大小,行高,文本颜色,图层背景,填充/边距,透视图,悬停,切换等所有内容。

正如您所期望的那样,“ 动画”选项卡–具有用于添加和自定义图层的入口和出口动画的选项。选择一个预设动画模板,添加缓动并编辑动画持续时间。

循环设置很简单:要么禁用以使您的图层仅加载您已选择的动画,要么通过选择类型启用循环。从摆锤,旋转,侧环,脉冲和波形中进行选择,为您的图层提供恒定的循环动画。

移动设置位于“ 可见性”下。在这里,您可以指定图层在特定设备上应该是可见的,在设置的宽度下隐藏还是仅在悬停时显示。

行为包括一些有用的开关,可自定义图层设置。第一个是启用图层自动响应和子元素响应的设置。默认情况下,幻灯片层将随着浏览器窗口的收缩而收缩,请禁用这些设置以保持层的大小。您也可以从此处编辑图层对齐方式和响应偏移。

使用“ 动作”选项卡可以在单击,鼠标进入或鼠标离开时添加自定义图层设置。动作包括滚动,切换,媒体播放,暂停,进入全屏,静音等。

对于高级用户或开发人员,“ 属性”部分可用于添加您自己的ID,类和包装,以使用自定义代码定位。

最后,Parallax / 3D提供了一个下拉选择器,可以选择要添加到图层的视差效果的“级别”。百分比越高,图层将移动的越多。

层帧时间

继续,在滑块预览下方,您应该看到一个时间表。在这里,您可以编辑图层动画在幻灯片上的延迟。您还可以看到直观的时间表,该时间表显示了图层时序与幻灯片的总时间长度的比较。被阻止的部分是您的图层动画时间,浅色的条是您的图层可见的整个时间长度。

要编辑幻灯片的总时长,只需单击并拖动表格右上方的蓝色标记即可。

一旦添加了多个图层,您还可以使用此部分通过编辑位置编号,进入时间或通过将图层拖放到顺序中来重新组织图层。另外,您可以使用此部分播放幻灯片,以在进行编辑时预览时间。

保存幻灯片

最重要的步骤是保存幻灯片!进行任何更改后,请确保保存或更新幻灯片。如果您离开幻灯片(即使是另一张幻灯片),则可能会失去所有的辛苦工作。所以一定要保存,保存,保存!

保存后,您可以继续操作其他幻灯片或滑块。

使用滑块

要将精美的滑块添加到任何帖子或页面,请使用您先前创建的Slider Revolution短代码。通过单击仪表板上的Slider Revolution菜单项,可以找到此短代码。根据您首次创建滑块时给它的别名,该短代码应类似于

Oops...
Slider with alias alias not found.

只需将简码粘贴到您的帖子或页面内容中即可。或者,如果您的主题支持其他滑块位置,则也可以在其中添加简码。某些WordPress主题甚至包括滑块的特殊模块。例如,Total Multipurpose WordPress Theme包含Slider Revolution,并且使用内置的页面构建器,您只需插入Slider Revolution模块即可将滑块添加到任何帖子或页面。您所要做的就是添加模块,从下拉列表中选择一个滑块(它将显示您已经创建的所有滑块的列表),插入然后将其拖放到位。容易吧?

包起来

我们认为Slider Revolution是最容易使用的高级滑块插件之一,特别是因为它们提供了许多免费模板(如果您购买了自己的插件许可证,甚至还会提供更多高级模板),易于使用的可视化编辑器和大量工具内置功能,因此您无需了解CSS即可为幻灯片设置样式(按钮,字体,颜色等已经存在!)。它获得了5星的好评,在我们看来,您将很难找到更好的滑块插件。

希望我们的指南可以帮助您逐步入门,但是要了解更多(或获取您自己的副本),请访问ThemePunch的Slider Revolution主页。他们展示了滑块的出色示例,并链接到实时演示,您可以在其中看到Slider Revolution可以做什么。


微信二维码

扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
Mac163网站建设,需要帮助点击我!
  • 17713433920
  • 在线客户
  • 联系邮箱
  • 扫一扫,加好友

关闭搜索
购物车
回到顶部