最好的 WordPress 滑块插件比较

已发表: 2020-11-10

滑块,轮播,幻灯片。 没有其他设计元素能像它们一样多才多艺。 并且没有其他元素像滑块那样将网页设计师和开发人员分开。 尽管如此,客户还是喜欢并要求拥有滑块。 因此,如果您需要找到最好的 WordPress 滑块,那么您很幸运。 我在这里为您提供此动手指南。

目录

  1. 如何识别最好的 WordPress 滑块插件?
  2. 滑块革命
  3. 智能滑块
  4. 图层滑块
  5. 主滑块
  6. 元滑块
  7. 独白
  8. 速度测试
  9. 价钱
  10. 最终结果

如何识别最好的 WordPress 滑块插件?

那里有很多滑块,当然,他们都声称自己是 WordPress 的最佳滑块。 事实上,有很多很棒的滑块,但是您如何找到最好的滑块呢? 是什么让滑块插件成为最好的 WordPress 滑块? 好吧,找到 WordPress 的一体化滑块解决方案并不像看起来那么难。 只需找到符合以下条件的插件:

1.接口

即使您认为这没什么大不了的,但滑块插件在 WordPress 管理员上的外观实际上很重要。 如果 UI 很丑陋,则可能很难导航,并且创建滑块会很繁琐。 因此,最好的 WordPress 滑块插件需要有一个看起来很棒并且使用起来很愉快的界面

2. 易用性

滑块插件往往有很多选项可以让你创建任何你想要的东西。 太多的选项可能会令人困惑,尤其是如果它们的布局不合理。 最好的 WordPress 幻灯片需要易于使用。 必须添加新的滑块或幻灯片不应该让您感到压力。

3. 可用层

在滑块中,您可以创建带有图层的内容。 它们允许您在幻灯片中添加文本、图像、按钮和其他很酷的东西。 最好的滑块插件需要有图层。 此外,它需要有足够的层来创建现代滑块。

4. 造型

能够在幻灯片中添加许多图层是不够的。 您需要能够为它们设置样式,以使滑块很好地适合您的网站。 因此,我将检查每个滑块插件提供的可用样式选项。

5.滑块导航

一个滑块包含一堆幻灯片。 您的访问者需要能够以直观的方式浏览它们。 例如,使用箭头、项目符号或缩略图。 这些控件需要适合您网站的配色方案,并且在图像上保持可见。 换句话说,最好的 WordPress 滑块插件必须提供可定制的导航选项。

6.发布滑块

对于任何认真的博主来说,能够从他们的帖子中创建一个滑块是必须的。 帖子滑块有助于展示他们在其网站上拥有的精彩内容。 当然,并不是所有的网站都有博客页面,但是运行一个可以带来 SEO 的好处。

7. 效果

最好的 WordPress 滑块需要帮助您提供令人惊叹的因素。 换句话说,它需要具有所有可以用来让访问者惊叹的奇特效果。 你只有 50 毫秒的时间来创造一个好印象。 你的滑块需要帮助你。 您需要像 Ken Burns 或 Parallax 这样的效果,它们在任何网站上看起来都很棒。 此外,切换幻灯片的时尚过渡效果可以使滑块更具吸引力。

8. SEO友好

有一个普遍的误解,即滑块对 SEO 不利。 对于某些滑块来说,这可能是正确的,尤其是在它们已经过时的情况下。 但对于现代滑块而言,情况并非如此。 此外,如果滑块想成为最好的 WordPress 滑块插件,那么它也必须是 SEO 友好的。

9.响应

2020 年,大约 50% 的网站流量来自手机。 这是一个疯狂的小屏幕使用量,但这是完全可以理解的。 手机总是放在人们的口袋或包里,随时可以浏览。 因此,您的网站需要在移动设备上看起来很棒。 同样,您需要一个响应式滑块,在小屏幕上观看是一种乐趣。

什么是最好的 WordPress 滑块插件?

插件越好,使用的人就越多。 因此,认为最好的 WordPress 滑块是大多数人使用的滑块是有道理的。 在我的研究中,我发现了 6 个超级流行的插件,被全球成千上万的人使用。 如何找到最适合 WordPress 的滑块插件? 我将比较我发现的最流行的插件。 我将使用上面列出的标准进行比较,看看每个插件的性能如何。 这些是我选择比较的六个最佳 WordPress 滑块插件:

  • 滑块革命
  • 智能滑块
  • 图层滑块
  • 主滑块
  • 独白
  • 元滑块

由于我希望这篇文章是最全面的,所以我在测试滑块时会尽可能客观。

滑块革命

如果您曾经搜索过要在您的网站上使用的滑块,我相信您一定遇到过 Slider Revolution。 这是一个超级流行的 WordPress 滑块插件。 它捆绑在许多高级 WordPress 主题中,这可能是它成名的原因。

人们通常根据主题提供的功能来选择主题。 通常,此功能来自捆绑到主题中的插件。 高级主题通常捆绑滑块插件,因为它们是很棒的眼睛糖果。 因此,它们使主题对潜在买家更具吸引力。

但是捆绑插件有一个巨大的缺点:它们没有许可证密钥。 如您所知,您需要激活高级插件才能更新它们。 但是您还需要高级服务的激活副本。 这些服务通常包括支持和模板导入。 因此,如果您使用捆绑插件,您将免费获得一个高级插件,但没有任何支持。 不幸的是,这不是一个很好的交易。

界面

关于 Revolution Slider 的界面,我首先注意到的是它非常黑暗。 默认情况下,我发现很难阅读,因为黑色背景上有灰色文本。 打开高对比度模式对易读性有很大帮助。

最好的 WordPress 滑块插件之一的界面,滑块革命
滑块革命界面

Slider Revolution 使用相同的界面进行滑块配置和幻灯片编辑。 换句话说,没有可以配置滑块的单独页面。 左侧的大区域是您可以设置幻灯片的地方。 右侧的侧边栏是设置所在的位置。 例如,您可以在此处命名滑块,或为您添加的图层设置样式。 这是一种有趣的方法,需要大量点击才能习惯它

