20个元素滑块模板,其中8个免费:覆盖流,时间线,感言等

Elementor 滑块模板你在网上找到的大多数都是同一个滑块,全宽图,中间的文字,两侧的箭头,接下来。

这二十个不是这样。一个将幻灯片围绕圆圈的边缘弯曲。一个将条目固定到一个注明日期的时间线,其中年份之间的间隙按比例绘制。一个将行列表转换为导航本身。其中八个导入到免费的 Master Addons 插件中,没有 Pro 许可证,其中 自由对专业的崩溃 详细介绍一下,二十个人中的每一个都有一个现场演示,您可以在决定是否想要之前打开、戳戳和打破。

下面:每个设计、它实际上有什么用,以及哪些对您的网站来说是一个坏主意的诚实注释。对于插件的传统旋转木马以及这些,请从 旋转木马小部件中心.

20种设计一览

Pick by 你正在构建的东西,而不是截图中看起来最好的东西,一个在产品组合上看起来令人惊叹的覆盖流会埋葬一个产品网格。

运行这些所需的内容

Elementor free 已经足够页面本身了, 分裂在设计中:

• 13至20号设计是免费的。 他们通过主插件 → Widget Builder → 在免费插件上导入 Widget:无专业许可证、无试用、无卡。每个人都通过自己的控件降落在"收藏夹"下的元素器面板中。
• 设计 01 至 12 需要 Master Addons Pro。 它们是建立在完整的基础上的 小部件生成器的,这是一个Pro功能。

不需要任何东西:现场演示。打开二十个中的任何一个,调整浏览器大小,拖动幻灯片,观看它在手机宽度视口上的表现。这不需要任何费用,也是判断动作风格是否适合您的内容的唯一方法。

免费插件还附带传统的旋转木马小部件(旋转木马模式下的图像旋转木马、徽标滑块、团队滑块和博客小部件),所有这些都包含在介绍中链接的旋转木马小部件页面上。

01、子午线覆流

现场演示 下载小部件 JSON

中心滑梯平坦而方形,两侧的滑梯在 Y 轴上旋转并变暗,因此您的眼睛落在应有的位置。经典的覆盖流,减去 2011 年以来没有人想要的反射。

Yong作,因为它在不争夺注意力的情况下展现语境,Yi位访客看到还有五个案例研究,却看不清其中任何一个,Zheng是让人点箭头的张力。

用它来: 案例研究卷轴、作品集,任何每张幻灯片都值得完整阅读的内容。

不要用它来: product grids。Coverflow 正确显示一项,并暗示两项,购物者比较六项产品会讨厌你。

02、手风琴手风琴

现场演示 下载小部件 JSON

6个狭窄的垂直面板。悬停一个,它膨胀;其他压缩腾出空间。无箭头,无点,无自动播放:整个导航就是悬停。

Watch what happen on mobile though。touchscreen 上没有悬停,所以面板会回落以点击展开。没关系,但这意味着第一次点击的行为必须是显而易见的,否则人们会直接滚动通过它。在活动面板上添加一个可见的 V 形,问题就消失了。

用它来: 六个或更少的服务类别、目的地列表、标签进行销售的任何内容。

03、本影叠加

现场演示 下载小部件 JSON

Image 填充帧, 字幕坐在一个梯度, 只会使底部三分之一变暗。幻灯片更改, 字幕交叉淡入淡出一个节拍之后。

That delay是整个设计,文本和图像一起到达读作横幅广告,文本到达第二读作照片上的标题,如果照片是产品,这就是你想要的。

这是最接近的设计 元素图像旋转木马小部件 如果您想要没有 Pro 的相同外观。免费小部件包含图像和标题,只是没有交错的淡入淡出。

04、地层甲板

现场演示 下载小部件 JSON

卡片堆叠起来有轻微的偏移,这样您就可以看到顶部卡片后面有三到四个边缘。前进,顶部卡片升起并滑落,露出下一个。

Stack做平转盘不能做的事情:显示数量,一个访客知道还有更多的推荐,不计算点数,对于社会证明,这是大部分工作。

用它来: 推荐、定价层、入职步骤。

小心: 将堆栈保持在五六张可见的卡片上。过去,偏移变得如此薄,深度读取为渲染错误。

05、平分法

现场演示 下载小部件 JSON

Screen 中间往下分,上半部分往上移动,下半部分往下移动,在下一张幻灯片上相遇,两块面板,一个手势。

