产品循环项目构建器
产品循环项布局定义了在网格、轮播和产品归档中使用的产品卡片的结构和外观。您可以自由安排产品信息，并创建协调的悬停效果，而无需编辑模板。
产品循环项布局始终使用 Gutenberg 创建，即使当前网站构建器选择的是 Elementor 或 WPBakery。
创建产品循环项布局
1. 导航至 仪表盘 -> 布局 -> 循环项，然后点击添加按钮。
2. 输入布局名称。
3. （可选）选择预定义的产品卡片设计之一。
4. 点击 创建布局，并使用产品循环项块构建卡片。
5. 发布布局。
应用布局
发布产品循环项布局并不会自动应用它。通过以下方式之一选择布局的使用位置：
- 全局产品网格： 导航至 仪表盘 -> 主题设置 -> 产品归档 -> 产品循环，将 网格产品布局类型 设置为 自定义，然后在 网格自定义产品布局 下选择布局。
- 产品列表： 在相同的主题设置部分，于 列表自定义产品布局 下选择它。
- 单个元素： 当某个产品元素或归档产品元素需要使用不同的卡片设计时，在其设置中选择自定义产品布局。
产品循环项块
每个块显示卡片所代表产品的数据。将它们与容器和常规 Gutenberg 块结合使用，以创建所需的结构。
- 产品添加到购物车 — 显示适用于产品的相应“添加到购物车”操作。
- 产品附加信息 — 显示选定的产品属性、重量和尺寸。
- 产品品牌 — 显示分配给产品的品牌。
- 产品卡片 — 添加一个结构化的包装器，其中包含独立的静态和悬停容器，用于高级产品卡片设计。
- 产品分类 — 显示分配给产品的分类。
- 产品比较 — 将产品添加到比较表中。
- 产品倒计时 — 倒计时至产品预定促销结束时间。
- 产品描述 — 显示产品的简短描述。
- 产品标签 — 显示一个选定的标签，例如“促销”、“新品”、“特色”或自定义标签。
- 产品标签组 — 显示适用于产品的所有标签。
- 产品缩略图 — 显示产品图片和配置的缩略图画廊行为。
- 产品价格 — 显示常规价格、促销价格或可变价格。
- 产品快速查看 — 无需离开当前页面即可打开产品预览。
- 产品评分 — 显示平均星级评分和评论数量。
- 产品 SKU — 显示产品库存单位。
- 产品库存进度条 — 根据功能设置可视化剩余库存。
- 产品库存状态 — 显示产品是有货、缺货还是接受预订。
- 产品标题 — 显示产品名称并链接到产品页面。
- 产品变体 — 直接在卡片中显示可选择的选项，例如颜色或尺寸。
- 产品愿望清单 — 将产品添加到客户的愿望清单中。
打开循环项设置
点击编辑器右上角附近的设置图标，打开产品循环项设置侧边栏。如果图标被隐藏，请打开三点编辑器菜单，选择 循环项设置，并启用其星形图标，使其显示在顶部工具栏中。
产品循环项设置
这些设置控制产品卡片内块共享的根包装器。
- 块间距 — 设置直接放置在根产品包装器内的块之间的间距。
- 均匀产品网格 — 将同一网格行中的产品包装器拉伸至相同高度。它不会自动重新分配或垂直对齐其中的块。
- 带边框网格 — 移除产品之间的间隙，并使用连续的网格边框分隔项目。
- 编辑器预览产品 — 选择在编辑布局时显示其数据的产品。
- 编辑器预览宽度 — 更改编辑器预览宽度，以便在不更改商店前端宽度的情况下，以不同尺寸检查卡片。
- 背景 — 为主产品包装器设置颜色、渐变或图像。
- 边框 — 控制包装器边框的宽度、样式、颜色和圆角半径。
- 盒子阴影 — 在产品包装器周围增加深度或分隔感。
- 内边距 — 控制包装器边缘与其内部块之间的空间。
- 变换 — 移动、缩放或旋转包装器，包括用于悬停效果。
- 溢出 — 控制超出包装器的内容是可见、隐藏还是可滚动。
主题设置和自定义产品卡片
预定义产品样式的选项不会自动控制自定义产品循环项布局中的各个块。卡片的每个部分在 Gutenberg 中都有自己的设置。
例如，在主题设置中启用产品图片画廊会影响预定义的产品样式。在自定义循环布局中，选择 产品缩略图 块并在其中启用其画廊选项。对标题、价格、添加到购物车操作、标签和其他产品卡片组件应用相同的方法。
创建协调的悬停效果
当访问者悬停在产品包装器的任何位置（而不仅仅是单个块上）时，如果子块需要做出反应，请使用 父级悬停 状态。
- 动态样式： 更改一个或多个子块的文本颜色、背景、边框或阴影。
- 动画： 结合不透明度和变换控制，创建淡入淡出、滑动、缩放或揭示效果。
- 协调运动： 使用“父级悬停”配置多个块，使它们响应相同的产品卡片悬停状态。
有关完整工作流程，请参阅 配置父级悬停效果。
使用“均匀产品网格”对齐内容
均匀产品网格 使每行中的根产品包装器具有相同的高度。这可以防止标题或描述较短的卡片比相邻卡片矮。但是，此选项仅更改包装器的高度：内部块仍保持在顶部，直到配置了它们的边距或弹性行为。
使用自动边距
这是使“添加到购物车”等操作在每张卡片底部附近保持对齐的最简单方法。
1. 选择应标记底部对齐内容起始位置的块。
2. 打开其“边距”设置，并将所需的边距值切换为自定义值。
3. 设置 margin-top: auto 以消耗该块上方的可用空间。选定的块及其之后的所有内容将被推到底部。
或者，在应保持在顶部附近的块上设置 margin-bottom: auto。可用空间将添加在其下方，将后续块推向底部。
使用弹性控制
主产品包装器表现为一个垂直的弹性容器。当某个内部块应占用可用的垂直空间时，在其上设置 弹性增长 为 1。例如，允许标题区域增长可以使其上方的内容保持在顶部，并将后续的价格和操作块向下推。
当您需要控制选定块在卡片空间有限时是否可能变小时，请使用 弹性收缩。对于包含多个内容组的复杂卡片，此方法更灵活，而对于简单的顶部和底部排列，自动边距通常更清晰。
