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 are available for landing pages and website pages only. Flexible columns don't support smart content.
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, click the plus icon + on the left sidebar editor pane.
- Drag and drop a new module into your layout. You'll see the content editor highlighted with a module icon wherever you can drop the new module.
Please note: you can only add new modules into areas on the page that utilize flexible columns. If you notice you are not able to drop the module in a particular area, it is because that area may not be part of the flexible column on your template.
- To rearrange the layout of the modules, hover over any of the modules in your flexible column and click the Change layout 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.
You can also edit the layout of your flexible column in the left sidebar pane:
- Click the module icon in the left sidebar pane. You'll see all the modules included in the Flexible column listed in the order they appear on your page.
- To reorder your modules, click the module you want to move drag and drop it into a new position in the module list. The content editor on the right will refresh with your new layout.
- To delete a module from your flexible column layout, hover over the module and click the trash icon
- After you finish editing your modules and content, click Save or Publish to take your changes live.
