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

     

    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: February 4, 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

    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.