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.
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.
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.
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.