便于使用

对我来说最困难的是缺少工具提示。 事实上,Slider Revolution 在很多地方都使用了图标按钮,例如,在侧边栏顶部或时间线上方。 不幸的是,很难猜测这些图标的作用,有时甚至在单击它们之后也是如此。 最好有一个工具提示来告诉悬停选项的名称。 这可能有助于提供有关单击图标时会发生什么的线索。 我确实找到了帮助模式,但它不适用于这些图标。

Slider Revolution 中的幻灯片编辑器
Slider Revolution 中的幻灯片编辑器

Rev Slider 有一个拖放界面来创建幻灯片的布局。 因此,它易于学习和使用。 然而,定位还有很多不足之处。 想象一下:你想创建一个标题、一个文本和一个按钮层,它们应该从同一个位置开始。 默认情况下,图层仅在接触时才会相互粘连。 如果它们至少有 1px 的距离,它们就不再粘住了。 因此,它们很有可能会错位。 为了能够进行像素级完美定位,您需要启用基于网格或图层的调整。

幸运的是,Revolution Slider 提供了许多很棒的滑块模板。 您可以通过单击导入它们并根据自己的喜好自定义它们。 因此,您可以快速为您的 WordPress 网站创建一个漂亮的滑块。 此外,您无需花时间定位图层。

可用层

您可以在 Slider Revolution 中找到基本图层和更多内容。 有一个文本层,您可以在其中放置标题或段落文本。 您可以在幻灯片中添加按钮、图像、视频、音频和图标。 如果要使背景图像变暗以增加图层的易读性,请使用形状图层。

可用的图层足以创建您可以想象的任何类型的布局。 因此,可以肯定地说 Slider Revolution 是一个多用途的滑块插件。 因此,您可以使用它为您的 WordPress 网站创建高质量的滑块。

造型

您可以使用 Rev Slider 根据自己的喜好配置任何图层。 在文本层,您可以设置字体大小、系列、颜色、粗细甚至字母间距。 但是还有一个选项可以设置每层的背景颜色、填充和边距。

我遇到的第一个困惑是当我想为我的滑块创建一个按钮时。 我需要更改正常和悬停背景,但它们在不同的地方。 具有艺术家调色板图标的样式具有所有样式选项。 例如,这就是我找到正常背景颜色选项的地方。 但是,悬停颜色位于悬停设置下,该设置具有鼠标光标图标。 这背后有一些逻辑,因为悬停颜色会在鼠标交互时激活。 无论如何,将这些选项彼此相隔很远是一个有趣的选择。

滑块导航

创建新滑块模块时没有启用默认导航。 换句话说,如果您想在滑块上显示箭头、项目符号或缩略图,您需要自己启用它们。

您可以从许多预定义的导航样式中进行选择。 将鼠标悬停在他们的名字上会在幻灯片编辑器上显示他们,这样可以更轻松地选择您最喜欢的那个。 您还可以更改颜色以确保导航在幻灯片内容上保持可见。 我认为设置正常背景并关闭悬停会使两者显示相同的颜色。 相反,Slider Revolution 将某种默认颜色设置为悬停背景。 因此,如果您想要悬停和正常状态的颜色相同,则需要将其设置为两者。

后滑块

能够从帖子中创建滑块是大多数博主想要做的事情。 帖子滑块可以突出显示最新帖子,并为他们带来更多读者。 他们还可以展示您博客中最受欢迎的帖子。 由于 Slider Revolution 是最好的 WordPress 滑块插件之一,它可以创建帖子滑块。

帖子滑块的优点在于它允许为帖子创建单独的布局。 此外,它很简单:您只需要创建更多幻灯片。 例如,如果您创建两张幻灯片,您的奇数和偶数帖子可以有不同的布局。 换句话说,可以为滑块中的每个其他帖子创建不同的布局。 由于滑块的类型是动态的,因此您不能将非动态幻灯片放到滑块中。 例如,这可以用于创建动态幻灯片的介绍或结尾。

在 Rev Slider for WordPress 的后端和前端发布幻灯片
在后端(左)和前端(右)中发布幻灯片

编辑幻灯片时,您看不到幻灯片中的实际帖子数据。 因此,很难创建适当的布局。 这是因为编辑器和前端的内容长度可能不同。 虽然制作幻灯片很容易,但您不知道内容需要多少空间。 结果,编辑变得复杂,因为图层可以重叠。 这可能会导致易读性问题。 此外,重叠的内容看起来不专业。

效果

Slider Revolution 充满了惊人的效果,可以创造出真正华丽的滑块。 不幸的是,在您下载了他们的插件后,许多很酷的效果都可以使用。 其中一些流行的效果是前后、粒子或打字机效果。 显然,插件有自己的优点和缺点。 首先,不包括插件中的所有内容使 UI 不那么臃肿。 因此,它更易于导航且对用户更友好。 此外,人们只会拥有他们实际使用的效果。

革命滑块中的插件
Rev Slider 中的插件

但是,附加方法也有一些缺点。 首先,该站点将有更多需要维护的插件。 每当您更新 Slider Revolution 时,您都需要确保更新其附加组件。 否则,可能会出现兼容性问题。 例如,某些效果不会出现在滑块上。

同样重要的是要提到附加组件仅在激活后可用。 由于 Slider Revolution 通常与主题捆绑在一起,这有助于产生收入。 这是因为主题不能包含许可证密钥,因此他们的客户将无法使用附加组件。 但是附加组件中有许多很棒且受欢迎的效果,因此人们很有可能会更新。

搜索引擎优化友好

