Edit page content in a drag and drop area

In the drag and drop page editor, users can rearrange and apply custom styles to different sections of a page. Drag and drop editing is available for pages created with starter templates, some theme templates, and coded templates with drag and drop areas. 

Understand the drag and drop editor

Drag and drop areas are composed of modules, which are blocks of website content. Modules can be arranged in horizontal rows or vertical columns, which can then be grouped into sections. 

By creating rows, columns, and sections, you can rearrange or apply styling to multiple modules at once. Learn more about customizing styles for drag and drop content.  

1. Module: an individual block of website content. Some modules, like rich text modules, can contain multiple types of content. 
2. Row: a horizontal row of modules. You can apply styling to an entire row or rearrange its position on a page. 
3. Column: a vertical stack of multiple modules. You can apply styling to an entire column or rearrange its position on a page. 
4. Section: a group of multiple rows or columns that covers the full width of the page. You can apply styling to an entire section or rearrange its position on a page. 

Add sections

Developers can create reusable page sections that are available in the drag and drop editor. Learn more about creating reusable sections in our developer documentation. In the drag and drop editor, blank layouts for sections are also available. 

• Navigate to your content:

  • Website Pages: In your HubSpot account, navigate to Marketing > Website > Website Pages.
  • Landing Pages: In your HubSpot account, navigate to Marketing > Landing Pages.
• Hover over a page and click Edit.
• In the content editor, hover between two sections and click the + plus icon. 

• To add a custom section, in the right panel, select the section. 

• To add a blank layout, in the right panel, click the Layouts tab and select a layout. You can then add modules to the blank areas of the layout. 

Edit rows, columns, or sections

• In the page editor, hover over the row, column, or section, then click the edit edit icon. 
• To customize padding and margins around the row, column, or section, click Alignment and spacing in the sidebar editor.
• To edit an area's background, click Background in the sidebar editor and select a styling option:  
  • None: remove any background colors or images.
  • Color: set a single color as the background. Enter a hex value, or click the color picker and select a color, then enter a transparency value. 
  • Image: set an image as the background. To add a new image, click Upload to add an image from your computer, or click Browse images to select an image from your files. 
  • Gradient: set two colors fading together as the background. Click the Direction dropdown menu and select a gradient direction. For each color, enter a hex value, or click the color picker and select a color, then enter a transparency value. 

• To make a copy of an existing element, hover over the element and click the duplicate ccclone icon.
• To remove an element from the page, hover over the element and click the delete delete icon. 

Add and edit modules

• Navigate to your content:

  • Website Pages: In your HubSpot account, navigate to Marketing > Website > Website Pages.
  • Landing Pages: In your HubSpot account, navigate to Marketing > Landing Pages.
• Hover over a page and click Edit.
• In the content editor, click the module in the sidebar editor, then drag it into position on the page. 
• To adjust the width of a module, click the vertical divider between columns and drag it into position.

• To customize content within a module, hover over the module and click an icon:

• • edit Edit module: edit the contents of the module
  • clonduplicate Clone module: make a copy of this module on the page.
  • delete Delete module: remove this module from the page.