Stay up to date with weekly industry insights

the latest trends in web design, inbound marketing, mobile strategy and more...

What You Need to Know About Flexible Columns in HubSpot

what-you-need-to-know-about-flexible-columns-in-hubspot.jpg

Flexible columns are a feature that developers can use inside of HubSpot Templates to allow content creators who are building HubSpot pages to add, remove, or re-order modules on the fly. This means when you create a page from a template that uses flexible columns, you have the ability to stack modules inside the flexible column areas while editing the page, rather than needing to modify the modules from a template level.

This gives content creators flexibility when building pages to achieve endless layout combinations while also allowing developers to create fewer templates overall.  Let's take a look at how you can add these to your templates. 

Creating Flexible Columns from the template-level

Creating flexible columns for templates is simple. You can create flexible columns that are empty or with "starter content" for those using them to build pages. 

  1. Add a couple of modules to the template to be paired in a group and click the “Group” button.
  2. Select the modules that you want to appear in the flexible column by default and click “Create Group.”
  3. Click the gear icon in the group and select “Make Flexible Column.” Your group will turn yellow and show the "Flexible Column" text.

create-flexible-column.gif

Now the content creator has the ability to easily add modules within the flexible column of the content editor. Let's go forward and take a look at how this is accomplished. 

Using flexible columns from the page-level

Now that we have the flexible columns in place, our content creators can make use of these in our HubSpot Pages by following these steps: 

  1. Select a page that uses a template with flexible columns.
  2. Click the “Plus” icon on the left side to view a list of modules available.
  3. Drag the module in to a highlighted flexible column area on the page.

add-module-to-flexible-column.gif

current Limitations of Flexible Columns

While flexible columns do make life much easier for our content creators, there are few limitations when using them:

  1. They cannot be used inside of Blog Templates.
  2. They cannot be used inside of Email Templates.
  3. Flexible Columns cannot be used inside of another Flexible Column.
  4. Items inside of a Flexible Column will be stacked. You cannot have side by side content (unless you customize using CSS).

Overall, using Flexible Columns in your template opens up a lot of possibilities for content creators while minimizing the number of templates that need to be created. Try adding flexible columns to your next template to see the endless combinations that can be created with modules page-by-page. Have you used Flexible Columns? Let us know below!

About the Author

Derrik Engel
Derrik Engel
As WSOL’s UI Designer, Derrik focuses on user-centered design and front-end development to deliver engaging and usable websites for devices and screens of all sizes. He is passionate about the design process, web performance, and emerging technology, and he also dabbles in .NET development. Derrik is an Umbraco Certified Level 1 & 2 Developer, and he has won several W3 and Communicator Awards, including a Silver W3 Award for the design of HoustonTexans.com.
Find me on: