在布局编辑器中使用默认模块

HubSpot 在设计管理器的布局编辑器 中提供了用于构建拖放模板的默认模块。您可以添加默认模块或克隆默认模块，以便在拖放模板中使用。此外，您还可以编辑某些默认模块的默认内容。

开始之前

在开始使用该功能之前，请务必充分了解应提前采取的步骤，以及该功能的限制和使用该功能的潜在后果。

了解要求

• 用户必须是超级管理员或已开启设计工具权限，才能访问和编辑模块。

了解局限性和注意事项

• 本文介绍如何使用设计管理器中布局编辑器的检查器来添加和克隆默认模块。您还可以编辑某些默认模块的默认内容。
• 要使用HubL 向 HTML 模板或自定义模板添加默认模块，请在开发人员文档中了解更多信息。
• 要在内容编辑器中添加和编辑模块，请了解有关在内容编辑器中添加和编辑模块的更多信息。
• Marketing Hub和Content HubProfessional&Enterprise 账户默认在设计管理器中拥有@hubspot文件夹。
• 某些默认模块只能添加到特定的模板类型。例如，表单模块不适用于电子邮件模板。
• 在自定义模块源代码之前，必须克隆默认模块。

为拖放模板添加模块

您可以在设计管理器中使用布局编辑器为拖放模板添加默认模块。

1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
2. 在左侧栏中，单击模板名称 。
3. 在右栏中，单击+ 添加。
4. 在搜索栏中输入默认或自定义模块的名称 。
5. 单击模块名称，然后将其拖入模板。
6. 在样式选项 部分的检查器中，为模块设置自定义样式。

7. 在 "默认内容 "部分的检查器中，编辑模块添加到内容编辑器时显示的内容。了解有关编辑模块默认内容的更多信息。

8. 要防止其他用户编辑模块的默认内容，请单击 "编辑器 "选项 部分的 "防止在内容 编辑器 中编辑 "开关。

克隆默认模块

您可以在设计管理器中的@hubspot文件夹中克隆默认模块，以编辑模块的源代码。该文件夹包含所有主题和默认模块，包括拖放电子邮件模块。

1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
2. 在查找器中单击@hubspot文件夹。

3. 右键单击默认模块，然后选择克隆模块。
4. 在克隆的模块中，编辑模块源代码。了解有关配置模块的更多信息。
5. 在右上角单击 "发布更改"。

管理模块版本

HubSpot 可能会定期发布现有默认模块的新版本。这样，HubSpot 就可以在不中断现有内容的情况下实施重大更新。例如，一个模块的新版本可能会提供改进的字段组织、更多的样式选项和改进的功能。在HubSpot 的开发人员文档中了解有关模块版本的更多信息。

您可以从账户的 "主题和模块"设置页面管理模块版本，包括更新版本、恢复到以前的版本或查看所有默认模块的当前版本。

更新模块版本

• 更新到模块的新版本：

1. 1. 在 HubSpot 帐户中，单击顶部导航栏中的 settings“设置”图标。
   2. 在左侧边栏菜单中，导航至内容 >主题和模块。
   3. 在 "警报"选项卡上，默认模块的最新更新将显示为 "可用更新 "标签。单击模块旁边的 "查看更新 "可查看有关更新的更多详细信息。

1. 4. 在右侧边栏，查看更改。侧边栏将显示更新的高级摘要，以及更改和受影响资产的详细明细。

1. 5. 要更新模块，请单击安装更新。然后在对话框中单击确认更新。

请注意：页面和模板可能需要 10 分钟才能显示更新的模块。

• 更新模块后，您将进入 "主题和模块"设置页面的 "模块"选项卡。在该页面上，你可以看到最近更新的模块、可用更新的模块以及所有账户默认模块的版本信息。

还原更新的模块

在设置页面的 "模块"选项卡上，可以将过去 30 天内更新过的模块恢复到以前的版本。

• 还原最近更新的模块：
  1. 在 HubSpot 帐户中，单击顶部导航栏中的 settings“设置”图标。
  2. 在左侧边栏菜单中，导航至内容 >主题和模块。
  3. 单击 "模块"选项卡，找到要还原的模块，然后单击 "回滚最近更新"。

• 4. 在右侧边栏，查看模块的版本历史，然后单击 "回滚本次更新"。

