滑块革命：终极指南

Slider Revolution 是当今最流行的 WordPress 插件之一。 凭借超过 400,000 的销量和 4.75 的平均评分，该插件已证明其有效性和卓越性。

革命滑块：是什么让插件如此出色

Slider Revolution 由 Themepunch 开发。 该插件是为网页创建丰富的动态内容的构建器。 重点是“动态”，因为它允许您构建令人兴奋的幻灯片，为页面添加动感。

该插件提供了一个易于使用的构建器和大量选项。 精心设计的设置包让用户可以调整滑块的每一个细节，并允许使用完全不同类型的内容。 可以为单独的帖子、整个页面及其小部分创建滑块。 为了更准确地使用插件，您可以创建：

• 图像滑块和轮播
• 精选帖子滑块
• 社交媒体供稿
• 媒体画廊
• 英雄块和首页

您应该在您的网站上使用 Slider Revolution 的原因

Slider Revolution 绝对不会出错。 具有用户友好工具的综合插件是创建漂亮滑块的完美解决方案，原因如下。

捆绑插件

今天几乎每个 WordPress 主题都带有一个 Slider Revolution 插件。 通常，主题包包含插件的免费版本。 捆绑的插件仅限于非常基本的功能，但仍然非常方便地将主题与滑块构建器一起获取。

但是，如果您想访问插件的许多功能，您可以选择购买独立插件。 常规许可证将花费您 29 美元，您可以在 Codecanyon 市场上获得它。

对于扩展许可证，您将需要支付大约 150 美元，并且只需 9 美元即可获得一年的技术支持。

是的，该插件可能会花费您一些钱，但即使使用该插件的常规许可证，您仍然可以创建出色的滑块。

模板

这个惊人的插件不仅会给你留下深刻印象的工具和功能，而且它还有一系列漂亮的预制布局。 精彩的预制模板集合和可在幻灯片上使用的免费媒体对象库将简化并加快幻灯片的创建速度。 您可以为您的任何项目选择模板，而不是从头开始构建滑块，您可以节省时间并继续使用预先构建的布局。

只需导入您选择的模板并立即开始创建。

除此之外，您还可以访问包含不同对象的大型免费库，例如字体图标、背景图像、透明 PNG 对象、SVG 等。 您可以使用它们并轻松地将它们插入幻灯片中。

可视化编辑器

Slider Revolution 提供了一个令人惊叹的所见即所得编辑器，这使得创建和修改滑块模板变得非常简单。 许多网站所有者发现很难编写复杂的代码或聘请单独的团队来完成这项任务。 借助滑块编辑器，您可以节省时间并享受拖放功能来构建出色的幻灯片。

滑块插件可让您使用您构建的滑块更有创意，并在您的网站上轻松展示它们。 您将拥有大量自定义选项，例如构建自定义滑块位置、选择滑块延迟、添加过渡、添加媒体层等等。 这可以使用下拉列表立即完成。 此外，该插件具有许多导航功能，可让您更改导航样式并添加箭头、项目符号、选项卡和缩略图。

高速性能

Slider Revolution 编码良好，可以快速加载。 滑块的所有方面都经过优化，它使用高级调试选项来解决任何问题，自动加载核心文件，并根据使用的功能进行扩展。 它还采用智能延迟加载并经过 SEO 优化。

响应式布局

许多 Web 开发人员遇到的最大问题之一是滑块缺乏响应能力。 结果，这些滑块在小型设备上效果不佳或根本不显示。 响应性是用户体验的重要组成部分。 由于来自移动设备的大量流量，您的滑块在其他设备上表现不佳将是一种耻辱。

Slider Revolution 不仅仅是一个简单的滑块。 该插件已准备好响应，因此无论您创建什么幻灯片，您都可以确定它们将针对将要使用的任何设备进行优化。

Slider Revolution 确保为每个滑块设置响应断点，使任何设计在不同的设备和小屏幕上看起来都很棒。 无论您选择什么选项 - 单个、轮播或标准滑块，您都可以确保它在任何设备上看起来都是完美的。

自定义选项

Slider Revolution 插件的另一个优点是其多样化的自定义选项。 您可以设置幻灯片延迟、选择导航箭头、视差背景、添加媒体层、插入按钮、设置自定义字体、添加边距等等。

Slider Revolution 插件允许您自定义任何内容。 为了节省时间，您可以保存预设以便稍后在幻灯片过渡、字体样式和图层动画中使用它们。

