文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至300元!
文章标签

【Products Archive】作如何使用Elementor Pro制作产品汇总和分类页面模板?(附视频)

文章导航

本文介绍如何使用Elementor Pro制作产品汇总和分类页面模板,在制作之前你需要确保已经安装和激活了Elementor ProWoocommerce插件,之后我们就可以使用Elementor Pro的Theme Builder创建Products Archive模板。

说明:Product Archive模板是专门制作产品列表页面的模板,而Single Products模板是专门制作产品详情页面的模板。

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

1、创建Products Archive模板

进入Elementor Pro的Theme Builder,也就是主题构建器中

image 55 - 【Products Archive】作如何使用Elementor Pro制作产品汇总和分类页面模板?(附视频) - NUTSWP

切换到Products Archive模板类型

image 56 - 【Products Archive】作如何使用Elementor Pro制作产品汇总和分类页面模板?(附视频) - NUTSWP

点击【Add New】添加一个Products Archive模板

image 57 - 【Products Archive】作如何使用Elementor Pro制作产品汇总和分类页面模板?(附视频) - NUTSWP

2、编辑Products Archive模板

添加之后会自动弹出Elementor 模板,你可以选择Elementor提供的模板进行修改,也可以直接关闭模板自定创建和编辑。

我大概编辑完成一个这样的页面,详细的编辑过程你可以观看上文的视频。

如何使用Elementor Pro制作产品汇总和分类页面模板(Products Archive )?

产品列表展示元素的选择和详细说明

之前遇到很多对于产品列表元素数据源设置的问题,这里做一些详细的补充说明。

在制作Products Archive模板时,产品列表展示元素可以选择的有很多,包括主题自带的Archive Products元素、Elementor基于Woocommerce生成的Products元素,Elementor三方扩展提供的元素(例如 UAE的Woo-Products元素)都可以实现。下面就来说说有什么区别和如何设置。

Archive Products元素

Archive Products元素是主题自动生成的,你可以修改元素展示的颜色字体大小等内容,但是不可以修改其风格,比如是否展示图片,是否展示摘要等内容,这些需要你到主题设置里面去修改。

同时这个元素的数据源是默认的,你不需要设置。

image 64 - 【Products Archive】作如何使用Elementor Pro制作产品汇总和分类页面模板?(附视频) - NUTSWP

Products元素

Products元素是Elementor基于Woocommerce提供的,它和Archive Products元素非常相似。不同的地方就是它可以修改数据源。

image 65 - 【Products Archive】作如何使用Elementor Pro制作产品汇总和分类页面模板?(附视频) - NUTSWP

如果你选择是Products元素来展示产品,则数据源一定要选择【Current Query】

image 66 - 【Products Archive】作如何使用Elementor Pro制作产品汇总和分类页面模板?(附视频) - NUTSWP

Woo-Products元素

Woo-Products元素是Elementor第三方扩展Unlimited Addon For Elementor(付费插件,本站读者福利微信联系可以免费领取1个终身授权)提供的元素。

image 68 - 【Products Archive】作如何使用Elementor Pro制作产品汇总和分类页面模板?(附视频) - NUTSWP

这个元素的自由度相对高一点,你可以设置需要显示和隐藏的内容,同时也可以设置其外观风格。

image 67 - 【Products Archive】作如何使用Elementor Pro制作产品汇总和分类页面模板?(附视频) - NUTSWP

其数据源设置需要设置为【Main Query】

image 69 - 【Products Archive】作如何使用Elementor Pro制作产品汇总和分类页面模板?(附视频) - NUTSWP

3、设置模板的可见性(Display Condition)

你如果对Elementor Theme Builder模板的Display Condition设置不了解,可以阅读我写的《Elementor Display Condition显示条件设置详解(附视频)》。

如果你只打算制作一个Products Archive用于展示网站中所有的产品列表页面,那么你按照下图设置Display Condition即可。

