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

【Single Product】产品详情页模板制作?(附视频)

文章导航

本文介绍如何使用Elementor Pro的Theme Builder的Single Product模板制作产品详情页面的过程。

在制作之前你需要安装激活Elementor ProWoocommerce插件。

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

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

1、创建Single Product模板

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

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

切换到Single Product模板类型

image 70 - 【Single Product】产品详情页模板制作?(附视频) - NUTSWP

点击【Add New】添加一个Single Product模板

【Single Product】产品详情页模板制作?

2、编辑Single Product模板

添加Single Product模板之后,汇总自动跳转到模板编辑页面,同时会弹出Elementor做好的产品详情页模板。

你可以选择模板并导入之后进行编辑。也可以关闭模板弹出窗口自行编辑。

我大概做成这样一个页面,算是比较常规和普通的外贸B2B产品详情页面。

详细的制作细节可以观看我的B站视频。

image 99 - 【Single Product】产品详情页模板制作?(附视频) - NUTSWP

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

模板制作之后我们可以【发布】,点击发布之后会弹出【Display Condition】设置。

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

如果你整个网站只制作一个产品详情页面模板,那么可以参照下图进行设置。

image 100 - 【Single Product】产品详情页模板制作?(附视频) - NUTSWP

当然你还可以针对不同的产品分类制作不同的产品详情,只需要在设置Display condition时,设置其在不同的产品分类下的产品展示即可,可以参照《Elementor Display Condition显示条件设置详解(附视频)》去设置,这里就不再详细赘述。

4、保存发布并浏览效果

Display Conditon设置完成之后点击【Save&Close】按钮,即保存和发布模板。之后我们可以通过浏览对应的产品查看模板设置是否生效。

需要注意通过预览访问的页面和真实的产品页面是存在差别的。建议访问真实产品页面以查看模板最终的展示效果。

总结

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

相关内容
WP基础:固定链接设置

本文介绍WordPress网站的固定链接设置,这是一项基础的WordPress设置,固定链接对SEO也有一定的影响。固定链接结构应该在网站创建之初或者网站上线之前设置好。 WordPress 中的固定链接是什么? 固定链接实际上就是用户通过浏览器访问某一个页面的唯一的地址,之所以称其为固定链接,就是

阅读全文 »
WP基础:搜索引擎可见性设置

通常我们安装启动一个新的WordPress网站,WordPress的基础设置中默认的搜素引擎可见性是开启的,但是我们在制作网站的过程中,网站内容是不完备的,所以并不希望搜索引擎索引网站的页面。 我们可以通过WordPress基础设置中的阅读设置页面,勾选上【 建议搜索引擎不索引本站点】,这样搜索引擎

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

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

阅读全文 »
WordPress语言设置基础教程

本文介绍WordPress语言设置基础教程,WordPress默认的语言是英文,但是支持非常多语言,你可以根据你的需求,将网站的语言设置成其他语言,同时还可以单独设置后台语言。 如何进行WordPress语言设置? 安装好WordPress网站之后,就可以设置网站的默认语言,在网站后台的Settin

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

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

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