When designing HubSpot pages, flexible columns act as editable content zones. They allow you to add, remove, and reorder modules directly in the page editor without touching template code.
Unlike static columns, which lock you into a fixed layout, flexible columns adapt to the number and type of modules you insert.
These columns appear in templates built with HubSpot’s drag-and-drop editor or in custom-coded templates using the HubL flexible_column field. They are commonly used on landing pages, website pages, and resource hubs, where content frequently changes.
Supported across most CMS Hub tiers, flexible columns let marketers add text, images, forms, CTAs, and other modules quickly, avoiding delays from developer intervention. Small layout adjustments become simple, not disruptive.
Give Editors Layout Freedom with Flexible Columns in HubSpot
Flexible columns give content teams layout flexibility while maintaining structure. Once set up, editors can reorder content, add new blocks, or remove unused modules. This eliminates duplicate templates for small design changes.
Where You’ll Find Flexible Columns:
- Drag-and-Drop Templates: Available directly in HubSpot’s visual editor.
- Custom Coded Templates: Use {% flexible_column “flexible-content” %} to designate editable areas.
Flexible columns automatically handle spacing, padding, and responsiveness based on your theme’s CSS. Developers can further restrict module types, lock certain elements, or define default layouts to preserve design consistency across pages.
How Flexible Columns Work Under the Hood
Behind the scenes, flexible columns rely on HubSpot’s dynamic field system in HubL. You declare a flexible_column in a template, and HubSpot dynamically manages module placement without altering the template file.
Workflow Summary:
- Inputs: Master template, available modules, and flexible column declaration.
- Outputs: A live page layout that adapts to module type, count, and order.
- Behavior: Modules added to flexible columns render instantly, with proper spacing and responsiveness determined by CSS rules.
Responsive design is controlled by your theme’s CSS. HubSpot Marketplace themes or custom INSIDEA themes usually include built-in responsiveness, but you can tweak alignment, padding, and module settings in the editor to meet page-specific requirements.
Main Uses Inside HubSpot
Reusable Landing Page Layouts
Marketing teams often reuse templates for multiple campaigns. Static columns require workarounds or template duplication. Flexible columns allow multiple variations without redesigning each page.
Example:
A team adds a two-column testimonial section with video and form modules. Another teammate can swap in different images or CTAs using the same template, ensuring fast iteration while maintaining responsiveness and design consistency.
Multi-Column Feature Sections for Product Pages
Product pages often require modular layouts, such as 3-column grids or single image-text combinations. Flexible columns let you dynamically adjust modules.
Example:
A three-feature module layout can be altered to remove a block and replace it with a testimonial. The column automatically reflows without manual coding.
Dynamic Resource Hub Layouts
Flexible columns simplify content hubs or portals where resource types change regularly.
Example: A team adds webinars, eBooks, and videos to the same template. Rearranging modules or swapping content types is simple and does not require new templates.
Common Setup Errors and Wrong Assumptions
Even with flexible columns, errors can affect performance and design consistency.
- Using Flexible Columns Without Consistent Styling
Result: Misaligned pages and unpredictable mobile behavior.
Fix: Assign consistent CSS classes and spacing rules across modules. - Allowing Too Many Module Types
Result: Editors add incompatible modules, causing layout issues.
Fix: Restrict module types in Design Manager. - Adding Redundant Flexible Columns
Result: Confuses editors and slows page load times.
Fix: Limit pages to one or two flexible column areas. - Skipping Mobile Previews
Result: Modules stack incorrectly on smaller screens.
Fix: Preview pages in desktop and mobile modes, adjusting spacing as needed.
Step-by-Step Setup or Use Guide
- Access Your Design Manager
Navigate to Marketing > Files and Templates > Design Tools. - Create or Open a Template
Choose an existing layout or start a new landing page template. - Insert a Flexible Column
- Code Mode: Add {% flexible_column “flexible-content” %} at the desired section.
- Drag-and-Drop Mode: Select the “Flexible Column” layout option.
- Customize Permissions and Defaults
Set which modules are available to editors and include starter content for visual guidance. - Save and Publish the Template
Publish so it appears in the page editor for use. - Build a New Page
Marketing > Website > Website Pages > Create Page. Select the updated template. - Drag in Modules and Rearrange
Insert images, text blocks, CTAs, forms, or custom modules. Use handles to reorder content. - Preview and Style for Responsiveness
Test layouts in desktop and mobile views. Adjust spacing and alignment before publishing.
Following these steps ensures scalable, reusable layouts that maintain design quality.
Measuring Results in HubSpot
Track flexible column performance to understand the impact on engagement and conversions.
- Track CTA Clicks: Monitor buttons and links inside flexible columns using HubSpot CTA reporting.
- Measure Form Submissions: Review Forms dashboards to compare placement efficiency.
- Evaluate Engagement: Check time on page or scroll depth for flexible layouts.
- Monitor Module-Level Behavior: Use event tracking for custom modules to see interaction trends.
Compare these metrics against static layouts. Over time, identify which setups support engagement and conversions. Tag templates or pages by campaign for easier reporting.
Short Example That Ties It Together
A marketing team creates a case study page with a flexible column labeled “Body Content Area.” One version includes text, testimonials, and an image gallery. Another swaps a testimonial for a short video while keeping the layout consistent.
Sessions on the video version increase by 35%. Flexible columns eliminate the need for template duplication or recoding, enabling faster experimentation and measurable results.
How INSIDEA Helps
Flexible columns are powerful, but structure and governance are critical. INSIDEA works with teams to implement flexible layouts that remain on-brand and scalable.
Our HubSpot experts help with:
- HubSpot Onboarding: Configure templates and workflow logic correctly from the start.
- CMS Management: Keep layouts aligned across multiple brands or teams.
- Automation Support: Trigger workflows when flexible column content changes.
- Custom Reporting: Track metrics tied directly to flexible layouts.
- Theme Setup and Customization: Apply consistent styling sitewide.
- Team Training and Support: Ensure editors maintain layout integrity.
Hire HubSpot experts through INSIDEA for HubSpot consulting services to maximize flexible column efficiency and page performance.
Flexible columns speed page updates, maintain design consistency, and improve responsiveness.
With the right setup, your HubSpot pages remain adaptable, polished, and measurable. Implement them today to streamline page design and empower your content team.
