How the HubSpot drag and drop editor actually works

Most people meet this editor by dragging something, watching it land somewhere unexpected, and then spending twenty minutes trying to undo it.

It behaves predictably once you can see the structure underneath. Here is that structure.

The four layers#

Everything on a HubSpot page is one of four things, nested inside each other.

Section. A full width horizontal band. Background colour and image live here. Most page designs are five to ten stacked sections.

Row. Sits inside a section. Controls vertical spacing and the maximum content width.

Column. Sits inside a row. This is the thing that splits a row into halves or thirds. Columns have widths that must total twelve, which is why dragging one wider shrinks its neighbour.

Module. The actual content: a rich text block, an image, a form, a CTA. Modules only live inside columns.

When a drag fails, it is almost always because you are trying to put one layer inside the wrong one. A module cannot sit directly in a section. A section cannot go inside a column.

Why some areas refuse to accept anything#

This is the single most common source of frustration, and it is not a bug.

A developer builds a template and decides which regions are editable. A region marked as a drag and drop area accepts modules. Everything else is fixed, and no amount of aiming will change that.

How to tell which is which: hover over the area. Editable regions highlight with a border and show an add icon. Fixed regions show nothing at all. If a header or footer will not accept a module, that is by design, and changing it means editing the template rather than the page.

This constraint is a feature. A template where editors can put anything anywhere becomes unmaintainable within a quarter, which is why we ship constrained module systems of fifteen to twenty five blocks rather than a blank canvas.

The moves that actually work#

To add a module. Open the left sidebar, find the module, drag it into a column. A blue line shows where it will land before you release. Watch the line, not the cursor.

To move a module. Hover it, grab the move handle in the top left of its outline, drag. Grabbing the module body selects it for editing instead, which is why it sometimes feels like nothing is draggable.

To make two columns. Drag a module to the left or right edge of an existing module. The blue line turns vertical. That is the signal that you are creating a column rather than stacking.

To reorder sections. Use the outline panel rather than dragging on the canvas. Dragging a whole section by hand on a long page is how layouts get destroyed.

To undo. Ctrl+Z works, and the editor keeps a revision history under the settings menu. Use the revision history rather than trying to drag something back to where it was.

The three mistakes that break layouts#

Nesting too deep. Columns inside columns inside columns technically works and produces a page that collapses unpredictably on mobile. If your structure is more than two levels deep, rebuild the section.

Spacing set on modules instead of rows. Padding added module by module looks fine on the page you are editing and becomes inconsistent across the site. Set vertical spacing on rows, which applies once and stays consistent.

Ignoring the mobile preview until the end. Columns stack vertically on small screens in source order, left to right. A three column layout that reads well on desktop frequently reads backwards on a phone. Check it while you build, not after.

When to stop dragging and ask for a module#

The editor is for assembling pages from existing pieces. It is not for building pieces.

If you find yourself combining four modules and a lot of custom spacing to approximate one thing you need repeatedly, that thing should be a module. A developer builds it once with constrained fields, and then it is one drag with three inputs instead of a small construction project every time.

The signal is repetition. The first time you build a pricing comparison by hand is fine. The third time is a module you should have asked for.

What this means for page speed#

Every module carries its own CSS and JavaScript. A page assembled from twenty modules loads twenty modules' worth of assets, whether or not they are visible.

This is how CMS pages get slow without anyone doing anything obviously wrong. The defence is the same one that works everywhere else: a budget enforced in the build rather than a rule someone has to remember, which is the only version that survives a year.

Frequently asked questions#

Why can't I drag a module into the header or footer?#

Because the developer did not mark that region as a drag and drop area. Headers and footers are usually fixed on purpose so they stay consistent across every page. Changing it requires editing the template.

How do I create two columns in HubSpot?#

Drag a module to the left or right edge of an existing module until the placement line turns vertical, then release. A horizontal line means you are stacking, a vertical one means you are creating a column.

How do I undo a change in the HubSpot editor?#

Ctrl+Z for recent actions, or open the revision history from the settings menu to restore an earlier published version. Revision history is safer than trying to drag a layout back into place.

Can I edit the drag and drop areas myself?#

Only inside the regions the template allows. Changing which regions are editable, or adding a new module type, means editing the template in the design manager rather than the page.