Building a Website on HubSpot’s Content Management System (CMS)?

The HubSpot CMS has come a long way since I started selling it in 2007.

Specifically, theCMS编辑器为营销人员提供实时修改其网站的文本，图像甚至设计元素的能力，而无需编码技能。回到当天，您必须从锁定布局锁定的五个标准化模板之一中进行选择。

With the latest version of the HubSpot CMS, though, you have ultimate flexibility.

结果，您不再需要经历漫长而详尽的设计和构建过程，也不需要等待网络开发团队来完成您想要做的每一个小更改。CMS的意思是“营销”自由！

使用HubSpot的CMS，甚至还有一个模板市场where you can instantly download pre-made templates, many of them created by agencies that specialize in HubSpot site development.

But, “buyer beware” when purchasing a template orhiring a developer在HubSpot CMS上构建您的网站。

“A good portion of our work is fixing the mistakes of other developers and poorly designed templates,”saysJoe Jerome， 的总统品牌建设者解决方案一家机构专注于帮助其他公司和机构在Hubspot CMS上启动网站。

“许多HubSpot CMS模板仅比RAW HTML，CSS和JAVASCRIPT代码略有改进。当然，它们在市场上看起来很棒，在未经训练的眼睛中，一旦将它们放入HubSpot门户网站，它们甚至可能看起来很容易编辑。但是在表面上，有些模板充满了依赖项，如果您超越了次要编辑，这些模板将破坏整个设计。”加入了杰罗姆。

HubSpot CMS templates are like icebergs and you’re the captain of a ship — you have to worry about what’s below the surface.

Even with a crappy template, you will probably still be able to modify existing text and images. But, once you need to do something like change the layout of a section or add a new content section to a page, you’ll be forced to turn to a developer.

To help you avoid sinking time and money into the wrong template or developer, we asked the品牌建设者解决方案团队分享他们看到的最常见问题以及我们非技术营销人员如何发现他们。

This guide, as well as our previous article on the在Hubspot CMS上构建最具成本效益的方法，，，，will help you ask the right questions early in the process, before it’s too late.

在遇到常见错误之前，这是…

6 Quick Things You Need To Know about HubSpot’s Template System

1. Page and email layouts are built on sets of blocks called模块。For example, think of a banner image at the top of your website as one module, a navigation menu as a module, a text area as another and a form as one more. When the functions of these blocks or the arrangement of these blocks change for a specific page of your site, you need a new template.

2. The设计经理中的模板构建器allows you to customize these web page and email templates with a drag and drop interface. It provides a visual structure for the layout of the actual page. (See image below.)

3.相同的模板可用于多个页面。对于多个页面，使用模板并不意味着这些页面中的每个页面都会看起来相同。实际上，设计良好的模板可以使用相同的模块为您提供截然不同的外观和感觉。精心设计的模板和模块为您提供内置的灵活性和选项，以更改一些简单切换的部分外观。

4.但是，网站可以并且通常使用多个模板。如果您的设计师正确地完成工作和/或购买了一个出色的模板包，则启动和编辑网站（不同页面具有不同的布局）应该非常容易。

5.“编辑模块”选项卡页面编辑器允许您在下面看到的每个部分或“模块”中添加复制，图像和样式。这是您将编辑内容的地方。

对实际页面本身进行了编辑后，可以立即可见更改以进行审查，您可以两次单击更新页面的实时版本。该系统允许您完全避免使用HTML和CSS。实际上，如果您的网站是使用出色的模板正确构建的，则不必自己编辑HTML或CSS。

6.使用CMS，您网站的每个页面都不需要由开发人员自定义。“Some developers won’t tell you this because they’ll want to build the pages for you. But, the beauty of the CMS is that you can populate your content yourself.”

现在您对系统有了基本的了解，让我们仔细研究开发人员常见的错误，这将阻止您完全控制网站。

Be Wary of These 5 Common CMS Web Designer Mistakes

尽管开发人员可以为您的网站实施一个糟糕的模板，但我们询问了杰罗姆（Jerome）的团队最常见的是什么。

这是他们最经常看到的...

1.编码文件作为模板

如果您打开模板编辑器并查看下面的屏幕抓取之类的内容，请跑出尖叫。

如果您在付款后不得不编辑该网站在CMS上建立您的网站，您会很高兴吗？

我不会。

虽然您仍然可以使用像上面的模板在页面编辑器中编辑内容，但类似这些模板可以阻止非开发人员使用拖放模板编辑器对模板进行关键布局更改。

2. One Big Un-Editable Custom Module in the Design Manager

使用HubSpot设计经理，您应该能够快速检查模板的布局，以查看如果没有开发人员，哪些零件可编辑。

例如，在上面的屏幕截图模板中，您可以在网站上看到4个部分：

