使用自定义分区与内容容器个性化设置页面布局（仅限 OS 3.0 主题） – SHOPLINE 常见问题

在设计在线商店时，如果主题的预置组件无法完全满足您的特定设计需求，【自定义 section】和【内容容器】功能可以让您自由构建所需的效果。通过组合基础组件（例如文本、图片和按钮），并将它们放入灵活的布局容器中，您无需编写代码即可创建独特的页面布局和与众不同的品牌体验。

本文将介绍如何微调现有组件、从零构建专属组件，并运用关键布局规则来优化您商店的页面设计。

核心概念：Section（分区）、Block（区块）与内容容器

在开始设计之前，了解网页的结构层级至关重要，这会直接影响您的视觉布局逻辑。

内容容器本身不持有特定内容，而是作为一个高度灵活的「布局框架」：

内容承载（使用可重复区块）：容器是基础组件的集合点。您可以将各种可重复使用的区块（例如【文本】、【图片】、【按钮】等）作为「内容」放入容器中。

注意：特定页面专用的功能模块（如商品详情）无法放入容器中。

灵活布局逻辑：容器采用灵活的布局逻辑，就像一个隐形的框架，让您可以自由调整内容的方向（水平/垂直）、对齐方式和换行规则。

注意：页面专属组件（例如【商品页面】模块）无法添加到内容容器中。详情请参见下方「内容容器的使用限制与重要注意事项」。

您并不需要每次都从零开始。您可以利用【内容容器】的布局能力，微调现有的官方组件（例如【图文列表】、【图片对比】等）。

在调整组件排版时，请遵循以下逻辑，快速找到正确的设置：

提示：如需快速优化某个区块的布局，请查看该区块的父容器，或该区块自身的设置。例如，若要调整一组卡片的排列方式，请点击该卡片组的父容器，并在其面板中调整设置。

内容容器支持以下常见的布局调整：

如果您的主题没有提供您需要的特定组件，您可以使用【自定义 section】从零开始构建。以下步骤将带您创建一个「特色功能网格」一个由 —— 顶部标题、三个并排的功能卡片和底部按钮组成的组件。

请按以下步骤构建该组件：

分析布局结构。整体布局是垂直排列，但包含三个卡片的中间部分是水平排列，每个卡片内部的元素则是垂直排列。
在主题编辑器中，添加一个【自定义 section】。
- 在此分区内，添加三个【内容容器】（分别预留给【标题】、【卡片组】和【按钮】）；
- 然后将该分区的布局方向设置为【垂直】。
为第 1 个内容容器添加一个【标题】组件，
- 再为第 3 个内容容器添加一个【按钮】组件；
进入第 2 个内容容器，添加三个下级内容容器（每个卡片一个）。
- 将该容器的布局方向切换为【水平】，使卡片并排显示；
- 然后依次选择这三个下级容器，将其宽度从【自适应】更改为【33%】，以平均分配空间。
在第 1 个卡片容器内，依次添加【图片】、【标题】、【文本】和【按钮】。
- 将该卡片容器的对齐方式设置为【左对齐】；
- 然后调整父容器中的【行间距】，让元素之间保持均衡的间隙。
完成第一个卡片的调整后，将该容器【复制】两次，再替换另外两个卡片的图片和文本，即可完成整个组件的构建。