CMS-General

Create and edit pages with the drag and drop editor (BETA)

Last updated: October 3, 2019

In Beta

Applies to:

Marketing Hub  Professional, Enterprise
HubSpot CMS

Learn how to edit pages with a drag and drop area in the landing pages or website pages tool. To create a page template with a drag and drop area, refer to the designers documentation.

Overview of the drag and drop editor

Each page is composed of modules, which my be grouped into horizontal rows or vertical columns. These modules, rows, or columns may be grouped into sections of elements. Each element of the page has a toolbar editor to edit its position, size, and styling. You can modify edits to your page using the arrow buttons in the upper left, or by using keyboard shortcuts (e.g. Control/Command + Z).

  1. The Section toolbar controls the styling and position of all the modules, columns, and rows grouped within the same area of your page.
  2. The Module toolbar controls the styling, content, and positioning of the module selected.
  3. The Column toolbar controls the styling and position of all modules in the same vertical column of your page. Each page or section may contain multiple columns.
  4. The Row toolbar controls the styling and position of modules on the same horizontal row of your page. Each page or section may contain multiple rows.

overview-of-drag-and-drop-editor

  • To move a module, row, column, or section, click and drag the element you want to move. Then release it on the highlighted blue area to place it in the desired row, column, or section.

reposition%20elements%20in%20drag%20and%20drop%20editor

  • To adjust the width of elements in a column with the same section, click and drag the vertical divider between those modules.

change%20width%20of%20sections

Content

In the Content tab, you can manage your page content, spacing, and layout.

Add modules to your page

  • In the left panel, click the desired module and drag it into position on your layout. You'll see a blue line to indicate where the module will be placed. Keep in mind whether you want to add this module in an existing row, column, or section.

Edit modules

To edit, clone, or delete a module, hover over the module to activate the toolbar.

  • Click the pencil icon to edit the module's content options in the left side panel.
  • Click the paintbrush icon to modify the module's styling and position.
    • In the left panel, manage the module's background color, shape, and border styles. Different module types will have additional options.
  • Click the copy icon to create a copy of this module within the same column.

Edit rows, columns, or sections

To edit, clone, or delete a group of elements on your page, hover over the element you want to edit. Click the dropdown menu and select one of the following:

  • Style: to edit the background color or style for the selected element:
    • Deselect the Use section's default background checkbox.
    • On the Background tab, select a background style and customize the settings. You'll see the content on your page update in the editor as you make your changes.
      • Color: enter a background color value and a transparency percentage.
      • Image: select Upload to add an image from your computer, or click Browse images to select an image from your files.
      • Gradient: select how you want the two gradient colors to fade together on this section of your page. Select the colors and transparency for the page's gradient style.
    • Click the Spacing tab to modify the size and spacing of your section.
      • Enter a maximum width for content in this element on your page.
      • Click the Padding and Margin tabs to modify the spacing around your content.
        • Padding: controls the space surrounding the element on the page.
        • Margin: controls the spacing between your content and the element's border.
  • Clone: create a copy of an element.
    • Clones of sections or columns are added to a new row and section below the original.
    • Clones of rows are added to a new row within the same column and section as the original.
  • Delete: remove a row, column, or section from the layout of your page.

Design

To modify your page's fonts, buttons, and colors:

  • In the top center click the Design tab to open the left panel.
    • Edit the fonts and styles applied to the page body and headings.
    • Modify the fonts, colors, and styles applied to buttons on your page.

Settings

Click the Settings tab to customize your page details:

  • Internal page name: the name of your page for internal reference. This name appears in your page dashboard. 
  • Page title: your page title appears in the browser title bar and in search results.
  • Page URL: customize the URL for your page. Learn how to connect your website domain to HubSpot.
  • Meta description: add a meta description so searchers can see what your page is about from the search results page.
  • Featured image: add a featured image, which renders on previews when your page is shared via social media.

Optimization

Click the Optimizations tab to see recommendations to improve your page content for SEO (search engine optimization). Learn more about SEO best practices, and how these tips impact organic traffic to your site.