• 5. 查看右侧边栏中的信息，确认要回滚更新，然后单击回滚。
  6. 在对话框中单击 "确认"。
• 回退模块后，模板和页面可能需要一段时间才能显示回退模块。您可以通过更新模块的版本再次更新模块。

编辑不同类型模块的默认内容

您可以在设计管理器 布局编辑器 的 拖放模板中编辑某些默认模块的默认内容。要查看默认模块的完整列表，请进一步了解默认电子邮件模块和默认网页模块。

备份退订

备份退订模块会显示给点击链接退订且 HubSpot 无法确认其电子邮件地址的电子邮件收件人。该模块只能通过电子邮件备份退订系统模板进行编辑。

• 编辑备份退订模块的默认内容：
  1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  2. 导航到您的模板。
  3. 在布局编辑器中，单击备份退订模块。
  4. 在默认内容部分的检查器中，输入标题、副标题和错误信息的 文本。

• 完成模块编辑后，单击 "发布更改"。

订阅博客电子邮件

博客电子邮件订阅模块可让访客通过填写表格订阅博客摘要电子邮件。该模块由博客订阅表单填充，表单可在表单工具中自定义。

请注意：博客电子邮件订阅模块不适用于电子邮件模板。

• 编辑博客电子邮件订阅模块的默认内容：
  1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  2. 导航至模板。
  3. 在布局编辑器中，单击博客电子邮件订阅 模块或添加该模块。
  4. 在 "默认内容"部分的检查器中，单击 "选择要显示的博客"下拉菜单，选择访客要订阅的博客。
  5. 点击标题级别下拉菜单，选择标题级别。
  6. 在表单上方显示的标题字段中，输入将出现在表单上方标题中的文本。
  7. 在用户内联回复字段中，单击expandIcon 展开图标 ，自定义游客提交表单后显示的文本。

• 完成博客电子邮件订阅模块的编辑后，单击右上角的 "发布更改"。

行动号召

呼叫行动（CTA）模块将 CTA 放置在布局中自己的模块中。您也可以在富文本模块中插入 CTA。

• 编辑 "行动呼吁 "模块的默认内容：

• 1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  2. 导航至模板。
  3. 在布局编辑器中，单击Call-to-Action模块或添加模块。
  4. 在 "默认内容"部分的检查器中，单击 "选择"。

• 5. 在右侧窗格中，选择一个CTA 或单击 " 创建新的"。
  6. 单击 插入。

内容库

您可以使用内容库模块建立一个资源库，供访客访问。

• 编辑内容库模块的默认内容：
  1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  2. 导航至模板。
  3. 在布局编辑器中，单击内容库模块或添加该模块。
  4. 要编辑内容库中的现有资源，请单击检查器中的editIc on编辑 图标。您可以自定义名称、描述、链接文本和图片。
  5. 要从内容库模块中删除资源，请单击检查器中的deleteIcon 删除 图标。
  6. 要在内容库模块中添加自定义资源，请单击检查器中的+ 添加。
  7. 要将资源设置为特色资源，请单击检查器中的favoriteIcon 设置为特色图标。

• 完成内容库模块编辑后，单击右上角的 "发布更改"。

形式

您可以使用表单模块在内容中添加表单，以获取访客信息。

请注意：表单模块不适用于电子邮件模板。

• 编辑表单模块的默认内容：
  1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  2. 导航至模板。
  3. 在布局编辑器中，单击表单模块或添加模块。
  4. 在默认内容 部分的检查器中，输入表单标题字段的文本。
  5. 在表单 下拉菜单中，选择一个表单。
  6. 在 "访客提交表单后会看到什么？"字段中，选择 "重定向到其他页面 "或 "显示内嵌感谢信息"。
     • 要重定向到其他页面，请在重定向链接下拉菜单中选择页面、帖子或单击+ 添加外部链接。
     • 要显示内嵌感谢信息，请在感谢信息字段中单击expand展开图标。
  7. 选择 "向指定电子邮件地址而不是表单默认设置发送表单通知"复选框，以覆盖表单工具中设置的任何通知收件人。
• 完成表单模块编辑后，单击右上角的 "发布更改"。

页眉

您可以使用标题模块在标题 HTML 标记中显示一行文本。

