How to Use Default Modules in HubSpot’s Layout Editor

How to Use Default Modules in HubSpot’s Layout Editor

Trying to build fresh HubSpot pages for every new campaign? If your team constantly rewrites similar layouts or relies on developers for simple content changes, you’re wasting precious time.

The truth is, HubSpot already gives you a scalable way to create consistent, on-brand pages—without touching code. Its layout editor comes loaded with default modules that simplify page structuring and speed up your workflow.

These out-of-the-box modules—like buttons, images, forms, and menus—are ready to use. But many teams don’t take full advantage of what’s included because the setup isn’t always intuitive. If you’ve ever found yourself scanning documentation or tweaking CSS to make modules work, you’re likely overlooking the power baked into HubSpot’s editor.

This guide walks you through how to find and use HubSpot’s default modules effectively. You’ll learn what they are, where to find them, how to customize them without code, and how to track their ROI. You’ll also see how INSIDEA equips teams with scalable CMS setups built on HubSpot’s native tools.

 

An Overview of HubSpot Standard Modules

Default modules in HubSpot are pre-configured, functional components that snap directly into your templates or pages. They handle layout, formatting, and even HubSpot’s native markup logic (HubL), so you can build with fewer dependencies on development.

You’ll find these modules inside the layout editor, typically under “Common Modules” or “Add 

Module.” Core options include:

  • Rich Text: For formatted paragraphs, headings, and inline links
  • Image: Supports everything from hero banners to thumbnail graphics
  • Button: Creates visually styled CTAs
  • Form: Embeds HubSpot-managed forms directly
  • Menu: Controls site navigation or secondary nav items

Each of these modules includes editable settings inside a right-hand panel. This setup gives marketers a direct way to update content while following the site’s style guidelines—no need to dip into the CSS or request dev time for minor edits.

Default modules live in the Design Tools area under CMS Hub. They integrate with features like global content, HubDB tables, and your theme’s theme.json fields, making them adaptable even in complex site environments.

And if you’re leveraging HubSpot’s AI tools, you can even generate content inside these modules automatically, accelerating iteration across landing pages and blogs.

 

How It Works Under the Hood

The layout editor builds pages using a structure of sections > columns > modules. Default modules land within that last layer—and while they may look simple, they’re backed by real logic and inherit properties from your theme.

Here’s what happens behind the scenes:

  1. You load the template in the Design Manager.
  2. A module is dragged from the sidebar into a designated column.
  3. You populate the module fields (text, images, links, forms).
  4. HubSpot compiles your inputs with the module’s embedded HubL logic.
  5. The page renders the finished HTML and CSS automatically.

Every module accepts certain inputs. The Button module, for instance, needs button text, URL, and styling options. The Form module pulls in your form ID and display type (inline, pop-up, or modal).

Some key behaviors to know:

  • Modules inherit styles from your theme’s CSS and settings.
  • Developers can pre-set default fields in theme.json for efficiency.
  • Modules can be locked to preserve brand rules and layout consistency.

Once you understand these mechanics, it becomes easier to scale content creation without breaking formatting—or involving developers every time.

 

Main Uses Inside HubSpot

Building Consistent Marketing Pages

Running campaigns often means spinning up landing pages fast—and keeping them visually aligned. Default modules make that process repeatable and efficient.

Say you’re creating a promo page for an upcoming webinar. You’d typically use:

  1. A Rich Text module for writing the event intro and details
  2. An Image module for the banner or speaker headshot
  3. A Form module to capture RSVPs and trigger workflows

All three modules inherit your theme’s fonts, spacing, and colors—which means your page looks polished right out of the gate. You can reuse this structure for each new campaign and still track results apples-to-apples using the same module components.

Creating Blog Templates Faster

If you publish blogs regularly, you know the structure tends to stay consistent. Author info, related posts, and “Read More” links don’t need to be built from scratch.

Use the Image, Rich Text, and Button modules together to lay out a full blog listing:

  • Image for the author photo or blog thumbnail
  • Rich Text for the post excerpt
  • Button for linking to the full article

Best part? These modules are responsive by design. So whether someone reads on desktop or mobile, your layout holds up—no custom CSS required.

Building Navigation and Headers

For headers and top nav structures, default modules handle the core work—no hardcoding links every time your menu changes.

A simple header might include:

  • The Logo module to drop in your image asset
  • The Menu module is linked to your primary nav menu from settings
  • A Button module with a prominent CTA like “Demo” or “Contact”

When your navigation structure changes in HubSpot’s menu settings, every template using that Menu module updates instantly. That’s less QA and no hunting through code to fix a link.

Designing Lead Capture Forms on Landing Pages

Forms are among the most frequently used modules—and easily one of the most valuable.

Let’s say your RevOps team creates a “Book a Demo” page. They can drop in a Form module, select “Demo Request,” and be done. When someone fills it out, the form pushes that lead into CRM instantly, triggering follow-up automations.

