快速浏览设计管理器
上次更新时间: 二月 13, 2025
HubSpot 的设计管理器结合了设计师构建一流网站所需的所有工具,同时还为营销人员创建内容提供了所需的灵活性。
本文将为您介绍设计管理器的所有功能, 如果您想了解具体的代码示例和参考文档,请查看 HubSpot 的 开发人员文档。
设计管理器中包含的工具
设计管理器将多个重要工具整合到一个功能强大的应用程序中:
- Finder- 用于创建和整理文件、模板、模块和文件夹的空间。
- 版面编辑器- 用于构建页面、博客、电子邮件和系统模板的拖放式编辑器。
- 检查器- 在这里可以编辑布局、模块或组的属性。
- 代码编辑器--集成开发环境 (IDE),用于编辑所有前端代码(CSS、Javascript,甚至您自己的 HTML 模板)。
- 模块编辑器- 可重复使用的自定义模块,您可以设置这些模块,为网站添加高级功能,非技术用户仍可对其进行管理。
- 文件管理器--网站所有资产的文件托管系统。
导航至设计管理器,探索这些工具。 在 HubSpot 帐户中,导航到内容 > 设计管理器。
搜索器
查找器是管理所有文件夹、模板、模块和编码文件的空间。您可以使用查找器的拖放界面,随心所欲地组织文件和文件夹。点击文件可以展开或折叠其中包含的文件。
所有Marketing Hub Professional 和Enterprise 以及Content HubProfessional和Enterprise 账户默认在设计管理器中都有一个@hubspot文件夹。该文件夹包含所有主题和默认模块,包括拖放电子邮件模块。这些主题和模块是只读的,但如果你想自定义它们,可以克隆。了解有关自定义主题和默认模块的更多信息。
单击 "文件 "创建新文件或文件夹,或对当前在查找器中选择的资产进行操作,如删除、克隆或重命名资产。使用 "视图"下的选项管理文件和文件夹的排列。你可以快速折叠所有文件夹或调出最近编辑或删除的资产。
请注意:查找器是上下文式的,也就是说,你的操作总是与所选文件夹和文件相关。要在特定文件夹内创建新文件或文件夹,请单击查找器中的该文件夹。要在所有现有文件夹之外创建新文件或文件夹,请单击 "查看",然后选择 "取消选择所有"。
只有当前选择了文件或文件夹,"操作"菜单才会激活,并提供该类型资产的上下文选项。 您还可以直接
- 克隆:复制文件、文件夹或模板。
- 移动:为资产选择一个新文件夹。
- 重命名:为资产命名。
- 克隆为 HTML:创建一个完全以 HTML 编码的资产副本。
- 复制到
门户: 创建资产副本,并将其发送到您可以访问的另一个 HubSpot 账户。 - 创建页面/电子邮件:使用此模板创建新内容。
- 显示依赖项:查看使用该文件的所有 HubSpot 内容的列表。
- 显示修订历史:查看已保存版本的历史记录。
- 复制代码段:使用此选项可将
自定义编码 模块的代码段快速复制到剪贴板上。该选项只有在右键单击 模块时才会出现。 - 锁定文件夹:锁定文件夹,防止用户在设计管理器中编辑其内容。锁定文件夹中的内容只能在本地开发环境中编辑。
- 删除-删除此文件、文件夹、模板或模块。
标签
当你点击模板、模块或编码文件的名称时,就会在编辑器的标签页中打开你的选择。标签页可以让你轻松处理多项任务,并在各种模板和编码文件之间切换。你可以右键单击任何标签页,显示在编辑器中管理标签页的选项。点击右侧的向下箭头,可以查看打开的标签页的完整列表。
为了给自己在布局编辑器中工作留出更多空间,可以单击折叠图标 first 来折叠查找器。点击文件夹图标 folder 可再次展开查找器。
创建新模板和文件
要创建新模板、模块或编码文件,请单击查找器左上角的文件>新建文件 。您可以选择创建以下任何类型的资产:
- 拖放:通过在直观的拖放界面中添加模块来构建模板。
- HTML 和 HUBL:使用 HTML、CSS 和 Javascript 在代码编辑器中创建的自定义编码模板。
- 样式表:编码的 CSS 文件,可用于为模块和文件设置样式。
- JavaScript:可应用于模块和文件的 Javascript 编码文件。
- 模块:可添加到模板中的自定义编码模块。
布局编辑器
布局编辑器是一个拖放界面,用于设置页面和电子邮件的结构和默认内容。你会看到模块和组的名称,以及应用于每个组件的主体类。你可以在右侧的检查器中单击模块或组进行编辑,或者右键单击组件来访问检查器的功能,从而修改每个模块或组。
在布局编辑器中拖放组件,调整它们在模板上的位置和大小。左上角有撤消和重做按钮,可帮助你快速恢复更改。 你还可以右键单击模块 ,快速分组、克隆或更改模块类型,或使用键盘快捷键实现相同操作。单击右上角的 "预览"按钮可预览您的工作,并在不同尺寸的屏幕上测试您的布局。
所有 HubSpot 模板布局都是响应式的,这意味着它们会根据不同的屏幕尺寸自动调整。该编辑器可将拖放模块编译成简洁的 HTML 标记,并通过一些内置 CSS 实现响应。
检查员
通过检查器可以添加和编辑模板或模块中的组件。它取决于您正在执行的任务和文件类型。例如
- 在拖放编辑器中选择一个组件后,检查器将显示该组件的所有功能和选项。
- 当拖放编辑器中没有选择任何组件时,检查器将显示模板本身的选项。
- 编辑模块时,检查器允许您编辑和添加字段。
根据模板上所选模块的类型,检查器中可能会有不同的可用选项。
对于拖放模板,"+ 添加 "选项卡用于向布局中添加新组件。检查器的 "编辑"选项卡可用于分配自定义 CSS 类、编辑默认内容或附加编码文件。
检查器顶部有一个面包屑导航,帮助你快速浏览当前工作的资产、模块、组和模板。
对于自定义编码的 HTML 和 HUBL 模板和模块,您可以使用检查器添加新字段或链接到编码文件。 您还可以添加过滤标签,标明编码模板和模块的内容类型和功能,使其更易于在查找器中搜索。您还可以找到有关如何在模板中使用这些自定义编码资产的片段和更多详细信息。
代码编辑器
HubSpot 的代码编辑器是一个功能强大的集成开发环境,允许您对CSS 文件、Javascript 文件甚至HTML 模板进行编码。在您编码或编辑样式表时,您可以在各种尺寸的屏幕上实时预览更改后的效果。代码编辑器还利用了许多其他有用的 IDE 功能,如彩色编码类、错误检查、语法高亮、自动保存、自动关闭标签、自动缩进等。
进一步了解如何使用代码编辑器。
请注意:默认情况下,HubSpot 会自动精简设计管理器中的 JavaScript 和 CSS,以删除不必要的空格、换行符和注释。这也适用于通过 CLI 上传到设计管理器的 JavaScript 和 CSS。这意味着您不应该直接向设计管理器添加已经缩减的代码。
了解有关JavaScript 和 CSS 最小化的更多信息。
模块编辑器
虽然HubSpot的拖放模板有许多标准模块可供选择,但设计师有时可能需要更多自定义设计解决方案。模块是可重复使用的自定义编码组件,由HTML和
使用检查器添加字段、附加编码文件或添加标签来组织资产。就像在代码编辑器中一样,你可以在不同尺寸的屏幕上实时预览你的工作。您还可以为模块字段指定默认内容、锁定默认内容或将特定模块字段设为必填字段。
文件管理器
HubSpot 的文件管理器可存储您用于创建内容的所有资产。该工具允许您上传 PDF、图片、视频、音频文件、字体等。您无需离开应用程序即可访问您的创意资产或快速上传新文件。