COS-Pages-Editor

How to use flexible columns in your pages

Last updated: June 13, 2018

Applies to:

Marketing Hub: Basic, Pro, Enterprise

Flexible columns are sections of your page that can be edited and restructured on the page editor. Learn how to add a flexible column to your template and edit modules in your flexible columns in the page editor.

 Please noteflexible columns are available for landing pages and website pages only. Flexible columns do not support smart content.

Add a flexible column to your template

In order to work with flexible columns on one of your pages, you need to add a flexible column to your template. You can insert other modules into the flexible column, and those modules will be available in the page editor by default. 

  • In your HubSpot Marketing Hub Basic, Professional, or Enterprise account, navigate to Marketing > Files and Templates > Design Tools.
  • In the left sidebar, click on your existing template to open it in the editor. To create a new template, click File 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.
  • Drag and drop a new module you want to add to your layout. You'll see areas in the content editor highlighted with a module icon wherever you can drop the new modules.

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 and drag the modules you wish to move, and drop the modules into place on your page. You'll see the content editor shaded in purple in the space where the module will be placed.
  • When you are done moving the modules, click Exit layout mode in the top-right corner.

move flex column modules

  • You can also edit the layout of your flexible column by clicking the module icon in the left-side menu. You'll see all of the modules in flex columns listed in the order they appear on your page.
  • Click on the name of the module you wish to move, and drag and drop the name of the module above or below. 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.

Was this article helpful?