文档CommercePage Builder

仅限PaaS

布局 — 选项卡

最近更新: 2025年5月5日
  • 主题:

创建对象:

  • 初学者
  • 中级
  • 用户

使用​ 选项卡 ​内容类型在Page Builder 阶段中添加一组选项卡。 将制表符占位符从面板拖到舞台时,最初会显示一个默认制表符。 您可以添加更多选项卡以创建完整集合。 选项卡集的宽度由其父容器的宽度和填充设置决定。

选项卡集

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

工具箱

在使用​ 选项卡 ​内容类型时,您可以添加和编辑单个选项卡以及包含一个或多个选项卡的选项卡容器。 每个选项卡都有自己的工具箱,用于在Page Builder阶段设计选项卡。

单个选项卡工具箱

选项卡工具箱

工具图标描述
移动 移动图标 选项卡标签旁边的此控件用于将单个选项卡移动到选项卡集中的另一个位置。
设置 设置图标 打开“编辑选项卡”页面,您可以在该页面中更改各个选项卡的属性。
复制 图标重复 制作选项卡的副本。
移除 删除图标 从选项卡集中删除选项卡。

选项卡容器工具箱

选项卡容器工具箱

工具图标描述
移动 移动图标 将这组选项卡移至父容器中网格上的另一个位置。
添加 添加图标 向选项卡集添加选项卡。
(标签)Tabs将当前容器标识为选项卡集。 将鼠标悬停在容器的顶部边框上可查看工具箱。
设置 设置图标 打开“编辑”选项卡页面,您可以在该页面更改容器的属性。
隐藏 隐藏图标 隐藏选项卡容器。
显示 显示图标 显示隐藏的选项卡容器。
复制 图标重复 复制当前选项卡。
移除 删除图标 从舞台中删除当前选项卡集。
NOTE
隐藏元素存储在数据库中,对客户不可见。 但是,这些元素对搜索引擎和对您的网站爬网的其他机器人可见。 如果通过具有不可见属性的API调用发出请求,则它们也会作为内容的一部分返回,除非您将它们从阶段中删除。

添加单个选项卡

  1. 在​ Layout ​下的Page Builder面板中,将​ Tabs ​占位符直接拖到舞台上,或拖到舞台上的行或列上。

    将制表符拖到行

  2. 单击​ Tab 1 ​标签以显示单个选项卡工具箱,然后选择​ 设置 ( 设置图标 )图标。

  3. 输入要用作标签的​ Tab Name。

    正在输入选项卡名称

  4. 如果需要,请输入选项卡的​ Minimum Height。

    此值可以是具有任何有效CSS单位(如100px、50%、50em、100vh)的数字,也可以是计算(如100vh - 237px)。

  5. 选择​ Vertical Alignment ​设置以对齐添加到选项卡的任何内容容器(“顶部”、“中心”或“底部”)。

  6. 如果需要,请按照以下部分设置其他选项:

    • Background
    • Advanced
  7. 单击右上角的​ Save ​以应用设置并返回到Page Builder工作区。

添加一组选项卡

以下步骤从单个选项卡开始,并在选项卡容器中创建一组三个选项卡。 如果您还没有单独的选项卡,请按照之前的说明将单个选项卡添加到舞台。

  1. 将鼠标悬停在选项卡容器上以显示工具箱,然后选择​ 添加 ( 添加图标 )图标。

  2. 单击​ Tab 2 ​标签以显示光标,并为选项卡输入您自己的标签。

  3. 再次单击舞台上的第二个选项卡,然后选择​ 复制 ( 复制图标 )图标。

  4. 单击YourName Copy ​标签以显示光标,并为第三个选项卡输入您自己的标签。

与工具箱匹配的选项卡集

在集中移动选项卡

  1. 单击要移动的选项卡。

  2. 选择选项卡标签文本前显示的​ 移动 ( 移动图标 )图标,并将其拖动到选项卡集内的新位置。

将内容添加到选项卡

您可以像对行一样对选项卡使用任何内容类型。 使用以下步骤添加文本内容类型作为示例。

  1. 单击要在其中添加内容的选项卡。

  2. 在Page Builder面板中,展开​ Elements ​并将​ Text ​占位符拖到选项卡中。

  3. 在编辑器中输入或粘贴一些文本,并根据需要使用编辑器工具栏设置格式。

    有关使用文本内容类型的详细信息,请参阅元素 — 文本。

    编辑添加到选项卡上的文本内容

  4. 单击右上角的​ Save。

更改单个选项卡设置

  1. 将鼠标悬停在单个选项卡上以显示工具箱,然后选择​ 设置 ( 设置图标 )图标。

  2. 如果需要,请更改选项卡的任何基本设置:

    • Tab Name — 输入选项卡标签的修订文本。 您还可以直接在舞台上修改标签。

    • Minimum Height — 如果要覆盖自动高度,请输入像素。 例如,您可以设置与背景图像高度匹配的最小高度,以确保完整图像可见。

    • Vertical Alignment — 选择添加到选项卡的内容容器的垂直位置。

  3. 使用以下部分根据需要更改其他设置,以了解详细信息。

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

背景

  • Background Color — 通过选择色板、单击拾色器或输入有效的颜色名称或等效的十六进制值来指定背景颜色。 此设置确定行的背景颜色。 您还可以调整颜色的不透明度。

    无颜色(默认)

    您可以通过三种方式输入值:

    • 预定义的颜色名称,如White

    • 颜色的十六进制颜色值,如#ffffff

    • 颜色的rgba值,具有不透明度百分比,如rgba(255, 255, 255, 0.75)

    如果要选择颜色,请单击​ 无颜色 ​框左侧的色板。

    选择颜色样本

    如果单击颜色框再次打开拾色器,则滑块下方的框显示当前的红色、绿色、蓝色和Alpha值(rgba)。 最后一个数字以小数表示当前的不透明度百分比。 可以使用滑块调整不透明度,或输入所需的小数值。

    设置不透明度

    NOTE
    Page Builder还支持背景图像中的透明层,即​_Alpha通道_,这些背景图像可用于创建具有不同不透明度的背景。
  • Background Image — 如果需要,请使用提供的工具选择要应用于选项卡的背景图像:

    工具
    描述
    Upload
    将图像文件从本地计算机上载到图片库,然后将其作为选项卡的背景图像应用。
    Select from Gallery
    提示您从图库中选择现有图像作为选项卡的背景图像。
    相机图标
    允许您将图像拖到相机图块或浏览到本地文件系统中的图像。
  • Background Mobile Image — 如果需要,请使用相同的工具选择不同的背景图像以在移动设备上显示。

  • Background Size — 选择相对于选项卡宽度的背景图像缩放方式:

    选项
    描述
    Cover
    背景图像覆盖选项卡的全部宽度。
    Contain
    背景图像仅限于选项卡区域的宽度。
    Auto
    应用当前样式表中的大小。
  • Background Position — 选择与选项卡相关的背景图像锚定方式: Top Left / Top Center / Top Right / Center Left / Center / Center Right / Bottom Left / Bottom Center / Bottom Right

  • Background Attachment — 选择附件类型以确定背景图像相对于滚动页面的移动方式:

    选项
    描述
    Scroll
    当页面滚动时,将同步附加的背景图像以向下移动。
    Fixed
    (不适用于移动设备)当容器在图像上滚动并且固定在指定的背景位置时,背景图像不会移动。
  • Background Repeat — 设置为Yes可重复背景图像以填充选项卡中的可用空间。

