文档CommercePage Builder

元素 — 分隔条

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

创建对象：

  • 初学者
  • 中级
  • 用户

使用​ 分隔线 ​内容类型添加规则作为Page Builder 阶段中内容部分之间的可视分隔符。 可以指定分隔线的线颜色、厚度和宽度。 您还可以控制对齐方式、设置边距和填充以及容器边框的格式。 默认情况下，分隔线是扩展容器整个宽度的细线规则，其中允许使用边距。

没有边框的容器中的默认分隔符

尽管大多数分隔线容器是不可见的，但下面的示例用红色虚线边框显示容器，以便您查看分隔线、内边距和容器之间的关系。 可以调整分隔线顶部和底部的内边距，以控制元素之间的间距。

在包含虚线边框的容器中带填充的分隔符

NOTE
如果您对Page Builder内容进行了重大更改，建议您增加管理员会话生命周期以防止会话在您工作时超时。

分隔线工具箱

工具
图标
描述
移动
移动图标 {width="25"}
将分隔线容器移至页面上的另一个有效位置。
（标签）
分隔条
将当前容器标识为分隔线元素。
设置
设置图标 {width="25"}
打开“编辑分隔条”页面，您可以在此页面更改分隔条及其容器的属性。
隐藏
隐藏图标 {width="25"}
隐藏分隔条容器。
显示
显示图标 {width="25"}
显示隐藏的分隔符容器。
复制
图标重复 {width="25"}
制作分隔条容器的副本。
移除
删除图标 {width="25"}
从舞台中删除分隔线容器及其内容。
NOTE
隐藏元素存储在数据库中，对客户不可见。 但是，这些元素对搜索引擎和对您的网站爬网的其他机器人可见。 如果通过具有不可见属性的API调用发出请求，则它们也会作为内容的一部分返回，除非您将它们从阶段中删除。

添加分隔条

  1. 在Page Builder面板中，展开​ Elements ​并将​ Divider ​占位符拖到舞台上的行、列或选项卡集中。

    在将分隔线放置在舞台上的另一个内容容器之前或之后时，请使用红色准则作为参考。

    将分隔线拖到舞台上 {width="600" modal="regular"}

    在以下示例中，分隔符标记了文本新部分的开始。

    分隔文本节的分隔符 {width="500" modal="regular"}

  2. 要指定新分隔符的设置，请按照以下步骤操作。

更改分隔线设置

  1. 将鼠标悬停在分隔线容器上以显示工具箱，然后选择​ 设置 （ 设置图标 {width="20"} ）图标。

    分隔线工具箱 {width="500" modal="regular"}

  2. 使用以下方法之一更改分隔线​ Line Color：

    • 请输入有效的HTML颜色名称。 例如，Teal。
    • 输入十六进制颜色值。 例如，#008080。

    完成后，单击​ Apply。

    设置线条颜色 {width="600" modal="regular"}

  3. 输入​ Line Thickness ​像素。

  4. 要指示度量单位，请输入​ Line Width，然后输入px或%。

    设置线条颜色、粗细和宽度 {width="600" modal="regular"}

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

    • 若要控制分隔线在父容器中的位置，请选择​ Alignment：

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

      在下例中，选项设置为使用分隔线的中心对齐。

      中心对齐的分隔符 {width="600" modal="regular"}

    • 设置应用于分隔线容器所有四个边的​ 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

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

    分隔线居中于行 {width="500" modal="regular"}

复制分隔条

对于具有特定设置的格式化分隔条，制作重复项比使用新的占位符从头开始更有效。

  1. 将鼠标悬停在分隔线容器上以显示工具箱并选择​ 复制 （ 复制图标 {width="20"} ）图标。

    重复分隔线容器显示在原始分隔线的正下方。

    重复的分隔符 {width="500" modal="regular"}

  2. 将鼠标悬停在新分隔线容器上以显示工具箱，然后选择​ 移动 （ 移动图标 {width="20"} ）图标。

    移动分隔线 {width="500" modal="regular"}

  3. 选择并拖动分隔线，直到红色基准线标记新位置。

    移动分隔线时，每个容器的顶边框和底边框显示为虚线。

    将重复分隔线移至位置 {width="500" modal="regular"}

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d