本篇教程讲解：如何使用Crocoblock的JetEngine和Elementor，为文章或者自定义内容（比如产品、案例）创建动态列表模板（Listing）的，本文以自定义的产品为例进行讲解。
开始之前，你需要准备好这些
- Elementor
- 安装并激活JetEngine插件
- 如果你要展示的是自定义的产品或案例，那么确保已经创建了自定义的文章（CPT）
核心步骤与详细设置
第一步：设置列表模板的基础信息
进入 WordPress仪表盘 > JetEngine > Listings / Components，点击“Add New Item”按钮，会弹出一个设置列表项的小窗口，这里有四个地方需要我们填写：
- 列表来源：因为我们是要展示产品，所以这里选择“Post”选项。
- 来自文章类型：这里选择你的内容具体是什么类型。可以是默认的“文章”，也可以是你自己用JetEngine创建的“产品”这类自定义类型，我在这里选Products
- 列表项名称：给你这个模板起个名字，方便以后管理，比如“博客文章卡片”或者“产品展示块”。
- 列表视图：选择用哪个工具来设计。既然我们在用Elementor，这里自然就选“Elementor”。
全部填好后，点击创建按钮，我们就进入了Elementor的编辑界面。
第二步：设计和填充列表模板的内容
现在，我们来到了最核心的设计部分，其实就是设计单个“列表卡片”的样子。
1. 先看看列表项的基础设置
我习惯先点开左下角的那个齿轮图标，打开列表项设置。在这里的“列表设置”标签页下，有几项需要注意：
- 列表来源（listing source）和来自文章类型（from post type）：确认一下是不是你刚才选的内容。如果你想改，这里可以改，但改完后记得保存、刷新一下页面，这样后面用动态小工具时，选项才会更新。
- 预览宽度：这里可以调整这个卡片在设计时的预览宽度，比如我常设为400像素，看着比较符合实际。
- 使列表项可点击：这个开关如果打开，那么用户点击卡片的任何地方，都能跳转到文章的详情页。这个功能很方便，但要注意，我们后面可能会单独加“阅读更多”按钮，两者最好不要同时用，不然容易让用户困惑。
2. 用动态小工具把内容“放”进去
内容怎么动态显示呢？在Elementor编辑器左边面板里，列表元素（Listing Elements）分类下的那些动态小工具（Dynamic xxx）。
我来分享一下我通常的摆放顺序：
首先，拖一个动态图像进来，用来显示文章的封面图。它的来源默认就是“文章缩略图”，通常不用改。如果你没有为自定义文章添加thumbnail（featured image），请在编辑该CPT的advanced settings的support中添加一下。
然后，放一个动态字段小工具，用来显示文章标题。设置里，来源保持“文章/分类/用户/对象数据”，对象字段选“标题”就行。我通常会把它的HTML标签保持DIV，你可以酌情调整字体样式、排版（譬如居中）。
接着，对于文章，我会加一个动态元数据小工具，它可以同时显示发布日期、作者和评论数。对于产品，就不必要加这个小工具了。
- 删掉不需要的标签，比如我很少显示评论数，就直接删掉。
- 给每个标签单独加图标、前缀（比如在作者名前加个“By：”）或者后缀，让显示更友好。
- 点开“日期设置”、“作者设置”这些子选项，还能调整日期格式等细节。
为了显示文章摘要，我会再拖一个动态字段进来。来源不变，对象字段这次选“摘要”。这里记得打开自动生成摘要的开关，并设置一个自定义长度，比如20个词，这样摘要看起来会比较整齐。注意一点：这个字数限制只在网站前台生效，后台编辑时看到的是全文。如果你的自定义文章（CPT）没有摘要字段，你可以在编辑该CPT的advanced settings的support中添加一下excerpt。
最后，我会加一个动态链接小工具，作为“阅读更多”按钮。它的来源就设为“固定链接”。这里要特别提醒：如果你前面打开了“使列表项可点击”，这里就不建议再加这个按钮链接了，二选一，避免一个卡片上有两个可点击区域。
3. 美化一下样式
内容放好后，就可以像设计普通Elementor页面一样，去美化每个小工具了。
- 调整颜色、字体、内边距、边框……这些都在每个小工具的“样式”选项卡里。
- 想调整小工具之间的间距，可以去“高级”选项卡里设置内边距或外边距。
- 我通常还会给最外层的容器（Container）设置一个背景色或轻微的阴影，让卡片有区分度。
设计完成后，记得点击右上角的“更新”保存这个模板。
第三步：把做好的列表放到页面上
模板做好了，怎么用呢？我们需要一个“容器”来展示它。
去新建或编辑一个页面，用“使用Elementor编辑”打开。
在Elementor编辑器中，找到列表网格（Listing Grid）这个小工具，把它拖到画布上。在这个小工具的设置里，选择你刚刚创建好的那个列表模板。我通常会打开等列高这个选项，这样同一行里的卡片高度就一致了，看起来更整齐。
然后你要设置数据来源，这里有个小提示：列表网格小工具里有个“文章查询/Posts Query”的选项，但JetEngine官方更推荐我们用查询构建器（Query Builder）来创建更灵活的自定义文章查询，然后在“自定义查询”标签页里调用即可。对于复杂筛选，我确实觉得查询构建器更好用。
最后，点击“发布/更新”，你的页面就做好了。
第四步：检查成果
发布后，一定要去网站前台看看效果。
- 打开那个页面，检查列表是否正常显示，图片、标题、摘要对不对。
- 重点测试一下点击行为——无论是点击整个卡片还是“阅读更多”按钮，看是否能正确跳转到对应的文章详情页。
总结一下
以上就是我用JetEngine和Elementor创建文章或自定义文章（CPT）的列表模板的完整流程。简单来说，就是先创建一个列表模板（Listing）并设计好单张卡片的样式，然后用列表网格小工具（Listing Grid）把它放到页面上。掌握了这个方法，你就能轻松地为网站上的各种内容（文章、产品、作品集）创建出风格统一、内容动态更新的展示区了。希望我的这些经验对你有帮助。