高级

  • 要控制添加到选项卡的内容容器的水平对齐方式,请选择​ Alignment 。

    选项
    描述
    Default
    应用在当前主题的样式表中指定的对齐默认设置。
    Left
    将内容容器沿选项卡的左边框对齐,并允许使用指定的任何边距。
    Center
    将内容容器对齐选项卡的中央,并允许使用指定的任何边距。
    Right
    将内容容器沿选项卡的右边框对齐,并允许使用指定的任何边距。
  • 设置应用于选项卡容器所有四个侧面的​ Border ​样式:

    选项
    描述
    Default
    应用关联样式表指定的默认边框样式。
    None
    不提供任何容器边框的可见指示。
    Dotted
    容器边框显示为虚线。
    Dashed
    容器边框显示为虚线。
    Solid
    容器边框显示为实线。
    Double
    容器边框显示为双线。
    Groove
    容器边框显示为一条开槽线。
    Ridge
    容器边框显示为脊线。
    Inset
    容器边框显示为内嵌行。
    Outset
    容器边框显示为外线。
  • 如果设置了除None之外的边框样式,请完成边框显示选项:

    边框颜色

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

    以下示例中的行的边框半径为15。

    边框半径为15 🔗的行

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

    用空格分隔多个类名。

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

    在选项卡容器图表中输入每个相应的值。

    容器区域
    描述
    Margins
    应用于容器所有边的外边缘的空白空间量。 选项: Top / Right / Bottom / Left
    Padding
    应用于容器所有边的内边缘的空白空间量。 选项: Top / Right / Bottom / Left

更改选项卡集设置

  1. 将鼠标悬停在选项卡集容器的顶部边框上以显示工具箱,然后选择​ 设置 ( 设置图标 )图标。

  2. 如果需要,请更改​ Default Active Tab。

    在集中选择加载页面时要处于活动状态的选项卡。

  3. 如果要覆盖选项卡集的自动高度,请输入​ Minimum Height(以像素为单位)。

  4. 若要沿选项卡集顶部定位导航选项卡,请选择​ Tab Navigation Alignment (Left、Center或Right)。

    导航选项卡右对齐

  5. 为选项卡集设置高级选项:

    • 若要控制标签集在父容器中的位置,请选择​ Alignment:

      选项
      描述
      Default
      应用在当前主题的样式表中指定的对齐默认设置。
      Left
      沿父容器的左边框对齐选项卡集,并允许指定的任何边距。
      Center
      将选项卡集对齐父容器的中心,并允许指定的任何边距。
      Right
      沿父容器的右边框对齐选项卡集,并允许指定的任何边距。
    • 设置应用于选项卡容器所有四个侧面的​ Border ​样式:

      选项
      描述
      Default
      应用关联样式表指定的默认边框样式。
      None
      不提供任何容器边框的可见指示。
      Dotted
      容器边框显示为虚线。
      Dashed
      容器边框显示为虚线。
      Solid
      容器边框显示为实线。
      Double
      容器边框显示为双线。
      Groove
      容器边框显示为一条开槽线。
      Ridge
      容器边框显示为脊线。
      Inset
      容器边框显示为内嵌行。
      Outset
      容器边框显示为外线。
    • 如果设置了除None之外的边框样式,请完成边框显示选项:

      选项
      描述
      Border Color
      通过选择色板、单击拾色器或输入有效的颜色名称或等效的十六进制值来指定颜色。
      Border Width
      输入边框线条宽度的像素数。
      Border Radius
      输入像素数,以定义用于使边框每个角倒圆角的半径大小。
    • (可选)从当前样式表中指定要应用于选项卡容器的​ CSS classes ​的名称。

      用空格分隔多个类名。

    • 输入​ Margins and Padding ​的值(以像素为单位)以确定制表符容器的外边距和内边距。

      在选项卡容器图表中输入相应的值。

      容器区域
      描述
      Margins
      应用于容器所有边的外边缘的空白空间量。 选项: Top / Right / Bottom / Left
      Padding
      应用于容器所有边的内边缘的空白空间量。 选项: Top / Right / Bottom / Left
  6. 完成后,单击​ Save ​以应用设置并返回到Page Builder工作区。

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