首页/新闻资讯/技术教程/wordpress

在线咨询

15918836078 网站设计、网站建设咨询

Slider Revolution革命幻灯片使用教程 强大的WordPress幻灯片插件

发布时间:2019-01-10 3789 次浏览

427629ccff0fe2b7ecc8879543409c21.jpg

Slider Revolution革命幻灯片简介

革命幻灯片是一个可用于WordPress,jQuery和Joomla的高级幻灯片插件。由于其广泛的特性和易用性,它在WordPress社区中获得了巨大的人气。

在这篇概述中,我们将介绍WordPress插件革命幻灯片的主要特性,然后我们将向您展示从头开始制作自己的幻灯片是多么容易。

革命幻灯片:是什么让这个WordPress插件如此伟大

为了让你的网站更容易制作定制的幻灯片,Slider Revolution有很多很棒的特色,可以让你的网站变得更简单。以下是我们最喜欢的一些功能。

响应的布局

该插件是完全自适应的,并包括多个幻灯片布局选项,使您的工作更容易进行。首先选择你的幻灯片类型:标准幻灯片,英雄场景(单幻灯片)或旋转木马幻灯片。然后选择一个布局:auto、full-width或full-screen。



“自动布局”选项允许您使用精确的像素设置幻灯片大小,以及在不同屏幕宽度(桌面、笔记本电脑、平板电脑和手机)设置幻灯片大小的附加选项。如果你把这个选项留在默认设置中,它会把你的幻灯片拉伸到WordPress主题定义的主容器宽度。



全宽度布局就像它听起来的那样——一个全宽度幻灯片选项,可以从左到右完全展开。您仍然需要定义幻灯片的高度。



最独特的布局选项是全屏。有了这个选项,你可以创建非常棒的幻灯片,它可以填满你的整个屏幕,不管你的浏览器或设备有多大(你甚至可以使用这个选项添加带有视频的全屏幻灯片,以获得更大的效果)。

多个内容源

想为你的文章创建一个幻灯片吗?还是你的WooCommerce产品?没问题——在创建幻灯片时从11个不同的内容源中进行选择。

在写这篇文章时,Slider Revolution支持基于博客文章、特定文章、当前文章/页面(如果你想在博客文章或作品项目中添加一个有特色的幻灯片,那就太棒了)、Flickr、Instagram、WooCommerce、Twitter、Facebook、YouTube、Vimeo或默认幻灯片(上传自己的图片/视频)的内容。

简单的选项

革命幻灯片使您很容易创建自定义幻灯片添加选项几乎所有。选择你的幻灯片延迟,导航箭头,自定义字体,添加视差背景,滑动条位置(添加空白),添加媒体层,插入按钮,选择幻灯片过渡和更多所有使用下拉菜单在整个插件。



最重要的是,你可以自定义几乎所有的东西,甚至保存你自己的预设,使重用字体样式,幻灯片过渡,层动画将更容易。


Slider Revolution 使用指导

在你安装了插件之后,它应该会在你的WordPress主仪表盘上添加一个菜单项。单击此按钮可转到主幻灯片 革命幻灯片管理页面。

Main Slider Revolution Settings

从这里你可以创建或编辑幻灯片,激活你的商业版,控制面板也可以看看你的插件副本是否最新。

革命幻灯片全局设置

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

slider Revolution Global Settings


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

您应该考虑编辑的第一个选项是View Plugin Permission(查看插件权限),您可以使用它来限制对管理员的插件访问。这是一种简单的方法,可以确保您,您的网页设计师或其他管理员是您网站上唯一创建幻灯片的人(如果您的博客上有访客作者,则非常有用)。

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

现在您可以开始创建了!您有三个选项 - 从头开始,从Slider Revolution中获取免费导出文件“用法示例”或导入主题中包含的示例幻灯片。

导入幻灯片模板

滑块革命样品滑块

如果您选择从Slider Revolution的使用示例导入示例幻灯片,请首先从其站点下载幻灯片文件,然后单击“ 导入滑块”选项导航回WordPress  。从这里浏览您下载的示例文件,然后单击上。这应该添加样本幻灯片及其所有设置,以便您可以将其用作新幻灯片的基础。

Slider Revolution模板下载 革命幻灯片免费模板下载

创建一个新的幻灯片

如果您从头开始制作幻灯片,请单击“ 新建幻灯片”选项。现在从顶部开始

滑块革命内容来源

选择内容源:选择要向幻灯片添加内容的方式。有11个内容源可供选择,但在大多数情况下,您需要选择默认选项。

滑块革命标题和短代码

添加幻灯片标题和短代码:选择幻灯片的名称,以帮助您记住它包含的内容或您正在使用它的页面。这也是您可以找到幻灯片的简易短代码,将其插入文章和页面。

滑块革命类型

