How does HubSpot's drag-and-drop editor work?

The drag-and-drop editor allows users to easily assemble web pages without the help of a developer.

The drag-and-drop editor allows users to customize different sections of a page by dragging and dropping. You can use drag-and-drop for pages created with standard templates, certain theme templates and with coded templates. 


Areas where you can use drag-and-drop are made up of different modules. These are blocks that define the content of your website or page. You can arrange these modules in horizontal rows or in vertical columns. These can then be grouped into different sections. 


By creating rows, columns and sections you can style and arrange multiple modules at once. See the image below to learn more about the difference between rows, columns, sections and modules. 

  1. Module - An individual block with website content. 
  2. Row - A row of modules. You can change the styling of an entire row or move the position of the row by drag-and-drop. 
  3. Column - A column can contain multiple modules. You can adjust the styling of a column at once or move its position by dragging and dropping. 
  4. Section - A group of multiple rows and columns on the page. A section takes up the entire width of the page. You can adjust the look of the entire section or move the section by drag-and-drop. 

page title here example with cat picture