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

使用主题

上次更新时间: 2025年9月18日

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

主题是一组模板、模块、全局内容和样式设置,可用于创建网站。你可以在内容编辑器 中使用主题编辑页面和文章,并在博客设置中设置博客模板以使用主题

所有账户都可以访问至少一个默认的 HubSpot 主题。主题也可以从模板市场下载。

请注意: 知识库使用的是修改版主题。了解有关编辑知识库主题设置的更多信息。

了解主题

主题是网站的一组文件,包括

  • 编码模板: 一套网站模板,包括主页、简介页面、登陆页面和博客模板。这些模板由开发人员自定义编码,但内容和布局可以在内容编辑器中自定义。
  • 模块: 一组独特的主题模块,你可以添加到使用该主题的内容中。
  • 全局内容:在多个页面上重复出现的内容,如网站页眉或页脚。你可以直接在拖放页面编辑器中编辑全局内容
  • 主题设置:使用主题的模板的 样式设置,包括字体、间距和颜色。

使用活动主题

你可以设置一个活动主题,将该主题的页面显示为新创建页面的默认选项。设置或更改活动主题不会改变现有内容使用的主题,这需要更换内容的当前模板。其他主题可在HubSpot Template Marketplace 购买。

  1. 导航到内容:
    • 网站页面:在 HubSpot 帐户中,导航到内容 > 网站页面
    • 登陆页面:在 HubSpot 帐户中,导航到内容 > 登陆页面
  2. 单击创建 开始
  3. 在主题选择页面,单击所需主题卡上的 "设置为活动主题"。要预览主题,请单击预览主题
  4. 在模板选择页面,单击所需模板卡上的选择模板。然后使用 HubSpot 的拖放编辑器继续创建页面

更改活动主题

  1. 导航至内容:

    • 网站页面:在 HubSpot 帐户中,导航到内容 > 网站页面
    • 登陆页面:在 HubSpot 帐户中,导航到内容 > 登陆页面
  2. 在右上方,点击创建开始
  3. 要更改网站页面的主题,请单击主题下拉菜单并选择更改主题。然后在所需主题卡上单击 "设置为活动主题"。
website-and-landing-pages-change-theme-1
  1. 要从登陆页面更改主题,请单击左侧菜单中的主题名称。然后在所需主题卡上单击 "设置为活动主题"。
website-and-landing-pages-create-landing-page-change-theme-1
  1. 在主题选择界面,将鼠标悬停在主题上,然后单击预览主题打开主题预览或设置为活动主题。
  2. 然后,你可以从主题中选择一个模板,继续使用 HubSpot 的拖放编辑器创建页面

使用主题创建页面

  1. 导航至内容:

    • 网站页面:网站页面: 在 HubSpot 帐户中,导航到内容 > 网站页面
    • 登陆页面:在 HubSpot 帐户中,导航到内容 > 登陆页面。 着陆页面
  2. 在右上角,点击创建开始
  3. 如果你之前没有选择主题,你将被引导到主题选择界面。在所需主题卡上,单击 "设置为活动主题"。要预览主题,请单击预览主题
  4. 在 "模板选择 "屏幕上,活动主题的模板将显示在 "主题模板 "部分。要查看不属于活动主题的模板,请单击其他模板
  5. 要从主题中选择模板,请单击选择模板使用
  6. 在内容编辑器中,使用拖放编辑器编辑页面内容。
  7. 单击右上角的 "发布 "或 "更新 "即可将更改生效。

在博客中应用主题模板

你可以在博客设置中将博客设置为使用与页面相同的主题。博客文章和博客列表页面模板可单独选择。

  1. 在 HubSpot 帐户中,单击顶部导航栏中的 settings“设置”图标
  2. 在左侧边栏菜单中,导航至内容>博客
  3. 如果有多个博客,请单击 "选择 要修改的博客"下拉菜单并选择一个博客
  4. 单击 "模板 "选项卡。
  5. 在 "博客文章模板 "和 "博客列表页面 "部分,单击 "操作"下拉菜单并选择 "更改模板"。

website-and-landing-pages-change-blog-post-template

  1. 在主题选择屏幕上,单击所需的主题卡,然后单击模板 。在右下角单击 "完成"

请注意:对于可在内容编辑器中编辑的博客列表页面,这些步骤将引导你进入内容编辑器,而不是主题选择界面。

编辑主题设置

您可以在主题设置中自定义主题的样式,包括字体、颜色和间距。在此编辑的样式适用于此主题中包含的所有页面和主题模块。了解有关管理主题设置的更多信息。

管理主题

在设计管理器中,你可以编辑、克隆或复制主题到另一个 HubSpot 账户。还可以删除克隆主题、自定义主题以及创建子主题。

