How to structure and customize template layouts

Last updated: mai 31, 2018

Applies to:

Marketing Hub: Basic, Pro, Enterprise

This article explains how to set up and customize your existing drag and drop template. Learn how to work with modules, groups, and columns as the building blocks of your template. There is also information about how to manage your templates in the finder.

Structuring your template

By using the layout editor in Design Manager, you can quickly build your content layout without having to write any HTML. In Design Manager, click the name of the template you'd like to edit.

Add and drag modules

To add a module to a layout, click + Add at the top of the layout inspector. Search for or select a module, then drag it to the location you want the module to render in the layout. Dragging modules on top of other modules will either create columns or group the modules.

Change column widths

To change the width of a column, hover between the modules and click and drag horizontally.

Group modules

Module groups are units of modules that make up different sections of a page.

To group two modules, click the first module, then press and hold the Ctrl key and select the second module. Repeat this step if you are grouping more than two modules. Next, click the group icon groupModule in the module inspector.

Please note: modules groups cannot cross a section separator or contain a partially selected group of modules.

b

Advanced info

The HubSpot layout editor 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. The columns will automatically stack on mobile devices, without your designer having to write a single line of code. You'll learn more about where to add CSS to the template 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.

Split modules horizontally

Splitting a module breaks the module in half, creating two modules. To split a module, click the module, then click the split module icon splitModule in the module inspector. Alternatively, you can right-click the module in the layout and select Split module.

Add a flexible column

Flexible columns are designed to make content management at the page-level easier for content creators. When a flexible column is added to a HubSpot page template, users will be given the option to add, remove, and re-order modules within the individual page editor. This feature allows designers to create fewer templates, while still allowing marketers the flexibility to customize each page to fit their needs.

To add a flexible column, click + Add at the top of the layout inspector. Locate Flexible Column, then click and drag it into the layout editor.

Please note: flexible columns can only be added to page templates, and cannot be added to email or blog templates.

Customizing your template

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

Edit module options

You can edit a module's options by clicking the module in the layout editor. In the module inspector on the right, you'll see the module's editable options. These options generally include styling, default content, and editor options, and may differ depending on the specific type of module. You can learn more about editing module CSS and default content and settings here.

Edit options

Swap module

After you've added a module to your template, you can choose to swap it out for another module. Right-click the module in the layout editor, then click Swap module. In the dropdown that appears, select the module you'd like to replace the original module with.

Convert to global module

You can convert a module in your template to a global module, which can be used in multiple templates. This is useful when you've styled the module in a certain way, and/or have default content in the module that you'd like to reuse in other templates.

Click the module in the layout editor, then click More in the module inspector and select Convert to global module. In the dialog box that appears, enter the global module name, then click Create.

You'll learn how to use global content in a later section of this guide.

Delete module

To delete a module, click the module in the layout editor, then click the trash icon delete in the module inspector. Alternatively, you can right-click the module and select Delete module.

Additional template actions

In addition to your module options, there are several actions you can take specific to your template. First, click the folder icon at the top-left of the template. Then, right-click the name of the template. In the dropdown that appears, you have the following options:

  • Copy to portals: copy the template to another portal where you are also a user. Templates purchased from the Marketplace will not be able to be copied to other portals.
  • Clone template: this creates an exact duplicate of your template, and is useful when you want to create a variation of an existing template.
  • Clone to HTML: this creates a separate HTML version of your template. This is helpful if you need more control over your markup, or you want to learn more about how templates are coded.
  • View template source: view the template's source code HTML. Unlike the Clone to HTML option, this does not create a separate HTML version of your template.
  • Rename template: edit your template's internal name.
  • Show dependents: view all pages, emails, or blogs currently using the template.
  • Show revision history: view your template's revision history and choose to revert your template to a previously published version.
  • Create email/pagecreate an email or landing page/website page directly from the template.
  • Delete template: this deletes the template. Once deleted, a template will remain available for 30 days, after which it will be permanently deleted.

These options can also be accessed from the File and Actions dropdowns above.

Was this article helpful?

If you still need help you can get answers from the , or to contact support.

Previous article:

Next article: