有时我们需要创建一个简易的产品详情页模板,以便将产品详情和普通文章详情页区分开来。本文将介绍如何使用Elementor和古腾堡编辑器实现这种产品详情页的模板制作,并分享相关的实现思路和具体步骤。
页面拆分与布局
在开始制作之前,我们需要对页面进行拆分。一个标准的产品详情页可以分为上下两个部分,上半部分又可以拆分成左右两部分,下半部分也是左右两部分。通过这样的页面拆分,我们可以更好地进行模块化设计和布局。
使用Elementor制作产品详情页模板
1. 创建Single Post模板
![使用Elementor和古腾堡编辑器创建简易产品详情页模板的详细指南](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
- 新建模板:使用Elementor的Theme Builder功能,新建一个Single Post模板。
- 制作上半部分:
- 添加一个容器(container),并设置为两栏结构,左右栏等分。
- 设置容器的背景图片,使用动态标签功能,选择Featured Image作为背景图片,并进行样式设置覆盖。
- 左边栏:添加Post Title模块、面包屑导航(可以使用Rank Math SEO或Slim SEO等插件提供的功能),再加上两个按钮模块。微信按钮可以设置为点击弹出二维码的Popup弹窗。
- 右边栏:添加一个Featured Image模块。
- 制作下半部分:
- 添加一个容器,同样分为两栏,左边栏设置为75%左右宽度。
- 左边栏:拖入Post Content模块调用文章内容,还可以添加翻页、分享等模块。
- 右边栏:插入搜索模块、标题模块,调用最近的文章或产品。
![使用Elementor和古腾堡编辑器创建简易产品详情页模板的详细指南](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
制作完成后,发布模板,并应用到所有文章或指定分类。这样,当我们设置不同的产品(文章)标题、特色图片、详情描述后,产品的内容会自动变化,格式固定统一,使用起来更方便。
2. 插入文章内容
建议不要直接在Elementor中撰写文章,而是通过插入Post Content模块调用正常的文章内容。这样,我们可以继续使用WordPress后台的古腾堡编辑器撰写内容,更加方便和高效。
使用Gutenberg Editor制作产品详情页模板
Gutenberg Editor的功能不断完善,配合扩展插件可以实现强大的页面构建功能。接下来分享两种实现思路。
思路1:简单方法
这种方法类似于平时写文章,不需要制作固定的模板或使用插件的模板定制功能。
- 安装古腾堡增强插件:如Kadence Blocks或Greenshift等。
![使用Elementor和古腾堡编辑器创建简易产品详情页模板的详细指南](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
- 制作上半部分:
- 新建文章,使用古腾堡编辑器添加ROW模块,分为两栏。
- 左边栏:分别添加标题模块、面包屑导航模块和按钮模块。弹窗按钮可用Greenshift的Popup模块制作。
- 右边栏:插入WordPress自带的封面模块,设置特色图片。
- 制作下半部分:
- 添加一个ROW模块。如果主题已经有侧边栏功能,则直接撰写产品内容;如果没有,则手动设置侧边栏。
- 快速复制功能:
- 安装复制插件,如Yoast Post。
- 添加新产品时,在文章列表中点击【产品模板】旁边的Clone或快速草稿,修改文字和图片即可。
这种方法虽然看起来繁琐,但配合复制插件非常方便,经常使用能够大大提高效率。
思路2:高级方法
这种方法需要使用主题的Hooks功能,目前Astra Pro、Kadence Pro、Blocksy Pro等都支持此功能。
- 新建Hooks模板:指定应用到需要的文章分类。
- 制作上半部分:
- 新建一个ROW模块,分为两栏,左边添加标题、面包屑导航和按钮模块;右边添加封面模块,并设置为特色图片。
- 制作下半部分:
- 插入Post Content文章内容模块,这个是WordPress自带的。
- 根据实际情况,如果主题已经有侧边栏功能,则无需额外制作;如果没有,则手动分两栏,右边作为侧边栏。
这种方法更为高级和灵活,适用于需要定制更多细节的项目。
总结
以上就是使用Elementor和古腾堡编辑器创建简易产品详情页模板的详细指南。通过合理拆分页面结构,利用Elementor和古腾堡编辑器的强大功能,可以轻松实现产品详情页的模块化和模板化设计。
![使用Elementor和古腾堡编辑器创建简易产品详情页模板的详细指南](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
联系我们 |
---|
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点! |
① 电话:020-2206-9892 |
② QQ咨询:1025174874 |
③ 邮件:info@361sale.com |
④ 工作时间:周一至周五,9:30-18:30,节假日休息 |
发布者:光子波动,转转请注明出处:https://www.361sale.com/14338/