When you’re building web pages in HubSpot, hitting layout limits can stall your momentum. Fixed structures may work fine for one campaign, but what about when the next one needs a major visual shift? Rebuilding templates every time isn’t just tedious—it slows down your team and restricts creativity.
That’s where flexible columns change the game.
With flexible columns, you gain dynamic control right inside HubSpot’s editor. No digging into code. No waiting on developers. Just drag, drop, adjust—and publish. You shape the layout based on actual content needs while preserving your site’s brand and structure.
In this guide, you’ll learn what flexible columns are, how they function technically, how marketers and designers use them across different teams, and how to avoid common mistakes. By the end, you’ll know exactly how to integrate them into your HubSpot pages—and how to measure their impact.
What Flexible Columns in HubSpot Are and Why They Matter
Flexible columns are a built-in layout feature in HubSpot CMS that gives you freedom to add, remove, or rearrange modules within a specific section—without changing the core template.
Think of them as containers inside your page template that developers set up once using the Design Manager. Inside these containers, you have full control. You can stack CTAs, swap out form locations, or showcase different image modules, all from the Page Editor.
You’ll encounter flexible columns in two places:
- In Design Tools, developers use HubL tags to define them in coded templates.
- In the Page Editor, you see them as editable areas within templates designed to be flexible.
Unlike static columns, which are locked in place and require back-end changes to adjust, flexible columns are built for change. HubSpot automatically connects the visual page editor to the code, so what you move or add won’t break the underlying template.
How It Works Under the Hood
Here’s how flexible columns actually function behind the scenes:
Developers use a specific HubL tag—{% flexible_column %}—within templates to identify editable areas. When page editors interact with those sections, HubSpot stores changes (like module types and order) as JSON tied to that specific page. That means any adjustments you make apply only to that page—not the template used across your site.
Technically, the workflow looks like this:
- Your developer sets which modules are allowed in the column.
- You, as the content editor, drag those approved modules into the flexible section in Page Editor.
- HubSpot renders the final layout, dynamically responding to what’s in the column and how it’s arranged.
Developers can add boundaries by:
- Restricting module types to prevent off-brand elements.
- Letting marketers reorder or duplicate modules as needed.
- Setting proportional column widths for responsiveness.
The end result? Layouts that automatically adjust across desktop, tablet, and mobile—no additional coding necessary. HubSpot handles the responsive behavior through grid settings and inherited CSS, saving you hours of redesign work.
Main Uses Inside HubSpot
Custom Landing Page Layouts
Campaigns move fast—and your landing pages need to follow. Whether you’re promoting a new product or running an A/B test on side-by-side CTA placements, fixed templates limit your options.
Flexible columns let you reshape your layout every time, right in the editor.
For example, say your marketing team reuses a campaign template, but each promotion demands a slightly different layout. With a flexible block under the hero, one campaign could spotlight testimonials and product images, while another features a countdown timer and email signup—all without touching code.
Editable Blog or Resource Pages
Your blog or resource center evolves as your business grows. Some posts might need a clean layout, while others highlight videos, lead magnets, or downloads. Instead of juggling multiple templates, use a single flexible-content area that adapts to your content.
A content manager might start with a single “Resource Page Template.” Each resource page then becomes a unique build, where they choose which elements—videos, files, quotes, or links—work best for the message. The brand styling stays consistent, but the experience stays fresh.
Internal Team Dashboards or Microsites
Revenue Ops, IT, and HR—internal teams all need portals that adapt to their workflows. Static templates only create friction as priorities shift.
Flexible columns allow these teams to make quick layout updates without waiting for design tickets. Let’s say your RevOps lead maintains a weekly metrics dashboard. One quarter, they highlight form fills. Next, they prioritize lead scoring charts. Flexible columns make it seamless to shift focus without going back to the drawing board.
Common Setup Errors and Wrong Assumptions
Avoid these common missteps that often derail flexible column performance:
- Thinking flexible columns replace templates: They’re not substitutes. Build your global elements—like headers or footers—outside the flexible areas. These columns are meant for specific content zones, not entire page control.
- Not restricting modules: Leaving every module type open invites inconsistency and design drift. Stick to the essentials for each use case—say, just images, text, and buttons for landing pages.
- Editing flexible content directly in Design Tools: You’ll break existing layouts or lose data if you remove content here. Always manage live flexible content in the Page Editor instead.
- Overusing nested flexible sections: Nesting multiple flexible columns inside each other confuses the structure and limits performance. One defined flexible area per section keeps things clean and intuitive.
Step-by-Step Setup or Use Guide
Before you get started, make sure you have HubSpot CMS Hub access with permissions to edit templates and pages. You’ll also need some working knowledge of template structure and module use.
Here’s how to set up flexible columns in HubSpot:
Step 1: Open Design Tools (Marketing > Files and Templates > Design Tools).
Step 2: Choose or create the template where you want to add editable zones.
Step 3: Insert a flexible column using HubL in your code. For example:
{% flexible_column “flexible_section” label=”Flexible Content” %}
Step 4: Save your template once the tag is in place.
Step 5: Go to Page Editor and open a page built on this template. You’ll now see your flexible column area.
Step 6: Drag in modules—text, forms, CTAs, rich media, or approved custom modules—and rejig them until everything fits your message.
Step 7: Use layout dividers in the editor to adjust column size and spacing. HubSpot automatically handles mobile responsiveness.
Step 8: Hit Preview to test spacing on mobile and tablet. Once it looks good, go live.
If you’re using a theme-based site, these flexible columns will show up in the Page Editor the same way—they’re just managed inside your theme’s templates located in the Design Manager.
Measuring Results in HubSpot
To know whether your layout changes are really improving results, you need to align your reporting with flexible column use. The point here isn’t just content flexibility—it’s impact. Are your new layouts generating more conversions, holding attention longer, or improving SEO usability?
Start by checking:
- Page performance reports: Are bounce rates dropping and average view times increasing when layouts improve clarity?
- CTA performance: If you move a CTA higher in the flexible column, does its click rate improve?
- A/B testing tools: Use HubSpot’s native testing features to run layout variations—not just copy changes.
- Form submission metrics: Test different positions or combinations of modules to see which layout drives higher completion rates.
Consider building a dashboard with:
- Source breakdown by layout type
- Conversion rate by module position
- Mobile vs. desktop layout impact
- A custom property tracking template type (static vs. flexible)
This view gives you real insight: is more editorial flexibility leading to better engagement—or is it time to simplify?
Short Example That Ties It Together
Imagine your marketing team needs to churn out a dozen landing pages over the next 60 days. Your branding stays the same, but each campaign offers something unique—webinars, discounts, testimonials, and sign-ups.
Instead of wasting hours revamping templates, you rely on a core template with two flexible content sections: one under the hero image, another above the footer. For Campaign A, your team adds testimonials and a video. For Campaign B, you reuse the same base but swap in a countdown timer and special offer form.
After launch, you check HubSpot’s analytics and find Campaign A’s video placement boosted engagement by 20%. You replicate that layout pattern for other campaigns, and your page performance improves without extra design work.
That’s the power of flexible columns—real-time changes, repeatable strategy, and measurable ROI.
How INSIDEA Helps
Setting up flexible columns might sound simple, but doing it well takes expertise. Too much wiggle room, and you’ll end up with off-brand layouts. Too much structure, and your team loses the very flexibility these tools promise.
INSIDEA helps you find that balance.
Our HubSpot specialists guide your flexible column implementation from start to finish. We help you build templates that protect your brand while giving your team creative freedom where it’s needed most.
Here’s how we support your success:
- HubSpot onboarding tailored to flexible column structure
- Template and asset design for clean, editable layouts
- Ongoing CMS management to keep your design consistent across campaigns
- Automation strategies that sync layout testing with content workflows
- Custom reporting tools to track flexible layout performance
If you’re serious about scaling your HubSpot CMS without sacrificing design consistency, talk to our experts. Or check out INSIDEA’s HubSpot consulting services.
