Edit page content in a drag and drop area

In the drag and drop page editor, users can rearrange and apply custom background styles to different sections of a page. Drag and drop editing is available in pages created with starter templates, default HubSpot theme templates, or  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. These modules may be arranged in horizontal rows or vertical columns. Rows and columns may be grouped into sections of elements.

By grouping these elements together, you can apply a set of background styles to a section of a page. You can also drag and drop entire rows, columns, or sections to rearrange your page layout.

1. Module: an individual blocks of website content. Some modules, like the rich text module, can contain multiple types of content. 
2. Column: a vertical stack of multiple modules or rows. You can move or rearrange columns on your page, or apply a background color or style to an entire column.
3. Row: a horizontal row of modules or columns. You can move or rearrange rows on your page, or apply a background color or style to an entire row.
4. Section: a group of multiple rows or columns. You can move an entire section, or apply a background color or style to an entire section.

Edit module content

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

• edit Edit module: edit the contents of your module in the content editor, or in the left panel. 
• styles Style module: manage this module's styling in the sidebar editor. Most module styles can be managed on the Style tab, but some style options specific to your theme may be available on the Options tab.
• clonduplicate Clone module: make a copy of this module on your page.
• delete Delete module: remove this module from your page.

Edit rows, columns, or sections

You can edit the styles of an entire row, column, or section of elements. For example, you can center your content, apply a background image, or edit spacing around elements on your page.

To edit styles for a row, column, or section:

• In the page editor, hover over the row, column, or section, then click the arrow icon and select styles Style [row/column/section].
• To customize padding and margin around the row, column, or section, click Alignment and spacing in the sidebar editor.
• To edit a section'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 arrow icon, then select duplicate Copy [row/column/section].
• To delete an element from your page, hover over the element and click the arrow icon, then select delete Delete [row/column/section].

Add modules to your page

To add a module to your page, click the module in the sidebar editor, then drag the module over your page and drop it into position. 

Adjust the layout of your page

You can adjust the width of the elements on your page by clicking and dragging the vertical divider between columns.

Edit page styles

• If you're using a starter template, you can modify the fonts, styles, and colors applied to your text, forms, and buttons. 
• If you're using a coded template created by a developer with a drag and drop area, you can use the style options included on your template by your developer.
• If you're using a theme template, you can access and edit your theme settings.