Contact

    Add content that will only appear in the HubSpot editor

    Difficulty Level: Intermediate. This post assumes a solid understanding of HubSpot tools and some technical knowledge. Instructions are detailed and can be applied as they appear on the post.

    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:

    {% if request.postDict.inpageEditorUI %}
      Your HTML here
    {% endif %}

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

    Last Updated: July 13, 2020

    Thank you! I appreciate the feedback 😊

    Sorry to hear that! 🙁

    I'd appreciate if you could take a moment to let me know how I can improve this article.

    hand-drawn-monitor-and-mouse

    Looking for a HubSpot website developer?

    Let me help you with website themes, templates, page setup and custom modules. 

    Get in touch

    Not using HubSpot yet?

    HubSpot offers a free CRM as well as Marketing, Sales and Services tools (with free options too!) and a powerful CMS. Learn more here.

    Note, as a HubSpot affiliate I will get a commission if you click on the link above and end up purchasing an upgraded version. No pressure though!

    Stephanie O'Gay Garcia

    Hi! 👋 I'm a freelance HubSpot Website Designer & Developer based in Toronto (Canada). Give me a shout if you have questions about this post or there's anything I can help you with.