Edit page content in a drag and drop area

With drag and drop editing, you can easily rearrange your layout and apply custom background styles to different sections of your page. Drag and drop editing is available in pages created with a starter template, a default HubSpot theme template, or a coded template with a drag and drop area.

This article covers how to edit your page content and layout with drag and drop editing features. Learn how to edit your page settings and publish a page on your website.

How drag and drop editing works

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 background styles to an entire area of your page. You can also drag and drop entire rows, columns, or sections to rearrange your page layout.

1. Module: an individual block of website content. You can edit your page's text and images within an individual module.
2. Column: a vertical stack of multiple modules or rows. You can move or rearrange columns on your page, and 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, and 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 your mouse over the module and click the icon for the desired action:

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

Edit rows, columns, or sections

You can edit 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 dropdown arrow and select styles Style [row/column/section].
• On the left panel, click Alignment and spacing to customize padding and margin around the row, column, or section.
• Click Background to expand styling options for the background of this section:
  • None: select this to remove any background colors or images.
  • Color: select this to set a single color as the background. Enter a background color value and transparency percentage.
  • Image: select this to set an image as the background. If an image is in the template by default, click Replace to change the image. 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: select a gradient to set two colors fading together as the background. First select the direction of the gradient. Then enter a hex value and set the transparency for each color.
• 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].

As you're editing your page, your updates are saved automatically. To access previously saved drafts of your unpublished page, hover over Autosaved in the upper left and click revisions.

Add modules to your page

You can drag and drop a new module into place to add another element to your page. This makes it easy to adjust the design of a page to fit your content.

Adjust the layout of your page

As you add and edit modules to your layout, 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 in the Design tab on the left panel.
• If you're using a coded template created by a developer with a drag and drop area, you'll see whatever style options were included on your template by your developer.
• If you're using a theme template, you can access and edit your theme settings.