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. 

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

Copy section HubL

In the page editor, you can copy the HubL markup for a section to reuse the code as needed. This can be helpful when wanting to recreate a drag and drop section in a coded file.

Learn how to copy a section's HubL markup.

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.