在设计管理器中创建和编辑模块

通过设计管理器，您可以创建自定义模块，为博客、 页面或电子邮件添加高级功能。自定义模块提供多种功能，因此可以在页面、电子邮件或博客编辑器中完全自定义内容。

请注意：创建模块需要了解 HTML、CSS、HubL 和 HubSpot 设计管理器。HubSpot 建议 与开发人员合作 创建编码模块。

创建新模块

1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
2. 在 查找器顶部，点击文件下拉菜单，选择新建文件。

3. 在对话框中，单击 " 今天要创建什么？ 下拉菜单，然后选择 模块。
4. 单击下一步。
5. 在 " 您希望在何处使用此模块 "字段中，选择要使用模块的每种内容类型（如 博客文章、 电子邮件或 着陆页）旁边的 复选框 。 
6. 在 模块内容范围 字段中，选择一个 选项（如 本地模块 或 全局模块）。如果创建了全局模块，编辑该模块的内容将更新使用该模块的所有位置。 
7. 输入模块的 文件名 。
8. 要更改模块的文件位置，请单击 " 文件位置 "部分的 " 更改"。在弹出框中选择一个新 位置 ，然后单击 " 选择"。
9. 完成后，单击 " 创建"。
10. 继续 编辑模块。

请注意：电子邮件中使用的模块只能在订阅了 Marketing Hub 专业版 或 企业 版的账户中创建。它们不能包含 CSS 或 JavaScript。 

编辑模块

在设计管理器中创建模块后，您可以自定义其功能和外观。为模块加上清晰的标签，添加和配置字段，调整字段编辑器选项（如默认内容）。设置显示条件和中继器选项，并对相关字段进行分组，以便更好地组织。您还可以复制和粘贴字段片段、编写自定义模块语法、添加有用的说明性文字，以及编辑模块可使用的模板类型。

为模块添加标签

在设计管理器中，您可以为模块添加或更新标签，以帮助用户在 内容编辑器中识别模块。如果标签为空，则默认显示模块名称。

1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
2. 在 查找器中，点击打开要编辑标签的 模块 。
3. 在 检查器中输入 标签。

为模块添加字段

为模块添加字段，以设置模块的内容或样式，并使其可在内容编辑器中编辑。了解有关 可用字段类型的更多信息。 

1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
2. 在 查找器中，点击打开一个模块。
3. 在 " 检查器"的 " 字段 "部分，单击 "添加字段 "下拉菜单。然后选择一个字段 添加到模块中。

4. 要编辑字段名称，请单击 edit 编辑图标并输入新 名称。要编辑 HubL 变量名，请在 HubL 变量名 字段中输入新 名称。 

自定义字段默认内容

在 "内容选项 "部分，您可以添加默认内容，在模板和内容编辑器中使用模块时会显示这些内容。默认内容的选项因字段类型而异。

1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
2. 在 查找器中，点击打开一个 模块。
3. 在 " 检查器"的 " 字段 "部分，将鼠标悬停在一个 字段 上，然后单击 " 编辑"。
4. 在 内容选项 部分，添加或编辑默认内容 选项。可用的默认内容选项取决于所选的字段类型。

例如，通过在模块中添加 日期和时间字段 类型，可以选择默认日期和时间。您还可以输入默认时间间隔。

设置字段编辑器选项

在"编辑器选项 "部分，您可以将字段设为必填字段，并阻止在内容编辑器中进行编辑。您还可以自定义帮助文本。 

1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
2. 在 查找器中，点击打开一个 模块。
3. 在 " 检查器"的 " 字段 "部分，将鼠标悬停在一个 字段 上，然后单击 " 编辑"。
4. 在 编辑器选项 部分，要使字段为必填字段，请打开 " 使该字段为必填字段 "开关。这将防止用户在内容编辑器中将字段留空。
5. 要防止字段内容被编辑，请打开 内容编辑器中 的 " 防止编辑 "开关。该字段的内容仍可在模板级别的设计管理器中进行自定义。此选项不适用于 全局模块。
6. 要添加有关如何使用字段的上下文或说明，请在 工具提示帮助文本 字段或 内联帮助文本字段 中输入 文本 。
   • 工具提示帮助文本：当用户将鼠标悬停在内容编辑器中的 infoCircleIcon 信息图标时，该文本将显示在工具提示中。
   • 内联帮助文本：当用户在内容编辑器中编辑模块时，该文本将显示在字段下方。

设置现场显示条件

在 " 显示条件 "部分，您可以使用字段 显示条件 来设置模块字段，使其仅在另一个字段满足特定条件时才显示。

1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
2. 在 查找器中，点击打开一个 模块。
3. 在 " 检查器"的 " 字段 "部分，将鼠标悬停在一个 字段 上，然后单击 " 编辑"。
4. 在 显示条件 部分，单击 HubL 变量 下拉菜单并选择一个 变量。 
5. 单击第二个 下拉菜单 并选择一个 选项（例如， 等于 或 不为空）。根据所选选项，可能需要更多条件字段。例如，如果选择 " 等于"，则需要一个附加值字段。
6. 默认情况下，一旦配置了条件，就会自动开启显示条件。要关闭显示条件，请切换 显示 条件开关。

设置现场中继器选项

在 中继器选项 部分，您可以为字段和组配置 中继器选项 。打开中继器选项后，将创建多个对象，并通过一个 for循环显示。

