Last updated: April 15, 2021
Learn how to set up and customize your existing drag and drop template, and work with modules, groups, and columns as the building blocks of your template.
By using the layout editor in the design manager, you can quickly build your content layout without having to write any HTML.
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.
To change the width of a column, hover between the modules and click and drag horizontally.
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 Control/Command 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.
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.
With horizontal spacers, you can center modules and groups on the page, or add blank space on either side of them. To add a horizontal spacer, click + Add at the top of the layout inspector. Locate Horizontal Spacer, then drag and drop it into the template.
To change the size of a horizontal spacer, change the width of the column separating it from other modules. To center a module or group, add horizontal spacers on each side.
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 drag and drop it into the template.
Please note: flexible columns can only be added to page templates, and cannot be added to email or blog templates.
Once you've structured the general layout of your template, you can swap out modules and make other template customizations.
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. Learn more about editing module CSS and default content and settings.
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 menu that appears, select the module to replace the original module with.
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.
To delete a module, click the module in the layout editor, then click the trash can icon delete in the module inspector. Alternatively, you can right-click the module and select Delete module.
In addition to your module options, there are several actions you can take specific to your template.
You can translate content on a HubSpot page into multiple languages. By adding a language switcher module to...
Smart content modules display different versions of your content based on viewer category. For example, you...
CSS (Cascading Style Sheets) are coded files that select elements of your page and control their...