1. 标头杆（绿色顶部）
2. 柔性柱（棕褐色）
3. A container for the company’s social media links (grey)
4. A footer bar (green bottom)

Here’s an example of a part of a page that was built using that template:

由于您可能已经通过比较这两个图像而收集了，因此这不是这样一个页面的正确模板。怎么了？所有的复杂性都被卡住了第2节，即灵活的列。

在页面编辑器中打开该页面后，您会发现所有内容都在一个丰富的文本字段中，如下所示：

因此，编辑此内容很棘手。在上面的屏幕上，您可以看到每个图像和文本字幕都封装在项目符号列表中。这很难编辑，因为HTML相对复杂，并且CSS直接写入了丰富的文本编辑器，以支持图像和文本的精确布置。

God forbid you need to eliminate an icon or if you add one or delete one by accident. To change or fix anything, you would need to inspect and change the code.

是否想知道像上面的页面应该是什么模板？下面的模板显示了设计经理中更好的纪律。它具有各种映射整个页面布局的自定义模块，因此您甚至可以不查看代码编辑页面。

3. Only Allowing Users to Edit Text And Image Content

品牌建设者解决方案看到的第三个最常见的问题几乎与上述问题相反。

In the template creation process, some developers create an ideal layout for a specific module, and split it up into a series of text and rich-text fields. For pages where the design is complex, this is a good way to make it easy for users to make changes.

But, if not done well, this restricts the user from editing other things like design elements — like colors, for example — of the module.

要确定这是否是问题，请打开编辑器并检查给定模块上的可编辑字段。如果模板具有自定义模块，则可以单独编辑每个模块。他们可能看起来像这样：

这是实际网站的样子：

This is one column from a three-column pricing page. As you can see from the screen grabs, you can ONLY edit words in these sections:

• 列的标题
• 功能列表
• Helper copy
• Price

使用此模板，您无法更改布局或颜色，添加新的文本部分或突出显示理想的定价计划 - 而无需编辑不容易找到的样式表。

想象一下，如果您将品牌的样式指南更改为相同颜色的略有不同的阴影，并且您希望定价页面适合新样式。您需要研究CSS，并学习如何更新整个模板的配色方案。

The right template would allow you to change these things via the Page Editor, like the screenshot below shows:

4.使用一个自定义模块时,应使用相乘iple

在上面的示例中，定价页面所需的HTML和CSS相对复杂，使用带有硬编码字段的模块是有意义的。使用这种方法，有些模板在将不同的内容分解为个人可编辑字段方面做得很好。这使其更加可维护，并确保在更改一个元素时不会丢失其格式。

But, for most pages, it’s better to use customizable modules, so that changes to layout can be made more easily.

以下是一个过度工程模块发生的示例。这是页面的样子。

不幸的是，整个部分都是使用一个自定义模块构建的。下面的屏幕抓取是模块外观的1/4。具体来说，这是控制左侧绿色框的模块的一部分。

使用此模板，您将锁定在网站此部分的4个内容框中。如果要将其转换为3个内容框或5个内容框，则需要挖掘代码。当然，这是一种标准格式，您可能可以使其正常工作，但是如果您需要杀死或添加一个盒子，则需要与开发人员联系。

另一方面,如果template used one module for each section, you would be able to add or subtract a column within the Design Manager.

5.使用自定义模块时应使用丰富的文本模块

制作上面模板的开发人员实际上犯了两个错误。拥有如此多的单行文本字段是不必要的，而且也是限制性的。

编码这些框之一的正确方法是使用rich text field，，，，like below, which would allow you to customize the headers, body text, and buttons to any arrangement.

How to Make Sure You’re Getting a High-Quality Website Template

我会同时承认这是很多技术细节。

诚然，没有一种正确的方法可以在HubSpot CMS上设计模板和模块。

但是，如果您看到了列出的前4件事中的任何一件事，那么您可能会在获取模板和制作它们的人的位置遇到问题。解决这不是一个容易的问题。模板是您网站上页面的基础。如果模板不起作用，您将处于角落……

To avoid potholes like relying on developers for things you should be able to do yourself, try doing this for upcoming projects.

首先，通过要求模板开发人员向您展示他们在视频聊天中完成的工作示例，从而在购买过程的早期发现这些风险。查找上面列出的四个常见错误。

第二（如果您不想与任何人打电话），将一些开发人员的一些免费模板下载到您的HubSpot门户中，并检查它们以确保它们为您提供适当的灵活性。许多模板开发人员免费发布HubSpot Templates in the Marketplace。

通过在雇用开发人员的工作或购买模板之前检查开发人员的工作，您可以确保您能够利用HubSpot CMS提供的网站编辑功能。

Jerome added,“这些不是很好haves’。买家通过不了解这些问题而接受了不可接受的标准。即使您不是编码员，您也必须知道会发生什么，设定标准并找到可以交付您需要的产品和专家。”