1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
2. 在 查找器中，点击打开一个 模块。
3. 在 " 检查器"的 " 字段 "部分，将鼠标悬停在一个 字段 上，然后单击 " 编辑"。
4. 在中继器选项 部分，在 最小 和 最大 （可选） 字段中输入 数字 。这将设置字段在模块中出现的最小次数，直至最大值。 
5. 要设置字段的默认显示次数，请在 " 默认对象计数 "字段中输入一个 数字 。
6. 默认情况下，中继器选项一经配置就会自动开启。要关闭中继器选项，请切换 中继器选项 开关。

例如，更改图像字段的中继器选项，可显示至少三个、最多五个图像字段。默认值为四个图像字段。在内容编辑器中，用户默认将看到四个图像字段，并可添加一个图像字段或删除一个现有图像字段。

分组模块字段

创建字段后，可以将它们分组，以便按相关性组织字段。字段组可用于构建自定义字段逻辑。您最多可以将四个字段组合在一起。了解有关 模块字段组的更多信息。

1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
2. 在 查找器中，点击打开 模块。
3. 在 检查器的" 字段 "部分，单击 " 操作 "下拉菜单并选择 " 分组"。
4. 选择一个或多个要分组的 字段 ，然后单击 创建分组。

为模块添加帮助文本

在 "编辑器选项 "部分，您可以添加帮助文本，为用户提供编辑模块时的上下文。这段文字将显示在模块字段的上方。 

1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
2. 在 查找器中，点击打开一个 模块。
3. 在 检查器的 编辑器选项 部分，在 内联帮助文本 字段中输入 文本 。

管理模块的内容类型和可用性

添加或删除用户可以使用模块的内容类型，如 博客文章 或 登陆页面。您还可以在模板和页面中打开或关闭模块的可用性。

1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
2. 在 查找器中，点击打开一个 模块。
3. 要编辑模块的内容类型，请单击右上方 检查器中 模块名称下方的 内容类型 。

1. • 在对话框中，选择或清除将使用或不使用模块的每种内容类型（如 博客文章、 电子邮件或 登陆页面）旁边的 复选框 。 
   • 完成后，单击 更新。

4. 要管理模板或页面中模块的可用性，请切换右上角 中的 " 使模板和页面可用 "开关。要测试模块功能或关闭模板和页面中的可用性，请切换关闭 模板和页面可用性 开关。 

请注意：关闭 " 使模板或页面可用 "开关不会从任何现有模板或页面中移除模块。

复制和粘贴字段片段

在模块中加入字段时，可将字段片段复制并粘贴到 模块编辑器中的 module.html （HTML + HubL） 部分。

1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
2. 在 查找器中，点击打开一个 模块。
3. 在 检查器中，将鼠标悬停在 模块字段 上，然后单击 字段 部分的 操作 下拉菜单。然后选择 复制片段。 
4. 在 模块编辑器中，将字段片段 粘贴到 module.html (HTML. + HubL) 部分的所需位置。您可以使用键盘快捷键 Cmd+V 或 Ctrl+V。 

编写模块语法

编辑模块时，可在 module.html (HTML + HubL)、module.css 和 module.js 模块编辑器部分编写模块语法。进一步了解模块编辑器 和模块概述。

预览和发布模块

完成模块编辑（包括添加字段和编写模块语法）后，就可以预览和发布模块了。 

1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
2. 在 查找器中，点击打开 模块。
3. 要预览模块，请单击右上角的 " 预览 "。您将被引导到一个新的浏览器标签页来预览模块。该预览与 模块编辑器同步，并在编辑发生时自动刷新。
4. 要发布模块，请单击 " 发布更改"。 

在模板中添加模块

发布模块后，您可以将其添加到设计管理器中的拖放模板或自定义编码模板中，在不同模板中使用。要在内容编辑器中添加模块，请了解有关 在内容编辑器中添加和编辑模块的更多信息。

1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
2. 在 查找器中，单击打开模板。
3. 要在 布局编辑器的拖放模板中添加模块，请单击 检查器顶部的 + 添加 选项卡。
   • 在搜索字段中，输入模块 名称 。要将搜索范围缩小到自定义模块，请单击 " 按类别或标签过滤 "下拉菜单并选择 " 自定义模块"。
   • 点击 dragHandleIcon 拖放 图标，将 模块 移动到 布局编辑器中的位置。
4. 在自定义编码模板中添加模块：
   •  右键单击或按住 Ctrl+ 单击 查找器中的 模块 ，然后选择 " 复制片段"。或者，单击打开 模块，然后在 检查器的 " 模板使用 "部分单击 " 复制片段"。
   • 在自定义编码模板中，将模块 片段 粘贴到 代码编辑器中。
5. 完成后，单击右上角的 " 发布更改 "。

示例：创建倒计时模块创建倒计时模块

1. 在设计管理器中创建一个模块 ，将其命名为 "倒计时器"。
2. 在 检查器的" 字段 "部分，单击 " 添加字段"下拉菜单。

• • 选择 日期和时间 字段。输入 名称 "活动日期和时间"。这将把 HubL 变量名 字段更新为 event_date_and_time.

• • 选择 颜色 字段。输入 名称 "计时器字体颜色"。这将把 HubL 变量名 字段更新为 timer_font_color.

请注意：HubL 变量名必须与下面模块.html（HTML + HubL）代码部分中的变量名一致。

3. 在 模块编辑器中，将以下 代码 复制并粘贴到 的相关部分：

4. 完成后， 预览并发布 模块。
5. 继续 将模块添加到模板中。