文档CommercePage Builder

[仅限PaaS]{class="badge informative" title="仅适用于云项目(Adobe管理的PaaS基础架构)和内部部署项目上的Adobe Commerce 。"}

添加内容 — 阻止

Last update: Thu Sep 04 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：

创建对象：

  • 初学者
  • 中级
  • 用户

使用​ 块 ​内容类型将现有的活动块添加到Page Builder 阶段。 在以下示例中，第一列包含带有页面侧菜单的块。 第二列包含图像。

使用侧菜单阻止 {width="600" modal="regular"}

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

块工具箱

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

添加现有块

  1. 导航到目标页面、块、动态块、产品或类别上的Page Builder工作区。

  2. 在Page Builder面板中，展开​ Add Content ​并将​ Block ​占位符拖到舞台上。

    将块拖到舞台上 {width="600" modal="regular"}

  3. 将鼠标悬停在空的块容器上以显示工具箱，然后选择​ 设置 （ 设置图标 {width="25"} ）图标。

  4. 单击​ Select Block。

    选择块 {width="200"}

  5. 在要添加块的行中，单击最后一列中的​ Select。

    所选的块 {width="600" modal="regular"}

    所选块的名称将显示在页面上。

    块名称 {width="200"}

  6. 使用本页末尾的字段说明作为参考，根据需要完成其余设置。

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

高级设置

  1. 若要控制块在父容器中的位置，请选择​ Alignment：

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

  2. 设置应用于块容器所有四个边的​ 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 容器边框显示为外线。

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

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

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

    用空格分隔多个类名。

  5. 输入​ 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

编辑块设置

  1. 将鼠标悬停在块容器上，然后在工具箱中选择​ 设置 （ 设置图标 {width="25"} ）图标。

    块工具箱 {width="600" modal="regular"}

  2. 若要选择其他块，请单击​ Select Block。

    • 在活动块列表中，单击​ Select ​要添加的块。
    • 单击​ Add Selected。

  3. 根据需要更新其余设置，可使用此页末尾的字段描述作为参考。

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

复制块

  1. 将鼠标悬停在块容器上以显示工具箱，然后选择​ 复制 （ 复制图标 ）图标。

    副本会出现在原始文件的正下方。

  2. 若要将新块移动到新位置，请将鼠标悬停在容器上，然后单击工具箱中的​ 移动 （ 移动图标 ）。

  3. 选择并拖动块，直到红色指示线出现在新位置。

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

从舞台上删除块

  1. 将鼠标悬停在块容器上以显示工具箱，然后选择​ 删除 （ 删除图标 ）图标。

  2. 提示确认时，单击​ OK。

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