Website Pages

Use flexible columns in your pages

Last updated: January 31, 2020

Applies to:

Marketing Hub  Professional, Enterprise
Legacy Marketing Hub Basic
HubSpot CMS

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 noteflexible 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 editorAny 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.

flex columns splitEditing 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.

flex columns add

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.

move flex column modules

You can also edit the layout of your flexible column in the left sidebar pane:

  • Click the module icon integrations 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.

flex column modules sidebar

  • To delete a module from your flexible column layout, hover over the module and click the trash icon delete.
  • After you finish editing your modules and content, click Save or Publish to take your changes live.