I’d把这个放在英雄中,而不是其他地方’这是一个大动作:它吃掉了完整的视口,需要访问者的注意力一秒钟’在一个公平交易的英雄中’服务页面的一半只是噪音。

用它来: 主页英雄、战役登陆页面、配对之前/之后。

06、上升鼠标滚轮

现场演示 下载小部件 JSON

No arrows。you滚动, 它前进。滑块捕获轮子在它看到, 并释放一旦你击中最后一个滑块。

Scroll-jacking的名声不好,它赚了,这里的版本在你到达两端的那一刻就释放了轮子,所以一个想要一直往下走页面的访问者永远不会被困在触控板上测试这个,然后你就承诺了,因为触控板的动量比轮子抽搐多了,如果你的幻灯片是文本重的人会超调。

用它来: 叙述部分、产品故事、时间表。

不要使用它: fold 上方。访问者的第一个滚动应该移动页面,而不是小部件。

07。枢轴翻转

现场演示 下载小部件 JSON

Card在纵轴上旋转180° 前面朝外,后面朝内,两个面都是可编辑的,所以反面可以装bio,spec sheet,或者价格。

Two-side内容比听起来更稀有而且这个设计是寻找它的理由,前面的团队成员,后面的角色和链接,产品正面拍摄,尺寸背面。

用它来: 团队网格,之前/之后,规格卡。 Flip 位于 coverflow、arc 和 orbit 旁边 3D转盘故障.

08、弧形弯曲

现场演示 下载小部件 JSON

幻灯片位于一个圆圈的边缘,圆圈的中心位于折叠下方,每个圆圈都直立到达顶部,并在离开时向外倾斜。拱形图像掩模遵循相同的曲线。

套装中的其他东西都不是这样的,这就是它的论据。没有人见过另一个 WordPress 网站上的这种情况。

用它来: 项目相似且演示文稿必须带有兴趣的集合:目录、样本列表、菜单。

09、泰塞拉马赛克

现场演示 下载小部件 JSON

1个不等的瓷砖网格,它会重新洗牌而不是滑动,瓷砖动画到新的位置和尺寸;构图改变但永远不会空。

当你有三十张图像并且它们之间没有层次结构时,这是可以达到的。传统的旋转木马将阅读顺序强制到没有阅读顺序的内容上。马赛克没有。

用它来: 活动摄影、画廊页面、页面图像较多。

成本: 是布局工作中套装中最重的设计,每个源图像保持在200 KB以下或中端Android上的重新洗牌卡顿。

10。蜿蜒的拖曳

现场演示 下载小部件 JSON

Grab and throw。Momentum 承载着轨道经过你放手的地方, 缓和到停下来, 没有折断滑动边界, 所以滑梯可以坐半可见, 这是重点, 因为半可见滑梯是一个信号, 有更多。

Free-drag具有真正的辅助成本:键盘用户从拖动交互中一无所获箭头键支持连接起来,但如果您的受众偏向辅助技术,设计01或04将更好地为他们服务。

用它来: 外观手册、作品集、长水平收藏。

11、石板幕

现场演示 下载小部件 JSON

垂直面板像窗帘一样拉开,下一个幻灯片已经坐在它们后面。显露是过渡。

读作仪式。这在网站、产品发布和主页英雄上恰好两次都很有用,而且在其他地方都放错了地方。

用它来: 发布会、宣布英雄、季节性活动。

12、光环轨道

现场演示 下载小部件 JSON

Items 绕着一个固定的中心点运行,顶部的那个是活跃的,全尺寸的;其余的随着它们绕着背面移动而缩小。

Circular layouts 适合真正循环的内容,一个四阶段的过程,一个生态系统图,一个服务轮,在里面放一个线性列表,你会迷惑人,因为一个圆圈暗示“返回起点”和五步入职流程不会。

用它来: 流程图、生态系统地图、能力轮。

13、基座英雄滑块 (免费的)

现场演示 下载小部件 JSON

1张图片充斥舞台,一个字幕底座坐左下,控制栏(点、箭头、计数器)坐右下,幻灯片瞬间交换:不褪色,不滑入,慢速手机上没有什么不同步或口吃的。

即时交换听起来像是一个限制,直到你对它进行淡入淡出。英雄过渡两次吞噬注意力:一次离开,一次到达。这种设计将预算花在照片上,而不是。它也是套装中唯一具有每幻灯片链接控制的设计,加上所有幻灯片共享一个 CTA 标签,这正是主页英雄所需的形状。

用它来: 主页英雄、登陆页面顶部、图像所在的任何位置都是论点。

不要用它来: 需要运动来解释自己的内容。没有,故意的。

