Easily Build Content in HubSpot with the Brand-New Design Manager

Jeffrey Vocell
Jeffrey Vocell

Updated:

Published:

If you've built a custom site page or landing page within HubSpot, it's likely that you have used the design manager tool. As a marketer, it's at the heart of your marketing to create great content that attracts potential buyers and converts them.

Design-Manager.png

Today, we're introducing a public beta of the new design manager. Here are some things you need to know about the new tool, and how you can use it.

A Brand-New Search and Organization Experience

For anyone who uses a Mac computer and is familiar with the computer-based search, the new finder within design manager is very similar.

Simply start typing a file name and design manager will surface relevant recommendations of a template, module, or any coded file such as an HTML, JavaScript, or CSS file.

Design-Manager-2.gif

Beyond the finder, the new folder structure now allows you to drag-and-drop files and is not on pagetype. For designers and developers this means you can create a folder, and easily link an HTML, JavaScript, or CSS file within that folder to easily keep your site files organized.

How you can use this: If you're a marketer and need to create a new template, or just need to find an existing template this is the easiest way to do so. Simply start typing and the finder will surface the relevant template for you and click on the search result to dive-in.

A Modern Layout Editor

With a brand-new layout editor, you can now easily make changes the way you want. For example, simply drag-and-drop a module into your layout from the new right-hand sidebar and design manager will display every available area where a module can be inserted.

New-Design-Manager-Editor.png

A few other notable updates to the new editor include:

  • Visible gridlines when hovering over a module that also shows the CSS span.
  • Using keyboard commands such as command on Mac, or control on PC, then clicking to select and group, or clone, modules in one click.
  • Additional right-click menus are available for modules that offer options like split, clone, swap, delete, and more.

All of this is intended to help you and your design and development team work within HubSpot the way you expect, and achieve your goals of building a page, or an entire website, faster.

How you can use this: The new design manager will clearly show areas where you can drag-and-drop a module and make it more efficient to build a page.

Preview Template Changes in Real-Time

While the old version of design manager had a preview, it did not update when changes were made until you manually hit refresh. The new version will update, in real-time, as you make changes to your template so you can get an exact picture of how your page will look.

How you can use this: The new preview will help you instantly see how your changes will look on a page to make sure the landing page, or website page you are creating matches the exact look and feel you expect.

If you're a designer or developer, there are a slew of additional updates detailed in this post.

The new design manager is currently in beta for all Marketing Hub customers.

 

Join a discussion in the HubSpot Community.

Related Articles

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Outline your marketing strategy in a simple, coherent plan.

Marketing software that helps you drive revenue, save time and resources, and measure and optimize your investments — all on one easy-to-use platform

START FREE OR GET A DEMO