瀑布流布局和特别菜单

操作指南 Pro Navigation 1 分钟阅读

在普通超级菜单中，每个区块独占一列，因此较短的链接列表下方会留下空隙。瀑布流布局将多个区块归入同一列，使它们上下堆叠，例如让两个较短的品牌列表共用第一列。

模板

两者都位于 选择模板 的 特别菜单 分组中。

瀑布流布局

四列（项目分组 区块），每列中堆叠着链接列表。

特别菜单

左侧是类别列表；每个类别在右侧都有自己的链接列表和图片面板，类似大型电商平台的菜单。

从瀑布流布局模板开始

1. 添加模板

   在编辑器的 元素 树中，点击顶级菜单项下的 添加子菜单。指向 特别菜单 (1)，然后在 瀑布流布局 上点击 选择 (2)。

   

   (1) 指向特别菜单分组，(2) 选择瀑布流布局

2. 编辑示例内容

   模板会添加 4 个宽度为 25% 的 项目分组 区块，其中包含链接列表。将鼠标悬停在每个标题或链接上，点击 编辑项目，然后更改其 标题 和 链接。

3. 在列中添加或移除区块

   在分组内点击 添加区块，即可再堆叠一个区块，例如链接列表或图片。如需移除，将鼠标悬停在区块上，然后点击 删除项目。

4. 保存并发布

   点击 保存，然后点击 发布。

从空白超级菜单构建瀑布流布局

1. 添加空白超级菜单

   点击 添加子菜单，指向 超级菜单，然后在 空白 上点击 选择。也可以使用现有的超级菜单。

2. 每列添加一个项目分组

   点击 添加区块，选择 多区块，然后选择 项目分组；每个分组就是一列。在 元素 树中，它显示为 项目分组（瀑布流布局）。

   

   (1) 选择选项卡，(2) 将鼠标悬停在布局上并点击选择。

3. 设置分组宽度

   新分组的宽度为 50%。设置每个分组的 宽度，使各列能放在一行中，例如 4 列时设为 25%，3 列时设为 33.33%。

4. 填充每个分组

   在每个分组内点击 添加区块，添加该列的区块。将每个内部区块的 宽度 设为 100%，使它们上下堆叠，而不是并排显示。

5. 保存并发布

   点击 保存，然后点击 发布。

使用特别菜单模板

1. 添加模板

   点击 添加子菜单，指向 特别菜单，然后在 特别菜单 模板上点击 选择。

   

   (1) 指向特别菜单分组，(2) 选择瀑布流布局

2. 编辑类别和面板

   左侧的每个类别都是一个选项卡：先重命名，然后使用 添加区块 填充其面板。参阅选项卡菜单。

3. 保存并发布

   点击 保存，然后点击 发布。

两种模板都在超级菜单面板中打开，因此父项的 子菜单 部分决定面板的宽度、对齐方式和背景。参阅超级菜单面板布局。

故障排除

区块并排显示而没有堆叠

在 元素 树中检查内部区块是否位于 项目分组 内，并且其 宽度 为 100%。

分组换到了第二行

分组宽度合计超过 100%。请调低宽度，使它们能放在一行中。

相关页面

• 超级菜单用链接列表、图片、产品和联系表单等区块构建宽幅子菜单面板。
• 选项卡菜单让顾客在同一个子菜单中切换不同的内容组，例如男士、女士和儿童。
• 区块概览在超级菜单或选项卡中添加链接、图片、产品和倒计时等区块。

此页面对您有帮助吗？

报告问题