滑块革命插件

想要通过过渡效果、动画让您的滑块更加复杂多样吗？

你已准备好出发！ Slider 支持不同的内容类型，如博客帖子和当前帖子，它允许您使用来自 Twitter、Facebook、Vimeo、YouTube 和 Instagram 等社交平台的提要。 您可以立即添加链接、视频、图像和文本。 借助变体功能，您可以构建功能丰富且信息丰富的幻灯片，供访问者使用。

安全

当涉及到网站时，安全性是最重要的方面之一。 您可能听说几年前受 Slider Revolution 影响的战争漏洞。 从那时起，Themepunch 增加了对软件的保护，现在正在使用第三方组织定期审核插件问题。 因此，您可以确定该插件是高度安全的。

技术支援

该插件附带详细的文档和大型常见问题解答部分，其中包含有关该插件的最热门问题。 这就是为什么即使您没有使用它的经验，也很容易开始使用滑块革命。 详细教程的可用性使为每个人创建网站幻灯片变得简单。

内容来源

插件成功地为各种内容源创建滑块。 无论是 WooCommerce 产品还是普通帖子，Slider Revolution 都有工具。

强大的功能使这个插件成为每个人的第一选择。 它的主要优点是它提供了多合一解决方案的类别。 您不需要任何额外的插件，一切都在插件中。

我们还应该提到它是负担得起的。 常规许可证将花费您 26 美元。 考虑到您以价格获得的功能数量，Slider Revolution 是业内最实惠的滑块插件。

在本终极指南中，我们将涵盖从安装插件到添加新幻灯片并将其放置在网站上的所有内容。

安装插件和主要设置

许多主题开发人员将 Slider Revolution 包含在主题包中。

如果您从 StylemixThemes 购买了高级 WordPress 主题之一，则无需手动安装插件。 Slider Revolution 将与演示导入一起自动安装。

如果您使用的主题包不包含插件，则需要手动下载并安装。 要获得 Slider Revolution 的副本，请点击此链接。

您将需要购买该插件。 登录您的 Envato 帐户并进行购买。 之后下载文件——选择“仅可安装的 WordPress 文件”的下载选项。

现在您需要向您的站点添加一个新插件。 转到您的仪表板 -插件 > 添加新的。 安装完成后，激活插件。

恭喜，你已经准备好了，你可以开始创建你的第一个滑块了！

如何更新滑块革命

Themepunch 发布滑块插件的定期更新。 要对其进行更新，请从您的仪表板打开 Slider Revolution 并按照更新选项卡进行操作。 在此页面上，您可以找到标题为“插件更新”的小部分。 此处指定了您网站上当前安装的插件版本以及可供更新的版本。

此外，您可以使用标准方式并转到仪表板 > 更新并从那里安装新版本的插件。

滑块革命：入门

如果您是第一次使用滑块，则其中使用的所有术语可能不够清楚。 您可能会混淆三个主要元素。 它们是模块、幻灯片和图层。 他们每个人都可以是另一个人的一部分，也可以单独工作。

例如，您可以创建一个设计为滑块的模块，它将包含幻灯片。 除此之外，您可以制作导航菜单或标题等模块，它们根本不是滑块，但它们仍将包含幻灯片。 原因是 Slider Revolution 最初是作为滑块构建器创建的，但是，现在它也被用作完整的网站编辑器。 因此，在它的帮助下，您可以构建的不仅仅是简单的幻灯片。

模块、幻灯片和图层之间的关系

模块是幻灯片的容器，幻灯片是图层的容器。

存在包含幻灯片的模块。 每个模块必须至少有一张幻灯片。 当您创建一个空白模块时，会自动添加一张空白幻灯片。 您可以创建其他幻灯片，或将所有内容添加到一张幻灯片中。 这完全取决于您正在创建的内容类型。

幻灯片是图层的容器。 每张幻灯片必须至少有一层。 创建新幻灯片时，会自动添加背景层。 该层始终存在，可以重命名并使其不可见，但不能删除。 这个背景区域可以用图层填充。

图层包含视觉、音频或布局项目，并添加到幻灯片中。 文本、按钮、图像、音频、视频、组和行都是图层类型。 每一层代表一个单一的媒体。 图层可以以最能实现您的想法的方式进行动画处理。

如何使用滑块革命：全局设置

