Skip to Content

Add content that will only appear in the HubSpot editor

⚠️ Note that this post hasn't been updated for at least a year and the information may be outdated, proceed with caution! (Last updated: June 1, 2022)

Sometimes you may want to add content that will only appear in the HubSpot blog or page editor. 

For example, I like to add a clickable element to my "background chooser" module or on my "vertical spacer" module (spacing users can add between modules at the page level). In the image below, the purple icons are only visible in the editor and not on the actual page: 

Clickable elements on the HubSpot editor

You can achieve this using HubL or CSS (or both options, for good measure!).

Hide content in the HubSpot content editor using HubL

You can use the request.postDict.inpageEditorUI request variable to detect whether you are in the content editor. Your code would therefore look like this:

And anything within the "Your HTML here" will only appear to users when editing a HubSpot page and not in the preview or live page.

Hide content in the HubSpot content editor using CSS

To do this, I take advantage of the fact that the editor has a CSS body class called hs-inline-edit. Therefore, I can create a class that is hidden everywhere else but appears on pages that have that body class (the editor).

So I can add something like the following to my CSS: 

.editor-only {
  display: none;
}
.hs-inline-edit .editor-only {
  display: block;
}

An element with the class editor-only will always be hidden (the display is "none"), except in the editor (the display is "block" when it's on pages with the class hs-inline-edit).

←  Previous Article

Check if blog post comments are enabled on HubSpot using HubL

Next Article  →

Optimise your HubSpot website speed

Contact

Get help from a HubSpot CMS Expert

  • Custom HubSpot themes and reusable and easy-to-use HubSpot templates and modules
  • Technical support and guidance on the HubSpot CMS