选择幻灯片类型:选择幻灯片类型,然后选择预设以加载插件中包含的预设。

滑块革命布局

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

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

幻灯片设置

在右侧,您将看到一堆幻灯片选项。

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

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

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

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

性能和搜索引擎优化:启用延迟加载和监控滑块性能。

问题处理:启用后备并排除任何滑块错误。

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

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

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

滑块革命快速链接

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

添加或编辑幻灯片

添加或编辑滑块革命幻灯片

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

静态/全局图层将被视为您创建的任何幻灯片的叠加层。这是添加logo或水印的好方法,包括产品的“立即购买”按钮。

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

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

滑块革命:设置幻灯片背景

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

滑块革命:设置幻灯片常规设置

接下来转到常规设置。如果您不希望滑块在加载后立即动画,编辑幻灯片循环选项或添加过期日期(如果您为假日或促销创建滑块,那么可以设置幻灯片延迟)。此选项卡上的另一个有用功能是可以将幻灯片状态设置为未发布 - 这样您就可以继续编辑幻灯片并在网站的后端进行预览,而无需向网站访问者显示新幻灯片。

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

滑块革命:设置幻灯片动画

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

Revolution Slider还提供链接&SEO设置,幻灯片信息(自定义参数和说明)和导航覆盖选项,以便为幻灯片添加自定义导航箭头,项目符号或缩略图。

现在是点击屏幕顶部绿色文件图标的好时机,以便在向幻灯片添加图层和样式之前保存设置。

添加幻灯片图层

滑块革命:添加滑块层

在添加或编辑幻灯片时,Slider Revolution充满了各种选项。您可以从8种不同的添加层选项中进行选择:

  • 文本/ HTML图层非常适合添加标题,描述甚至链接。在幻灯片上添加您要说的内容。

  • 图像非常适合插入Logo,在视差幻灯片上添加深度,在集合之前/之后插入等等。

  • 音频和  视频层非常简单。选择您要插入的媒体,然后从媒体库中选择一个文件或插入链接(YouTube,SoundCloud等)。然后添加设置以启用循环,自动播放,下一张幻灯片,基本卷,段开始/结束和预加载。这是一种向滑块,简介视频或教程添加真实推荐的简便方法。

  • 按钮图层选项包括21个大小和边框半径组合,您可以为其编辑颜色,背景,边框颜色,图标,字体,悬停状态和文本。此外,还有一些有用的预设社交链接动画鼠标滚动图标,汉堡菜单甚至播放/暂停。

  • 形状 可用于添加效果(如脉冲或辐射按钮后面的颜色),定义文本图层的一部分(使用形状突出显示一个单词或短语)或添加视觉兴趣。选择背景,边框颜色/大小,形状边框半径(正方形为0,圆形为100),形状大小(以像素为单位)和填充。

  • 对象图层可用于从ThemePunch的免费资源库中插入png,jpg,svg或图标。

  • 导入  以从库中的另一个滑块复制图层或幻灯片。快速而简单!

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

图层选项

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

滑块革命图层样式

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

滑块革命层动画

“ 动画”选项卡与您期望的一样 - 它包含添加和自定义图层的进入和退出动画的选项。选择预设动画模板,添加缓动并编辑动画持续时间。

滑块革命层循环

循环设置很简单:要么禁用,要么只使用已选择的动画加载图层,或者通过选择类型启用循环。选择摆锤,旋转,侧循环,脉冲和波浪,为您的图层提供一个恒定的循环动画。

滑块革命层可见性

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

滑块革命层行为

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

滑块革命层动作

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

滑块革命图层属性

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

滑块革命层视差/ 3D

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

图层帧时间

继续前进,在滑块预览下方,您应该看到时间表。在此处,您可以编辑图层在幻灯片上设置动画的延迟。您还可以看到一个可视时间表,显示与幻灯片的总时间长度相比的图层时间。被阻止的部分是您的图层动画时间,浅色条是您的图层可见的整个时间长度。

滑块革命层时间

要编辑幻灯片的整体持续时间,只需单击并拖动表格右上角的蓝色标记即可。

添加多个图层后,您还可以使用此部分通过编辑位置编号,入口时间或拖放图层按顺序重新组织图层。另外,您可以使用此部分播放幻灯片,以便在编辑时预览时间。

保存幻灯片

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

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

使用你的幻灯片

要将精彩的幻灯片添加到文章或页面,请使用之前创建的Slider Revolution短代码。通过单击仪表板中的Slider Revolution菜单项,可以找到此短代码。根据您在第一次创建幻灯片时给出的别名,短代码看起来应该类似[rev_slider alias]。

只需将短代码粘贴到您的帖子或页面内容中即可。或者,如果您的主题支持其他滑块位置,您也可以在其中添加短代码。

大家觉得容易吗?


文章标签: