elementui展示列表模板_如何用Elementor制作Woocommerce产品列表

本文是LOYSEO的外贸网站建设教程内容之一&＃xff0c;我将逐步介绍如何使用Elementor Pro制作woocommerce产品列表模板&＃xff0c;下面进入正题。

原文首发于&＃xff1a;https://loyseo.com/creating-a-woocommerce-archive-template-with-elementor-pro/

视频教程

图文教程

进入“ 模板”>“添加新模板”&＃xff0c;选择类型为 “Product archive”&＃xff0c;为其命名&＃xff0c;然后单击“ 创建模板”

然后&＃xff0c;在弹出的模板库页面上&＃xff0c;可以选择一个模板&＃xff0c;点击insert按钮导入

导入后&＃xff0c;页面上只有两个元素&＃xff0c;一个是archive title&＃xff08;列表标题&＃xff09;、一个是archive products&＃xff08;产品列表&＃xff09;&＃xff0c;请点选他们后右键删除&＃xff0c;模板里的元素块都不好用&＃xff0c;设置受限&＃xff0c;我们会换两个发挥空间更大的元素&＃xff1b;然后按照下图所示&＃xff0c;将标题的context选项关闭&＃xff0c;关闭后就不会在标题前显示文案“Archives:”了。

接下来按下图所示&＃xff0c;我们在左侧元素库中搜索Heading元素&＃xff0c;并将它拖拽到右侧的画布中&＃xff0c;按照下图设置&＃xff0c;点击title右侧的

按钮&＃xff0c;并选择archive title&＃xff0c;并在setting中将标题的include context选项关闭&＃xff0c;关闭后就不会在标题前显示文案“Archives:”了&＃xff1b;此外&＃xff0c;将HTML tag从H2改为H1&＃xff0c;表示当前标题为整个页面的大标题。

然后&＃xff0c;我们在左侧元素库中搜索POST元素&＃xff0c;并将它拖拽到右侧的画布中&＃xff0c;然后按左侧图片所示&＃xff0c;设置这个POST元素的Query&＃xff0c;将source选为current query&＃xff0c;因为默认post元素是展示Posts&＃xff08;文章&＃xff09;的&＃xff0c;设置为current query&＃xff0c;就可以根据页面的用途来选取展示的内容&＃xff0c;这里我们做的是产品列表&＃xff0c;那么就会取产品展示&＃xff0c;譬如打开某个产品分类页面时&＃xff0c;就会取该分类下的产品展示。

再次&＃xff0c;我们可以按需调整一下产品的皮肤&＃xff0c;见下图&＃xff0c;有三种模式&＃xff1a;classic、cards、full content&＃xff0c;我比较喜欢第二种card&＃xff0c;也是下图中所示的效果。

接下来我们进行细节调整&＃xff0c;下图是调整后的效果&＃xff1a;

• colunms&＃xff1a;默认为3&＃xff0c;表示一行展示3个产品&＃xff0c;点击旁边的电脑图标&＃xff0c;可以切换到平板、手机设备模式&＃xff0c;这样可以配置在不同设备上一行能展示的产品数量

• Posts per page&＃xff1a;默认为6&＃xff0c;表示一页展示6个产品&＃xff0c;你也可以设置为-1&＃xff0c;那就是一页展示所有产品。

• Show image&＃xff1a;默认为YES&＃xff0c;表示展示产品图片&＃xff0c;若选择NO&＃xff0c;那就不展示图片啦

• Masonry&＃xff1a;默认是关闭的&＃xff0c;关闭时&＃xff0c;不论产品简介内容长短&＃xff0c;每一行的产品都是等高的&＃xff0c;如果一行中产品简介又长又短&＃xff0c;那么短的下方会留有空白&＃xff1b;若开启masonry时&＃xff0c;那产品就像砌墙一样&＃xff0c;不会留有空白&＃xff0c;而是错落有致。&＃xff08;说了这么多不如你自己点一下按钮试试看了~&＃xff09;

• Image size&＃xff1a;调整图片的尺寸&＃xff0c;默认是300×300px&＃xff0c;一般也不用改

• Image ratio&＃xff1a;用于设置图片比例&＃xff0c;通常保持默认的0.66即可

• Title&＃xff1a;默认为开启&＃xff0c;滑动开关可以选择显示或隐藏标题

• Title html tag&＃xff1a;默认是H3&＃xff0c;由于页面的标题是H1&＃xff0c;如果页面没有其他H2的话&＃xff0c;此处我建议改为H2

• Excerpt&＃xff1a;默认为开启&＃xff0c;选择显示或隐藏产品简介&＃xff08;又叫产品简短描述&＃xff09;

• Excerpt length&＃xff1a;设置简介的文字长度&＃xff0c;默认为25&＃xff0c;按需增减吧

• Meta data&＃xff1a;默认是data、comments&＃xff0c;还有author、time两个选项&＃xff0c;可以多选&＃xff0c;但作为产品列表页&＃xff0c;我们将他们都去掉&＃xff0c;去掉就不再显示在产品中了

• Separator between&＃xff1a;默认是·&＃xff0c;用于间隔不同的mata data

• Read more&＃xff1a;默认是开启&＃xff0c;滑动开关可以选择显示或隐藏查看更多按钮

• Read more Text&＃xff1a;在这里设置按钮的文案&＃xff0c;默认是read more

• open in new windows&＃xff1a;默认是关闭&＃xff0c;滑动开关可以选择是否需要开启在新窗口打开产品

• Badge&＃xff1a;徽章&＃xff0c;显示在图片上&＃xff0c;滑动开关可以选择显示或隐藏徽章

• Badge taxonomy&＃xff1a;此处选择徽章上显示的内容&＃xff0c;如果是产品列表页&＃xff0c;此处要改为product category

• Avatar&＃xff1a;滑动开关可以选择显示或隐藏发表当前产品或文章的用户头像&＃xff0c;默认是开启&＃xff0c;此案例中我将它关闭

最后&＃xff0c;我们点击左下角的update&＃xff0c;并将conditon设置为all product archive&＃xff0c;保存后&＃xff0c;产品列表模板页面就完成了&＃xff0c;我们就可以去找到任一产品分类&＃xff0c;打开它的的页面查看一下了。

相关教程&＃xff1a;对模板进行样式调整、添加自定义的产品字段 查看更多Elementor教程

本文原文由LOYSEO 发布&＃xff0c;LOYSEO专注于WordPress外贸网站建设教程、Elementor教程。

推荐阅读

2020年B2B外贸建站的终极教程 Astra主题教程&＃xff1a;免费建外贸网站 2020年外贸建站需要注意什么&＃xff1f;