当您向幻灯片添加文本时,Slider Revolution 会将其包装在 rs-layer 标记中。 但是,这对 SEO 来说并不是很好。 此外,Slider Revolution 用户声称他们注意到关键字排名有所改善。 我搜索了包装在 rs-layer 标签中的内容。 然后谷歌显示了一条关于我的搜索没有找到任何匹配项的消息。 即使该页面的链接就在此块下方,这似乎也证明了该用户的观点。 Google 不喜欢 rs-layer 标签。

通过 Revoltuon Slider 的 WordPress 滑块 SEO
Slider Revolution 的 SEO 结果

因此,如果您希望您的网站排名更好,请务必更改 wrapper 标签。 将标题的 h1 更改为 h6 标记,并将其他文本的 p 标记更改为。 添加图像时,它们的替代文本将从 WordPress 媒体库中提取。 如果您在 WordPress 上更新它,它也会在滑块上更新。 这样你就不必工作两次了。

响应选项

Slider Revolution 具有与大多数滑块相同的响应行为。 它们在保持滑块纵横比的同时缩小所有内容。 结果,这些层在移动设备上可能变得太小且难以辨认。 幸运的是,您可以改进结果并手动创建更适合移动设备的滑块。 但是,首先,您需要打开移动编辑才能进行更改。 这表明您可以创建不需要特定于移动设备的更改的滑块。 不幸的是,我无法创建这样的滑块。

需要在 Slider Revolution 中手动启用移动编辑
需要在 Slider Revolution 中手动启用移动编辑

启用移动编辑后,您可以移动图层。 也可以调整字体大小以确保易读性。 此外,您可以在移动设备或其他设备上隐藏图层。 这很有用,例如,如果您没有足够的空间用于图层。 但是,如果它对移动用户不重要,您也可以隐藏该层。

智能滑块

Smart Slider 是另一个流行的 WordPress 滑块插件。 它的免费版本是 WordPress.org 存储库中增长最快的滑块插件。 因此, Smart Slider 是一个流行的滑块插件,人们喜欢它是有充分理由的。 它易于使用,具有许多功能,以及大量的动态幻灯片生成器。

注意: Smart Slider 在 WordPress.org 插件库上有免费版本。 在本文中,我将重点介绍 Pro 版本。

界面

Smart Slider 有一个干净和多彩的界面。 首先,您到达仪表板,您可以在其中找到您创建的滑块。 此外,这是您可以创建新项目的地方。 单击任何滑块缩略图会将您带到滑块设置页面。 此页面显示顶部滑块中的幻灯片,以及下面的设置。 您可以通过单击其缩略图来编辑幻灯片。 幻灯片编辑器占据了整个屏幕,这很棒,因为它提供了足够的空间以舒适的方式编辑幻灯片。

Smart Slider 的界面,最好的 WordPress 滑块插件
智能滑块界面

智能滑块有大量的选项。 只是滑块设置页面有 9 个选项卡。 虽然很多选项一开始可能会让人感到困惑,但它们的放置非常合乎逻辑。 例如,在“控件”选项卡上,您可以找到可用于切换幻灯片的所有选项。

三个级别(仪表板、滑块设置页面和幻灯片编辑器)很容易区分。 UI 的不同足以让您清楚地了解您现在所处的位置。 但是这些元素看起来如此相似,以至于您总能看出您仍在使用 Smart Slider。 此外,左上角还有面包屑导航。

便于使用

在我为本文尝试的滑块中,创建带有图层的幻灯片是最简单和最快的。 那是因为 Smart Slider 有两个定位:默认和绝对。 绝对定位是您可以在其他所有滑块中找到的。 您将图层拖放到任何地方,它们会随着滑块的比例放大或缩小。 因此,它们可以在较小的屏幕上重叠。 无论如何,它们让响应式编辑看起来像是一场噩梦。

智能滑块中的幻灯片编辑器
智能滑块:幻灯片编辑器

另一方面,您不能随意拖放默认图层。 相反,您需要将它们从它们的容器中定位,这乍一看似乎是有限制的。 但是您可以快速学习它,并创建效果非常好的滑块

图层样式选项在浮动窗口中可用,您可以将其拖动到任何地方。 因此,无需向上或向下滚动即可查看您所做的更改。 此外,由于图层窗口没有固定的空间,它不会占用有用的编辑空间。

此外, Smart Slider 有许多令人惊叹的滑块模板。 您可以从仪表板单击下载它们。 然后更改您想要的任何内容,包括替换文本、图像或颜色。 滑块模板为您提供了良好的开端,也有助于学习插件。 如果您不需要整个滑块,只需要一张幻灯片,请查看幻灯片库中的幻灯片模板。

可用层

Smart Slider 共有 24 层。 可以使用的元素数量之多令人难以置信。 显然,有一个标题、文本和一个按钮层,这已经足够创建一个英雄标题了。 但是有视频层可以用 YouTube、Vimeo 和 MP4 视频丰富您的滑块。

拥有如此多的层会导致选择超载。 您可以使用图层构建内容,然后发现有更好的图层满足您的需求。 因此,您需要再次设置图层样式,从而导致时间损失。 例如,有一个带有文本动画的简单标题层。 这会为您输入的全文设置动画,但如果您只想为某些单词设置动画,则需要动画标题层。

造型

您可以在 Smart Slider 中找到丰富的样式选项,因此您可以根据自己的喜好配置图层。 在字体系列中,您可以从庞大的 Google 字体列表中进行选择,也可以编写您想要使用的自定义字体的名称。 您还可以调整字体粗细、行高、设置背景颜色、添加边框和边框半径。 但是您可以使用的选项太多,这可能会令人困惑。

此外,您可以保存您创建的样式并将它们应用到相同类型的图层 layer 。 例如,如果您设计了一个很酷的 CTA 按钮,您可以保存这张幻灯片并在其他按钮上使用它。 尽管设置图层样式很容易,但此选项可以节省大量时间。

滑块导航

Smart Slider 中提供了典型的滑块导航选项。 这也包括箭头、项目符号和缩略图。 这些控件的最佳之处在于它们不是基于主题的。 因此,您可以自由配置它们的外观和位置。 但是,显示样式选项的按钮无缝地弯曲到 UI 中,很容易错过。