14、账本索引滑块 (免费的)

现场演示 下载小部件 JSON

一列大盘子旁边的条目行。选择一行和盘子、印章和标题交换来匹配。列表是导航,不需要箭头,尽管它们在那里。

这会反转通常的转盘问题。普通滑块隐藏除当前滑块之外的所有内容;此处整个目录始终可见,图像是细节视图。如果您希望在单击之前行响应,则有一个选择悬停切换。

用它来: 收藏、档案、作品列表:标题包含真实信息的任何地方。

小心: 行卖点击。“第1项第2项第3”浪费了整个设计;像标题一样写行标题。

15, 葡萄糖板图库 (免费的)

现场演示 下载小部件 JSON

单板位于一条缩略图下,旁边有一个粘性面板,上面写着标题和一张帧数据表:位置、时间、镜头、光圈、快门、ISO。框架直接替换;没有幻灯片。

找“元素人图像滑块带缩略图”就是这样, 专为摄影师打造, 数据表标签都是可编辑的, 所以印刷店可以把镜头/光圈变成纸/版, 博物馆可以变成中/日期/出处。

用它来: 摄影作品集、物体摄影、产品细节库。对于相同的带有视频的盘缩略图形状,请参阅 画廊滑块指南.

不要用它来: 不值得元数据的图像。空数据面板读取为未完成的页面。

16。象限分页目录 (免费的)

现场演示 下载小部件 JSON

1个物品框网格,一次分页3个:9个物品横跨3页,一栏段显示你在跑步的地方,并双作为跳跃控制;步按钮前后行走。

这是大多数旋转木马被错误地给出的工作的设计:显示许多可比较的东西。每个盒子都带有图像、类别、标题、副本和统计数据,并且由于可以同时看到三页的整页,因此访问者实际上可以进行比较,这就是 Coverflow 及其表兄弟故意阻止的。

用它来: product风格的目录,特色网格,服务菜单,它也是里面的免费路线 WooCommerce 产品轮播指南.

小心: 它正好包含三页中的九个项目。如果您的目录有三十个项目深,您需要一个带有过滤器的真实产品网格,而不是任何旋转木马。

17。公告制表板 (免费的)

现场演示 下载小部件 JSON

1个叠板上的标签条,每块面板都是小小的编辑布局:一个带有标题的人物、一个踢脚、一个标题、一个lede、正文副本、一个三行事实表和一个署名。

严格来说,这是选项卡,而不是滑块,这就是为什么它在这里。人们试图强行进入旋转木马的一半(比较三个计划、三个地点、三个案例研究)是穿着服装的选项卡内容。这一项还正确地完成了可访问性:真正的 ARIA 选项卡列表语义与流动选项卡索,大多数选项卡小部件都是假的。

用它来: 计划比较、位置页面、案例研究面板:访问者选择而不是浏览的任何三件事。

18、讲台报价滑块 (免费的)

现场演示 下载小部件 JSON

A像旁边的报价面板,用两个V形交叉点跨过。进度条和计数轨道你在哪里,并且步进按钮可以命名他们要移动的声音,就像“下一个:Amara Okafor”而不是匿名箭头。

That named step是值得偷窃的细节, 证言转盘在过渡时会失去读者, 因为箭头什么都不承诺, 名称是点击的理由, 引号也是可编辑的文本控件, 所以可以设置为站点语言的正确字形, 或者删除。

用它来: 推荐、评论、客户报价。有一个 完整的见证旋转木马演练的,而且你能看到 我们自己网站上的真实客户报价.

小心: zhong三个声音,每个都独自拿到舞台,挑选出你最xin的三句名言,并保持短短,一口气读完。

19、年历时间轴滑块 (免费的)

现场演示 下载小部件 JSON

钉在日期轴上的条目。滴答位置是根据您输入的年份计算的,因此间距是真实的而不是偶数。1994年和1996年坐在一起,1996年和2011年坐在一起很远,差距讲述了自己的故事。规则之上的十年梳子给间距提供了一个可以反读的尺度。

Every other timeline widget 均衡地间隔它的条目,这悄悄地谎言历史,这个没有,那就让它成为集合中最固执己见的设计,这里也是最深的面板,在 143 控件,因为轴、梳子和勾号分别与条目分别表示样式。

用它来: 公司历史、项目里程碑、变更日志、有意义差距的记录。对于静态版本,有一个 时间表教程 使用库存小部件。

不要用它来: undated的内容。轴是设计;没有实年就没有什么可以画的。

