COS Documentation

Search HubSpot Designers Site

Building Website Templates in the COS

Planning

Conceptualize the template

First, take a look at the website and split it into three sections: header, body, and footer.

These areas correspond to sections in the HubSpot Template Builder.

If you are building a "theme" (e.g. several templates for an entire website, as opposed to a single landing page or blog template), then you should browse through several pages to ensure the header/footer elements are consistent across pages.

Identify shared sidebar modules

Next, browse through several pages and take note of which modules appear in the sidebar on ALL the pages. 

The goal of this step is to identify which modules will be shared across all pages used by your template, and which will be editable on a per-page basis

screenshot

Choose a naming convention

To make it easy for the user to identify which assets (templates, images, files, etc...), you should choose a "theme name", and use this in all folders/files created for this design.

For example, if the template is for your about section, you should choose "About" as the theme name.

NOTE: If a custom theme already exists, it is important to distinguish the new theme from the old. In the example above, you could choose "about_v2" as the theme name.

 


Template Editor

Create Master Template

Start by cloning an existing HubSpot template that closely resembles the page you're building. (for a full website, start with an interior page, e.g. Site Pages > 2 Column, not the homepage).

Save the template according to the naming convention you setup in step #1.

Once we have this setup, we'll clone it into other templates (e.g. 2 Column, 3 Column, Full Width, etc...)

Build Global Groups

The next step is to create a "Global Group" for your header/footer, to make these sections re-usable across pages.

NOTE: DO NOT SKIP THIS STEP.

Without global groups, you're cloning all of the individual modules into each template. When you need to make a change, you'll have to edit each of your templates and change a bunch of individual modules.

With global groups, you'll edit the "Header" group and it will change across all pages. Much easier, right?

Build Global Modules

Another important feature is the ability to make any module global. This means anything you create that can be re-used across pages should be made "global" in order to easily re-use it.

For example, if you a have a chunk of HTML (e.g. a custom search module) you can make that module "global" so it can be reused across templates.

If you find yourself about to copy/paste the same HTML more than place, create a global group/module instead.


Customizing Modules

Flexible Containers

If you're building a webpage template, you should include a flexible container in the sidebar.

This allow the person using the template (to build a specific page) to add modules directly to the page.

NOTE: If you're putting the same widget in the flexible container, you're doing it wrong. Any modules that are shared across pages should go in a global group. Flexible containers should be used for one-off modules that only appear on a specific page.

Navigation

You should create a sitemap (in Content Settings > Site Maps) to attach to the navigation module and populate it with items.

If you're creating a blog or landing page template, you should point the navigation to the existing pages (i.e. external URLs), otherwise you'll want to do this as part of the Site Migration walkthrough.


Advanced CSS

screenshot

Create a HubSpot Style

To create a HubSpot Style from scratch:

  1. Navigate to Template Builder

  2. Click New

  3. Choose Code File and Page

  4. Choose a folder to save the file and give the file name that ends with a .css extension (e.g. custom.css)

  5. Add any CSS code to the editor, below the automatically generated code

  6. Click Publish

     

Responsive Design

One of the most important things to focus on when it comes to CSS is responsive design. This means as you resize the window from desktop to tablet to mobile width, the page should adjust accordingly.

In some cases, this means clever tricks like stacking the navigation in the mobile view. We discuss these tricks in the Code Snippets section of this site.

The most important thing to test is that the content is readable across all devices.


Advanced JS

Uploading JS

You can upload JavaScript files into EITHER the File Manager or Template Builder.

We recommend putting custom scripts into Template Builder (so they can be easily edited with revision tracking) and read-only libraries (e.g. jQuery UI, plugins, etc...) into File Manager (where they can't be edited directly).

Referencing JS

To reference the JS in the website, goto Page Settings and add it to Custom Header/Footer HTML.

You can either hotlink directly to existing JS, or get the URL from File Manager or Template Builder.

Using jQuery

HubSpot comes with jQuery pre-baked into the template (view-source for the current version).

You can use the following initialization script:

jQuery(function($){ // Your code goes here });