当然有预设样式,您可以选择什么,但您也可以自定义这些样式。 例如,您可以选择具有橙色背景的箭头预设,并将颜色更改为蓝色。 此外,您也可以上传自己的箭头图像。

后滑块

您可以从帖子中创建滑块,也可以自定义帖子类型。 更重要的是,您可以将这些动态幻灯片与非动态幻灯片混合使用。 所以不是像 Rev Slider 那样连接到帖子的滑块,而是单个帖子幻灯片。 如果您想为第二张或第三张幻灯片创建不同的样式,您可以创建更多动态幻灯片。 但是,您需要调整它们的设置以使它们仅显示第二张或第三张幻灯片。

在智能滑块中发布滑块
当您在 Smart Slider 中创建 Post Slider 时,后端(左)和前端(右)结果完全匹配

使后幻灯片真正出色的另一件事是,您实际上可以在编辑器中看到结果。 因此,当您创建布局时,您将知道图层需要多少空间。 但是,这并不重要,因为无论如何您都将使用默认图层。 这些层将为自己腾出空间,并且不会重叠。

效果

如上所述,Smart Slider 有很多选择。 当然,可用的功能也包括很酷的效果。 首先,让我们看看可以添加到背景图像的效果。 最受欢迎的是Ken Burns 效果,您可以为每张幻灯片或单个幻灯片设置它。 但您也可以选择背景动画和视差效果。 此外,视差效果也可用于图层。 现在我已经提到了图层,可以使用很酷的图层动画来为它们设置动画。

此外,您可以在 Smart Slider 中找到许多滑块级别的效果。 例如,您可以使用粒子效果为滑块提供一些微妙的移动。 但是您可以使用动画形状分隔线来获得现代外观。 与 Revolution Slider 不同,这些效果可以立即使用。 因此,您不必下载和维护附加组件

搜索引擎友好

Smart Slider 是另一个可用于 SEO 的滑块。 您可以在每个幻灯片背景和图像层指定 alt 和标题文本。 在标题层,您可以选择 h1 到 h6 标签来帮助构建您的内容。 如果您需要简单的内容段落,请使用文本层。 此外,搜索引擎可以轻松读取您写入 Smart Slider 的内容

Smart Slider 是 SEO 的最佳 WordPress 滑块
Google 轻松读取 Smart Slider 中的内容

当您从 WordPress 媒体库添加图像时,智能滑块会设置您在那里编写的 alt 标签。 稍后您可以根据需要在图层窗口调整 alt 标记的内容

响应选项

智能滑块最好的地方是默认定位。 如上所述,对于初次使用的用户来说,它似乎有限且难以使用。 但是,就响应式结果而言,它再好不过了。 我使用默认图层创建的布局实际上不需要任何响应式更改。 事实上,幻灯片看起来很棒,无需做任何事情。 与其他滑块具有的绝对定位层相反。 此外,这些层需要更长的时间才能定位。

智能滑块,最好的响应式滑块
智能滑块(左)和前端(右)的移动结果,无需进行任何更改

如果您需要做出响应式调整,Smart Slider 可以为您提供帮助。 首先,您可以使用Text Scale 选项来调整字体大小。 如果您的文本太小,您可以使用此选项增加它们。 但如果您的文本太大,您可以使用文本比例来减小字体大小。 如果您想让标题文本适合一行,它也很有用。 此外,您可以在任何设备上隐藏图层。 因此,您可以在移动设备上隐藏不必要的图层。 但您也可以在移动设备上用更简单的图层替换复杂的桌面图层。

图层滑块

图层滑块是另一个通常捆绑在高级主题中的滑块。 您可以在 Avada、Enfold 或 Bridge 等主题中找到它。 如上所述,捆绑插件有很多缺点。 首先,您无法获得高级支持。 然后您无法通过 WordPress 下载模板或更新插件。 在 LayerSlider 的案例中,一些功能也被锁定在激活墙后面。 例如,弹出使用功能需要许可证密钥。

界面

LayerSlider 的界面非常简约,大多只有灰色和白色。 唯一可以找到颜色的地方是激活区域。 当 LayerSlider 未激活时,有一个蓝色的激活按钮和一个红色的标签。 后者在激活后变为绿色。 正因为如此,界面感觉有点空

图层滑块界面
图层滑块界面

便于使用

在 LayerSlider 中编辑幻灯片涉及大量滚动。 您需要向上滚动查看图层,然后向下滚动查看配置选项。 这是一个不幸的位置,它使编辑过程很累。 为避免此问题,请确保切换 Popup editor 。 它会根据设置创建一个浮动框,因此您可以更舒适地设置图层样式。

图层滑块幻灯片编辑器
图层滑块幻灯片编辑器

图层相互对齐很好,但它们需要非常接近。 否则,使用箭头键或样式中的定位选项来设置它们的位置会更容易。

当我使用 LayerSlider 时,我想创建一个特定的设计。 设计的第一部分是将文本分成三行。 我试图通过使用其拖动点来限制图层的宽度来做到这一点。 然而,事实证明,这些拖动点并没有像我想象的那样限制图层的大小。 事实上,它们只是增加或减少字体大小。 结果,我输入的文本停留在一行。 我发现这种方法非常有趣,而且相当混乱。 此外,在图层的内容字段中留下换行符也没有效果。 我发现只有一种方法可以限制图层的宽度。 我不得不在样式选项中手动写入大小。

可用层

LayerSlider 中有 8 个图层。 这听起来并不多,但足以创造出好的内容。 最基本的图层,如图像、文本和按钮都是可用的。 此外,您可以添加视频或音频,或编写自己的 HTML 代码。

造型

LayerSlider 为图层提供了一系列配置选项。 您可以设置图层的字体大小、系列或颜色。 虽然下拉列表中的字体不多,但可以写下您要使用的自定义字体的名称。 此下拉菜单也出现在其他一些选项中,例如字体大小。 它们的问题在于它们使编辑器看起来很受限制,因为看起来除了建议之外您实际上无法设置任何内容。

