页面布局

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：
CMS

创建对象：

初学者
中级
管理员
用户

商店中每个页面的布局由不同的部分或容器组成，这些部分或容器定义页面的页眉、页脚和内容区域。根据布局，每个页面可能包含一列、两列、三列或更多列。您可以将该布局视为页面的 平面图，并分配特定布局作为CMS、产品和类别页面的默认布局。

在页面上，根据内容块被指定显示的页面布局的区域，内容块会浮动以填充可用空间。请注意，如果将布局从三列更改为两列，则主区域的内容将展开以填充可用空间。另请注意，与未使用的侧栏关联的任何块似乎都消失了。但是，如果恢复三列布局，块会重新出现。这种流动方式，即 流动布局，使得无需重新处理内容即可更改页面布局。如果您习惯于使用单个HTML页，那么这种模块化 构建基块 方法需要不同的思路。

标准两列，左栏页面布局

配置默认布局

在 管理员 侧边栏上，转到 Stores > Settings>Configuration。
在左侧面板中的 General 下，选择 Web。
展开 Default Layouts 部分的。

{width="600" modal="regular"}
选择要用于产品页面的 Default Product Layout。

此设置确定默认用于产品页面的布局。
- No layout updates — 布局更新不可用于产品页面。
- Empty — 对产品页面使用空白布局。
- 1 column — 对产品页面使用单列布局。
- 2 columns with left bar — 对于产品页面，使用左边带有侧栏的双列布局。
- 2 columns with right bar — 对产品页面使用右侧带有侧栏的双列布局。
- 3 columns — 对产品页面使用左边栏和右边栏的三列布局。
启用页面生成器后，还有其他可用的全宽选项。然后，您可以使用页面生成器内容工具来设计产品页面的布局。
- Page -- Full Width — 对产品页面使用 页面 — 全宽 布局。
- Category -- Full Width — 对产品页面使用 类别 — 全宽 布局。
- Product -- Full Width - （推荐）对产品页面使用 Product - Full Width 布局。
选择要用于类别页面的 Default Category Layout。

此设置确定默认情况下用于类别页面的布局。
- No layout updates — 布局更新不可用于类别页面。
- Empty — 对类别页面使用空白布局。
- 1 column — 对类别页使用单列布局。
- 2 columns with left bar — 对类别页面使用左边带有侧栏的双列布局。
- 2 columns with right bar — 对类别页面使用右侧带有侧栏的双列布局。
- 3 columns — 对类别页面使用左边栏和右边栏的三列布局。
启用页面生成器后，还有其他可用的全宽选项。然后，您可以使用页面生成器内容工具来设计类别页面的布局。
- Page -- Full Width — 对类别页面使用 页面 — 全宽 布局。
- Category -- Full Width - （推荐）对类别页面使用 类别 — 全宽 布局。
- Product -- Full Width — 对类别页面使用 Product - Full Width 布局。
选择要用于CMS页面的 Default Page Layout。

此设置确定CMS页面默认使用的布局。
- No layout updates - CMS页面没有布局更新。
- Empty — 对CMS页面使用空白布局。
- 1 column — 对CMS页面使用单列布局。
- 2 columns with left bar — 对于CMS页面，使用左边带侧栏的双列布局。
- 2 columns with right bar — 对CMS页面使用右侧带有侧栏的双列布局。
- 3 columns — 对CMS页面使用左边栏和右边栏的三列布局。
启用页面生成器后，还有其他可用的全宽选项。然后，您可以使用页面生成器内容工具来设计CMS页面的布局。
- Page -- Full Width — （推荐）使用CMS页面的 Page - Full Width 布局。
- Category - Full Width — 对CMS页面使用 类别 — 全宽 布局。
- Product - Full Width — 对CMS页面使用 Product - Full Width 布局。
完成后，单击 Save Config。