Become a HubSpot power user — join us for HubSpot Training Day 2017.

How to structure and customize template layouts

Last updated: June 13, 2016

Available For:

Product: HubSpot Marketing
Subscription: Basic, Professional, & Enterprise
In the previous tutorial in this guide you learned how to create a new template layout. This article explains how to modify templates once created.

Structuring your template

By using the Template Builder interface in Design Manager, you can quickly build the layouts of your content, without having to write any HTML. Before you begin editing the structure of a template, you will need to choose the template that you want to edit.
Choose teplate

Add and drag modules

While there are multiple ways to add a module to a layout, the quickest method is to click the Add Row button. Once added, drag the module to wherever you want that module to render in the layout. Dragging modules on top of other modules will either create columns or group the modules.
Drag and drop

Changing width of columns

To change the width of a column mouse between modules and drag horizontally (depicted below). 

HubSpot Help article screenshot

Grouping modules

b

Advanced info

Template Builder uses a 12-column responsive grid that uses a CSS file to automatically calculate the width of each module, across different device sizes. Dragging the width of a column adjusts the HTML class attribute for that module and HubSpot styles the width accordingly. This feature saves designers a ton of time, because they don't need to mess with styling the widths of modules with the exception of setting a max-width on the container. The columns will automatically stack on mobile devices, without your designer having to write a single line of code. You will learn more about where to add CSS, in a later section of this guide.

From a technical standpoint, grouping adds additional wrapping markup to the set of modules. This markup can be given IDs or classes used to target and style that area and its contents.

Read more

Module groups are units of modules that make up different sections of a page. To group modules, select the Group..

Next click the modules you would like to group. Once you have chosen a valid selection to be grouped, click Create Group.

In the example below, several modules are being grouped into a "masthead" for the page. In a later section of this guide, you will see how groups can be made global and used across templates.  

 

Group modules

Split horizontally

Split Horizontally module breaks the module in half, creating two modules.

Split Horizontally

In addition to splitting the module using the the option from gear menu, you can split any module by mousing over the module and pressing Split (depicted below).

Split

Add module below

Add module below inserts an additional module below the selected module and groups them together. Groups are units of modules that are wrapped in an additional markup and can be styled accordingly.  

Add module below

Customizing your template

Once you have structured the general layout of your template, you will want to swap out modules and make other customizations to make the template easier to style.

Edit options

The edit options feature allows you to change the basic configurations of a module. These settings generally include the default content, its label in the content editing screen, and other module preferences. Depending on the type of module, this feature will offer you different options to configure. You will learn more about default content and settings, in a later section of this guide.

Edit options

Edit CSS

Edit CSS makes it easy to customize the HTML markup of of your template. You will learn more about adding classes, IDs, inline styling, and wrapping markup in a later section of this guide.

Edit CSS

Swap module

Swap module lets you choose which type of module you want in that section of the template. You will get a detailed breakdown of the various modules later in this guide.

Swap module

Make module global

Make module global allows you to turn a module into a global module that can be used across other templates. You will learn how to use global content in a later section of this guide.

Make global module

Delete Module

Delete module deletes the module. When you delete a module, a prompt will appear to let you know how many pages or emails use that template. Content in that module will be discarded. Press Discard All to delete the module and discard any content in use within that module. You can click See what you're discarding to see the content on that page.  

If you accidentally discard content that you wish to recover, you can recover your content by rolling back the template's revision to the previous version of the module (Actions > Revision History).

Delete module

Additional template actions

In addition to your module options, there are several important actions that you may need to take at some point, while working on your templates.  Under the Actions menu, you have the following options:

  • Save - the save option saves the draft of the template that you are working on, but does not make any changes live for content published using that template.
  • Move or rename templatethis option allows you to rename your template or move it to a different folder.
  • Clone - Creates a duplicate of your template.  This is a great option to save you time, when you want to create a variation of an existing template.
  • Clone to file - Clone to file creates a separate HTML version of your template. This is helpful if you need more control over your markup than is available through Template Builder, or you want to lean more about how templates are coded. But remember, HTML templates will be less flexible for your internal users.
  • Create a page from template - this option allows you to create a Landing Page directly from Design Manager.
  • View revisionsthis option gives you a revision history to revert your template to a previous published version. Template revisions are independent of page revisions and are made every time you publish a template. Auto-save does not create revisions.
  • Pages using template - see a list of pages using the template.
  • Delete - deletes the template. At this time, there is no way to recover deleted templates.
  • Make basic / Make responsive (email only) - this option toggles email templates to be basic (fixed-width determined by your Content Settings > Email) or responsive (flexible to different device screen sizes). This option is only available for email templates.
Actions

Was this article helpful?

Previous article:

Next article: