文档CommercePage Builder

仅限PaaS

元素 — 文本

2025年5月5日
  • 主题：

创建对象：

  • 初学者
  • 中级
  • 用户

使用​ Text ​内容类型在Page Builder 阶段中添加包含WYSIWYG （“所见即所得”）编辑器的文本容器。 此外，您还可以从编辑器工具栏向文本添加链接、图像、变量和小部件。

横幅上的格式化文本

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

文本编辑器工具

您可以直接从舞台或设置页面访问文本编辑器。 直接对舞台所做的更改会自动保存。 有关详细信息，请参阅使用编辑器。

文本编辑器工具 — TinyMCE

文本容器工具箱

文本容器工具箱

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

添加文本

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

    将文本占位符拖到舞台上

  2. 根据需要使用编辑器输入文本并设置其格式。

    有关详细信息，请参阅使用编辑器。

    包含内容的 文本编辑器

创建链接

通过编辑器中的“插入链接”按钮，可以轻松添加指向图库中图像的超链接。 但是，如果您提前设置了URL，则它也可用于在文本中创建内联链接。 与“小组件”按钮不同，“插入/编辑”链接按钮未与应用商店中的页面、产品或类别集成。

要为电话号码或电子邮件创建链接，请参阅添加自定义变量。

  1. 在店面中，导航到将成为链接的目标目标的页面，并复制链接信息。

    您可以使用完全限定的URL或省略对商店域的引用的相对URL。

    完整URL - https://mystore.com/women/tops-women/tees-women.html

    相对URL - ../women/tops-women/tees-women.html

  2. 选择编辑器空间中的文本，然后单击编辑器工具栏上的​ 插入/编辑链接 （ 插入/编辑链接按钮 ）。

    添加指向格式化文本的链接

  3. 对于​ URL，输入您准备的相对链接。

  4. 将​ Target ​设置为None。

    此设置将在同一浏览器窗口中打开页面，而不是打开新选项卡。

  5. 对于​ Title，输入Shop Tees。

    Title链接属性被某些浏览器用作工具提示。

  6. 要保存链接并返回Page Builder工作区，请单击​ OK。

    链接详细信息

插入图像

  1. 将光标置于要插入图像的文本中。

  2. 单击编辑器工具栏上的​ 插入/编辑图像 （ 插入/编辑图像按钮 ）。

  3. 对于​ Source，单击搜索图标以使用媒体存储来查找和选择图像。

  4. 对于​ Image Description，输入图像的描述性文本。

    此文本填充图像的alt链接属性，并被某些浏览器用于辅助功能。

  5. 输入宽度和高度​ Dimensions（以像素为单位），以便在页面上呈现图像。

    保持选中​ Constrain proportions ​复选框以自动保持图像的纵横比。

  6. 要插入图像并返回Page Builder工作区，请单击​ OK。

更改文本设置

  1. 将鼠标悬停在文本容器上以显示工具箱，然后选择​ 设置 （ 设置图标 ）图标。

    NOTE
    由于文本容器紧密嵌套在另一个容器中，因此请确保您具有正确的工具箱。

  2. 根据需要更新内容。

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

    • 若要控制文本在父容器中的位置，请选择​ 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

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

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