跳到内容
请注意::本文仅为方便您阅读而提供。本文由翻译软件自动翻译,可能未经校对。本文的英文版应被视为官方版本,您可在此找到最新信息。您可以在此处访问。

使用布局编辑器构建和自定义模板

上次更新时间: 2026年4月9日

可与以下任何订阅一起使用,除非另有说明:

使用设计管理器中的布局编辑器来构建和自定义拖放模板。通过安排模块、组和列,可以控制页面内容的结构。这也让内容创建者在页面编辑器中拥有更多控制权。

开始之前

在使用设计管理器中的布局编辑器构建和自定义页面之前,请查看相关要求和注意事项。

需要权限 使用设计管理器中的布局编辑器构建和自定义模板需要设计工具权限

了解限制和注意事项

  • 对模板的更改适用于使用该模板的所有内容。
  • 某些功能(如灵活列)仅适用于页面模板。

构建模板

使用布局编辑器来组织模板中的内容。

  1. 在 HubSpot 帐户中,导航到内容 > 设计管理器
  2. 查找器中单击模板,在布局编辑器中打开该模板

添加和排列模块

模块是模板布局的组成部分。将一个模块拖到另一个模块旁边可以创建列。将一个模块拖到另一个模块的顶部,可将模块分组。

  1. 检查器中,单击+ 添加
  2. 输入文本搜索模块,然后单击模块
  3. 模块拖入布局编辑器

In the design manager, the layout editor is displayed for a template. The user drags a form module on the layout editor from the Add tab in the inspector.

更改列宽

更改列宽:

  1. 布局编辑器中,将鼠标悬停在两个模块之间。
  2. 单击并水平拖动以调整列宽。

In the design manager, the layout editor is displayed for a template. The user hovers between two modules and drags horizontally to adjust the width between them.

分组模块

分组模块可组织模板的各个部分。

分组模块

  1. 布局编辑器中,选择一个模块
  2. 按住Control(Windows) 或Command(Mac) 键,选择其他模块
  3. 检查器中,点击groupModule 模块分组 图标。

In the design manager, the layout editor is displayed for a template. The user selects two modules and then clicks the Group modules icon to group them.

请注意: 模块组不能与部分分隔线交叉,也不能包含部分选定的模块组。

水平分割模块

拆分模块可将模块分成两半,创建两个模块。

分割模块

  1. 布局编辑器中,单击模块

  2. 检查器中,单击splitModule Split module(分割模块)图标。

In the design manager, the layout editor is displayed for a template. The user selects two modules and then clicks the Group modules icon to group them.

居中模块

使用水平间隔条使模块和组在页面上居中,或在模块和组的两侧添加空白空间。

要添加水平间隔条,请

  1. 检查器中单击+ 添加

  2. 在 "搜索 "字段中输入水平间隔器。然后在布局编辑器中将水平间隔模块拖到模板上的位置。

  3. 要更改水平间隔模块的大小,请 更改 将其与其他模块分隔开来 的列的宽度

  4. 要使模块或组居中,可在两侧添加水平间隔模块。

添加灵活栏

灵活栏旨在让内容创建者更轻松地进行页面级内容管理。在 HubSpot 页面模板中添加灵活栏后,用户就可以在单个页面编辑器中选择添加、删除和重新排序模块。这一功能允许设计人员创建更少的模板,同时仍允许营销人员灵活定制每个页面,以满足他们的需求。

  1. 检查器中,单击+ 添加

  2. 在 "搜索 "字段中输入 "灵活栏"。然后在布局编辑器中将灵活栏模块拖到模板上的位置。

请注意
  • 灵活栏只能添加到页面模板中,不能添加到电子邮件或博客模板中。
  • 添加到灵活栏的模块不能有 CSS 类、内联样式或与之相关的包装 HTML。样式选项需要添加到灵活列本身。

自定义模板

构建好模板布局后,就可以更换模块并进行其他模板定制。

编辑模块选项

编辑模块的选项包括样式、默认内容,并可能根据模块的具体类型而有所不同。了解有关编辑模块 CSS 和默认内容及设置的更多信息。

  1. 布局编辑器中,单击模块
  2. 检查器中,自定义模块选项

交换模块

在模板中添加模块后,你可以选择将其替换为另一个模块。

  1. 布局编辑器中,右键单击模块,然后选择 "交换模块"。

  2. 在弹出的窗口中,选择要替换原始模块的模块

In the design manager, the layout editor is displayed for a template. The user right clicks on a module and selects swap module.

转换为全局模块

将模板中的模块转换为全局模块,可在多个模板中使用。当你以某种方式设置模块样式,或模块中的默认内容希望在其他模板中重复使用时,可以使用此功能。

  1. 布局编辑器中,单击模块
  2. 检查器中,单击更多下拉菜单并选择转换为全局模块
  3. 在对话框中输入全局模块名称,然后点击创建

删除模块

  1. 布局编辑器中,单击一个模块

  2. 检查器中,单击delete 垃圾桶图标

在查找器中管理模板

除了模块选项外,您还可以对模板进行一些特定操作。

  1. 查找器中,单击模板名称
  2. 单击 "操作"下拉菜单并选择一个选项
    • 复制到不同账户:将模板复制到你也是用户的另一个账户。从市场上购买的模板无法复制到其他门户。
    • 克隆模板:这将创建一个与您的模板完全相同的副本,在您想创建现有模板的变体时非常有用。
    • 克隆为 HTML:这将为您的拖放模板创建一个单独的 HTML 版本。如果你需要对标记进行更多控制,或者想更多地了解模板是如何编码的,这将很有帮助。
    • 查看模板源代码:查看模板的 HTML源代码。与克隆为 HTML 选项不同的是,它不会为模板创建单独的 HTML 版本。
    • 重命名模板:编辑模板的内部名称。
    • 显示依赖项:查看当前使用模板的所有页面、电子邮件或博客。
    • 显示修订历史:查看模板的修订历史,并选择将模板恢复到之前发布的版本。
    • 创建电子邮件/页面:直接从模板创建电子邮件或页面。
    • 删除模板:删除模板。模板删除后,将保留 30 天,之后将被永久删除。要恢复模板,您需要联系客户支持
这篇文章有帮助吗?
此表单仅供记载反馈。了解如何获取 HubSpot 帮助