• 编辑标题模块的默认内容：
  1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  2. 导航至模板。
  3. 在布局编辑器中，单击标题模块或添加该模块。
  4. 在默认内容部分的检查器中，在标题内容字段中输入文本。
  5. 单击标题级别下拉菜单，选择标题级别（H1-H4）。

• 编辑完标题模块后，单击右上角的 "发布更改"。

图片

您可以使用图片模块在内容中显示单张图片。

• 要编辑图像模块的默认内容 ：
  
  1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  2. 导航至模板。
  3. 在布局编辑器中，单击图像模块或添加该模块。
  4. 在 "默认内容"部分的检查器中，单击 "图像"字段中的 "替换"。
  5. 在右侧窗格中，选择要显示的图片。
  6. 在Alt 文本字段中，输入图片的文字说明。
  7. 在尺寸下拉菜单中，选择自动调整或精确宽度和高度。
  8. 在最大尺寸下拉菜单中，选择图像原始尺寸或自定义。
  9. 在图片加载下拉菜单中，选择浏览器默认、懒惰或急切。
  10. 在 "链接（可选）"字段中，输入一个可选的URL，以便在点击图片时引导访客访问。

• 完成图像模块编辑后，单击右上角的 "发布更改 "。

图像网格

您可以使用图像网格模块为内容添加统一的图像网格。

• 编辑图片网格模块的默认内容 ：
  
  1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  2. 导航至模板。
  3. 在布局编辑器中，单击图像网格模块或添加该模块。
  4. 要编辑图像网格模块中的现有图像，请单击检查器中的editIc on编辑 图标。您可以上传或浏览现有图片，还可以编辑链接文本、链接 URL 或悬停信息。
  5. 要删除图像网格模块中的图像，请单击检查器中的deleteIcon 删除 图标。
  6. 要在图像网格模块中添加新图像，请单击检查器中的+ 添加。
  7. 单击展开设置。在设置窗格中，您可以调整悬停功能、点击功能、列和纵横比。

• 完成图像网格模块的编辑后，单击右上角的 "发布更改 "。

图像滑块

您可以使用图片滑块模块在同一模块中自动循环显示多张图片。

• 编辑图像滑块模块的默认内容：
  
  1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  2. 导航至模板。
  3. 在布局编辑器中，单击图像滑块模块或添加该模块。
  4. 要编辑图像滑块模块中的现有图像，请单击检查器中的editIc on编辑 图标。您可以上传或浏览现有图片，并编辑标题或链接 URL。
  5. 要从图像滑块模块中删除图像，请单击检查器中的deleteIcon 删除 图标。
  6. 要在图片滑块模块中添加新图片，请单击检查器中的+ 添加。
  7. 单击展开设置。在设置窗格中，您可以调整幻灯片、移动和导航。

• 完成图像滑块模块的编辑后，单击右上角的 "发布更改 "。

语言切换器

您可以使用语言切换器模块为访问者提供在页面或博客的翻译版本之间切换的方法。

请注意：语言切换器模块不适用于电子邮件模板。

• 编辑语言切换器模块的默认内容：
  
  1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  2. 导航至模板。
  3. 在布局编辑器中，单击语言切换器模块或添加该模块。
  4. 在 "默认内容"部分的检查器中，选择 "向下添加雪佛龙"复选框，以显示语言切换器的雪佛龙。
  5. 单击显示模式下拉菜单，选择以下其中一种：
     
     • Pagelang：每种语言的名称，将以当前页面的语言显示。例如，如果你正在浏览一个有法语翻译的英文版页面，当你点击语言切换器时，你会看到英语和法语作为语言名称。
     • 本地化：每种语言的名称将以该语言显示。例如，如果你正在浏览一个有法语翻译的页面的英文版，当你点击语言切换器时，你会看到英语和法语作为语言名称。
     • 混合语言： 两种语言的组合。例如，如果您正在浏览一个页面的英文版和法文翻译版，当您点击语言切换器时，您将看到英文和法文（Français）作为语言名称。
  6. 点击图标选项下拉菜单，选择无、图标或自定义图标。

• 完成语言切换器模块的编辑后，单击右上角的 "发布更改 "。

请注意：该模块只会出现在有多个已发布翻译的实时页面上。了解有关在 HubSpot 中使用多语言内容的更多信息。

标志