正如我们已经提到的，Slider Revolution 有很多选择，这并不夸张。 这就是为什么在开始构建滑块之前，我们建议您先查看全局设置并了解使用插件的主要原则。

如果您从仪表板单击 Slider Revolution，您将能够打开插件的设置屏幕。

设置屏幕

在屏幕顶部，您可以找到包含以下选项的选项卡：

模块、更新、激活、新闻、全局、常见问题、支持。

在这个阶段，我们将只使用其中两个：模块——创建一个新模块，以及全局——查看全局插件设置。

全局设置

我们将从Globals开始。 全局设置主要分为以下几个部分：

• 一般的
• 默认布局网格断点
• 字体
• 各种各样的

这些设置负责在构建新滑块、自定义字体加载、数据库创建等时应用的默认响应式网格选项。

您只需要关注几个选项。 首先，是响应能力，以确保您未来的滑块在任何设备上看起来都不错。 这是有关设备及其尺寸的快速指南。

在默认布局网格断点部分，您可以为不同类型的设备设置宽度（以像素为单位）：台式机、笔记本电脑、平板电脑和移动设备。

只要每个设备都有自己的尺寸，请输入每种类型的确切宽度，以确保正确显示滑块。

• 标准桌面显示器的宽度为 1920 像素。
• 笔记本设备（包括所有笔记本电脑、MacBook 和水平方向的平板电脑）的宽度约为 1600 像素。
• 垂直方向的平板电脑的宽度不超过 778 像素（基于 iPad）。
• 和移动设备。 这是一个重要的部分，因为如今超过一半的互联网流量是通过移动设备产生的，如果用户无法正确看到您网站上的滑块，这将不会令人满意。 但是，这可能会令人困惑，原因是现代智能手机的尺寸完全不同。 我们建议您使用数字，不要超过 500 像素。

您可能想要控制的第二件事是访问滑块。 权限选项允许您拒绝除管理员和编辑者之外的其他用户访问插件。

现在您可以开始构建滑块了！ 您可以使用三个选项。 您可以从头开始构建新滑块，可以从 Slider Revolution 模板导出文件或导入主题中包含的示例滑块。

在我们的文章中，我们将回顾第一个选项并从头开始构建一个新的滑块。 这将让我们探索更多插件的可能性。

创建一个新滑块

现在，当我们完成一些主要设置后，我们可以继续创建新幻灯片。 打开 Slider Revolution 设置并单击New Blank Module。

您将被要求浏览快速指南。 如果您想参加简短的课程，请单击入门指南。 或退出指南以跳过此步骤。

您的屏幕将分为几个区域：从您的左侧有一个显示所有内容的框架，从右侧 - 这是一个包含部分和设置的工作空间。

常规选项

让我们从常规选项开始。 单击齿轮图标以打开设置。 首先，我们需要命名我们的模块。 在“标题”部分中，输入名称并将其复制为小写的别名，并在单词之间使用破折号而不是空格。

需要别名才能将滑块添加到页面。 您还可以通过复制提供的短代码并将其放置在要显示滑块的页面或帖子上来使用它。

之后，我们可以自定义类型和桌面层区域的高度和宽度。 这些设置位于布局选项卡下。

对于该类型，您有三个选项可供选择：

• 滑块 — 几张动画幻灯片，可旋转以一张一张地显示。
• 场景——可用作内容模块的单张幻灯片。
• 轮播——多张幻灯片同时可见。

我们需要指定的下一个设置是尺寸。 还有三个选项可用：

自动- 这是默认参数，可将滑块拉伸到 WordPress 主题定义的主容器宽度。

全角——全角滑块选项从左到右延伸（您仍然需要定义高度）

全屏 -用于填充整个屏幕的大型滑块，无论您的浏览器或设备的大小如何。

使用 Slider Revolution 插件，您可以为网站页面的每个部分设置动画。 请注意，这样做会增加您页面的权重，因此加载页面需要更多时间。 因此，它可能会对 SEO 排名产生负面影响。

调整大小设置

经典或线性调整大小可确保在配置主屏幕尺寸设置后您的滑块将相应地压缩（例如，1000x400 像素的滑块将压缩为带有字体、图像和其他滑块元素的 500x200 像素的滑块）。

智能继承可根据您选择的桌面设置自动创建设备尺寸，并提供调整选项。

自定义或手动设置允许您使用精确的像素设置滑块大小，并能够在不同的屏幕宽度（台式机、笔记本电脑、平板电脑和手机）下设置滑块大小。

