15+ 优秀的 WordPress 滑块示例(展示)

已发表: 2018-09-21

为您的 WordPress 滑块寻找灵感? 滑块允许网站所有者在引人入胜的交互式幻灯片中展示他们最重要的内容,因此用户可以看到亮点并立即采取行动。 难怪有这么多网站尽其所能使用滑块!

  • 高效、时尚地交付内容
  • 将大量信息打包到一个狭小的空间中
  • 为您的网站添加互动
  • 将访问者引导至促销和重要页面

在本文中,我们将向您展示 15 多个优秀的 WordPress 滑块示例。 我们还将向您展示如何为您自己的网站快速创建华丽的滑块。

滑块灵感展示

以下是一些启发您灵感的滑块的最佳示例。 我们用来挑选这些滑块的标准是 1) 创造力和 2) 可用性。 有些设计两者兼而有之,而有些设计只有一个方面。

CNBC Prime

CNBC 的滑块显示了一系列电视节目

CNBC 的滑块清晰易读。 他们为节目标题使用粗字体,因此易于阅读。 为文本着色确实有助于它在背景中脱颖而出。

哥伦比亚广播公司

CBS 的全屏滑块,带有电视节目的剧照

CBS 的滑块使用具有大字体和大量空白的引人注目的图像,使其易于阅读和使用。 大项目符号让您非常清楚单击时会发生什么。

奥兰多环球影城

带有奥兰多环球影城各种照片的滑块

Universal 的滑块有一个简单的目的:吸引您参观他们的游乐园。 尽管 CTA 提供了一些诱人的报价,但照片却能说明一切。

萨维尔鸽舍

带有计时器和滑动动画的 Dove Cotes 滑块

Saville's 使用优雅的衬线字体搭配照片,突出鸽子窝的质量和工艺。 他们还解释了他们对鸽子的广泛了解,因此您可以确定您正在为您的羽毛朋友购买绝对最好的房屋。

木兰面包店

三个显示各种糕点的小滑块

Magnolia Bakery 是仅图像滑块的一个很好的例子。 当你有美味的糕点时,谁需要闲聊? 这三个迷你滑块在这个网页上看起来很美味。

火焰峡谷

照片画廊,展示了火焰峡谷的日落

火焰峡谷是犹他州的热门景点。 他们画廊的头条新闻说明了一切:您可以在火焰峡谷度假胜地享受广阔的景色,而无需粗暴。

前进主题

描绘使用 Headway 主题制作的各种网站的滑块

Headway Themes 创造性地使用了滑块。 他们没有使用典型的页面顶部滑块,而是将其放置在更下方,并使用它来展示使用其主题的网站。 聪明的!

史密森尼弗里尔萨克勒画廊

画廊的导航滑块,带有博物馆文物的各种图像

Smithsonian Freer Sackler 使用简单的导航滑块将您引导至网站上的关键页面。 滑块简洁干净的外观,周围环绕着吸引您进入图像的空白,非常适合艺术画廊。

孤独星球

Lonely Planet 的全屏图像滑块,描绘风景和旅行装备

Lonely Planet 的滑块具有旋转的全屏图像和引人注目的动画效果。 这不仅是一个外观华丽的滑块,而且它也很容易导航到任何你喜欢的地方。

东湾

带有名牌鞋详细特写的产品滑块

Converse 的滑块将所有焦点都放在了应有的位置:产品上。 这个滑块的细节和纹理非常清晰,您几乎可以伸手触摸织物。

希兹

各种餐点的促销优惠轮播

Sheetz 的滑块使用明亮、有趣的颜色和交互式前进按钮,当您将鼠标悬停在它们上方时,这些按钮会滑出。 像这样的滑块只是乞求玩。

的Xbox

显示鬼泣 5 发布的简约 Xbox 滑块

Xbox 的滑块使用简洁的产品图像、少量文字和大量空白来实现简洁。 这绝对是少即是多的情况。

蒂姆霍顿斯

带有各种菜单项详细照片的 Tim Hortons 滑块

Tim Hortons 的滑块是工作中美食摄影的经典例子。 令人垂涎欲滴,搭配一些超值优惠,然后 BOOM! 你有一个非常难以抗拒的滑块。

索尼裂纹

索尼 Crackle 宣传各种电视剧的滑块

Crackle 采用简单的白色和橙色配色方案,吸引人们对旋转滑块的注意。 每张幻灯片上的小广告让您有打开电子管并观看一些电视节目的冲动。

史密森学会

一张带有渔业设备照片的幻灯片,指向一篇关于保护海洋生态系统的文章

史密森尼的滑块使用大而显眼的箭头,因此您可以导航回您错过的上一张幻灯片。 在这种情况下,这一点很重要,因为每张幻灯片上都有很多文本需要阅读。

卢浮宫

带有优雅导航和历史绘画照片的卢浮宫滑块

卢浮宫的滑块正是您所期望的:历史悠久且优雅。 这要归功于图像中充足的空白、衬线字体以及简单而戏剧性的淡入黑色。 这个滑块的另一个好处是右下角的播放/暂停按钮。

如何创建自己的 WordPress 滑块

现在您可能想知道, 这些滑块很棒,但我怎样才能为我自己的网站创建一个?”

好吧,谢天谢地,多亏了 WordPress 的 Soliloquy 插件,它实际上非常简单。

首先,您需要安装并激活 Soliloquy Slider 插件。 有关更多详细信息,请参阅有关如何在 WordPress 中安装插件的分步指南。

接下来,是时候创建您的第一个滑块了。 转到Soliloquy » Add New以添加滑块。 如果您需要上传图像,您可以从计算机中选择文件。 如果您已经将图像上传到您的网站,请选择其他来源的文件。

使用 Soliloquy 创建 WordPress 滑块

继续向下滚动。 您将看到为滑块选择的图像。 从这里,您可以单击铅笔图标来编辑图像,或单击红色 X 以从滑块中删除图像。

Soliloquy 的滑块设置显示如何编辑图像

您还可以通过选择左侧的配置选项卡来配置有关滑块的其他详细信息。 您可以设置图像大小、滑块主题和幻灯片过渡的速度。 您的文本标题位置也可以在此处更改。 查看这些设置。

如何配置特色内容滑块

对设置感到满意后,请查看“移动”选项卡。 这将允许您测试您的网站在移动设备上的外观,并根据需要调整您的移动分辨率设置。

(另外,请参阅Misc选项卡以导入或导出滑块。)

将滑块添加到页面或帖子

您已经完成了滑块的创建! 现在是时候将其添加到您选择的帖子或页面中了。 编辑帖子或页面,单击添加滑块按钮,然后选择您的滑块。 请记住发布或更新您的帖子/页面以保存更改。

如何在帖子中插入 WordPress 滑块

您的滑块现在将在您的网站上生效:

WordPress 滑块示例

而已! 您现在拥有自己的 WordPress 滑块。 我们希望这篇文章能通过 15 个以上优秀的 WordPress 滑块示例启发您,并帮助您创建您的第一个滑块。

您可能还想查看在设计滑块时可以使用的所有高级功能。 自定义滑块的可能性几乎是无穷无尽的,所以今天就开始使用 Soliliquy! 这里只是一些你可以用 Soliloquy 滑块做什么的例子。

  • 在 WordPress 中创建全角图像滑块
  • 在 WordPress 中更改滑块时间
  • 在 WordPress 中创建响应式视频滑块

如果您喜欢这篇文章,请在 Facebook 和 Twitter 上关注我们以获取更多免费的 WordPress 教程。