也就是 Include :All Product Archives

image 59 - 【Products Archive】作如何使用Elementor Pro制作产品汇总和分类页面模板?(附视频) - NUTSWP

如果你希望不同的产品列表内容的展示效果不同,那么你可以针对不同的内容做对应的Products Archive模板,然后通过Display Condition设置来设置不同的模板展示应用到不同的产品列表内容。

4、保存发布并查看效果

首先需要保存发布制作的Products Archive模板

image 60 - 【Products Archive】作如何使用Elementor Pro制作产品汇总和分类页面模板?(附视频) - NUTSWP

保存之后你可以预览,但是通常情况下预览的数据会不准确,建议是直接访问对应的分类目录页面来查看实际的效果。

预览的页面和实际的页面在URL上会有区别,预览的页面URL中会包含Preview字样。

image 61 - 【Products Archive】作如何使用Elementor Pro制作产品汇总和分类页面模板?(附视频) - NUTSWP

预览的页面

image 63 - 【Products Archive】作如何使用Elementor Pro制作产品汇总和分类页面模板?(附视频) - NUTSWP

实际的页面

image 62 - 【Products Archive】作如何使用Elementor Pro制作产品汇总和分类页面模板?(附视频) - NUTSWP

总结

以上就是使用Elementor Pro制作产品汇总和分类页面模板全部内容,我整理了一篇比较完整的《Elementor 使用教程》可以帮助你系统全面的了解和使用Elementor搭建自己网站。

相关内容
2种方法Elementor表单实现电话字段国家代码教程

本教程介绍2种Elementor表单实现电话字段国家代码,默认的Elementor表单电话字段没有国家区号,本教程提供了2个有效的方案,实现根据用户位置自动显示电话号码的国家区号效果。 方案一:Ali Addons For Elementor插件实现表单手机号码国家代码 方案一实现效果如下图,可以根

阅读全文 »
Elementor Popup设置点击连接弹出的2种方法

本文介绍Elementor Popup设置点击连接弹出的2种方法法,在Elementor中创建一个Popup弹出框,我们可以通过多种方式进行点击有弹出设置。 方法一:通过Elementor元素Link的动态标签设置弹出 这种方法仅限于在Elementor编辑中使用,任何带有Link选项的链接都可以进

阅读全文 »
Zapier Webhook 实现询盘提交关键词过滤和邮件转发教程

本文介绍如何使用Zapier Webhook 实现询盘提交关键词过滤和邮件转发教程,将Zapier流程集成到Elementor Form中可以实现表单消息关键词过滤和转发。 此方法适合需要过滤垃圾关键词询盘邮件消息的用户,一般表单安全验证主要是防止机器人提交垃圾信息,但是无法阻止人工发送的垃圾询盘,

阅读全文 »
Elementor的操作记录和修订版本

本文介绍如何借助Elementor的操作记录和修订版本进行Elementor页面恢复操作? 如果你在找古腾堡编辑器的修订版本的操作方法,请阅读《古腾堡编辑器的修订版本》 Elementor目前有2种画布窗口模式,所以我会分别介绍修订版本操作在哪里进入编辑。 如果你是传统的画布窗口 在编辑窗口左侧工具

阅读全文 »
Elementor Floating Buttons移动端全宽不生效

Elementor新出的Floating Buttons功能,发现了Mobile Bar的移动端全宽不生效,这个问题我在本地测试发现所有的Mobile Bar模版的移动端全宽开启都不生效。 根据排查的方法,我也进行了一些的排查工作,发现问题任然存在。 于是通过自定义CSS代码,修复了这个问题。 CS

阅读全文 »
文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至300元!
文章标签
想快速搭建一个完全属于自己的外贸独立站?
本站提供专业的外贸建站服务,如果你不想自己花时间精力搭建网站,可以将你的需求告诉我,我来帮助你搭建一个专业外贸独立站!
文章导航
文章分类
文章标签
建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!