如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动

营销活动是吸引客户并推动销售的关键部分,无论是新产品的发布、特价优惠,还是季节性促销,展示这些活动的方式直接影响用户体验和转化率。Elementor Loop BuilderLoop Carousel 组件为商家提供了一个强大的工具,使得在首页动态展示营销活动变得轻松而富有创意。

本文将带你们了解如何使用 Elementor 快速创建吸引人的营销活动展示,并通过 Loop Carousel 将其以美观的轮播形式呈现。

什么是 Loop Builder 和 Loop Carousel?

Loop Builder 简介

在 Elementor 中,Loop Builder 是一个强大的模板类型,专门用于控制重复内容的外观。它允许用户根据需求自定义如何展示文章、产品或其他自定义内容类型。通过 Loop Builder,商家可以在网站的不同区域,如首页或归档页,动态展示最新的产品、文章或特定类别的内容。

图片[1]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动

Loop Carousel 简介

Loop Carousel 是 Elementor 提供的另一种展示内容的方式。与 Loop Grid 不同,Loop Carousel 以水平滚动的形式展示内容,每次展示一个项,用户可以通过滑动来浏览多个内容。这种方式特别适用于展示横向布局的营销活动、产品或文章,以便用户能够快速浏览并进行互动。

图片[2]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动

如何使用 Loop Builder 创建营销活动展示

1. 配置 Loop Grid

在 Elementor 中,创建和定制 Loop 组件的第一步是选择合适的模板类型。以产品展示为例,我们可以使用 Loop GridLoop Carousel 来展示特定产品。

步骤:

  • Loop Grid 小部件拖放到页面上。
图片[3]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动
  • 选择模板类型,如“产品”或“文章”,并选择一个预设模板,或者点击 创建模板 来设计自己的模板。
图片[4]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动
  • 配置容器设置,将需要的动态小部件拖放到模板中。
图片[5]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动

2. 使用动态标签和自定义小部件

Elementor 提供了丰富的动态标签和小部件,帮助用户展示内容时更加灵活。可以使用 Flipbox 小部件,在鼠标悬停时展示产品的替代图像。通过动态标签,可以将不同的动态数据(如产品名称、价格等)与模板绑定,使得每个产品展示都更加个性化。

图片[6]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动

3. 调整 Loop 设置

  • 列数和项目数量:可以调整显示的列数以及每页展示的项目数量。
图片[7]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动
  • Masonry 布局:如果想要让内容以瀑布流方式呈现,可以启用 Masonry Grid 布局。
图片[8]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动
  • 内容筛选:通过设置查询条件,选择展示特定类别或标签的产品,甚至可以排除一些不需要显示的项目。
图片[9]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动

4. 创建 Loop Carousel 展示营销活动

如果希望以轮播形式展示产品或营销活动,使用 Loop Carousel 是个理想的选择。

步骤:

  • Loop Carousel 小部件拖放到页面上。
图片[10]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动
  • 选择使用之前创建的产品模板,或者根据需求自定义新模板。
图片[11]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动
  • 查询设置 中,选择要展示的最新产品,并设置为 降序排列,确保新产品最先显示。
图片[12]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动
  • 配置导航设置,可以自定义 前进后退 按钮,或选择隐藏它们。
图片[13]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动
  • 调整 分页设置滑块间距,使轮播效果更符合页面布局。
图片[14]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动
  • 点击“样式”选项,设置滑动的间隔,并通过 响应式设置 确保在不同设备上的显示效果。
图片[15]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动

5. 自定义着陆页内容

当希望通过 Loop Carousel 展示多个营销活动时,可以创建多个着陆页,每个页面都对应不同的产品或优惠活动。

步骤:

  • 确保已在 Elementor 设置 中启用“着陆页”作为自定义文章类型。
图片[16]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动
  • 在创建轮播时,通过 查询源 设置为“着陆页”,并选择展示的内容。
图片[17]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动
  • 点击“样式”选项,调整轮播的显示方式,设置背景图片,设置显示高度和样式等,确保每个营销活动有其独立的视觉风格,并设置适当的预览效果。
图片[18]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动

完成设计与发布

完成以上设置后,可以通过 保存并发布 按钮将设计应用到实际页面上。用户访问网站时,能够看到一个美观的营销活动轮播,吸引他们点击并参与到促销活动中。

图片[19]-如何利用 Elementor 的 Loop Carousel 展示在线商店的营销活动

结语

通过 Elementor 的 Loop BuilderLoop Carousel,可以轻松地在在线商店中展示多样化的营销活动。这些强大的设计工具让你无需编写代码即可创建动态且响应式的页面内容,从而提升用户体验并推动更多的销售。无论是展示最新的产品,还是推广限时折扣,Loop 组件都为你提供了灵活而高效的解决方案。

想了解更多WordPress相关的教程和资讯,请关注光子波动网,拥有最全的WordPress教程和最活跃的WordPress交流社区


联系我们
教程看不懂?联系我们为您免费解答!免费助力个人,小企站点!
客服微信
客服微信
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
© 转载声明
本文作者:初季
THE END
喜欢就支持一下吧
点赞12 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容