Today, HubSpot launched new content editors for the entire COS: blog, landing pages, website, and email. The new editors are available on an opt-in basis for all HubSpot Marketing accounts. The purpose of this redesign it to improve ease-of-use, speed, and functionality. By editing content directly on a live rendering of a page, content creators and developers see a much more accurate representation of how the content will ultimately look. Here are the six things you need to know about the new editors:

Inline editing

To edit a module on your page, post, or email, simply click the area of the content that you want to edit. Rich text modules will automatically render any CSS applied to that section, so there shouldn't be any styling suprises when previewing content. 

Other modules types such as HTML modules or custom modules will be editable within an overlay that displays when you click on that particular module. These types of modules require you to commit changes by clicking Apply or Done, before rendering on the preview.

In addition, if you hover over a module, you can Edit styles of that module or Change layout (if flexible columns are present).

For modules without wrappers (no_wrapper=True) or modules that don't render directly on the page (choice, color, boolean modules, etc.), you can access and edit them in the Edit Modules tab.

Preview tab

The preview tab contains all of your options for previewing content before it's published. Preview in email clients, device viewport sizes, generate a shareable preview URL, and even view personalized content as a specific contact.

In addition to the usability improvements, the new editor significantly upgrades the rendering speed of the content, as you edit. This improvement reduces the amount of time it takes for the content preview to load, especially on content that includes dozens of modules. 

Optimization tab

Every content type now has optimization recommendations. These actionable recommendations help ensure your pages are optimized for SEO and your emails are optimized for engagement. 

Layout mode

When flexible columns are being utlized on a template, you can drag and drop modules within a column by mousing over a module and clicking Change layout.

There is also an additional Add modules to layout tab. This tab allows you to add additional modules to the column on the page. 

Settings

The Settings panel contains all the meta information for the piece of content. Some of this information includes the URL, the Campaign, the meta description, stylesheet attachment, and more.