文档CommercePage Builder

元素 — HTML代码

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

创建对象：

  • 初学者
  • 中级
  • 用户

使用​ HTML代码 ​内容类型在Page Builder 阶段中添加HTML、CSS和JavaScript代码片段。 例如，您可能需要添加自定义HTML，声明可应用于页面上元素的CSS类。 或者，您可能希望为从第三方提供商收到的徽标、按钮或横幅添加一段代码。

HTML代码工具箱

HTML代码工具箱

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

添加HTML代码

以下示例演示如何嵌入Google Font代码并声明覆盖当前样式表的自定义标题类。

步骤1：选择Google字体

  1. 访问Google Fonts网站并选择要使用的字体系列。

  2. 复制要嵌入到页面<head>部分中的生成代码，并将其临时粘贴到文本编辑器中。

    • 嵌入字体代码
    • CSS规则

  3. 将字体系列规则添加到每个标题类中，并将标题类括在<style>标记中。

    此代码已粘贴到Page Builder中。

    code language-html 
    <style>
   h1 {color: teal; font-family: 'Khand', sans-serif; }
   h2 {color: teal; font-family: 'Khand', sans-serif; }
   h3 {color: teal; font-family: 'Khand', sans-serif; }
</style>

第2步：将代码添加到页面中

  1. 在商店的​ 管理员 ​侧边栏中，转到​ Content > Elements>Pages。

  2. 查找字体可用的页面，并在编辑模式下打开该页面。

  3. 向下滚动并展开​ Content ​部分。

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

    使用红色准则将分隔线放置在行、列或选项卡集中的另一个内容容器之前或之后。

    将HTML代码占位符拖到舞台上 {width="600" modal="regular"}

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

  6. 在文本框中，粘贴您准备的嵌入Google Fonts代码和样式声明。

    为了便于阅读，您可以输入一些空格来缩进代码。

    HTML的代码和样式 {width="500" modal="regular"}

  7. 根据需要更新其余设置(有关详细信息，请参阅更改HTML代码设置)。

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

    通过浏览器查看页面时，新字体将呈现。

步骤3：预览页面

  1. 在​ Currently Active ​部分中，将​ Enable Page ​设置为Yes。

    正在启用页面 {width="600" modal="regular"}

  2. 单击右上角的​ Save ​箭头并选择​ Save & Close。

  3. 在网格中查找该页面，并在​ Actions ​列中选择​ View。

    使用新字体系预览页面标题 {width="700" modal="regular"}

更改HTML代码设置 html-settings

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

  2. 在文本框中，根据需要编辑代码。

    支持HTML、CSS和JavaScript代码。 可以在此处输入属于页面<head>部分的代码片段。

    该编辑器还提供了在代码中插入特殊元素的按钮：

    table 0-row-2 1-row-2 2-row-2 3-row-2
    按钮 描述
    插入构件…… 单击以在HTML文本框中的光标位置处插入构件。
    插入图像…… 单击以在HTML文本框中的光标位置处插入库中的上传图像或图像。
    插入变量…… 单击可在HTML文本框中光标的位置处插入变量。

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

    • 要控制代码在父容器中的位置，请选择​ Alignment：

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
      选项 描述
      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
      选项 描述
      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
      容器区域 描述
      Margins 应用于容器所有边的外边缘的空白空间量。 选项： Top / Right / Bottom / Left
      Padding 应用于容器所有边的内边缘的空白空间量。 选项： Top / Right / Bottom / Left
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d