Personalizing HubSpot Editor

Recently I came across an interesting dilemma regarding HubSpot, that being that HubSpot doesn’t like to import form other servers into their visual editor. Everything works as it should and looks consistent when you post something and view the page or blog post on the front end, but for the poor people on your team who do the blog updates (for example) things are a mess. Granted, you could always upload the stylesheet to HubSpot and solve that little problem. However, in some cases it might be more work to maintain that you’d like. For example, in the case of my problem, when only the blog is in HubSpot and the rest of the website is elsewhere in WordPress.

Who wants to do twice the upkeep? Not moi.

Thankfully, there is a solution that does not require much extra work on the development side. Since HubSpot doesn’t let you disable their visual editor, which would be nice in this instance. You just need to create a stylesheet specifically for targeting the visual editor pages to strip out all the uglies and make things beautiful enough for your team to make posts.

Honestly, it’s the easiest code in the world, and leaves you with a basic template of clicking and editing the header and content for the less technological inclined people in your team. Literally, all you need to do is target the class hs-inline-edit and strip out everything you don’t want your team members to have cluttering up their screen when posting.

That’s it. Like, here is my stylesheet in its entirety.

.hs-inline-edit body {
background: #efefef;
}
.hs-inline-edit #homeHeader,
.hs-inline-edit .blog-sidebar,
.hs-inline-edit #authorData,
.hs-inline-edit .social-sharing-top,
.hs-inline-edit .footer-container-wrapper {
display: none;
}

Which results in a clean editor for my team, voila:

And I just added that to the blog page. Nothing to it.

This post is from the Coding category.

hubspot tutorial

January 10, 2017