幻灯片的响应性

继续。 我们还没有完成响应能力。 有一个图层区域大小，您可以在其中指定浏览器宽度。

通常，这些选项默认设置为 Auto Sizes，并且仅指定桌面参数。 您可以通过打开其他选项对它们执行相同的操作。

此外，如果您打开特定设备，您的工作区域（幻灯片容器）将根据所选设备的参数进行调整，这意味着您可以控制具体设备的滑块显示。

对于每个设备，将从全局设置中指定网格大小。 网格是滑块层所在的区域。 没有您应该输入的严格数字。 在您尝试探索几个选项后，您将找出最适合您的方法。  

这只是一个开始，一些通用选项将简化您使用滑块的进一步工作。 完成此部分后，您可以切换到下一步。

仔细查看选项

除了“常规”选项之外，还有其他三个选项卡您将与之交互很多。 我们希望指导您完成将要使用的主要设置。 基本上，幻灯片的创建考虑了该过程中涉及的几个组件。 这些是常规选项、导航设置、幻灯片选项和图层。

当我们说 Slider Revolution 有很多选择时，我们并不是在开玩笑。 要涵盖的元素太多，让我们稍微描述一下，然后更详细地回顾最重要的元素。

1. 一般选项

我们已经触及了常规选项中的一些元素，例如标题和布局。 但是，除了这些之外，您还需要调整其他一些事情。

总而言之，常规选项允许您设置以下内容：

标题— 提供滑块的名称。
布局— 选择滑块类型（滑块、场景或轮播）和调整大小（自动、全角或全屏）。 这有助于编辑图层区域的宽度和高度、模块的位置、默认背景颜色或图像等。
内容— 标识将内容添加到滑块的方式。 您可以从 9 个内容源中进行选择。

• 默认值——我们建议专注于一个重要参数——幻灯片持续时间（每张幻灯片将持续多长时间）。
• 常规 — 此部分包括自动旋转、悬停时停止、循环幻灯片和选择指定的第一张幻灯片的幻灯片设置。 在这里，您还可以在移动设备上或在指定的像素宽度下隐藏或禁用滑块。
• On Scroll——这个允许用户选择滚动效果，如视差、3D 深度、时间线、淡入淡出、模糊、灰度等。 所有效果都带有可自定义的设置。
• Spinner — 或预加载器，该插件有 15 个微调器选项可供选择。
• 高级选项允许您启用延迟加载、选择后备图像或简化旧浏览器上的滑块。
• CSS/jQuery — 在这里您可以将您自己的自定义代码添加到滑块。 请注意，这个更适合专业人士或熟悉编程和编码概念的用户使用。
• 作为模态 - 如果您想创建一个显示为弹出窗口或灯箱的滑块，则需要此特定选项，它为您提供滑块位置、封面颜色和在页面中插入模态滑块时使用的简码选项。
• 皮肤 - 皮肤呈现您可以创建并分配给文本图层的预设（指定突出显示、标题、内容文本的颜色）。

插件——在这里你会找到插件（注意——插件只有在你购买了自己的滑块许可证时才可用）。

2.导航选项

如果您计划包含多张幻灯片，导航选项将帮助您向滑块添加导航工具，例如项目符号、箭头和按钮。

所有选项都包括易于自定义的位置/对齐、尺寸、可见性和全局样式/预设设置。

导航元素包括：

• 进度 — 可视化当前幻灯片进度的进度条或圆圈。
• 箭头 — 让访问者可以轻松点击您的幻灯片。
• 项目符号 - 14 种样式的导航点添加到您的幻灯片。
• 选项卡 — 对于需要选项卡导航的内容滑块非常有用。
• 拇指 - 需要显示缩略图作为导航选项。 有 5 个选项可用。
• Prev Size — 指定预览图像的大小。
• 触摸 — 包括块滚动、速度和方向的选项。
• 键盘 - 您可以启用键盘导航（推荐用于辅助功能）。
• 鼠标 — 启用鼠标控制，例如轮播功能或反向滚动。
• 导航编辑器 - 此部分用于使用您自己的自定义代码自定义箭头、项目符号、选项卡或拇指。

3.幻灯片选项

设置的下一部分与幻灯片选项有关。

