Loop Carousel是Elementor Pro的动态转盘,你不是手工添加幻灯片,而是构建一张幻灯片作为模板,并将小部件指向一个查询(帖子、产品或任何自定义帖子类型),它会填满自己添加一篇文章,转盘更新无需编辑。
它在 Elementor 3.11 中到达,它是 元素轮播小部件 大多数人在搜索帖子转盘或产品滑块时实际上都在寻找,它也是仅限 Pro,Elementor 核心中没有免费的等效内容,因此本帖的后半部分涵盖了 免费旋转木马小部件 如果您没有许可证,这会让您靠近。
本指南涵盖了什么
- 环路旋转木马与环路网格:使用哪一个
- 开始之前你需要什么
- 如何在 Elementor 中创建循环旋转木马
- 让人们绊倒的设置
- WooCommerce 产品的循环旋转木马
- 没有 Elementor Pro?自由路径
- 当循环旋转木马是错误的选择时
- 常见问题
环路旋转木马与环路网格:哪一个
相同的引擎,相同的循环项目模板,不同的演示文稿网格堆叠垂直行,转盘将相同的项目放在水平轨道上。
当物品可选时选择旋转木马:“你可能还喜欢”条、相关帖子、特色产品。没有人必须看到第七项才能使页面有意义。
Ti目为页面时选择网格。一个存档,一个商店类别,一个博客索引。将三分之二的类别列表隐藏在箭头后面会花费你转换,因为必须点击才能查看更多产品的购物者通常不会。
I’d给客户的规则:如果该部分有一个标题,如“更多来自博客,”旋转木马。如果标题是页面标题,网格。
开始之前你需要什么
- 元素专业版。 Loop Carousel不在免费插件中,也没有部分版本。
- 循环项目模板。 这是单张幻灯片设计:特色图像、标题、摘录、按钮。在主题构建器中构建一次,到处重复使用。
- 要查询的内容。 帖子、产品或注册的自定义帖子类型。
在较旧的安装中,您可能还需要启用 Elementor → 设置 → 功能。它发货在实验标志后面,并在稳定之前在那里停留了几个版本。
如何在 Elementor 中创建循环旋转木马
先构建幻灯片,然后构建旋转木马。反之亦然意味着在狭窄的预览中进行设计。
- 创建循环项目模板。 模板 → 主题生成器 → 循环项目 → 添加新内容 选择它将呈现的帖子类型 您正在设计一张卡片,而不是列表,Elementor 显示单个项目并在稍后重复。
- 使用动态标签构建卡。 添加图像小部件并将其源设置为动态 → 特征图像。标题小部件 → 动态 → 帖子标题。文本编辑器 → 帖子摘录。按钮 → 动态 → 帖子 URL。这里没有任何内容是硬编码的;每个字段都从该插槽中落地的帖子中提取。
- 发布模板 并跳过显示条件提示。循环项目不需要条件,因为它们是由小部件调用的,而不是分配给某个位置的。
- 删除循环旋转木马小部件 进入您的页面并选择您刚刚在"选择模板"下制作的模板。
- 设置查询。 源(帖子,产品或您的CPT),然后缩小范围:通过分类法包含,排除当前帖子,设置每页帖子打开“如果同一页面上还有另一个循环,避免重复”,否则您的相关帖子条将重复边栏中已有的内容。
- 配置旋转木马。 每视图幻灯片、滚动幻灯片、自动播放、无限循环、速度、悬停暂停 使用面板顶部的设备图标为桌面、平板电脑和移动设备单独设置每视图幻灯片。
- 风格导航。 箭头、点或分数。尺寸、颜色、位置和悬停状态均位于样式选项卡中。
让人们绊倒的设置
无限循环需要足够的项目。 Elementor克隆滑动来伪造环绕,它至少需要你的每视图滑动两倍才能在无形中完成,每视图三下的四个帖子在包裹时会明显跳转,要么每页升高帖子,要么关闭循环。
每页帖子是一个查询限制,而不是显示限制。 6 设置,旋转木马总共包含六项,但是许多是可见的,人们将其设置为 3 以匹配每视图幻灯片,然后想知道为什么没有什么可滚动的。
边缘间隙改变了提示。 1个在容器边缘齐平结束的转盘看起来已经完成了,添加一个小的边缘间隙,这样下一张幻灯片就窥视进来,人们知道要滑动,它有几个像素,它可以测量地改变交互速率。
自动播放加链接是一对糟糕的。 如果您的幻灯片可点击并且旋转木马在计时器上移动,有人会伸手去拿一张卡片并单击替换它的卡片。悬停暂停修复桌面外壳。触摸时没有悬停,因此对于 可点击的卡片 我会完全关闭自动播放。
WooCommerce 产品的循环旋转木马
同一个过程,一个区别:将源设置为产品,您将获得WooCommerce特定的查询控件。按类别、标签或属性进行过滤,按价格、受欢迎程度或日期进行排序,并排除缺货项目。
Loop Item 模板的产品应该带有价格和一个添加到购物车按钮作为动态元素,而不是静态文本,错过那个和转盘中的每张卡都显示相同的价格,这正是那种存活到生产的错误,因为它在编辑器预览中看起来很好。
相关产品,最近查看,以及“完成look”条都是同一个小部件,具有不同的查询。如果您只需要一个产品呼叫而不是条带,则 特色产品小部件 do 那一点儿也不用查询,是 Pro 小部件,也是唯一个 WooCommerce 产品小部件大师插件发货。
没有 Elementor Pro?这是自由路径
Loop Carousel 是 Pro。If 上的免费 Elementor,你就不会得到它,并且没有免费插件重新实现 Loop Item 模板系统。
果:拉帖子或产品,自己更新的动态转盘,免费获得的是。主插件’ 博客小部件 free插件中有一个转盘模式,按帖子类型、类别、标签或作者查询,选择布局,将显示切换到转盘,配置相同的箭头、点、自动播放和每个断点控件。
Trequate-off是诚实的:你不设计卡片。Blog小部件给你布局预设和一个样式选项卡而不是空白的Loop Item画布。如果你需要像素控制幻灯片,Elementor Pro的方法更好。如果你需要“最新的六个帖子’在滑块中看起来不错,”免费小部件更快到达那里。
品更薄,值得直白地说:没有免费的产品转盘小部件,一个滑动的、自我更新的产品条需要Elementor Pro的Loop转盘,或者像下面这样手工填充的布局 产品转盘指南 通过两者进行工作。如果您的幻灯片是固定图像而不是查询,则免费 图片旋转木马小部件 是较短的路线,尽管在那一点上你正在构建一个滑块,而不是一个环路。
还有第三个值得了解的免费选项。 Master Addons 发货 20个被命名的旋转木马和滑块设计 为可导入 小部件生成器 files,而且其中8个是免费导入的,它们不是查询驱动的,所以你用手填写项目,但是两个坐在一个loop Carousel产生的东西附近。 象限分页目录 页面由九个项目框组成,每次三个,每个项目框都有一个图像、类别、标题和副本,这是距离分页产品循环最近的免费内容。 分类索引滑块 将可点击的条目索引放在显示板旁边,专为档案和作品列表而构建。所有 20 个都收集在 旋转木马小部件中心.
当循环旋转木马是错误的选择时
3个案例,而且我已经看到客户网站上这三个都出了问题。
您的档案页面。 轮播中的类别列表意味着谷歌的爬虫看到六个你有六十的产品,其余的都在DOM中,但对用户以及任何判断页面深度的人来说,信号是这个类别很薄。
移动时的折叠上方。 动态转盘是查询、模板渲染和a 滑块初始化 在任何油漆之前。将其放在电话页面顶部,您最大的内容丰富油漆就是旋转器。
不到五项。 3张幻灯片的旋转木马,就是让人工作的格子,三张都出示就行了。
常见问题
元素环旋转木马免费吗?
No。Loop Carousel需要Elementor Pro,没有减少的免费版本,免费替代品是来自一个插件的查询驱动的转盘小部件,而Master Addons的博客小部件在其免费层中有一个动态拉取帖子的转盘模式,对于手工填充的布局,Master Addons的20个可导入转盘设计中的8个也是免费的。
Loop 网格和环形转盘有什么区别?
Ta们共享同一个Loop Item模板和查询控件,Loop Grid将结果排列成行和列;Loop Carousel将它们放在带有箭头和点的水平滑轨上,使用网格进行存档和列表,旋转木马用于可选的“相关”或“特征”条。
如何在 Elementor 中添加循环旋转木马?
在主题生成器中先构建一个循环项目模板,对图像、标题和摘录使用动态标签发布它,然后将循环轮播小部件拖到您的页面上,选择该模板,设置查询源和过滤器,并在轮播设置下配置按视图和自动播放的幻灯片。
为什么我的循环旋转木马没有显示帖子?
通常查询。检查 Loop Item 模板的帖子类型是否与小部件的查询源匹配,因为为 Posts 构建的模板不会渲染产品。第二常见的原因是分类过滤器,没有匹配的内容。第三是每页的帖子设置低于您想象的。
Loop 轮播可以显示自定义帖子类型吗?
是任何注册的公共帖子类型都出现在查询源下拉中,如果您使用的是 ACF、元框或 Pod,则其自定义字段可用作动态标签。针对该帖子类型构建循环项目模板,轮播处理其余部分。
如何使循环旋转木马响应?
使用设置顶部的设备图标在每个断点上单独设置幻灯片,桌面上三个,平板电脑上两个,移动设备上一个是安全默认值。还可以在移动设备上检查箭头大小,因为桌面默认值通常太小,无法成为舒适的点击目标。
从这里去哪里
Pro的话,先构建Loop Item模板,把它当作你将在站点其余部分跨网格和旋转木马重复使用的设计资产,这是回报的那一块。
如果您宁愿将卡构建为可重用的小部件而不是模板,那就是这样 创作您自己的小部件 是为了,并且 定价页面 覆盖它所在的层。
如果您不这样做,请从免费的查询驱动的小部件开始,看看布局预设是否能让您足够接近。这两条路径都覆盖在上面 元素轮播小部件 page,连同其它的轮播选项,还是决定格式? 旋转木马与滑块 确定哪个形状塑造了您的部分实际需要,以及 的滑块插件综述 涵盖构建它的插件。
