布局 — 列

在​ Layout ​下的Page Builder面板中，将​ Column ​拖到舞台上。

{width="600" modal="regular"}

列组现在分为两列，两列的宽度相等。 每列都是一个单独的内容容器，并且有自己的一组工具箱选项。

{width="600" modal="regular"}

在列组的左上角，单击​ 网格 ​工具（ ）并根据需要调整网格大小。

将内容放在网格上有助于使内容保持一致，并在桌面和移动设备上正确呈现页面。 有关详细信息，请参阅Page Builder配置的高级内容工具部分。

{width="600" modal="regular"}

将鼠标悬停在两列之间的边框上。

边框加亮，选定列的工具箱出现。

{width="600" modal="regular"}

按住鼠标按钮以显示网格，并将边框拖到网格上的新位置。

两列的宽度会调整以反映更改。 每列的新宽度显示在标签之后，如4/12 （12个中的4个）和8/12 （12个中的8个）。

{width="600" modal="regular"}

将鼠标悬停在要删除的列上以显示工具箱，然后选择​ 删除 （ {width="20"} ）图标。

{width="600" modal="regular"}

如果该列包含内容，请单击​ OK ​进行确认。

若要在将来加速此过程，您可以通过选中​ Do not show this again ​复选框跳过确认步骤。

列组现在具有单个列(12/12)和网格。 由于网格仅对列可用，因此可以使用此技术来显示网格。

{width="600" modal="regular"}

如果希望列组将剩余列扩展为行或舞台的完整宽度：

• 将鼠标悬停在该列上以显示工具箱，然后选择​ 设置 （ {width="20"} ）图标。

• 向下滚动到​ Advanced ​部分，并将所有四个​ Padding ​值设置为0。

  {width="600" modal="regular"}

• 单击右上角的​ Save ​以关闭​ Edit Column ​页面。

单击工作区右上角的​ 关闭全屏（ {width="20"}）图标，然后单击右上角的​ Save。

将鼠标悬停在该列上以显示工具箱，然后选择​ 设置 （ {width="20"} ）图标。

{width="600" modal="regular"}

根据需要更改​ Appearance ​设置。

• 选择用于确定列相对于其容器的位置的对齐设置。

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  选项	描述
  Full Height	列会扩展其容器的完整高度。
  Top Aligned	列将在其容器顶部对齐。
  Centered	列居中在其容器中间。
  Bottom Aligned	该列在其容器底部对齐。

• 如果需要，请为该列输入​ Minimum Height。 例如，可以设置最小高度以匹配背景图像的高度。

• 如果设置了最小高度，请设置​ Vertical Alignment ​以控制添加到列（Top、Center或Bottom）的内容容器的位置。

更改列内容的背景。

• Background Color — 通过选择色板、单击拾色器或输入有效的颜色名称或等效的十六进制值来指定颜色。 此设置确定列的背景颜色。

• Background Image — 如果需要，请使用提供的工具选择要应用于列的背景图像：

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  工具	描述
  Upload	将图像文件从本地计算机上载到图片库，然后将其作为列的背景图像应用。
  Select from Gallery	提示您从图库中选择现有图像作为列的背景图像。
  {width="25"}	允许您将图像拖到相机图块或浏览到本地文件系统中的图像。

• Background Mobile Image — 如果需要，请使用相同的工具选择不同的背景图像以在移动设备上显示。

• Background Size — 更改此设置以确定相对于列宽缩放背景图像的方式：

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  选项	描述
  Cover	背景图像覆盖列的整个宽度。
  Contain	背景图像被限制为内容区域的宽度。
  Auto	应用在当前主题的样式表中指定的默认背景大小。

• Background Position — 更改此设置以确定图像相对于列的锚点。 选项： Top Left、Top Center、Top Right、Center Left、Center、Center Right、Bottom Left、Bottom Center或Bottom Right

• Background Attachment — 更改此设置以确定背景图像相对于滚动页面的移动方式：

  table 0-row-2 1-row-2 2-row-2 layout-auto
  选项	描述
  Scroll	背景图像将同步以便在页面滚动时向下移动。
  Fixed	（不适用于移动设备）当容器在图像上滚动时，背景图像不会移动，并且会固定到指定的背景位置。

• Background Repeat — 如果要重复背景图像以填充空间，请更改此设置Yes。

根据需要更新​ Advanced ​设置。

• 要控制添加到列的内容容器的水平位置，请选择​ Alignment：

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  选项	描述
  Default	应用在当前主题的样式表中指定的对齐默认设置。
  Left	将内容容器沿列容器的左边框对齐，并允许使用指定的任何边距。
  Center	将内容容器对齐列容器的中心，并允许指定的任何边距。
  Right	将内容容器沿列容器的右边框对齐，并允许使用指定的任何边距。

• 设置​ Border ​样式，该样式应用于列容器的所有四面：

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
  选项	描述
  Default	应用关联样式表指定的默认边框样式。
  None	不提供任何容器边框的可见指示。
  Dotted	容器边框显示为虚线。
  Dashed	容器边框显示为虚线。
  Solid	容器边框显示为实线。
  Double	容器边框显示为双线。
  Groove	容器边框显示为一条开槽线。
  Ridge	容器边框显示为脊线。
  Inset	容器边框显示为内嵌行。
  Outset	容器边框显示为外线。

• 如果设置了除None之外的边框样式，请完成边框显示选项：

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  选项	描述
  Border Color	通过选择色板、单击拾色器或输入有效的颜色名称或等效的十六进制值来指定颜色。
  Border Width	输入边框线条宽度的像素数。
  Border Radius	输入像素数，以定义用于使边框每个角倒圆角的半径大小。

• （可选）从当前样式表中指定要应用于列容器的​ CSS classes ​的名称。

  用空格分隔多个类名。

• 输入​ Margins and Padding ​的值（以像素为单位）以指定列的外部边距和内边距。

  在列容器图中输入每个相应的值。

  table 0-row-2 1-row-2 2-row-2 layout-auto
  容器区域	描述
  Margins	应用于容器所有边的外边缘的空白空间量。 选项： Top / Right / Bottom / Left
  Padding	应用于容器所有边的内边缘的空白空间量。 选项： Top / Right / Bottom / Left

完成后，单击​ Save ​以应用设置并返回到Page Builder工作区。