Skip to content
Landing Pages

Use flexible columns in HubSpot pages

Last updated: August 3, 2021

Applies to:

Marketing Hub Professional, Enterprise
CMS Hub Professional, Enterprise
Legacy Marketing Hub Basic

Flexible columns are sections of a page that support adding and rearranging modules in the content editor. In order to be used in the content editor, flexible columns must first be added to a page's template. 

Please noteflexible columns don't support smart content and are not available for blogs. 

Add flexible columns to a template

When a flexible column is added to a page template, modules can be added, removed, or rearranged in that section of the page in the content editorAny modules added to the flexible column on the template will appear in the content editor by default. 

Please note: modules added to flexible columns in a template will only appear on new pages using that template. 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. 

flex columns split

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 a module in the sidebar editor and drag it over the flexible column. 

flexible%20columns%20add%20module

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 layout of the modules:
    • 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. 
    • When you've rearranged the modules, click Exit layout mode.

rearrange-modules-in-a-flexible-column

  • In the top right, click Publish or Update