Elementor 滑块和旋转木马的终极指南

已发表: 2020-09-07

人们喜欢滑块,他们要求将它们放在他们的网站上。 作为 Elementor 用户,我相信您也想拥有一个。 或者你有一个客户想在他们的网站上有一个漂亮的滑块。 但是,找到合适的 Elementor 滑块解决方案并非易事。 在本文中,我们将探讨 Elementor 中提供了哪些类型的轮播。 此外,我将向您介绍另一个滑块解决方案,您可以使用它为您的网站创建现代 Elementor 滑块。

Elementor 最好的滑块是什么?

  1. 智能滑块
  2. 革命滑块
  3. Elementor 滑块小部件
  4. 图层滑块

在本文中,我们将介绍 Elementor Slider 小部件和 Smart Slider。 如果您想了解有关其他滑块的更多信息,请务必查看有关最佳 WordPress 滑块的文章。

Elementor 中的滑块

如果您使用的是 Elementor 的 Pro 版本,则有几个小部件可让您创建滑块。 但是,对于免费用户,只有一个轮播小部件可用。 无论如何,所有这些小部件都完全集成到 Elementor 中。 因此,您可以像设置任何其他 Elementor 小部件一样配置它们。 这确保了在滑块创建期间的无缝和熟悉的体验。

因此,您需要幻灯片并使用 Elementor。 您可以从以下内置解决方案中进行选择,以将 Elementor 滑块添加到您的站点:

轮播小部件:免费的 Elementor 滑块解决方案

在 Elementor 的免费版本中,您可以找到一个 Carousel 小部件,您可以使用它来创建滑块。 这是一个简单的解决方案,可让您添加基本图像库。 您构建的轮播具有响应性,并且在移动设备上看起来很棒。

您可以使用 Elementor Carousel 小部件创建的轮播示例
您可以使用 Elementor Carousel 小部件创建的轮播示例

使用轮播小部件,您可以直接从媒体库中选择图像。 您想让您的访问者猜测您添加图像的原因吗? 如果没有,您可以在图片下方显示图片标题、描述或标题。 您可以配置要在 WordPress 媒体库中显示的文本。

在小部件上,您可以选择图像大小以及您希望彼此相邻查看的幻灯片数量。 还可以设置要一起滚动的图像数量。 例如,假设您有一个带有 6 张幻灯片的轮播,同时显示 3 张幻灯片。 您可以将“Slides to Scroll”值设置为 3。因此,所有可见图像将一起更改,而不是一张一张地浏览它们。

Elementor 轮播同时显示 1、2 和 3 张幻灯片
Elementor 轮播同时显示 1、2 和 3 张幻灯片

此外,您可以让幻灯片按给定的时间间隔自动切换。 通过这种方式,您可以为您的网站创建简单的自动播放幻灯片。 这非常棒,对吧?

幻灯片小部件:Elementor Pro 滑块解决方案

在 Elementor 的 Pro 版本中,您可以找到一个实际的滑块小部件。 它更适合为您的网站创建滑块。 此外,它还允许您将内容放在您制作的幻灯片上。 您可以在每张幻灯片上添加标题、说明和 CTA 按钮。

使用 Elementor Slider 小部件创建的简单滑块
使用 Elementor Slider 小部件创建的简单滑块

每张幻灯片都可以有背景图像或颜色。 如果您选择使用背景图像,则可以为其设置彩色叠加层。 此外,还有一个选项可以调整背景的混合模式。 此外,流行的肯伯恩斯效应也可用。

您可以为每张幻灯片添加标题、说明和带有链接的按钮。 这些是为您的网站创建幻灯片所需的最基本元素。 总之,Elementor 滑块小部件适用于创建基本内容滑块。

Elementor 中的滑块内容选项
Elementor 中的滑块内容选项

Elementor Pro 中其他值得注意的轮播

Elementor Pro 有其他小部件可以创建类似滑块的结果。 使用推荐旋转木马,您可以在漂亮的幻灯片中显示客户的话。 您可以输入证词的内容,提供此人的姓名和头衔并上传图片。 您可以从两种皮肤和五种布局中进行选择,以使推荐书脱颖而出。

Elementor 推荐旋转木马
Elementor 推荐旋转木马

