用列布局内容.

这里您在一页上构建四种最常用的列布局：带侧边栏的内容、两个等分、三分和四分。每种上方都有标题。用它了解哪种预设适合哪种内容。每行设置请参见 行和列。

本视频构建市政垃圾收集页面。

开始之前

• 您的角色有 Edit with DXPR Builder 权限。
• 页面在页面构建器中打开。新页面请前往 Content > Add content > Landing Page (/node/add/landing_page），然后点击 Save.
• 新元素落在版块顶部。因此每个标题在其行之后放入：它落在行上方。

选择布局

新的 Row 带两个等宽列到来。其他每个布局来自行的网格图标（Column layout).

第 1 步：带侧边栏的内容

1. 点击 Add Elements 在空白页面上并选择 Section 从 Layout 选项卡。
2. 点击 + 在版块上并选择 Row。点击其网格图标（Column layout），选择 2/3 + 1/3 预设并点击 Save.
3. 点击 + 在宽列中并选择 Text 从 Content 选项卡。输入文章，将第一行设为 Heading 3 并点击 Save.
4. 点击 + 在窄列中并选择 Text。输入 "Related" 为 Heading 4，为每个相关页面添加一行并点击 Save.
5. 点击 + 在版块上并选择 Text；它落在行上方。输入 "Content with a sidebar" 为 Heading 2 并点击 Save.

第 2 步：两个等分

1. 悬停版块并点击 Add Section Below。打开新版块的 More > Settings，选择浅灰色 Background：Style 面板并点击 Save.
2. 点击 + 在版块上并选择 Row。默认即两个等宽列，无需更改。
3. 添加一个 Text 每列中的元素："Before" 和 "After" 作为 Heading 4 每行一个。
4. 如第 1 步以同样方式添加标题 "Two equal halves"。

第 3 步：三个三分之一

1. 添加第三个版块，其中包含 Add Section Below 并为其提供 Align text center 类。
2. 添加一个 Row，点击其网格图标（Column layout），选择 1/3 + 1/3 + 1/3 预设并点击 Save.
3. 添加一个 Text 每列中的元素："Paper"、"Glass" 和 "Organic" 作为 Heading 4 每行一个。
4. 添加标题 "Three equal thirds"。

第 4 步：四个四分之一

1. 添加第四个版块，带浅灰色 Background 和 Align text center 类。
2. 添加一个 Row，点击其网格图标（Column layout），选择 1/4 + 1/4 + 1/4 + 1/4 预设并点击 Save.
3. 添加一个 Text 每列中的元素：日期作为 Heading 4 以及收集的内容。
4. 添加标题 "Four equal quarters"。

第 5 步：保存并预览

1. 点击 Save 在页面构建器工具栏上。
2. 打开视图菜单（ 眼睛图标），然后选择 Preview.

在较小屏幕上

768 像素宽起列并排显示，因此平板与桌面显示相同布局。手机上每列占全宽，按顺序堆叠。要为平板设置其他布局，请点击行的网格图标（Column layout），然后选择 Add screen size.

进一步了解

视频中未展示：

• 窄、宽、窄：1/4 + 1/2 + 1/4 预设以空边距保持长文本可读。
• Mirror row：在行的设置中打开以在平板和桌面交换列。手机保持原顺序，因此第一列仍在首位。

您会看到的内容

四个横幅依次排列，每个顶部都有标题。文章及其相关链接共享第一个，两个等分布于灰色上，随后三个居中三分之一，最后灰色上四个居中四分之一收尾。

如果您看不到如图所示的列

• 行的列数错误。 仅当点击以下内容时预设生效 Save 在布局对话框中。点击行的网格图标（Column layout），再次选择预设并点击 Save.
• 标题位于其行下方。 标题在行之前放入，新元素落在版块顶部。用其控制栏上的拖动手柄将标题拖到行上方。
• 列在平板上堆叠。 平板窄于 768 像素，如竖屏小平板。用以下内容为该宽度添加布局 Add screen size 在行的布局对话框中。
• 重新加载后更改消失。 您在点击之前离开页面 Save 在页面构建器工具栏上。如果 Save 报错，参见 更改无法保存。

接下来做什么？

• 行和列 用于每行设置
• 版块 用于版块背景和宽度