图层滑块样式选项
图层滑块样式选项

另一个不错的选择是旋转,它可以让您通过旋转图层来创建有趣的布局。 但是有些选项似乎效果不佳。 例如,最小字体大小选项在幻灯片编辑器中无效。 它在预览中似乎工作正常,但完全弄乱了前端的图层。

滑块导航

您可以在幻灯片中添加项目符号和箭头。 但是,它们的外观取决于外观下选定的滑块皮肤。 即使有很多皮肤可供选择,也无法进一步配置导航。 换句话说,如果箭头在您选择的皮肤中具有白色背景,那么您就会被该颜色所困扰。

后滑块

使用 LayerSlider 完全可以创建后滑块。 但是有一个问题:您需要手动创建与要显示的帖子一样多的幻灯片。 虽然您可以创建一张幻灯片并复制它,因此您不需要做很多工作,但如果您需要更改幻灯片上的某些内容,例如颜色或字体大小,则需要编辑每张幻灯片。

您还可以在单​​个滑块中混合发布幻灯片和普通幻灯片。 这是一个非常有用的功能。

效果

您可以在图层滑块中找到流行的效果,例如 Ken Burns 效果。 此外,还有图层动画来丰富滑块。 还有一个时间表,尽管很容易错过。 此外,可以复制和粘贴您设置的效果。 您还可以在图层上启用视差效果。 此外,您可以通过许多漂亮的幻灯片过渡来丰富您的幻灯片

图层滑块滑块效果
图层滑块中的幻灯片过渡效果

搜索引擎优化

在文本层,您可以选择 h1 到 h6 和 p 标签来显示内容。 因此,LayerSlider 可以帮助您为 SEO 目的编写结构化文本。 这是个好消息,因为这意味着您可以使用滑块的内容在搜索引擎中获得更高的排名。 此外,LayerSlider 从媒体库中提取图像的 alt 标签。 因此,您不需要编辑 alt 标签两次。

搜索引擎可以从图层滑块读取文本
搜索引擎可以从图层滑块读取文本

响应选项

LayerSlider 缩放滑块以匹配设置的纵横比。 结果,文本大小最终可能会太小。 幸运的是,开发人员已经想到了这一点,并做出了最小的移动字体大小选项。 但是有一个问题:结果没有显示在编辑器中。 此外,最小移动字体大小也不会显示在预览中。 因此,您只能使用前端设置的字体大小来测试幻灯片的外观。 这意味着要进行大量的来回编辑。

此外,LayerSlider 有一个选项可以隐藏您在移动设备上制作的滑块。 或者,您可以将滑块隐藏在给定屏幕宽度的上方或下方,以像素为单位。 换句话说,如果您想在移动设备上拥有一个看起来不错的滑块,您需要创建并维护两个滑块。 除非您创建简单的图片库或仅添加几行文本,否则您将需要单独的滑块。

除了上述选项,LayerSlider 没有其他响应工具。 在 2020 年,当有这么多人通过手机浏览时,这些选项还不够。 现代网站需要响应式内容,这意味着 LayerSlider 不适合这些网站。

主滑块

Master Slider 是另一个流行的滑块,您可以在 WordPress 网站上使用。 它允许您创建带有图层的图像幻灯片。 此外,它使用简单,触摸友好。 此外,它还提供了一堆很酷的滑块模板。

注意: Master Slider 在 WordPress.org 插件库上有免费版本。 在本文中,我将重点介绍 Pro 版本。

界面

Master Slider 的界面非常简单。 滑块所在的仪表板看起来像 WordPress 自己的帖子页面。 因此,即使是新的 Master Slider 用户也可以轻松导航

主滑块界面
主滑块界面

但是,滑块的设置页面看起来并不像 WordPress。 首先,选项可通过水平选项卡获得。 这些选项卡使滑块配置、幻灯片编辑器和滑块控制页面可用。

便于使用

Master Slider 提供熟悉的拖放编辑功能。 拖放编辑的优点在于它直观且易于学习。 图层可以相互对齐,但只有在它们靠近时才能对齐。 例如,如果您希望图层与左侧的距离相同,则手动设置会更容易。 只需在左侧字段中输入数字即可。 或者您可以使用箭头键进行定位。 首先,将图层捕捉到另一个已经定位的图层。 然后使用向上/向下键移动图层。

Master Slider 中的幻灯片编辑器,一个 WordPress 滑块插件
主滑块中的幻灯片编辑器

但是有一件事让使用 Master Slider 更加不舒服。 您正在编辑的幻灯片以及图层所在的位置位于您添加和配置图层的区域上方。 添加新图层时,它会出现在左上角。 但是,即使您还没有任何其他图层,左上角通常也不可见。 不断地上下滚动既费时又不舒服。 此外,它们没有撤消重做选项。 因此,如果您不小心编辑了错误的图层,您需要自己恢复更改。

Available Layers

Master Slider has 5 layers available. These are text, image, button, video and hotspot. At the text layer, you can find an editor that looks like WordPress' Classic editor . Chances are you're already familiar with it. But if you've only used Gutenberg, you can still learn this editor easily. Additionally, it allows you to decide if you want your text to be a paragraph or an h1 to h6 heading.

造型

As mentioned above, styling the layers in Master Slider is super uncomfortable. It involves a lot of scrolling up and down due to the unfortunate position of the slide, layer list and style options. Once you're at the style editor, you'll be happy to find the most common styling options. For example, you can change the font family, size, color and weight . You can also save your style as presets and re-use them later.

Master Slider handles the background of the text layer rather interestingly. I've added a two-line text (6 words total) and decided to give them a nice background color. Interestingly, the editor only set the background of the first word. Additionally, it broke up the text, putting every word in a new line. But the frontend looked fine, which made me question if I can trust the editor at all.

