Edit content in the content editor

In the content editor, you can use drag and drop tools to add, edit, and rearrange the content in your blog posts and pages. Drag and drop tools aren't available for some posts and pages. 

Add and edit modules

Modules are individual blocks of website content. Some modules, like rich text modules, can contain multiple types of content.

1. Navigate to your content:

   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
2. Click the name of the page. 
3. In the content editor, click the add Add icon in the left sidebar.
4. Click to expand a module category, then click a module and drag it into position in your content. To search for a module, enter the name of the module in the search field. 
5. To adjust the width of a module, click the vertical divider between columns and drag it into position.
6. To edit a module, click the module in your content. 
7. To add a copy of a module to your content, hover over the module and click the clonduplicate cclone module icon.
8. To remove a module from your content, hover over the module and click the delete delete module icon. 

Use sections

Sections are larger groups made up of different modules. You can create reusable page sections by dragging modules onto a blank section layout. Developers can also create reusable sections using the developer documentation. Once a section is created, it can be used on any page that uses the same theme and supports drag and drop editing

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

Create a section

You can create a section by selecting a layout, then adding modules to it. 

1. Navigate to your content:

   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
2. Click the name of the page. 
3. In the content editor, hover over your content and click + Add section.
4. In the dialog box, click Blank layouts in the menu and click to select a layout.
5. In the content editor, click the add Add icon in the left sidebar. 
6. Click to expand a module category, then click a module and drag it into position within the section. Repeat for each module in the section. 
7. When you've finished adding modules to the section, hover over the section and click the downCarat down icon, then select Save section. 
8. In the dialog box, enter a name and description for your section, then click Save. 

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

Add or delete a section

1. Navigate to your content:

   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
2. Click the name of the page.
3. In the content editor, hover over your content and click + Add section.
4. In the dialog box, click a section. To choose from the saved sections, click Saved sections in the left menu and click a saved section. 

Please note: Adding a saved section that contains smart rules will apply those rules to the newly added section. These sections will be labeled as Smart. 

5. To delete a section from your content, hover over the section and click the delete delete icon. You can also click the siteTreeIcon Contents icon. Then, hover over the section, click the ellipsesIcon ellipses icon, and select Delete.
6. To delete a section from your saved sections, hover over your content and click + Add section. Then click Saved sections in the left menu and click the delete delete icon on the relevant saved section card. In the dialog box, click Delete.

Style content 

In the content editor, you can edit styling options, such as padding and margins, on the Styles tab of the sidebar editor. You can edit styles for modules and sections, as well as rows and columns of content.

Available style options for custom modules and themes are set by the creating developers. Learn more about module and theme style options in our developer documentation. 

1. Navigate to your content:

   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
   • Blog: In your HubSpot account, navigate to Content > Blog.
2. Click the name of your page. 
3. In the content editor, click a module.
4. In the sidebar editor, click the Styles tab. 
5. To hide an element:
   • Click to expand the Visibility section.
   • In the Hide on this breakpoint section, click Hide. By default, this will hide the module on desktop and mobile views. 
   • To show the module on mobile or desktop only, click the mobile mobile or desktop desktop icon at the top of the page. Click to expand the Visibility section. In the Hide on this breakpoint section, click Show. This will show the module on the selected device type, but hide it otherwise. 

6. To set padding and margins: 
   • Click to expand the Alignment and spacing section, then click Padding or Margin.

• • To add uniform spacing to all sides, select the Apply to all sides checkbox, then enter a value in pixels in any field. 
  • To add different padding to each side, enter values in pixels in the Top, Left, Right, and Bottom fields.

7. To set an element's background, click to expand the Background section, then select an 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. 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.

Please note: the exact options that appear in the Styles tab may vary, especially for custom modules. Learn more about style options for custom modules in our developer documentation. 

Manage 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: 

1. Navigate to your content:

   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
2. Click the name of your page. 
3. In the left sidebar, click the siteTree Contents tab. 
4. 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. 

5. To edit, rename, clone, delete, and hide page elements: 
   • To edit an element, click its name. 
   • To rename an element, click the ellipses ellipses icon 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 ellipses icon next to its name, then select Clone. This will create an exact copy of the original element next to it. 
   • To delete an element, click the ellipses ellipses icon next to its name, then select Delete. 
   • To hide a module, click the hide hide icon. This will hide the module in the content preview, but not in the sidebar editor. To display a hidden module on the page, click the view dispdisplay icon.