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

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

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

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

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

Section 与 Block 的层级关系

• Section：页面的核心模块，定义了页面的整体结构与功能。
  
• Block (内容块)：Section 内可重复使用的单元，例如按钮或图片。
  
• 层级逻辑：应用于父容器的设置会直接影响其「第一层」子元素的布局。了解这种关系有助于您在更改对齐方式或方向（如：水平与垂直）时，准确判断需要调整哪一层。
  

什么是「内容容器」？

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

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

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

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

进阶案例：从零构建专属组件（分步教学）

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

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

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

内容容器的使用限制与重要注意事项

内容容器的组件兼容性

只有可重复使用的区块才能添加到内容容器中。组件是否可用，取决于该模块是通用型还是页面专属型：

• 通用型组件（适用于多个页面）：可在网站大多数区域使用的基础模块，例如文本、标题、按钮、图片、商品卡片和博客（提供 30 多种类型）。
• 特定页面组件（使用受限）：专为特定页面类型设计的功能。例如，【商品详情页】模块专属于【商品详情页】，无法添加到内容容器中。

内容容器以静态内容为主

内容容器非常适合静态布局，原生不支持复杂的动画或逻辑，例如使用【图片横幅】组件制作的自动轮播横幅。

自定义 section 的页面区块数量上限

• 每个页面最多可添加 50 个区块。

关于内容容器的常见问题

Q1. 如果页面超出 50 个区块的上限会怎样？

在您移除或整合现有区块之前，将无法继续添加新的区块。由于每个内容容器都计为一个区块，减少不必要的嵌套是保持在限额内最简单的方法。

Q2. 可以将商品详情页模块添加到内容容器中吗？

不可以。像商品详情页模块这样的页面专属组件与内容容器不兼容，只有通用型可重复区块（如文本、图片、按钮等）才能添加。