Slider navigation

When you create a new slider, the only default option to switch slides is swiping on the slides. To be able to have arrows or bullets, you need to enable them . First, you need to go to the slider controls tab of the slider.

Adding a navigation in Master Slider
Adding a navigation in Master Slider

There are seven different controls available, including the arrows and bullets. However, none of the controls have styling options. In other words, there's no option to change the default colors. The only way to have different colored arrows is to change the skin at the Slider settings tab. Luckily, the set skin displays on the preview , so I could check how the slider looks before publishing.

后滑块

When you create a new slider you can choose to create a post based slider. Then you can configure how you want your slides to look. Since the whole slider is pos-based, you can't mix dynamic and non-dynamic slides . Additionally, it's also not possible to create two kinds of post slides in the same slider. So, you can't create different layouts for different posts.

At the Post Settings, you can select, which categories should MasterSlider filter posts from. You can also exclude or include posts based on their ID. Both are very handy options to have.

效果

MasterSlider has a handful of cool effects to choose from . First, there's the layer parallax which looks cool and makes the site look impressive. Then, there's another nice effect, the pattern overlay. This effect can increase the legibility of the text by placing a black or white pattern above the image. As a result, the image will look darker or lighter. Additionally, it makes the picture more interesting.

Unfortunately, popular effects like the Ken Burns are not available in Master Slider. This effect is something people often look for in a slider plugin. So, they need to look further than Master Slider.

搜索引擎优化友好

Master Slider claims to be the most SEO friendly slider. Indeed, it has a valid HTML structure. When you create text layers, you can set h1 to h6 tags, or leave them as paragraphs. Additionally, the alt tags of the images are pulled from the media library.

Google reads the text Master Slider creates well
Google reads the text Master Slider creates well

Responsive options

The slide editor has desktop, tablet and mobile editing options. It seems to be possible to edit most options on mobile devices, and that's great. However, the beautiful mobile layout I created in the editor looked nothing like what I made on my site. As it turned out, the editor, for some reason, keeps the set height, but the frontend does not . In fact, I had to enable custom slider size and set the size I want on my own. Unfortunately, that's not what people expect after seeing the result in the editor.

Master Slider responsive result
Responsive result in the editor (left) and on the frontend (right)

元滑块

Meta Slider is the most popular free slider plugin in the WordPress.org repository . At the time of writing, it has 800,000+ active installations. So, a lot of people like the free version. But there's one other thing that makes the Free version so popular: the Pro version doesn't work without it. Does this huge user base make Meta Slider the best WordPress slider plugin? 让我们来了解一下!

Note: Meta Slider has a free version on WordPress.org plugin library. In this article, I'm focusing on the Pro version.

界面

Meta Slider has a simple interface divided into two sections . First, there's the top bar, where you can search your sliders, or add a new one. Additionally, this is where you can add slides to your current slider, or preview it. Second, below the top bar there's another horizontal area. This is where you can find the sliders you already made. Then, the biggest part of the page is the Slide configuration area. Next to it, there's a sidebar where you can configure some aspects of the slider.

Interface of Meta Slider, best WordPress slider plugin
Interface of Meta Slider

When you go to MetaSlider, you'll end up on the Slider configuration page of the first slider in the slider list. So, the plugin assumes you'll want to work on the slider that's in the first place in the list. It's convenient if you drop the slider that needs the most frequent changes there. Otherwise, it's not really useful, they could have left the configuration part of the page empty.

便于使用

Meta Slider has a very few options, which makes it simple to use . On the other hand, there are a couple of things that make the plugin seem a lot more complicated. For example, if you want to add layers, you need to add a special “Layer Slide”. If you realize this after you added all images where you want to have layers, you'll be disappointed. There's no option to convert to a “layer slide”, so you'll have to start again. While you can add many image slides together, it's only possible to add layer slides one by one. This makes the whole process of adding a new slide confusing.

Layer Slide editor in Meta Slider
Layer Slide editor in Meta Slider

可用层

Most slider plugins offer a bunch of different layers to add content with. However, Meta Slider offers a single layer . It's a text-based layer, but you can put an image into it. As a result, you can enrich your slides with more interesting content.

造型

Meta Slider has the basic styling options to allow you to style your content. But there's a catch: most options are super limited . For example, the Font color has 40 predefined colors to choose from. Then, at the font family, you can choose from 8 common (and boring) font families. The font size options are also limited.

Meta Slider provides an option to access the HTML code of the layers you added . You can make adjustments there, like changing colors or adjusting the font family or size. So, if you know, and are willing to, touch a couple of lines of HTML code, you can create better-looking layers. That's not something you'd expect from the world's #1 slider plugin.

Slider navigation

Meta Slider integrates four slideshow types you can choose. These are Flex Slider 2, Nivo Slider, Responsive Slides and Coin Slider. These slideshow types affect how the available arrows, bullets and thumbnails display . Although it would be great if the navigation would have customization options.

发布滑块

When you create a new slider, you can choose to create a Post slider . This will create a special slider where you can filter posts into. Additionally, you can filter posts from custom post types into the slider. This all sounds really cool until you want to start configuring the slides.

Meta Slider 中的 WordPress Post 滑块
在 Meta Slider 中发布滑块

不幸的是, Meta Slider 没有提供可视化的方式来编辑帖子幻灯片的内容。 换句话说,您只能通过 HTML 编码编辑和自定义您希望在幻灯片上看到的内容。

效果

Meta Slider 提供的唯一效果是图层和背景动画。 没有视差或肯伯恩斯效应。 虽然,您可以通过自定义编码添加后者。 即使图层动画看起来不错,但对于现代网站来说还不够。

搜索引擎优化友好

Meta Slider 声称您可以使用它来“创建强大的、经过 SEO 优化的幻灯片”。 但是,在图层上,您不能将 h1 设置为 h6 标记,除非您编辑它们的 HTML 源代码。 通常,人们使用插件来避免编写代码。 好吧,使用 Meta Slider,您不可避免地不得不编写代码来创建您想要的滑块。

