- Help Center
- Academy Content Library A complete library of Academy’s free online video lessons and certification courses.
- Academy Certification Courses A collection of lessons and practical exercises leading to an industry-recognized certification in HubSpot’s tools or strategy.
- Classroom Training Schedule in-person training for a hands-on and personalized HubSpot training experience.
- CRM & Sales Hub Ask and answer questions about using HubSpot’s CRM and Sales Hub.
- Marketing Hub Discuss and learn HubSpot’s marketing tools and inbound strategy.
- Service Hub Learn about Service Hub and share your expertise.
- Meet the Experts Learn how to get the most out of HubSpot from those who know it best.
- Submit Ideas Search, vote for, and submit ideas to improve the HubSpot platform.
- HubSpot Developers Ask questions and connect with users building on HubSpot.
- HubSpot User Groups Meet regularly with your local community of HubSpot users.
Edit page content in a drag and drop area
Last updated: March 29, 2021
|All products and plans|
In the drag and drop page editor, users can rearrange and apply custom background styles to different sections of a page. Drag and drop editing is available in pages created with starter templates, default HubSpot theme templates, or 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. 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 a set of background styles to a section of a page. You can also drag and drop entire rows, columns, or sections to rearrange your page layout.
- Module: an individual blocks of website content. Some modules, like the rich text module, can contain multiple types of content.
- Column: a vertical stack of multiple modules or rows. You can move or rearrange columns on your page, or apply a background color or style to an entire column.
- Row: a horizontal row of modules or columns. You can move or rearrange rows on your page, or apply a background color or style to an entire row.
- 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 over the module and click an icon:
- edit Edit module: edit the contents of your module in the content editor, or in the left panel.
- styles Style module: manage this module's styling in the sidebar editor. Most module styles can be managed on the Style tab, but some style options specific to your theme may be available on the Options tab.
- clonduplicate Clone module: make a copy of this module on your page.
- delete Delete module: remove this module from your page.
Edit rows, columns, or sections
You can edit the 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 arrow icon and select styles Style [row/column/section].
- To customize padding and margin around the row, column, or section, click Alignment and spacing in the sidebar editor.
- To edit a section'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 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].
Add modules to your page
To add a module to your page, click the module in the sidebar editor, then drag the module over your page and drop it into position.
Adjust the layout of your page
You can adjust the width of the elements on your page by clicking and dragging the vertical divider between columns.
Edit page stylesTo edit the colors, fonts, or spacing on your page, click the Design tab in the sidebar editor
- If you're using a starter template, you can modify the fonts, styles, and colors applied to your text, forms, and buttons.
- If you're using a coded template created by a developer with a drag and drop area, you can use the style options included on your template by your developer.
- If you're using a theme template, you can access and edit your theme settings.
Add videos to your HubSpot content
With HubSpot video, you can upload videos to the files tool, then add them to pages, marketing emails, blog...Knowledge Base
Optimize your page and blog content for search engines
Following SEO best practices leads to more organic traffic to your website over time. Learn how to use your...Knowledge Base
Require member registration to access private content
Users with publish permissions can control which contacts can access specific HubSpot-hosted pages, blogs and...Knowledge Base