• 背景：选择幻灯片的背景。 从透明、彩色（您可以添加渐变）、图像、外部图像或视频（YouTube、视频或 HTML5）中进行选择。
• 缩略图：定义管理员可见的缩略图和用于导航的缩略图。
• 动画：选择幻灯片的过渡动画。
• 过滤器 — 22 种不同的过滤器可添加到您的幻灯片中。
• 进度 - 允许自定义幻灯片的长度、暂停和幻灯片的可见性。
• 发布规则 — 控制您的幻灯片是发布还是未发布。
• 标签和链接 — 有助于为幻灯片添加自定义类、ID 和 HTML 数据以及链接。
• 参数 — 添加最多 10 个自定义参数以在幻灯片和导航中使用。
• 循环层 - 如果您的滑块只有一张幻灯片，则管理循环设置。
• On Scroll — 自定义每张幻灯片的视差和滚动效果。

添加新幻灯片

完成设置滑块并调整所有选项后，是时候向项目添加新幻灯片了。 您可以看到框架，添加时会显示幻灯片内容。 现在它是透明的。 您可以更改背景选项并添加图像或设置颜色。

您可以从计算机上传图像，或使用外部来源（通过添加链接）。 此外，您可以将颜色设置为背景而不是图像。 它可以很容易地完成。

只需从 Source 面板的 Type 下拉菜单中选择 Colored 选项，然后单击 BG Color 按钮来选择您的颜色。 如果您想使用视频，只需添加源。

向幻灯片添加新图层

在屏幕顶部，您会找到+Add Layer选项。 使用它为幻灯片添加一个新图层。 有8 种不同的选项。

但是，如果您需要向滑块添加一些导航工具，最流行的选项是带有按钮支持的图像和文本。

图层选项：如何使用

Slider Revolution 的灵活性基于多个选项的可用性以及单独设置每个细节以及调整整个滑块项目的能力。 图层也不例外。 每次向幻灯片添加新图层时，您都可以控制它的每个选项。 在向幻灯片添加新图像的示例中，我们将查看图层选项允许您更改的所有参数。

当您想在幻灯片中添加图像层时，只需单击“添加层”下拉列表中的“图像”。 然后上传所需的图像。

在框架旁边，您会发现各种图层选项（内容、样式、大小和位置等）。

图层内容显示有关图层的一些基本信息。 您可以设置延迟加载并更改其源类型。

使用图层样式选项，您将能够添加颜色背景。

下一个选项是Spacing 。 间距帮助我们从上到下、从左到右、从下到上、从左到右移动图层。 它们标有字母“M”。

位置和大小。 设置对齐以及图像层的位置和大小。 垂直和水平对齐都可以轻松更改，只需单击其中一个对齐图标。

之后，您可以使用“对齐位置”选项的“垂直偏移”设置位置。 使用 X 和 Y 参数在幻灯片上移动图层。

图层高级选项

高级样式选项允许您水平、垂直和居中旋转图层，并让您为图层添加阴影。

图层动画选项

动画是滑块革命中的主要选项。 该插件的主要思想是向您的网站添加动画元素，而不是静态的标准视觉效果。

动画选项为您的幻灯片添加动作，使用此操作您可以为幻灯片设置动画并设置出现和退出动画。

出现和退出选项有两行：IN 和 OUT。

每行都提供了一个下拉菜单，其中包含不同类型的动画。 默认情况下，为所有图层设置淡入选项。 尝试一些动画，看看它在幻灯片上的样子，然后选择最好的。

下面的部分用于动画持续时间、动画缓动和定义动画开始。 持续时间定义动画完成所需的时间，开始选项定义加载幻灯片后动画将开始的持续时间。 缓动定义了动画进行的速度。

动画时间线

如果您在幻灯片中添加了多个图层，您可能不希望它们全部同时出现。 滑块革命动画时间线可以帮助您处理这个问题。 它位于我们工作框架的正下方。

每个图层的默认帧开始设置为 0 毫秒，这意味着图层将在加载 0 毫秒后出现在屏幕上。 出现持续时间通常设置为 3 秒，这意味着图层在 3 秒内变得完全可见。 要更改选项，请选择图层并通过指定不同的值对其进行编辑。  

确保为不同的图层设置不同的值，这样它们就不会立即出现并且看起来很乱。

现在，让我们仔细看看 Timeline 的选项

1.列表视图

这些图标可用于隐藏或显示图层以及基于垂直对齐方式隐藏或显示行。 只有网站管理员可以访问这些选项。

2. 时间线时长
时间线总持续时间在模块常规选项 > 默认值中定义。 此外，它可以在幻灯片选项 > 进度中单独设置。

