Slider Revolution是一款高级滑块,可作为WordPress插件,jQuery插件和Joomla插件使用。由于功能广泛且易于使用,它在WordPress社区中获得了极大的欢迎。.
在本概述中,我们将仅介绍该产品的主要功能 Slider Revolution WordPress插件, 然后我们将向您展示从头开始制作自己的滑块有多么容易.
免费获得Slider Revolution! 购买我们的Total WordPress Theme会免费提供Slider Revolution插件,因此您不仅会获得一个很棒的插件,还将获得Total主题以及Visual Composer插件,这也是免费的!
进行滑块革命
Contents
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副本
如果您从CodeCanyon购买了自己的Slider Revolution副本,请登录您的Envato帐户并进入下载页面(您可以通过将用户名悬停在此页面上)。然后找到您的Slider Revolution副本,然后为“仅可安装的WordPress文件”选择下载选项。
接下来,登录您的WordPress网站并导航至 插件>添加新 然后点击屏幕左上方的“上传插件”按钮.
在这里,使用“选择文件”按钮选择您刚刚从CodeCanyon下载的插件文件,然后单击“立即安装”按钮。之后,只需激活插件,即可开始构建滑块!
注意: 您还可以通过登录到服务器并将提取的(未压缩)插件上传到位于wp-content / plugins的文件夹中,通过FTP安装插件.
2.安装高级主题随附的Slider Revolution
许多高级主题都包含带有主题下载的高级插件的副本。如果这是您要安装Slider Revolution副本的方式,则需要参考主题的文档。但是大多数开发人员会尽力使此过程变得容易.
例如,如果您使用的是Total WordPress主题,则应该在屏幕上看到一条提示,建议您安装Slider Revolution(以及该主题附带的其他插件)。只需点击链接即可 开始安装 然后激活插件.
Total还在演示导入器中包括一个自定义选项,用于在导入样本数据时安装和激活Slider Revolution。如果使用Slider Revolution来创建您要导入的演示,则系统会提示您安装插件,如上所示.
然后,只需确保选择了“导入滑块”选项,主题就会自动从演示中导入所有自定义滑块。简单!
滑块革命指南
安装插件后,它将在主WordPress仪表板上添加一个菜单项。单击以转到“ Slider Revolution”滑块管理主页面.
在这里,您可以创建或编辑滑块,如果您购买了自己的插件副本,则可以激活许可证(如果主题中包含滑块,则可以忽略此部分),并查看插件副本是否为最新版本.
滑块革命全局设置
建议您在开始构建之前,先访问 全局设置 选项(它是Slider Revolution下面的子菜单项).
这里有许多重要的选项,用于默认的响应网格设置(在构建新的滑块时适用),自定义字体加载URL,为插件创建数据库等等。但是我们建议您有两种选择.
您应该考虑编辑的第一个选项是 查看插件权限 您可以使用它来将插件访问限制为仅管理员。这是确保您,您的Web设计师或其他管理员是唯一在您的网站上创建滑块的人的简便方法(如果您的博客中有来宾作者,则特别有用).
您可能要禁用的第二个选项是 启用通知 选项。如果您使用的是高级主题随附的Slider Revolution副本,则在不需要时可能会看到“升级”或“输入许可证”的通知。只需禁用此选项即可隐藏通知。然后保存您的设置.
现在,您可以开始构建滑块了!您有三种选择–从头开始,从Slider Revolution“使用示例”中获取免费的导出文件,或导入主题中包含的示例滑块.
导入样本滑块
如果您选择从Slider Revolution的 使用范例 首先从他们的网站下载滑块文件,然后导航回您的WordPress,然后点击 导入滑块 选项。从这里浏览您下载的样本文件,然后单击 上载. 这将添加示例滑块及其所有设置,以便您可以将其用作新滑块的基础.
创建一个新的滑块
如果要从头开始制作滑块,请点击 新滑块 选项。现在从顶部开始
选择内容来源:选择要如何向滑块添加内容。有11种内容来源可供选择,但是在大多数情况下,您需要选择 默认 选项.
添加滑块标题和简码:为滑块选择一个名称,以帮助您记住其内容或使用该页面的页面。您也可以在此处找到用于滑块的简单简码,以将其插入到帖子和页面中.
选择滑条类型:选择滑块类型,然后选择一个预设以加载插件中包含的预设.
选择幻灯片布局:选择滑块布局和网格(以像素为单位)。您可以根据屏幕大小设置自定义网格大小,尽管全屏将填满整个浏览器屏幕。无论您选择哪种选项,都需要添加一个网格宽度和高度,该宽度和高度将决定图层容器的大小.
接下来滚动回到屏幕顶部,开始编辑滑块的常规设置.
滑块设置
在右侧,您会看到很多滑块选项.
常规设置:设置幻灯片显示选项,设置默认的幻灯片持续时间(显示幻灯片的时间长度),编辑默认的转场/动画和背景,启用进度条(以及编辑位置和样式),编辑第一个幻灯片设置,启用下一张幻灯片聚焦并禁用模糊.
布局与视觉:编辑阴影,叠加层,主滑块背景,启用装载程序微调器,在移动设备上(或指定宽度以下)禁用滑块,并选择页面上的滑块位置.
导航:自定义侧面箭头,项目符号,标签和缩略图的选项和设置。同时启用触摸导航,滑动,键盘导航和鼠标滚动.
视差和3D:启用视差和/或3D支持,以及编辑鼠标灵敏度和视差深度级别.
性能和SEO:启用延迟加载并监视滑块性能.
问题处理:启用后备并排除所有滑块错误.
Google字体:加载专门用于滑块的自定义Google字体系列(将您可能需要或需要的字体添加到幻灯片中,以添加与网站的其余部分匹配的文本层).
导入/导出/替换:导入自定义模板,导出当前的滑块以在其他网站上重复使用,并使用选项替换滑块中的网址.
API函数:编辑api方法和事件(除非您是高级开发人员,否则我们建议您忽略此标签).
完成选择后,请点击 绿色文件 在屏幕顶部保存更改。之后点击 蓝色铅笔 开始编辑幻灯片!
添加或编辑幻灯片
现在您可以开始添加幻灯片了。根据您是从头开始还是使用示例滑块,有两个或三个幻灯片选项: 静态/全局层, 任何已经创建的幻灯片和 添加幻灯片.
静态/全局层 将被视为您所创建的任何幻灯片的叠加层。这是添加徽标或水印的好方法,包括为您的产品添加“立即购买”按钮,甚至是订阅新闻通讯的链接.
选择一个 退出幻灯片 来更改您先前作为示例滑块一部分创建或导入的幻灯片。如果您是该插件的新手,这是开始使用Slider Revolution的最简单方法之一,因为他们的示例滑块展示了如何正确使用各种插件功能来创建令人印象深刻的滑块.
点击 添加幻灯片 开始从头开始创建幻灯片.
首先,使用 主要背景 选择幻灯片背景的选项:图像,外部URL,透明(请注意-如果在常规滑块设置中设置了主滑块背景,则将可见),纯色或视频。然后,如果您想进一步自定义幻灯片,请使用以下选项进行媒体源设置,滤镜,视差水平(%)和Ken Burns(动画平移和缩放效果).
下一步继续 常规设置. 如果您不希望滑块在加载后立即动画,则可以在此处设置幻灯片延迟时间,编辑幻灯片循环选项或添加有效期(如果您为假期或促销活动创建滑块,则很棒)。此标签上的另一个有用功能是可以设置您的 滑动状态 至 未发表 –通过这种方式,您可以继续编辑幻灯片并在网站的后端进行预览,而新的幻灯片不会对网站访问者可见.
如果您为滑块使用缩略图导航,则 缩图 标签提供了用于选择自定义幻灯片图像和尺寸的选项。但是,如果您选择不使用此导航样式,则可以跳过此选项卡.
完成后,您可以切换到 幻灯片动画 标签以自定义滑块过渡动画。超过80种动画可供选择,另外还有旋转,持续时间和缓动的选项.
Revolution Slider还提供以下选项 链接和搜索引擎优化 设定, 幻灯片信息 (自定义参数和说明)和 导航覆盖 为幻灯片添加专门的自定义导航箭头,项目符号或缩略图.
现在是单击该按钮的好时机 绿色文件 屏幕顶部的图标可保存设置,然后再向幻灯片中添加图层和样式.
添加幻灯片层
在添加或编辑幻灯片时,Slider Revolution包含很多选项,并且它们会不断出现。您可以选择8种不同的 添加图层 选项:
- 文字/ HTML 图层非常适合添加标题,描述甚至链接。在幻灯片上添加您想说的任何内容.
- 图片 非常适合插入徽标,增加视差幻灯片的深度,在设置之前/之后插入等等.
- 音频与 视频 层次相当直截了当。选择您要插入的媒体,然后从媒体库中选择一个文件或插入一个链接(YouTube,SoundCloud等)。然后添加设置以启用循环播放,自动播放,下一张幻灯片播放,基本音量,片段开始/结束和预加载。这是将真实推荐书添加到滑块,介绍性视频或教程中的简便方法.
- 纽扣 图层选项包括21个大小和边框半径组合,您可以编辑它们的颜色,背景,边框颜色,图标,字体,悬停状态和文本。此外,还有许多有用的预设,可用于社交链接,动画鼠标滚动图标,汉堡菜单甚至是播放/暂停.
- 形状 可用于添加效果(例如在按钮后面产生脉冲或放射颜色),定义文本层的一部分(使用形状仅突出显示一个单词或短语)或添加视觉效果。选择背景,边框颜色/大小,形状边框半径(0为正方形,100为圆形),形状大小(以像素为单位)和填充.
- 宾语 图层可用于从ThemePunch的免费资源库中插入png,jpg,svg或图标.
- 进口 从库中的另一个滑块复制图层或幻灯片。快速简单!
单击蓝色的“添加图层”按钮开始使用,然后使用选项进行真正的自定义或图层.
图层选项
如果您在主滑块预览部分的正北看,应该会看到一个带有大量选项的白色条,您可以在添加图层时用来编辑和自定义图层.
使用 样式 编辑字体,颜色和图层位置的选项。其中包括自定义Google字体,字体大小,行高,文本颜色,图层背景,填充/边距,透视图,悬停,切换等所有内容.
的 动画 标签就像您期望的那样-它包含用于添加和自定义图层的入口和出口动画的选项。选择一个预设的动画模板,添加缓动并编辑动画持续时间.
环 设置很简单:要么禁用以使您的图层仅加载您已经选择的动画,要么通过选择类型启用循环。从摆锤,旋转,侧环,脉冲和波形中进行选择,为图层提供恒定的循环动画.
移动设置位于 能见度. 在这里,您可以指定图层在特定设备上应该是可见的,在设置的宽度下隐藏还是仅在悬停时显示.
行为 包括一些有用的开关,可自定义图层设置。第一个是启用图层自动响应和子元素响应的设置。默认情况下,幻灯片层将随着浏览器窗口的收缩而收缩,请禁用这些设置以保持层的大小。您还可以从此处编辑图层对齐方式和响应偏移.
使用 动作 标签以在单击,鼠标输入或鼠标离开时添加自定义图层设置。动作包括滚动,切换,媒体播放,暂停,进入全屏,静音等.
对于高级用户或开发人员, 属性 部分可用于添加您自己的ID,类和包装,以使用自定义代码定位.
最后, 视差/ 3D 提供了一个下拉选择器,可以选择要添加到图层的视差效果的“级别”。百分比越高,图层移动的越多.
层帧时间
继续,在滑块预览下方,您应该看到一个时间表。在这里,您可以编辑图层动画在幻灯片上的延迟。您还可以看到直观的时间表,该时间表显示了图层时序与幻灯片的总时间长度的比较。被阻止的部分是您的图层动画时间,浅色的条是您的图层可见的整个时间长度.
要编辑幻灯片的总时长,只需单击并拖动表格右上方的蓝色标记.
添加多个图层后,您还可以使用此部分通过编辑位置编号,进入时间或将图层拖放到顺序中来重新组织图层。另外,您可以使用此部分来播放幻灯片,以在进行编辑时预览时间.
保存幻灯片
最重要的步骤是保存幻灯片!进行任何更改后,请确保保存或更新幻灯片。如果您离开幻灯片(即使是另一张幻灯片),则可能会失去所有的辛苦工作。所以一定要保存,保存,保存!
保存后,您可以继续使用其他幻灯片或滑块.
使用滑块
要将精美的滑块添加到任何帖子或页面,请使用您先前创建的Slider Revolution短代码。通过单击仪表板上的Slider Revolution菜单项,可以找到此短代码。简码应该看起来像 [rev_slider别名] 根据您首次创建滑块时给它的别名.
只需将简码粘贴到您的帖子或页面内容中即可。或者,如果您的主题支持其他滑块位置,则也可以在其中添加简码。某些WordPress主题甚至包括滑块的特殊模块。例如,Total Multipurpose WordPress Theme包含Slider Revolution,并且使用内置的页面构建器,您只需插入Slider Revolution模块即可将滑块添加到任何帖子或页面。您所要做的就是添加模块,从下拉列表中选择一个滑块(它将显示您已经创建的所有滑块的列表),插入然后将其拖放到位。易权?
包起来
我们认为Slider Revolution是最容易使用的高级滑块插件之一,特别是因为它们提供了许多免费模板(如果您购买了自己的插件许可证,甚至还会提供更多高级模板),易于使用的可视化编辑器和大量工具内置功能,因此您无需了解CSS即可为幻灯片设置样式(按钮,字体,颜色等已经存在!)。它获得了5星的好评,我们认为您很难找到更好的滑块插件.
希望我们的指南可以帮助您逐步入门,但是要了解更多(或获取自己的副本),请访问ThemePunch的Slider Revolution主页。他们展示了滑块的出色示例,并链接到现场演示,您可以在其中看到Slider Revolution的功能.
有关滑块革命的更多信息
但是,我们希望收到您的来信。在下面的评论中,让我们知道您对Slider Revolution的看法,或者随时向我们提问。我们很乐意为您提供帮助!