20、梯形功能滑块 (免费的)

现场演示 下载小部件 JSON

1件物品特色大;其余的在旁边的一面墙上等待,每件只携带它的号码和名字点击一颗卫星,它被提升到该功能,盒子翻转到他们的新地方而不是传送,所以你的眼睛跟随交换而不是失去它。

该特征上有一块包含三个事实的牌匾,它是为房间、空间和旋转展品而建造的,这就是诚实的范围:它一次呈现一小组不同的东西,其他东西明显排队。

用它来: 场地房间、工作室空间、展览、三到五件套的作品集。

小心: 卫星只显示数字和名称,因此该功能必须进行说服。用最强的物品引导,因为大多数访客从不点击过去它。

如何将滑块模板导入 Elementor

四步,大约九十秒。自由和 Pro 设计相同的流程,并且与 导入 Elementor 模板的,因为设计注册为小部件而不是页面布局。

1. 下载设计的 JSON 文件 从其演示页面。每个设计一个文件。
2. 转到主插件 → 小部件生成器 在您的 WordPress 管理员中,单击导入小部件。
3. 将 JSON 放在 dropzone 上。 该设计注册为小部件,并具有自己的控件:内容、颜色、排版、断点。八种免费设计导入免费插件;十二种 Pro 设计在此处要求获得 Pro 许可证。
4. 将其拖到页面上 elementor面板中,它出现在收藏夹下,并将占位符内容交换为您的。

Import 不会触及你的主题,不会在全球范围内排队任何东西,也不会创建一个短代码,它会像其他任何东西一样成为面板中的小部件。

这些滑块在移动设备上工作吗?

20个都是触摸功能和响应式。四个改变行为而不是仅仅缩放:

• 手风琴 从悬停到展开到点击到展开。
• 上升鼠标滚轮 掉轮捕获并使用滑动。
• 蜿蜒的拖曳 保持阻力但缩短动量,这样一拍就不会超出整个轨道。
• 分类索引滑块 将索引堆叠到板上方,然后选择悬停回落以点击。

Free 8也默认保持键盘导航开启,Plinth Hero和Rostrum Quote响应开箱即用的滑动手势。在真实手机上测试马赛克,而不是在浏览器的设备模拟器中测试马赛克,因为模拟的视口不会再现中端Android布局成本,马赛克是首先出现的地方。

你真正应该选择哪一个?

困, 这些覆盖了大多数网站:

• 投资组合或机构: Meridian Coverflow,如果您有十几件,则称为 Meander Drag。在免费许可证上,Keystone 功能滑块。
• 服务业务: Concertina手风琴。在免费,公告选项卡式面板,其事实表赚取其保持计划比较。
• 商店: Quadrant Paged目录为策划的九。没有免费的滑动活产品源的小部件;那份工作需要 Elementor Pro 的循环旋转木马。以任何一种方式跳过3D设计:购物者想要比较,并且构建coverflow来阻止它们。
• 感言: Rostrum 引用滑块。免费,并且命名的步进按钮是集合中最好的过渡提示。
• 主页英雄: 底座英雄滑块如果摄影强,并且 英雄部分模板 如果您想要整个块而不是滑块;如果您希望运动成为时刻,并且只有其中一个运动,则平分裂或石板幕一次。
• 关于页面或历史记录: Almanac时间轴滑块。这里没有其他东西是诚实的过时的内容。

无论您选择什么,都可以通过重要的测试:在自己的手机、蜂窝上加载页面,看看滑块是第一个渲染的东西还是最后一个渲染的东西。文本已经读完后到达的设计不是滑块,而是装饰。

常见问题

下一步去哪里

Demo 开两三个,在你挑选之前,在手机上给他们一个真实的样子,然后:

二十人中有十二人需要进口许可证,因此 定价页面 是检查哪一层涵盖您选择的设计的地方。

• 浏览一处的所有内容 元素轮播小部件 page,包含所有二十种设计加上插件自己的旋转木马小部件。
• 坚持自由层? 免费旋转木马小部件帖子 走过一切不花钱的事情,这八个都包括在内。
• 越过运动越深入? 3D旋转木马设计 (溢出、翻转、弧线和轨道)来仔细观察它们自己的情况。
• 想要一整页而不是一个部分吗? 模板套件 船舶布局完整,旋转木马已放置。
• 构建整个页面,而不仅仅是滑块?的 免费元素部分模板 库涵盖功能、定价、推荐、团队、常见问题解答和 CTA 块,每个块都可以作为一个可编辑小部件导入。