通过左右拖动时间轴中的块，您可以轻松调整幻灯片长度。 您可以做的另一个选择是单击时钟图标并以百分比对其进行编辑。

3. 预览时间线

为了预览时间线，您需要单击播放图标或简单地拖动空闲块。

4.重命名图层

要重命名图层，请双击时间轴中图层的文本并重命名。 此外，您可以在编辑器的顶部中心编辑图层的标题。

5. 图层 z-index / 堆叠顺序

要设置 z-index/堆叠顺序，您只需在时间轴中拖动图层。

6. 动画

对于每一层，都有一个进出动画和附加的关键帧动画。 所有动画都呈现在时间轴中。

拖动动画块以调整时间轴中动画的起点。 并通过拖动块的端点来编辑动画的持续时间

层循环选项

循环选项卡可让您创建循环动画。 您可以选择动画类型，定义循环速度和缓动，并设置循环的开始和结束时间。

您可以选择 8 种类型：自定义、钟摆循环、效果循环、波浪、摆动、旋转、滑动和悬停以及脉冲。 每个循环动画都有自己的一组选项。

Pendulum使您的图层左右摆动。 您可以设置的选项包括结束和开始度数 - 这标识动画将发生的度数，以及 X 和 Y 原点 - 此参数确定图层将从其旋转的轴点，您可以在百分比。

效果循环允许您从多个选项中进行选择——灰度、闪烁、扁平化和 Lithing。 所有效果看起来都不同，因此我们建议您查看每个选项以选择最适合您的选项。

Wave动画使您的图层以类似于波浪的运动旋转。 它围绕层外的轴旋转。 您可以设置 Rotation X 和 Y Point 来确定图层将围绕其旋转的轴的位置，设置 Start Angle 来标识动画的起始位置，以及设置 Radius 来确定旋转的轨道。

摆动循环将使您的图层左右摆动——从上到下，从左到右，反之亦然。 使用下拉菜单选择您喜欢的选项。

旋转循环使您的图层围绕设置的轴点旋转。 如果您从 Rotating 下拉列表中选择第一个项目 - Rotate 项目，该图层将旋转并形成一个完整的圆圈。

要使您的图层从左到右、从右到左、从上到下、对角线移动，您可以使用滑动和悬停动画。 您可以设置动画的开始和结束位置。

脉冲动画使您的图层不断放大和缩小。 指定缩放开始和缩放结束。 这里开始和结束的默认值都是 1。 这意味着该层将保持其大小的 100%。 换句话说，它不会动画。 如果您为 Zoom Start 输入 0.5，您的图层将从其大小的 50% 开始并放大到其大小的 100%，然后再回到 50%，依此类推。

图层悬停选项

悬停效果是良好 UX 的主要内容。 悬停效果通常表明需要或执行该操作，特别是因为此方法与滑块一起使用时更是如此。 使用 Slider Revolution，您可以在悬停时更改图层、文本和图像。

在滑块革命中添加悬停效果

首先，您需要打开图层悬停。 选择要添加效果的图层，然后单击“图层选项”下的“悬停”。 单击已启用以将其打开。

在neath，您将找到设置悬停时图层行为所需的所有选项。 如果您保持原样，图层将不会显示任何更改。

悬停设置

您可以在此处设置的第一件事是光标。 在下拉菜单中，您可以找到光标的不同选项。 Auto 和 Default 执行相同的功能，不会反映出任何差异。 十字准线和指针定义了屏幕上鼠标光标的形状。

这里还有更多的光标样式。 其中一些非常不寻常，但是，它们中的大多数表示层在触发时的操作。 例如，如果您将图层链接到支持中心，您可以选择帮助光标。

指针事件默认设置为自动。 没有链接内容时使用无选项。 此部分允许您选择图层悬停时的光标外观、启用动画并进行设置。

悬停动画

接下来，有一个悬停动画，您可以根据自己的喜好进行设置。 您应该注意几件事。 首先，当图层在悬停时发生变化并且过渡发生在某个时刻时，它看起来并不好。 当过渡发生延迟时总是更好。 . 默认情况下，延迟设置为 300 毫秒，如果适合您，请保持不变，或更改值。

此外，您可以设置过渡的缓动。 您有多种选择。

筛选

您可以向您的图层添加过滤器。 换句话说，你可以在一定程度上模糊七弦琴。 该选项以像素表示。 值越高，模糊越“厚”。