使用 Elementor 的媒体轮播,您可以创建媒体库。 这个小部件可以创建一个缩略图滑块。 此外,您可以将其设置为在灯箱中显示放大的图像。 它被称为媒体轮播,因为它还接受灯箱中的 YouTube 和 Vimeo URL。 在这种情况下,图像只是一个启动灯箱的简单缩略图。

Elementor 媒体轮播
Elementor 媒体轮播

使用评论小部件,您可以以类似推文的方式显示您的评论。 您可以上传图片,设置名称、标题和评分,还可以选择评论图标。 此外,您可以设置实际的评论文本。 简而言之,您拥有创建评论滑块所需的所有工具。

Elementor 评论小部件
Elementor 评论小部件

Elementor 的滑块小部件总结

Elementor 中有许多很棒的小部件可以帮助您将轮播添加到您的网站。 这些滑块易于使用且响应迅速,就像 Elementor 一样。 然而,它们和 Elementor 之间有一个显着的区别:它们感觉不太可定制。 您可以使用 Elementor 创建任何您想要的东西。 不幸的是,这些轮播和滑块小部件并非如此。

如何创建更多可定制的 Elementor 滑块?

每个网站都是不同的。 使用 Elementor,您可以创建简单的滑块。 对于您创建的几个网站来说,这可能就足够了。 但在其他网站上,您可能需要创建更多内容丰富的幻灯片。 您可能需要添加另一个 CTA、更多段落、文本旁边的图像(而不是其后面),甚至是图标。

使用 Smart Slider 创建带有两个按钮的 Elementor Slider
使用 Smart Slider 创建带有两个按钮的 Elementor Slider

所以你需要寻找一个与 Elementor 配合得很好的滑块。 此外,它需要响应迅速且易于使用,并具有您需要的功能。 看看 Smart Slider,这是最适合您网站的 Elementor 滑块解决方案。

什么是智能滑块?

Smart Slider 是一个超级流行的 WordPress 插件。 它允许您使用漂亮、现代且响应迅速的幻灯片来丰富您的网站。 有一个免费版本,您可以在其中创建滑块或块。 在 Pro 版本(起价 49 美元)中,有更多滑块类型:展示柜和轮播。 此外,每个软件包都为您激活的域提供终身更新和支持。

智能滑块中可用的滑块类型
智能滑块中的滑块类型。 顶行:简单(免费)和轮播(专业)。 底行:Block(免费)和 Showcase(专业版)

Smart Slider 有自己的 Elementor 小部件,这使得发布变得超级容易。 此外,它与 Elementor 3 兼容。

比较 Smart Slider 和 Elementor 的轮播

Elementor 的滑块是一个简单但功能丰富的滑块插件。 在下表中,我将其功能与免费版和专业版的 Smart Slider 进行了比较。

元素滑块Elementor 图像轮播智能滑块免费智能滑块专业版
图层3 6 23
自定义图层顺序
每张幻灯片上可调整的内容宽度
每张幻灯片上的自定义图层位置
幻灯片字幕
排版选项
背景图像
肯伯恩斯效应
背景叠加
混合模式
自动播放
导航箭头、项目符号
缩略图导航
过渡选项2 10 55
内容动画6 5 5
图层动画
视频幻灯片
灯箱
同时显示更多幻灯片

您可以在 Elementor 和 Smart Slider 中创建相同外观的滑块吗?

上表重点介绍了 Elementor Slider 和 Smart Slider 的功能。 除了告诉你一些你可以用这些滑块做的事情之外,我还想给你看一个例子。 换句话说,我将尝试在 Elementor 和 Smart Slider 中创建相同的滑块。 因此,您将对可以使用每个软件创建的滑块有更好的了解。

但这里有个转折点:我选择了一个现有的 Smart Slider Pro 模板来重新创建。 它是 Smart Slider 最受欢迎的全角模板之一。 它看起来真的很酷,适合任何网站。 更重要的是:它仅使用 3 层,其顺序与 Elementor Slider 需要的顺序相同。

Smart Slider Pro 中制作的全宽滑块宽度效果
Smart Slider Pro 中制作的全宽滑块宽度效果

全角滑块模板的亮点

