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.

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.

Changing width of columns

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

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.

Make module global

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).

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 template - this 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 revisions - this 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.

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.