风格

还有一个 Style 部分，您可以设置背景颜色和调整边框，即更改它们的颜色并选择边框样式。

滚动图层选项

On Scroll 选项使幻灯片可以在鼠标滚动时移动。 There are three options – Parallax , Timeline Scroll Based , and Filter Effect Scroll Based .

Layer Action Options

Actions make your layers interactive. For example, you can make a layer open a link when a user clicks on it.

Click on the Action icon to choose the type of action you need. The first dropdown is where you can choose the type of action that you would like to occur . There are a lot of options here: Link Actions, Slide Actions, Layer Actions, Media Actions, and Fullscreen Actions. Your chance is full depends on you and your goals, whether you want the layer to open the link or to switch the slide.

After you made a choice of what action to add, you need to set this particular option. For example, we are going to add a link. Select the option of Simple Link, and on the new screen, you will be offered to enter some parameters such as the URL itself, selecting the interaction and action type, and more.

Layer Visibility Options

If you want your layer to be visible on all devices , then make sure the switches shown in the image below are all turned ON under the Visibility section . The first one is for desktop, the second one is for laptops and horizontally oriented tablets, the third one is for vertically oriented tablets, and the last one is for mobile phones.

If you don't want your slider to be shown on some devices, simply turn off this option.

Text layer

After we review most of the options that we need for the layer setup, let's move to the other type of layer and try to add some text to our slide.

There are two options to choose from Quick Style heading or content. The main difference between them is pre-styled options.

Let's just point out some primary options you need to set for the text layer. They are the following:

• In the Content section, we add our text, and aligned it.
• In Style changed the font and its size, weight, line-height
• Customized the Size & Pos to change the location of the layer within the slider
• In Animation, we add some effects and speed for our text.

When adding a text layer there will appear a black box. You need to enter your text there. Everything you change will be visible in your work-frame.

Moving on to the Style tab. By default the font style that is applied to the text is Roboto. Choose the font family you prefer from the dropdown. Make sure that you selected the text layer before you start editing it.

Besides choosing a font family, you can also determine the font-size, line-height, font-weight, and letter spacing here as well. All these options adjust the look and feel of the text. So take your time to set it up and play around with these options to find the best combination.

Next, choose the color for your text. You can use the color picker and find the color that suits your page and slide perfectly. After that, you can save the change and see how the slider looks on your page.

If everything is good, you can move to the next step which defines the horizontal and vertical alignment of the text layer. For instance, you would like to have your text layer start 300px from the left edge of the screen, and 100px from the top. According to this, the horizontal alignment will be set to left, and vertical alignment to top. Fill in the X and Y fields respectively and save the changes to check how the text looks.

For customizing options you can use the same options we went through during the image layer setup. You can add animations, define visibility, create actions, etc.

You can also input HTML code into your text layer field. Thanks to this option, you can insert different shortcodes and create your own HTML elements using text layers.

如何使用滑块旋转创建视差效果

视差是最流行的效果之一，它使网站更加令人印象深刻和充满活力。 您可能已经看到许多网站和主题与该特定效果相结合。 现在我们将展示如何使用 Slider Revolution 插件自己构建一个。

什么是视差？

视差效果可以定义为背景中的元素和前景中的元素以不同的速度移动并产生深度错觉的效果。 通常，背景元素移动较慢

有不同的方法可以在您的网站上实现这种效果。 幸运的是，Slider Revolution 具有帮助您实现视差效果的所有功能。

在滑块革命中创建视差

首先打开视差。 转到Module General Options > On Scroll > Scroll Based Features > Parallax ，然后将 Parallax Enabled 开关转到On 。

该插件提供了许多不同的深度值。 选择最适合您的一种。 您也可以输入自己的值。

将视差添加到背景图像

要将视差效果添加到背景图像，请转到“幻灯片选项”>“滚动时”>“视差和 3D 设置” ，然后从下拉列表中选择首选深度。

选择深度时有严格的规定。 如果您尝试不同的值并查看哪个更适合您的滑块，那就更好了。 不同的深度直接影响并产生不同的效果。 这就是为什么我们建议您尝试它们以查看结果。

向图层添加视差

在 Slider Revolution 中，视差效果不仅可以添加到背景图像中，还可以添加到各个图层中。 这种效果的好处在于，如果他们仅通过移动鼠标来控制页面上滑块的各个部分，它会给用户一种错觉。 这在网站上看起来非常不错，而且设置起来非常容易。

