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

With the drag and drop editor, you can set up and customize the layout and styling of your HubSpot pages without accessing stylesheets or templates. To host your page on a specific domain, connect your domain in HubSpot.

• In your HubSpot account, navigate to Marketing > Landing pages.
• In the upper right, click Create.
• Hover over a template and click Preview.
• To select the template for your page, click Use this template, or click Back to see more options.
• Enter a Page name, then click Create page.

Content

Drag and drop templates are composed of modules, which can be grouped into horizontal rows or vertical columns. These modules, rows, or columns may be grouped into sections of elements. On the Content tab, you can customize the content, spacing, and layout for the elements on your page.

• To add a module to your page, click and drag it from the Add tab into the left panel. You'll see a blue line to indicate where the module will be placed.

• To move a module, row, column, or section, drag the element you want to move and release it where you want it placed.
• To adjust the width of elements in a column within the same section, click and drag the vertical divider between those modules.
• You can undo or redo an action by clicking the arrow icons in the upper left.

• To customize, duplicate, or delete a module, hover over it in the preview on the right.
  • To edit the module's content, click the edit pencil icon. In the left panel, make changes to the content, images, etc. Rich text modules can also be edited within the page preview on the right.
  • To modify the module's styling and position, click the styles paintbrush icon.
  • In the left panel, customize the module's background color, shape, and border styles. The styling options available depend on the module type
  • To create a copy of a module within the same column, click the duplicate copy icon.
  • To delete a module from your page, click the delete trash icon.

• To edit the styles for a group of elements, hover over the row, column, or section, then click the dropdown menu and select Style [element].
  • On the Background tab, select a Background type and customize its settings. The preview will update as you make your changes.
    • 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. Click Upload to add an image from your computer, or click Browse images to select an image from your files.
    • Gradient: select this to set two colors fading together as the background. Set the direction of the gradient. Enter a hex value and set the transparency for each color.
  • Click the Spacing tab to modify the size and spacing of your row, column, or 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.
• To make a copy of an existing element, hover over the element and click the dropdown menu, then select Clone [element].
• To delete an element from your page, hover over the element and click the dropdown menu, then select Delete [element].

As you're editing your page, your updates are saved automatically. If you want to restore a previous revision:

• In the upper left, hover over Autosave.
• In the alert that appears, click revisions to view previously saved versions of your page.
• In the left panel, select the revision you want to restore based on the date and timestamp. You'll see a preview of the revision on the right.
• To restore the selected revision, click Restore this version. To return to your current version instead, click Back.

Design

You can modify the default text formatting and styling of forms and buttons on your page as a whole:

• Click the Design tab to open the left panel.
  
  • In the Typography section, edit the fonts and font styles applied to your page body and headings. All Google fonts are supported.
    • Body text: customize the font, font size, and font colors for the main body of your page:
      • Click the Body text dropdown menu to select the a font.
      • Click the arrow keys to select the font size.
      • Click the color bubble to set a color for your font. To set a custom color, click the Advanced tab and enter a hex value.
    • Headings: customize the font and font color for any text in your modules with a heading tag.
      • Click the Headings dropdown menu to select a font.
      • Click the color bubble to set a font color.
    • Link text: customize the fonts and colors applied to links on your page.
      • Click the Link text dropdown menu to select a font.
      • Click the color bubble to modify your link color.
      • Click the styling buttons or dropdown menu to select the styles applied to your link text, including whether you want your links to be underlined on the page.
      • To customize the way links appear when your visitors interact with your page, you can customize the link color and transparency.
        • Link hover color: customize the color and transparency of link text when a visitor hovers over the links on your page.

• • • • • Active link color: customize the color and transparency of link text by default, before the link is clicked.
        • Visited link color: customize the color and transparency of link text after it's been clicked by a visitor.
  • In the Buttons section, customize the way button modules and form buttons are styled on the page.
    • Button background color: customize the color applied to the background of your buttons.
      • Enter a hex value or click the color bubble to select a color.
      • Enter a percentage value or click the arrow keys to set the transparency of your button background color.
    • Button text color: the color applied to the text of buttons on your page.
      • Enter a hex value or click the color bubble to select the color for the text.
      • Enter a percentage value or click the arrow keys to set the transparency of your button text color.
    • Button corner radius: customize the the shape of your form buttons by entering a value or dragging the slider. A higher value means the buttons on your page will have rounder edges. A value of zero means your buttons will be rectangular.

Settings

Customize your page settings to edit the page details that appear internally and in your visitor's web browser.

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

Preview

To see a preview of your page will appear to your visitors:

• Click Preview in the upper right to open preview mode. You'll see an updated preview of your content on the right.
  • Device type: select a device type to see how your page will appear on desktop, or from different orientations on a mobile or tablet device. 
  • Preview as a specific contact: to test personalization, click the Preview as a specific contact dropdown menu and select a contact from your CRM.
  • Shareable preview: click Open in new window to see a shareable version of your email in a browser window, or click Copy to copy the preview link to your clipboard for sharing.
• To return to the content editor, click Exit preview mode in the upper right.

Publish

To publish your page, click Publish in the upper right.