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. 

Organize your content

In the sidebar editor, you can see an overview of the sections, rows, columns, and modules in your content. From there, you can rename, edit, clone, delete, or hide them: 

• 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 sidebar editor, click the Contents tab. 
• You can control which page elements are visible in the sidebar editor: 
  • To view only the sections of your page, click Collapse all. This will collapse all rows, columns, and modules so only sections are visible in the sidebar editor. 
  • To see all content on your page, click Expand all. This will show all sections, rows, columns, and modules in the sidebar editor. 
  • To view an individual page element or container, click the + plus sign next to its name.
  • To hide an element or container, click the - minus sign next to its name. 
• You can also edit, rename, clone, delete, and hide page elements: 
  • To edit an element, click its name. 
  • To rename an element, click the ellipses three dots next to its name, then select Rename [element]. In the dialog box, enter a name for the element, then click Save. 
  • To clone an element, click the ellipses three dots next to its name, then select Clone. This will create an exact copy of the original element adjacent to it. 
  • To delete an element, click the ellipses three dots next to its name, then select Delete. 
  • To hide a module, click the ellipses three dots next to its name, then select Hide this module. This will hide the module in the page preview, but not in the sidebar editor. To display a hidden module on the page, click the ellipses three dots next to its name, then select Show this module. 

Use sections

In the drag and drop editor, you can create reusable page sections by dragging modules onto a blank section layout. Developers can also create these sections using our developer documentation. Once created, sections can be used on any page that uses the same theme and that supports drag and drop editing. Saved sections that contain smart rules will use these rules when added to a page. 

Please note: no more than 50 reusable sections can be saved from the drag and drop editor at one time. To save a new reusable section, delete an existing reusable section. 

Create a section

You can save a section to make it reusable on other pages using the same theme.

• 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. 

• In the right panel, click the Layouts tab and select a layout for your section. 

• In the content editor, drag a module over the layout and drop it into position. Repeat for each module of your section. 

• Hover over the section and click the downCarat down icon, then select Save section. 

Please note: existing page sections and those created without a layout can also be saved as reusable sections.  

• In the right panel, enter a name and description for your section, then click Save. 

Add or delete a section

• 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. 

• In the right panel, hover over a section and click Select. Sections saved from the drag and drop editor will appear under Saved sections, while those created by developers will appear under Theme sections.  
• Adding a saved section that contains smart rules will apply those rules to the newly added section. These sections will be labeled as Smart. 
• To delete a section, click the + plus icon for adding a section, then hover over the section and click the delete delete icon. In the dialog box, click Delete. 

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.