That speed from concept to launch (without relying on a developer) gives your team agility when it matters most.

 

Common Setup Errors and Wrong Assumptions

Mistake: Editing modules directly in Design Manager.
This changes the master template across your site.
Fix: Always clone the default module before modifying it.

Mistake: Placing modules outside proper columns.
Dragging modules into unsupported areas can break your responsive layout.
Fix: Only place modules within defined sections or columns.

Mistake: Overriding theme styles with inline styling.
Customizing individual modules using inline CSS creates design drift.
Fix: Make global style edits using your theme settings or CSS file.

Mistake: Assuming locked modules are broken.
Your theme might restrict edits to key modules for consistency.
Fix: Review permissions or consult your design team before editing.

 

Step-by-Step Setup or Use Guide

Before diving in, confirm that:

  • You have HubSpot CMS access with Design Tools enabled.
  • Your theme structure supports layout editing (not legacy-only code templates).

Here’s how to insert and customize default modules:

Step 1: Open the layout editor.
Go to Marketing > Website > Pages or Landing Pages. Choose “Edit Template.”

Step 2: Open Design Manager if you’re using coded templates.
Navigate through Design Tools > Files > Your Theme > Templates.

Step 3: Pick a section or column.
Click into the layout where you want the new content.

Step 4: Add a default module.
In the left sidebar, hit “Add,” select “Module,” and drag in what you need.

Step 5: Fill out the module’s fields.
Edit content, links, or images in the module’s right-hand panel.

Step 6: Tweak layout and spacing.
Use the module’s style settings to adjust margins, padding, and alignment here.

Step 7: Preview across devices.
Use the preview tool to check how the module looks on mobile, tablet, and desktop.

Step 8: Save changes and publish.
Click “Publish” or “Update.” HubSpot tracks every version for rollback.

 

Measuring Results in HubSpot

Modules aren’t just design elements—they directly impact performance. Make sure you’re monitoring:

  • Form Analytics: Submission rates on lead forms
  • CTA Reports: Clicks from buttons or links
  • Page Performance Reports: Views, engagement, and time on page
  • Traffic Analytics: Compare the performance of pages built with default modules vs. custom ones

Track micro-interactions, such as navigation clicks, using HubSpot events or tools like Google Analytics. Consistent page formatting (thanks to default modules) gives you cleaner data and easier optimization over time.

Keep an eye on:

  • Module-driven conversion rates
  • Average dwell time on module-heavy pages
  • Drop-off points across your funnel templates

 

Short Example That Ties It Together

Picture this: You’re a CMS admin helping your product team generate leads from a new campaign.

Here’s how you’d handle it using default modules:

  1. Open your theme’s layout editor and create a new landing page.
  2. Drag in a Rich Text module to explain the offer.
  3. Add an Image module for the product visual.
  4. Insert a Form module tied to your “Request Demo” form.
  5. Drop in a Button module pointing to your pricing page.

Total build time? Under an hour. From there, the form submissions sync to your CRM automatically—and your marketing team starts tracking conversions by the next morning. You can reuse this exact structure whenever you want a new funnel, editing only the content.

That’s the power of understanding how default modules keep your CMS fast, flexible, and repeatable.

 

How INSIDEA Helps

If you’re serious about unlocking HubSpot’s full CMS capabilities, INSIDEA gives your team the structure to do it right. Our experts help you use default modules to build operational efficiency—not chaos.

We support:

  • Smart HubSpot onboarding, including CMS structure and permissions setup
  • Full-service HubSpot management, from design guardrails to module updates
  • Workflow and CRM integration tied directly to page components
  • Reporting dashboards tied to modules, not just general page stats

By setting your themes, templates, and modules up strategically from day one, we help you scale confidently—without duct taping your CMS as you grow.

Ready to build flexible, high-performing templates without custom coding from scratch? Learn how INSIDEA supports your team with our in-house experts. Or check out INSIDEA’s HubSpot consulting services.

Jigar Thakker is a HubSpot Certified Expert and CBO at INSIDEA. With over 7 years of expertise in digital marketing and automation, Jigar specializes in optimizing RevOps strategies, helping businesses unlock their full potential. A HubSpot Community Champion, he is proficient in all HubSpot solutions, including Sales, Marketing, Service, CMS, and Operations Hubs. Jigar is dedicated to transforming your RevOps into a revenue-generating powerhouse, leveraging HubSpot’s unique capabilities to boost sales and marketing conversions.

The Award-Winning Team Is Ready.

Are You?

“At INSIDEA, it’s all about putting people first. Our top priority? You. Whether you’re part of our incredible team, a valued customer, or a trusted partner, your satisfaction always comes before anything else. We’re not just focused on meeting expectations; we’re here to exceed them and that’s what we take pride in!”

Pratik Thakker

Founder & CEO

Company-of-the-year

Featured In

Ready to take your marketing to the next level?

Book a demo and discovery call to get a look at:


By clicking next, you agree to receive communications from INSIDEA in accordance with our Privacy Policy.