专注WordPress外贸建站实用教程,提供基于WordPress的外贸建站服务!
文章分类
文章标签

Elementor Loop Item模版定制产品列表教程( 附视频)

文章导航

本文介绍如何使用Elementor Loop Item定制产品列表展示结构。Elementor 3.8 Pro 引入了 Loop Builder ,可以实现自定义循环列表项目。解决了产品列表显示内容固定的问题,你可以按照自己的产品特点设计和构建产品列表。

说明,本文的产品是使用CPT UI和ACF实现,并非Woocommerce,如果你是使用Woocommerce来管理产品,可以参照理解本文,但无法照搬。

Loop Item模版是Elementor Pro的功能,本站提供官方授权49元/年1站点,有需要通过页脚二维码联系获取。

高清视频请转到B主页观看

第一步:创建一个Elementor Loop Item模版

在Theme Buider中你可以看到一个新的模版类型Loop item

创建一个Elementor Loop Item模版

通过这个Loop Item,你可以创建一个循环列表的单个项目模板,下图是一个创建好的模版,后面详解介绍如何创建。

image 173 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

你也可以通过Loop Grid元素来添加Loop Item模版,在编辑的页面或者模版中,拖拽一个Loop Grid元素

image 174 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

将Loop Grid元素拖拽到页面之后,根据提示,可以创建一个新的Loop Item模版应用到当前的Loop Grid,也可以选择已经做好的Loop Item模版。

image 175 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

第二步:编辑Loop Item模版

跳转到Loop Item模版编辑之后,你可以先设置一个预览数据,方便查看编辑效果。

1、设置预览数据

点击左下角的⚙,进入模版设置

image 176 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

点开Preview Settings

image 177 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

Preview a specific post or item选择Products,下面的框中 选择一个详细产品即可,点击Apply & Preview。

image 178 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

2、添加产品列表的封面图片

返回到Loop Item的编辑,添加一个Featured Image元素,或者Image元素都可以。

Image Size设置为Full(不然可能导致图片模糊)

Link设置为Custom URL

并在地址栏中选择动态数据的Post URL

这样用户点击图片时可以跳转到产品详情页

image 179 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

3、添加产品列表的产品名称

添加一个Post Title元素在图片元素的下方,作为产品标题

image 180 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

在Post Title元素的内容编辑中,设置Link位动态数据的Post URL,这样用户点击产品标题也会跳转到产品详情页。

image 181 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

将标题的HTML标签设为Span,如果你对页面的H标签结构熟悉,你可以设置成你想要的H标签。设置H标签时应该注意是否影响到整个页面的H标签布局。

image 182 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

最后再通过Post Title的风格设置修改字体大小颜色及对其方式,调整到你觉得OK的风格即可。

image 183 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

4、添加产品列表摘要

添加摘要方法我主要介绍2种,一种是直接调取默认的摘要信息,另外一种是调取ACF字段的内容作为摘要。

第一种,直接添加Post Except元素

这种方法调取的是产品的摘要信息,如果你没有填写摘要,则不显示任何内容。

image 185 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

默认填写摘要的地方

image 184 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

这种方法添加的摘要只能是一段文字。如果你没有使用ACF字段来做文章摘要,可以使用这个方法。

第二种,通过Text Editor元素获取ACF字段

如果你使用ACF给产品添加了摘要字段,你可以参照下面的方法设置。

image 186 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

设置文本元素的内容为动态数据中的ACF Field

image 187 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

然后在Key中选择你设置的摘要字段,我这里是Short Description字段

image 188 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

设置完成之后会自动获取到你在对应产品的字段中录入的内容。

image 189 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

扩展,如何控制摘要的文字长度。

通常情况下,我们录入的产品摘要信息,有的会比较长,有会比较短,如何控制它的文字长度以达到一个比较美观的效果呢?

你只需要为现实摘要的元素,添加一段CSS代码即可。

比如,在我制作的这个现实摘要的Text Edit元素的advance下面的Custom CSS中粘贴下面这段代码:

selector{
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;/*超过2行自动截断并显示省略号*/
  -webkit-box-orient: vertical;
}

这是一段通用代码,你可以直接复制粘贴使用,只需要修改-webkit-line-clamp: 2;里面的数字即可控制摘要显示的行数。我这里设置的是2行。

image 190 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

5、添加产品列表的阅读更多按钮

在产品摘要下面添加一个按钮元素

image 191 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

设置好按钮的文字

Link通过动态标签设置为Post URL,用户点击按钮可以直接跳转到产品详情页

你还可以设置按钮图标等等

image 192 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

最后在通过对整体的风格优化和调整来实现更加美观的效果

image 193 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

当然你还可以添加其他你想要在产品列表中展示的元素,尽情发挥你的想象和创造。

6、发布Loop Item 模版

点击发布按钮,发布已经做好的Loop Item模版

image 194 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

第三步:在Loop Grid元素中调用Loop item模版

进入你需要添加产品列表的页面或者模版的Elementor编辑,拖拽一个Loop Grid元素到页面中

image 195 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

编辑这个Loop Grid元素,在Layout中选择你刚刚做好的Loop Item模版

image 196 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

选择之后你会发现现实数据不正确,那是因为还没有设置数据源

image 197 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

在这个Loop Grid元素的Query中选择Source为产品,这样就是查询到所有产品的数据。

image 198 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

当然你还可以设置其他数据源,比如这个Loop Grid元素是在产品分类模版中的话,你就要设置Source为Current Query

image 199 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

如果你想要列表的高度显示一致,需要在Loop Grid的Layout中开启Equal height,这对于摘要或者名字长度不一致而导致的溢出,效果也不错。

image 200 - Elementor Loop Item模版定制产品列表教程( 附视频) - NUTSWP

总结

Elementor 提供了Loop Carousel元素,你还可以自定义产品轮播的Item,制作的方法参考Loop Grid,两者只是展现的形式不一样,一个是列表一个是轮播。

Loop 解决了之前Elementor列表不能自定义的问题,是一个非常棒的功能。

想快速搭建一个完全属于自己的外贸独立站?
本站提供专业的外贸建站服务,如果你不想自己花时间精力搭建网站,可以将你的需求告诉我,我来帮助你搭建一个专业外贸独立站!
微信联系我
Whatsapp联系我
文章分类
文章标签
专注WordPress外贸建站实用教程,提供基于WordPress的外贸建站服务!
外贸建站交流群
广告勿扰
企业微信
文章导航
建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!