<img src="https://ws.zoominfo.com/pixel/Nfk5wflCTIIE2iSoYxah" width="1" height="1" style="display: none;">

A Marketer's Guide to HubSpot's New CMS

by Sammi Gallagher | Oct 1, 2020 11:00:00 AM

hubspot-new-CMSJust a few months ago, HubSpot introduced their new CMS, moving to a theme based structure (more on what that means later) with drag and drop editing capabilities. You read that right marketers! No more worrying about that new page your boss asked you to build that doesn’t follow any of the templates you have created. The new CMS has some kick-a** features that will give you so much more control over creating web pages in HubSpot.

Now, don’t get me wrong, the CMS isn’t all sunshine and rainbows (but there is a lot of sunshine), that’s why I’m breaking down the good, the bad, and the ugly of HubSpot’s latest website management updates. Now, before we get started, I do want to make sure we are clear, I am a marketer by trade and know enough code to be dangerous.

The Structure

First of all, let’s break down the structure of the new CMS. For those of you that have gotten familiar with the template structure, and maybe even loved flexible columns, your world is about to be rocked! The visual editor gives non-technical marketers the ability to create and adjust web pages on the fly without having to submit web page requests to their developers.

Themes

Now at the core of your website design is themes. These themes allow you to set and adjust design elements (colors, fonts, that pesky line height that is just a little too big…) in a single, code-free space. 

The Components

Modules - A module is a block of content, whether it is rich text, an image, or a single line of text, that can be used on multiple pages. Other than the fact that you can now drag and drop them onto a page (even if it’s in a new column), these are still coded the same. 

Rows - A row is a horizontal block of content. This could be a single module that spans the page, like a rich text module, or multiple modules in horizontal alignment.

Columns - A column is a vertical block of content. Again, this could be a single module that spans the page, or multiple elements stacked on top of each other.

Sections - I think of this as an update to the term “module group” (at least as HubSpot is concerned). Think Russian Dolls here. A section is the biggest doll, while the modules inside are the smaller dolls. A section can contain multiple modules, rows, and columns. Sections allow you to add background colors or images, which can now be done in the page editor, not just the template or module code. 

The Visual Editor

The visual editor is just that, visual! Instead of moving objects on a template and having to go back to the web page (or template preview) to see what the changes look like, you can now drag and drop any module on to a page, from the page (or visual) editor directly!

hubspot-visual-editor

The Pro’s

  • Greater flexibility - With some initial help of a developer to set your theme, not so code-savvy marketers can edit and create web pages with little technical knowledge. 
  • Themes - Working on a rebrand, have a new logo, or just need to change an accent color? Now you can update and apply the changes site-wide in a single place, without having to understand code.
  • Apply background colors, images, and gradients to sections on the fly - I don’t know about you, but having to navigate to the template editor, group modules together, and then add in a CSS class or add an in-line style, just to “make the section have a grey background,” was quite annoying. 
  • Adjust padding/margin quickly and easily - Again, no need to go to the template to add some space between modules, you can now do this from the page editor.
  • Make changes without a developer - Use the visual editor to drag and drop new modules on to a page and publish in a matter of minutes. 

The Con’s

  • Let’s start with the obvious - It is a new system to learn. It might be a little cumbersome and time consuming initially, but putting the time in up-front will save you time in the long run!
  • Some technical setup is still required - You will likely still need to enlist the help of a developer to set up your initial theme and custom modules.
  • Navigation and footer - If you were comfortable enough with templates to update your global modules, you no longer have the same flexibility. Global modules are now hard-coded. 
  • If you are on the old template system, there are some bugs - Depending on the templates themselves, there are certain features of the new visual editor that you will not be able to utilize. 
    • You won’t be able to add columns to a page.
    • Dragging and dropping new modules may (or may not) work. Or you may only be able to add them in certain positions on the page.
  • Switching over from templates to a theme is a bit cumbersome - Unfortunately, you’ll need to copy pages over to the new structure manually, you cannot “stage a cloned version” of the page and select a new template. If you have multiple pages using the same general structure, you could clone them to have a starting point. However, you’ll lose the ability to stage a page with the same URL, you’ll have to go back to the old-school manual, unpublish the existing page and publish the new one.

How To Use the Visual Editor

Now let’s do a quick breakdown of the new editor and how to get started using it. First, you will need to set up a theme. For this, you will likely need to enlist the help of a developer. HubSpot provides their Boilerplate theme as a starting point to jump start this process. Once your developer has created and uploaded the theme to HubSpot, it is time to get to work! 

If you need to edit elements of your theme, navigate to the “design” tab in the page editor, then go to “edit theme” in the settings. Here you can update typography, colors, your logo, default button styles, etc. 

hubspot-new-CMS

In the page editor, you are able to drag and drop modules throughout the body of the page. If you’d like to add multiple modules in a row, simply drag the elements next to each other. Once it has been placed on a page, you can adjust the column width by grabbing and dragging the divider line quickly, and easily. You can also update the alignment (top, middle, or bottom) of the elements in the row, and add background colors/images via the section settings.

visual-editor-video

 

From one marketer to another, I may have shed a few unhappy tears for all the things I have learned about templates over the years, but those quickly turned into random outbursts of “this is awesome!” While it is a new system to learn, and there are still some kinks to be worked out, the new CMS offers marketers the flexibility to update and build pages on the fly so you can adjust your strategy to meet the needs of the ever-changing business environment.

inbound-marketers-review-kit