搜索引擎可以读取 Meta Slider 的内容
搜索引擎可以读取 Meta Slider 的内容

除了这些问题,搜索引擎还可以读取 Meta Slider 创建的内容。 您还可以为背景图像编写 alt 和标题标签。 但是,当您在幻灯片上选择它们时,图层内的图像会从媒体库中读取一次 alt 标签。 除非您再次选择图像或触摸代码,否则以后无法更改 alt 标签。

响应选项

Meta Slider 的幻灯片编辑器没有在移动设备上编辑甚至查看滑块的选项。 此外,预览版也没有设备选择器。 换句话说,无法编辑甚至查看滑块在移动设备上产生的结果。 不过,它确实具有基本的响应行为。 幻灯片按比例缩小,保持设置的纵横比,图层也按比例缩放。 但这样文本可能会缩小太多,变得难以辨认。 因此,这不是内容幻灯片的最佳 WordPress 滑块插件。

独白

Soliloquy 是一个流行的 WordPress 滑块插件。 高级版基于附加组件,类似于 Slider Revolution。 但是,与 Rev Slider 不同的是,您只能通过购买两个最高包之一来获得所有附加组件。

注意: Soloquy 在 WordPress.org 插件库上有免费版本。 在本文中,我将重点介绍 Pro 版本。

界面

Soliloquy 滑块的界面看起来与 WordPress 自己的界面不太一样。 首先,滑块列表看起来与 WordPress 的帖子页面完全相同。 然后是与帖子编辑器非常相似的幻灯片配置页面。 因此,当您配置滑块时,您会感觉自己不是在创建滑块,而是在配置帖子。 我并不是说看起来像 WordPress 是一件坏事,但它确实限制了你可以期望你的滑块做的事情。

WordPress 滑块独白界面
自言自语界面

便于使用

即使安装了所有附加组件, Soliloquy 也没有很多功能。 结果,这个滑块没有膨胀,这使得它超级容易使用。 但是,没有预览。 因此,如果不先发布滑块,您将看不到选项的作用以及它们在滑块中的外观。 如果您不必一直上下滚动来保存滑块,问题就会少很多。 因此,如果开发人员能想出办法来避免这种情况,那就太好了。

Soliloquy 有非常基本的幻灯片编辑器
Soliloquy 有非常基本的幻灯片编辑器

当您设置幻灯片的标题和说明时,有导航按钮可以快速浏览所有幻灯片。 问题是您添加或更改的字幕是单独保存的。 例如,如果您有两张需要标题的幻灯片,则需要同时保存它们,否则您将丢失标题。 当您使用箭头切换时,没有迹象表明您的更改尚未保存。 此外,当您关闭编辑器时也没有通知。

可用层

Soliloquy 滑块中没有图层。 您可以添加“编辑”幻灯片并为每张图像提供标题和说明,但这不算作图层。 事实上,这是我为本文测试的第一个滑块,看到没有图层我并不感到惊讶。 图层编辑器不会真正适合 WordPress 帖子编辑器的外观。

造型

样式是 Soliloquy 滑块不发光的另一个部分。 您可以选择两个主题来定义滑块的外观。 使用 Themes 插件,您将获得另外三个,但仅此而已。 如果您想要一个简单的滑块来显示图像或视频,我相信 Soliloquy 滑块会很好地为您服务。 但是,一旦您想创建内容滑块,或者只需要一些样式选项,它就会让您失望。

滑块导航

Soliloquy WordPress 滑块中提供了最流行的导航选项。 您可以打开箭头、项目符号和缩略图。 但是,箭头和项目符号的外观和位置取决于插件提供的两个主题之一。 如果您有主题插件,还有另外三个皮肤。 它们看起来确实有些不错,但它们非常基本。 此外,它们给人的印象是过时的滑块。

后滑块

为了能够创建发布幻灯片,您需要特色内容插件。 这个附加组件在两个最高的包中可用。 因此,您将无法通过购买任何 Soliloquy Pro 软件包来创建后期幻灯片。

效果

Soliloquy 滑块的唯一效果是幻灯片过渡。 不幸的是,您只能选择四种效果,数量不多。 幻灯片可以淡入淡出、垂直滚动、水平滚动或水平连续滚动。

虽然可以调整字幕转换延迟,但没有其他选项可以设置。 例如,无法设置字幕是滑动还是淡入。因此,无论幻灯片过渡设置如何,它们都会始终淡入。

搜索引擎优化友好

Soliloquy 滑块具有干净有效的 HTML 结构。 从 SEO 的角度来看,这总是很好的。 添加幻灯片时,Soliloquy 会从 WordPress 媒体库中提取 alt 标签。 当然,您可以在幻灯片编辑器中对其进行编辑。 此外。 搜索引擎可以很好地看到插件创建的内容我错过的唯一与 SEO 相关的功能是能够将 h1 设置为 h6 标签

Google 可以从 Soliloquy 中读取内容
Google 可以从 Soliloquy 中读取内容

响应选项

我创建了一个带有字幕的滑块,以查看它在移动设备上的外观。 虽然图像大小正确调整,但我很惊讶地看到字幕不见了。 默认情况下,独白滑块隐藏小屏幕上的字幕。 幸运的是,有一个选项可以在移动设备上显示文本内容,所以我把它们转回去了。 然后我再次查看滑块,立即明白他们为什么选择隐藏文本。 由于我的图像有几行文字,它完全覆盖了图像。 此外,文本甚至与滑块上方的内容重叠。 总而言之,启用字幕的移动设备上的滑块看起来很糟糕。

自言自语滑块响应行为
在移动设备上启用(左)和禁用(右)字幕

总而言之,Soloquy 滑块在为小屏幕调整图像大小方面做得很好。 同时,它在显示他们的标题方面做得很糟糕。

比较最佳 WordPress 滑块插件的速度

