使用Elementor和古腾堡编辑器创建简易产品详情页模板的详细指南

有时我们需要创建一个简易的产品详情页模板，以便将产品详情和普通文章详情页区分开来。本文将介绍如何使用Elementor和古腾堡编辑器实现这种产品详情页的模板制作，并分享相关的实现思路和具体步骤。

页面拆分与布局

在开始制作之前，我们需要对页面进行拆分。一个标准的产品详情页可以分为上下两个部分，上半部分又可以拆分成左右两部分，下半部分也是左右两部分。通过这样的页面拆分，我们可以更好地进行模块化设计和布局。

使用Elementor制作产品详情页模板

1. 创建Single Post模板

1. 新建模板：使用Elementor的Theme Builder功能，新建一个Single Post模板。
2. 制作上半部分：
   • 添加一个容器（container），并设置为两栏结构，左右栏等分。
   • 设置容器的背景图片，使用动态标签功能，选择Featured Image作为背景图片，并进行样式设置覆盖。
   • 左边栏：添加Post Title模块、面包屑导航（可以使用Rank Math SEO或Slim SEO等插件提供的功能），再加上两个按钮模块。微信按钮可以设置为点击弹出二维码的Popup弹窗。
   • 右边栏：添加一个Featured Image模块。
3. 制作下半部分：
   • 添加一个容器，同样分为两栏，左边栏设置为75%左右宽度。
   • 左边栏：拖入Post Content模块调用文章内容，还可以添加翻页、分享等模块。
   • 右边栏：插入搜索模块、标题模块，调用最近的文章或产品。

制作完成后，发布模板，并应用到所有文章或指定分类。这样，当我们设置不同的产品（文章）标题、特色图片、详情描述后，产品的内容会自动变化，格式固定统一，使用起来更方便。

2. 插入文章内容

建议不要直接在Elementor中撰写文章，而是通过插入Post Content模块调用正常的文章内容。这样，我们可以继续使用WordPress后台的古腾堡编辑器撰写内容，更加方便和高效。

使用Gutenberg Editor制作产品详情页模板

Gutenberg Editor的功能不断完善，配合扩展插件可以实现强大的页面构建功能。接下来分享两种实现思路。

思路1：简单方法

这种方法类似于平时写文章，不需要制作固定的模板或使用插件的模板定制功能。

1. 安装古腾堡增强插件：如Kadence Blocks或Greenshift等。

2. 制作上半部分：
   • 新建文章，使用古腾堡编辑器添加ROW模块，分为两栏。
   • 左边栏：分别添加标题模块、面包屑导航模块和按钮模块。弹窗按钮可用Greenshift的Popup模块制作。
   • 右边栏：插入WordPress自带的封面模块，设置特色图片。
3. 制作下半部分：
   • 添加一个ROW模块。如果主题已经有侧边栏功能，则直接撰写产品内容；如果没有，则手动设置侧边栏。
4. 快速复制功能：
   • 安装复制插件，如Yoast Post。
   • 添加新产品时，在文章列表中点击【产品模板】旁边的Clone或快速草稿，修改文字和图片即可。

这种方法虽然看起来繁琐，但配合复制插件非常方便，经常使用能够大大提高效率。

思路2：高级方法

这种方法需要使用主题的Hooks功能，目前Astra Pro、Kadence Pro、Blocksy Pro等都支持此功能。

1. 新建Hooks模板：指定应用到需要的文章分类。
2. 制作上半部分：
   • 新建一个ROW模块，分为两栏，左边添加标题、面包屑导航和按钮模块；右边添加封面模块，并设置为特色图片。
3. 制作下半部分：
   • 插入Post Content文章内容模块，这个是WordPress自带的。
   • 根据实际情况，如果主题已经有侧边栏功能，则无需额外制作；如果没有，则手动分两栏，右边作为侧边栏。

这种方法更为高级和灵活，适用于需要定制更多细节的项目。

总结

以上就是使用Elementor和古腾堡编辑器创建简易产品详情页模板的详细指南。通过合理拆分页面结构，利用Elementor和古腾堡编辑器的强大功能，可以轻松实现产品详情页的模块化和模板化设计。