你可以在不影响父主题的情况下编辑子主题的主题设置,但不会创建额外的主题资产副本。要复制父主题的资产,建议克隆该主题。

克隆主题

要在设计管理器中编辑默认主题的编码文件,必须先克隆主题。

请注意: HubSpot Template Marketplace 购买的主题以及Elevate 主题不能克隆。相反,你可以创建一个子主题
  1. 在 HubSpot 帐户中,导航到内容 > 设计管理器
  2. 在查找器中,单击@hubspot文件夹。该文件夹包含所有主题和默认模块,包括拖放电子邮件模块
  3. 单击主题 文件夹
  4. 单击 "文件"下拉菜单并选择 "克隆主题"。
  5. 在对话框中输入主题名称
  6. 要更改克隆主题的文件位置,请单击文件位置字段中的更改。然后选择一个位置。默认情况下,将选择根文件夹。
  7. 完成后,单击创建

创建子主题

在设计管理器中,你可以根据购买的模板市场主题或默认的 HubSpot 主题创建子主题。你可以编辑子主题的主题设置,而不会影响父主题。

开发人员还可以根据自定义主题创建子主题,并使用开发人员文档中的CLI 创建子主题。了解有关使用子主题的更多信息。

  1. 在 HubSpot 帐户中,导航到内容 > 设计管理器。 本地导航设计管理器
  2. 在查找器中,单击@marketplace 文件夹(用于模板市场主题)或@hubspot文件夹(用于默认主题)。
  3. 右键单击主题文件夹,然后选择创建子主题
  4. 在对话框中输入子主题的名称
  5. 要更改子主题的保存位置,请单击文件位置部分中的更改。单击文件夹,然后单击选择
  6. 要自定义主题的 CSS 和 JS 文件名,请单击高级选项,然后在CSSJS字段中输入新的文件名
  7. 要完成此过程,请单击创建子主题。你可以在内容编辑器中编辑子主题的样式

将主题复制到另一个账户

您可以将主题文件夹从一个账户复制到另一个账户。您必须是两个账户中都拥有设计工具权限的用户。

请注意:@hubspot 或 @marketplace 目录中的主题文件夹不能在账户间复制。

将主题复制到一个账户

  1. 在 HubSpot 帐户中,导航到内容 > 设计管理器
  2. 在查找器中,将鼠标悬停在要复制的主题文件夹上,然后右键单击该文件夹并选择 "复制到不同账户"。
  3. 在对话框中,单击 "目标账户"下拉菜单并选择一个账户。然后单击 "复制资产"。复制过程完成后,文件夹就会出现在目标账户中。

    website-and-landing-pages-design-manager-copy-theme-to-different-account

上传主题

Content Hub账户 的用户可以从 Envato 的 ThemeForest Marketplace 购买 HubSpot 主题,然后从主题选择屏幕将其上传到 HubSpot:

  1. 导航到 Envato 的 ThemeForest Marketplace 的HubSpot CMS Hub部分
  2. 从市场购买主题
  3. 您将收到一封电子邮件,其中包含所购主题的购买代码。复制购买代码
  4. 在 HubSpot 帐户中,导航到内容 > 网站页面
  5. 在右上角单击 "创建"。
  6. 在 "选择模板"页面,单击 "主题 "下拉菜单然后单击 "更改主题"。
website-and-landing-pages-change-theme-1
  1. 在 "选择主题"页面,单击页面底部的 "从 ThemeForest安装主题"。
  2. 在对话框中,粘贴电子邮件中的购买代码,然后单击安装主题
  3. 在新标签页中,登录 Envato 的 ThemeForest Marketplace 以完成安装过程。
  4. 登录后,HubSpot 会显示一个横幅。您的主题可能需要几分钟才能可用。

删除主题

克隆的主题和上传的主题可以从设计管理器中删除:

  1. 在 HubSpot 帐户中,导航到内容 > 设计管理器
  2. 查找器中,单击包含主题资产的文件夹
  3. 单击 "文件"下拉菜单并选择 "删除 [文件夹名称]"。
  4. 在对话框中,选择 复选框,确认您已查看过依赖项,然后单击删除此文件夹

购买的主题必须从模板市场卸载:

  1. 在 HubSpot 帐户中,单击顶部导航栏中的“商城”图标 marketplace,然后选择商城下载
  2. 在 "主题 "选项卡上,单击 "操作"下拉菜单,为适用主题选择 "卸载"
  3. 卸载前,您可能需要更改博文或页面的模板。了解有关更改页面或文章模板的更多信息。
  4. 在对话框中单击 "卸载"。
这篇文章有帮助吗?
此表单仅供记载反馈。了解如何获取 HubSpot 帮助