Use flexible columns in HubSpot pages

After you add flexible columns to a page template, you can add or rearrange modules in the content editor within those columns.

Flexible columns are not available on blog, email, or system page templates, . Learn more about editing a blog listing page in the content editor. 

Add flexible columns to a template

To use flexible columns in the content editor, you need to add them to a page template first. Any modules you add to a flexible column in the design manager will appear in that column in the content editor.

Please note: modules added to flexible columns in the design manager will only appear on newly created pages.  Modules can be added to existing pages from the content editor. 

• In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
• In the finder, click a template to open it in the layout editor. 
• In the inspector, click the + Add tab.
• Enter flexible column in the search bar, then click the Flexible column module and drag it onto the template. 
• On the + Add tab, click any module you want to add to the flexible column and drag it over the flexible column on the template. 

Edit flexible columns in the content editor

Once you've created a new page with a template that uses flexible columns, you can customize the structure and content of those flexible columns in the content editor.

• In your HubSpot account, navigate to Marketing > Website > Website Pages.
• Hover over a page and click Edit. 
• To add a module to the flexible column in the content editor, click the module in the sidebar editor and drag it over the flexible column. 

Please note: you can only add modules into areas of the page that use flexible columns. 

• To delete a module in a flexible column, hover over the module and click the delete delete icon.
• To rearrange the modules in a flexible column:
  • Hover over any module in a flexible column and click the flexColumn flexible column icon.
  • Click the four arrow icon on top of a module and drag it into position within the flexible column. 
  • To finish rearranging modules, click Exit layout mode.

• In the top right of the content editor, click Publish or Update to take your changes live.