Flexible columns are sections of your page that can be edited and restructured with new modules in the page editor. Learn how to add a flexible column to your template and edit modules in your flexible column in the page editor.
Please note: flexible columns don't support smart content, and are not available in the blog tool. For even more control over the layout of your pages, work with your web developer to add a drag and drop area to your page template.
Add a flexible column to your template
Add a flexible column to your page template to add, remove, or rearrange modules on your page in the editor. Any modules added to the flexible column on the template will be available in the page editor by default.
- In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
- In the finder, click on your existing template to open it in the editor. To create a new template, click the File dropdown menu and select New file.
- In the inspector on the right, click + Add and search for a flexible column module. Click and drag the module into your template body.
- Click and drag any other modules you want to appear in the flexible column. When you hover a module over the flexible column, you'll see blue rectangles appear where you can drop the content.
- If you want any of the modules in your flexible columns to be side by side across multiple columns, you can right click on your flexible column module and select Split flex column.
Please note: additional modules can be added, edited, or removed from the flexible column on the page level.
Editing flexible columns on your page
Once you've created a new page with a template that contains flexible columns, you can customize the structure and content directly in the editor.
- To add modules to your page, in the Add panel on the left, click a module and drag it into your layout. You'll see the content editor highlighted with a module icon wherever you can drop the new module.
- To delete a module from your flexible column layout, hover over the module and click the trash icon.
Please note: you can only add new modules into areas on the page that utilize flexible columns. If you notice you can't drop a module in a specific area, it's because that area may not be part of the flexible column on your template. For example, it might be part of a global footer.
- To rearrange the layout of the modules, hover over any of the modules in your flexible column and click the flexible column icon.
- You'll see a four-arrow icon on top of the modules that you are able to move. Your mouse cursor will also change to a four-arrow icon.
- Click to drag the modules you wish to move, and drop it into a new available position on your page. You'll see the content editor shaded in purple in the space where the module will be placed.
- When you're done moving your modules, click Exit layout mode.
After you finish editing your modules and content, click Save or Publish to take your changes live.