在我开始免费在 Elementor of Smart Slider 中重新创建这个滑块之前,让我们看看它的一些细节。 首先是布局,非常简单:它包含一个标题、一个文本和一个按钮层。 这些图层被放置在一个 1200 像素宽的容器中,并在其中与左侧对齐。 因此,在较大的屏幕上,内容左侧的空间比在较小的屏幕上要多。

标题使用 Smart Slider Pro 的高亮标题图层。 该图层可以使用您选择的形状突出显示文本中最重要的部分。 此外,当高光发生时,您可以看到一个不错的动作。 但是这张幻灯片还有更多内容,所以让我们继续吧!

在按钮层,有一个很酷的悬停效果。 颜色发生变化,按钮变长了一点。 增长的发生是因为悬停时有更大的填充。 此外,小图像图标通过尝试跟随鼠标移动来对鼠标移动做出反应。 这是由于图层视差效应而发生的。

此外,幻灯片导航箭头位于滑块的右下角。 这是我将尝试在 Elementor 的滑块解决方案和 Smart Slider Free 中复制的滑块。 是时候开始了!

在 Elementor 中构建滑块

在 Elementor 中创建这个很酷的全角滑块既不具有挑战性,也不耗时。 然而,我确实不得不作弊:为了能够使文本变粗,我需要使用一些 HTML 代码。 我还需要编写 HTML 以使描述中的粗体文本变为白色。 尽管如此,Elementor 的滑块很容易理解并且可以快速使用。 下面你可以看到非常漂亮的结果:

Elementor 制作的全宽滑块

但是,由于某种原因,我无法让内容在 1200 像素宽的容器内与中间对齐。 我设置了 1200 像素的内容宽度,但这似乎没有什么区别,因为我的内容不超过 1200 像素。 结果,滑块的最终外观在屏幕左侧看起来有点不舒服。 此外,它与照片中的人相距甚远。

我也无法让箭头在同一侧。 Elementor 的滑块仅允许将箭头放置在滑块的内侧或外侧。

可以做:

  • 添加所有三个需要的图层
  • 设置样式(字体颜色、大小和系列)
  • 设置图层位置
  • 使滑块高 700px

不能这样做:

  • 添加不带 HTML 的换行符
  • 对没有 HTML 的文本部分进行样式设置
  • 将内容放在中间的一个 1200px 宽的容器中
  • 将两个箭头放在右下角

内置智能滑块免费

智能滑块可以轻松快速地构建响应式滑块。 我只需要将图层拖到它们的位置并更改其父级的内部对齐即可完成布局。 对于“制造重要的产品”文本,我使用了两个标题层。 通过这种方式,我能够在 Smart Slider 的可视化编辑器中调整字体粗细和字体系列。 在文本层,我添加了一个空链接,我在层窗口中选择了它。 结果,我可以通过更改链接的颜色来更改颜色。

使用 Smart Slider Free 制作的全宽滑块
使用 Smart Slider Free 制作的全宽滑块

我能够设置箭头的样式并将它们定位到右下角而没有问题。 然后我创建了一个静态叠加层,它位于滑块中的所有幻灯片之上,并将小图像放在那里。 我使用绝对定位来添加这些图像并将它们定位在画布上。

如您所见,结果非常接近目标。 基本上,免费版和专业版中制作的滑块之间的唯一区别是专业效果。

可以做

  • 创建一个 1200px 宽的容器并对齐里面的内容
  • 将箭头放在右下角
  • 使滑块高 700px
  • 创建叠加层以将小图像放置到
  • 创建按钮的悬停效果

做不到

  • 为小图像创建视差效果
  • 围绕“重要”文本创建动画形状

Smart Slider Pro 还能为您带来什么?

使用专业版 Smart Slider,您可以创建更丰富的幻灯片。 例如,如果您单击“但是如何?” 按钮,会出现几个新图层。 这些是层动画,您可以通过事件触发。 在这种情况下,事件是点击 CTA 按钮。

单击任何框会将访问者带到此滑块中的另一张幻灯片。 使用这样的导航使您的滑块看起来独一无二,并确保令人难忘的用户体验。

为什么要选择 Smart Slider 作为 Elementor Slider?

Elementor 是一个强大的页面构建器,您可以使用它来创建一个漂亮的网站。 但是,在滑块前面,它只允许您创建一些基本的东西。 因此,如果您需要更多功能,则需要一个滑块插件。 不幸的是,市场上到处都是可供选择的滑块插件,因此很难选择。

我建议尝试一下 Smart Slider。 它有一个出色的免费版本,您可以免费试用。 此外,即使使用免费版本,您也可以创建令人惊叹的滑块。 如果上面的滑块示例不够令人信服,下面是选择智能滑块的原因列表。

为什么要选择 Smart Slider Free?

使用 Smart Slider Free 制作的 Hero 滑块
使用 Smart Slider Free 制作的 Hero 滑块
  • 免费。 免费的东西总是很好。 Smart Slider 提供了强大的滑块构建工具,无需花费一分钱。
  • 使用方便。 Smart Slider 与 Elementor 的 Carousel 和 Slider 小部件一样易于使用。 但它要强大得多。
  • 6个独特的层。 有 6 层可用,每层都适用于某种类型的内容。 您可以为每张幻灯片添加任意数量的标题、段落、按钮、图像、YouTube 或 Vimeo 视频。
  • 默认定位。 添加行和列以显示您的内容,与使用 Elementor 的方式相同。
  • 绝对定位。 需要添加一些装饰元素吗? 使用绝对定位,让您可以自由地将图层放置在任何地方。
  • 自由地建造你想要的东西。 使用 Smart Slider,您可以构建任何您想像的东西。
  • 随心所欲的风格。 使图层看起来像您想要的那样! 因此,幻灯片可以完美地融入您的网站。 或者您可以创建一个真正脱颖而出的滑块。
  • 可定制的控件。 在幻灯片中添加箭头、项目符号或缩略图。 然后根据您的内心定制它们。
  • 它反应灵敏。 使用 Smart Slider,您可以创建在任何设备上看起来都非常漂亮的滑块。 您可以使用响应式工具(例如文本比例)来微调小屏幕上的结果。
  • 发布滑块。 使用动态幻灯片生成器从您最近的博客文章中创建滑块。 最好的部分是生成器会在您添加新帖子时自动更新。
  • 美丽的模板开始。 需要快速创建好看的东西吗? 导入 11 个随时可用的示例滑块之一,并根据自己的喜好对其进行自定义。

为什么要选择 Smart Slider Pro?

Smart Slider 的免费版是一个已经很了不起且高度可定制的插件。 但是,如果您想要更多功能,请查看 Smart Slider Pro! 它具有免费版本的所有功能,等等。 选择 Pro 的一些理由:

您可以使用 Smart Slider Pro 创建的产品展示
您可以使用 Smart Slider Pro 创建的产品展示
  • 更多的层次。 Pro 版中共有 23 个图层可用于创建内容。
  • 自托管视频。 您可以在幻灯片中使用 MP4 视频,以避免使用第三方服务。 此外,MP4 视频可以作为幻灯片的背景看起来很棒。
  • 很酷的效果。 您可以在 Smart Slider 中找到最酷、最受欢迎的效果。 例如视差、粒子、Ken Burns 效果和Shape Divider。
  • 图层动画。 通过分别为它们设置动画,为您的图层注入一些活力。 构建您喜欢的任何图层动画或从我们的预设动画中选择。
  • 显示动画。 显示动画是一种特殊类型的图层动画,可为您的幻灯片带来现代感。
  • 图层事件。 事件让您在访问者与滑块交互时启动图层动画。 例如,您可以在访问者单击另一个图层时显示一个图层。
  • 灯箱。 在灯箱中显示您的图像,让访问者以更大的尺寸欣赏它们。
  • 更漂亮的模板开始。 抢占先机,从 180 多个滑块中进行选择。
  • 友好的定价。 所有 Smart Slider 软件包都附带终身更新和支持。 您无需每年续订订阅即可获得帮助或访问最新功能。

结论

Elementor 已经有一些很棒的内置滑块解决方案。 它们让您可以为您的网站创建美观、响应迅速的滑块。 但在某些方面,它们缺乏功能和创作自由。 因此,如果您需要更多功能和特性,则需要一个滑块插件。

试试智能滑块。 它与 Elementor 配合得很好,这使其成为为您的网站创建滑块的绝佳选择。 即使是免费版本也可以满足您网站的滑块需求。 您可以添加无限层并创建所需的任何布局。 但是如果你需要更多的功能和一些很酷的效果,你可以选择 Smart Slider Pro。 我相信你不会后悔的!