FREE HubSpot Themes - Inkd / Foodie || 🏆HubSpot Themes Challenge 2021 - 2nd Prize Conference
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:

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

    Written by: Stephanie O'Gay Garcia Last Updated: June 1, 2022

    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-heart

    Get FREE HubSpot Website Themes

    Foodie: Free HubSpot Food Blog Theme

    Inkd: Free HubSpot Tattoo & Barber Shop Theme

    Foodie Theme - Free HubSpot Food Blog Theme
    Inkd Theme - Free HubSpot Tattoo & Barber Shop Theme
    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

    Stephanie O'Gay Garcia

    Hi! 👋 I'm a freelance HubSpot Website 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.