最好的 WordPress 滑块插件必须满足许多标准。 它需要具有所有令人惊叹的功能才能创建令人惊叹的滑块。 此外,它需要快速加载,因为网站需要关心它们的速度。 所以他们需要选择加载速度最快的插件。 换句话说,当你选择一个滑块时,你需要考虑它对你页面加载时间的影响。 资源密集型滑块将对您网站的速度产生巨大的负面影响。 因为我想找到最适合 WordPress 的滑块,所以我必须比较每个插件的速度。

测试环境

我想在具有相同内容的滑块上运行速度测试。 由于并非所有滑块都具有相同的功能,因此创建外观相同的滑块有点困难。 最后,我决定创建一个像图像滑块一样的滑块,模板,没有 Google 字体。 我使用 Hello Elementor 主题运行测试。 我在没有其他插件同时处于活动状态的情况下测试了每个滑块

每个滑块中的所有图像和文本都相同。 每个滑块都使用其默认设置。 我没有启用任何优化选项,例如延迟加载。 此外,我在每次速度测试之前清除了缓存。

首先,我在 WordPress 示例页面上进行了速度测试,让您了解 Hello Elementor 主题的速度。 用于测试的互联网速度为 10Mb/s。

没有延迟加载的速度测试结果

我已经运行了两个单独的测试。 在第一个测试中,我检查了每个插件,没有使用任何优化,例如延迟加载。 这使得那些没有内置延迟加载的插件的速度测试更加公平。

你好主题革命滑块智能滑块图层滑块主滑块元滑块独白
加载时间533毫秒1.94s 848 毫秒1.39s 1.06s 750毫秒644毫秒
页面大小90.7kb 1.1MB 951kb 1.7Mb 1Mb 688kb 584kb
要求6 16 19 22 19 17 18

加载速度最快的滑块是 Soliloquy 。 它还产生了最小的页面大小。 第二快和最轻量级的滑块是 Meta Slider。 第三宫是Smart Slider的,比Meta Slider慢一点。

延迟加载速度测试结果

一些插件可以延迟加载图像。 换句话说,它们可以延迟图像的加载,这对于查看滑块并不是必需的。 所以,我决定运行一个测试,每个插件都可以展示它们的全速。 结果如下:

你好主题革命滑块智能滑块图层滑块主滑块元滑块独白
加载时间533毫秒1.09s 657毫秒1.39s 713ms 750毫秒644毫秒
页面大小90.7kb 1.0MB 761kb 1.7Mb 625kb 688kb 584kb
要求6 16 14 22 15 17 18

尽管 Soliloquy 没有延迟加载功能,但它仍然是在第一时间完成的。 打开延迟加载 Smart Slider 后加载速度比 Meta Slider 快。 所以它是第二快的滑块,几乎不比 Soliloquy 慢。

价钱

在本文中,我将重点介绍高级滑块插件,这意味着我必须提及它们的定价。 大多数滑块插件有许多包可供选择。 为了公平起见,我将比较他们的一个站点包的价格、支持和更新期限。 因此,如果您想在单个 WordPress 网站上使用每个滑块,以下是每个滑块的成本:

滑块革命智能滑块图层滑块主滑块元滑块独白
价钱79 美元49 美元25 美元24 美元39 美元19 美元
一次性支付
支持期6个月寿命6个月6个月1年1年
更新期寿命寿命寿命寿命1年1年

如果我们单独比较价格, Soliloquy是最便宜的选择,因为它要19 美元。 但是对于这笔钱,您只能获得一年的更新和支持。 除非您从不更新网站上的任何内容,否则您需要将插件续订第二年。 因此,两年的 Soliloquy 费用为 38 美元。

那么哪个 WordPress 滑块插件最物有所值? 显然,它需要使用一次性支付模式。 只有四个插件可以通过一次购买提供终身更新。 尽管 Slider Revolution、Layer Slider 和 Master 滑块仅提供 6 个月的支持。

根本无法保证您在 6 个月后不再需要支持。 想象一下,插件在您购买 8 个月后进行了重大更新。 一些选项被转移了,但你不能问他们现在在哪里,因为你的支持期已经结束。 因此,您需要再次购买该插件才能再有 6 个月的时间来提问。

只有一个插件可以提供终身更新和支持:Smart Slider 。 所以最值这个价的WordPress滑块插件就是Smart Slider。

哪个是最好的 WordPress 滑块插件?

以下是我为这篇文章测试过的每个 WordPress 滑块插件的分数如何叠加(按顺序):

革命滑块智能滑块图层滑块主滑块元滑块独白
界面
便于使用
可用层
造型
滑块导航
发布滑块
效果
搜索引擎优化友好
响应选项
速度
价钱
全部的42 46 38 36 28 35

根据这些分数,最好的滑块插件是 Smart Slider 。 虽然有一个学习曲线,但该插件非常易于使用。 由于默认定位,滑块在移动设备上看起来很棒。 实际上,它在小屏幕上看起来比本文中的任何其他滑块都好。 此外,您可以将 if 用于 SEO 目的,它具有您网站所需的所有精美效果。 定价再友好不过了:只需 49 美元,您将永远获得更新和支持。 此外,它是最快的插件之一。

第二好的滑块是 Slider Revolution 。 它有很多很棒的功能和很多效果。 您可以(并且将需要)进行响应式编辑,以使您的滑块在移动设备上看起来不错。 您还需要进行调整以确保您创建的内容对 SEO 友好。

最后的想法

为您的 WordPress 网站选择滑块插件绝非易事。 选项太多了,并不是所有的插件都一样好。 此外,它们可能不适合您的网站。

那么,哪个是最好的 WordPress 滑块? 您应该在您的网站上使用哪个插件? 我可以衷心推荐 Smart Slider 。 这是一个很棒的插件,您的网站可以从中受益。 它具有很好的响应行为,并且您可能不需要进行任何更改。 它对 SEO 友好,速度快,效果好,定价友好。 你还能要求什么?