文档CommercePage Builder

元素 — 文本

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

创建对象：

  • 初学者
  • 中级
  • 用户

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

横幅上的格式化文本

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

文本编辑器工具

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

文本编辑器工具 — TinyMCE

文本容器工具箱

文本容器工具箱

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

添加文本

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

    将文本占位符拖到舞台上 {width="600" modal="regular"}

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

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

    包含内容的 文本编辑器 {width="600"}

创建链接

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

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

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

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

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

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

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

    添加指向格式化文本的链接 {width="500" modal="regular"}

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

  4. 将​ Target ​设置为None。

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

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

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

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

    链接详细信息 {width="500" modal="regular"}

插入图像

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

  2. 单击编辑器工具栏上的​ 插入/编辑图像 （ 插入/编辑图像按钮 {width="20"} ）。

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

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

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

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

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

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

更改文本设置

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

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

  2. 根据需要更新内容。

  3. 根据需要更新​ 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

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

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