选择您的图层，转到图层选项 > 滚动 > 视差和 3D 选项卡，然后选择所需的深度级别。

结果，您将获得在鼠标移动时激活的具有视差的图层。

无论是背景图片还是单个图层，添加 Slider Revolution 视差效果都非常容易。 虽然，并非每个滑块都需要视差。 主要将它用于简单的滑块，因为如果没有这种效果，具有大量动画的动态滑块可能会做得更好。

添加按钮层

使用 Slider Revolution，您可以创建和设计按钮以添加到滑块以进行导航。 为此，首先，我们需要在滑块工作框架中添加一个按钮层。

添加按钮时，它将以文本形式显示，您只需对其进行自定义。 在屏幕右侧，您可以找到许多预设计按钮的选项。 您可以为按钮选择其中之一。

此外，您可以使用原创的东西，因为播放按钮、切换器等有多种变化。 此外，可以添加阴影效果并使按钮看起来更有趣。

选择样式后，您可以更改高级设置并自定义其外观。 所有设置都可以在“图层选项”选项卡下找到。

您可以更改按钮的初始外观、更改文本、更改悬停时的显示以及设置动画。

如何使滑块响应

一开始，我们已经设置了一些参数来使我们的幻灯片响应。 这还不够。 为此，您还需要确保每张幻灯片中的每一层都能无缝适应所有设备和屏幕尺寸。

因此，将所有幻灯片和图层添加到滑块后，就可以针对所有其他可用设备进行微调了。

在工作框架中编辑幻灯片时，您主要是将它们设置为在桌面设备上看起来不错。 当您确定桌面上的一切看起来都很完美时，您可以开始尝试其他设备的布局。

现在您可以从下拉列表中选择要模拟的设备。 打开要检查滑块显示的设备。 可用设备包括：台式机、笔记本电脑、平板电脑、移动设备。

您可以修改每台设备的所有内容。 例如，对于文本图层，您可以设置不同的字体大小、行高、字体粗细和颜色，这一切都取决于查看滑块的设备。 对于图像层，为了改变它的大小，你需要添加一个不同的宽度，图像的高度会根据宽度自动调整。

注意蓝色网格边框。 这些定义了您当前正在使用的设备的边缘。 因此，如果您的任何图层超出边界，请确保更改这些图层的设置。

最后，保存您的滑块，并查看它的实时外观。

将滑块添加到页面

你做得很好，现在是时候看看你的滑块在页面上的样子了。 为此，请使用您之前创建的 Slider Revolution 短代码。 此简码可在“常规选项”部分的“标题”选项卡下找到。

或者，如果您从仪表板打开 Slider Revolution。 找到当前模块并选择选项嵌入。

在弹出窗口中选择页面和帖子选项并复制简码。

短代码应类似于[rev_slider alias=”title”][/rev_slider] ，其中“title”基于您为滑块提供的别名。

使用 Elementor 显示滑块

使用简码方法在页面上显示滑块非常简单。 但是，有一种方法可能更容易。 您使用 Slider Revolution 插件构建的所有滑块都可以使用 Elementor 小部件插入到页面上。 选择要在其上显示滑块的页面并通过 Elementor 编辑器打开它。 然后只需将元素拖放到工作框架上。 在小部件面板上，搜索 Slider Revolution 6 小部件并添加到页面。 拖动小部件时，您需要选择要使用的滑块。

使用这种方式作为短代码的替代方法，因为一些网站所有者发现使用页面构建器小部件更容易。

如何导出滑块

要导出滑块，请单击仪表板菜单中的相关选项卡，转到 Slider Revolution。 您导入或创建的所有滑块都将显示在那里。

将鼠标悬停在要导出的模块的缩略图上。 单击右下角的小箭头。 在所有出现的选项中选择导出并单击它。

您将看到确认对话框，通知您导出可能需要一些时间。 单击“是，导出滑块”，下载将开始。 下载完成后，您将拥有滑块的 .ZIP 文件。

总结

StylemixThemes 开发的几乎所有主题都在包中包含 Slider Revolution 插件。 我们喜欢这款功能强大的软件，它让我们有机会使网站更具吸引力、吸引力和互动性。

我们希望我们的指南有助于更好地理解使用这个惊人的插件构建滑块的过程。 如果您正在寻找更多信息，请关注 Slider Revolution 的主页。