您可以使用徽标模块在内容中显示 品牌套件中的公司徽标。

• 编辑徽标模块的默认内容 ：
  
  1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  2. 导航至模板。
  3. 在布局编辑器中，单击徽标模块或添加模块。
  4. 在 "默认内容"部分的检查器中，单击切换 "覆盖默认徽标 "开关，为使用该模板的内容上传新图片。
  5. 要编辑默认徽标，请单击编辑此域中的默认徽标。
  6. 在图片加载下拉菜单中，选择浏览器默认、懒惰或急切。
  7. 在链接 URL字段中，输入您希望访客在点击徽标图像时访问的URL 文本。这将覆盖品牌工具包中指定的默认值。

• 完成徽标模块编辑后，单击右上角的 "发布更改 "。

徽标网格

您可以使用徽标网格模块，将不同尺寸的多个徽标排列在一致的网格中。

• 编辑徽标网格模块的默认内容：
  
  1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  2. 导航至模板。
  3. 在布局编辑器中，单击徽标网格模块或添加该模块。
  4. 要编辑现有图片，请单击检查器中的editIcon编辑 图标。您可以上传或浏览现有图片，并编辑 alt 文本或图片加载。
  5. 要删除徽标网格模块中的图片，请单击检查器中的deleteIcon 删除 图标。
  6. 要在徽标网格模块中添加新图片，请单击检查器中的+ 添加。

• 完成徽标网格模块的编辑后，单击右上角的 "发布更改 "。

电子邮件正文

电子邮件正文主模块是一个标准的富文本模块，默认包含在每个电子邮件模板中。

• 编辑电子邮件正文模块的默认内容：
  1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  2. 导航至模板。
  3. 在布局编辑器中，单击主电子邮件正文模块。
  4. 在 "默认内容"部分的检查器中，单击expandIcon展开图标 ，编辑电子邮件正文中出现的文本。

• 编辑电子邮件正文模块的样式选项：
  1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  2. 导航至模板。
  3. 在布局编辑器中，单击主电子邮件正文模块。
  4. 在样式选项 部分的检查器中，在文本颜色、背景颜色和边框颜色的文本字段中输入十六进制值 。 您也可以单击 颜色选择器。

• 编辑完电子邮件正文模块后，单击右上角的 "发布更改" 。

菜单

您可以使用菜单模块为内容添加导航。菜单可直接在导航菜单设置中创建和管理。

• 编辑菜单模块的默认内容：
  1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  2. 导航至模板。
  3. 在布局编辑器中，单击菜单模块或添加该模块。
  4. 在默认内容部分的检查器中，单击菜单下拉菜单并选择现有菜单 或单击创建新 菜单 。
  5. 在高级菜单类型 下拉菜单中，选择以下其中一种：
     • 静态 - 始终在菜单中显示顶层页面：在所有页面中保持菜单一致。
     • 按部分动态显示 - 在菜单中显示与正在查看的部分相关的页面：显示与正在查看的顶层菜单项相对应的菜单项。
     • 按页面动态显示 - 在菜单中显示与正在浏览的页面相关的页面： 显示与正在浏览的特定页面相关的菜单项。
     • 面包屑式路径菜单（使用水平流）： 在网站顶部以相对路径水平显示菜单项。
  6. 在最大层级字段中，输入可显示的子菜单项的最大数量。
  7. 在方向下拉菜单中，选择水平或垂直。
  8. 要在将鼠标悬停在父导航上时显示子菜单项，请选择启用飞出复选框。

• 完成菜单模块编辑后，单击右上角的 "发布更改 "。

办公地点信息

办公地点模块包括发送营销电子邮件时必须包含在电子邮件模板中的必要令牌。

• 编辑办公室位置信息模块的默认内容：
  1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  2. 导航至电子邮件模板。
  3. 在布局编辑器中，单击办公室位置信息模块。
  4. 在 "默认内容"部分的检查器中，单击expandIcon 展开图标 ，编辑电子邮件中出现的带有所需标记的文本。

• 编辑办公室位置信息模块的样式选项：
  • 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  • 导航至模板。
  • 在布局编辑器中，单击 "办公室位置信息 "模块。
  • 在样式选项 部分的检查器中，在文本颜色、背景颜色和边框颜色的文本字段中输入十六进制值 。 也可以单击 颜色选择器。