v2 - mrneurus/hsp2 GitHub Wiki

Video 2: A developer’s tour of the HubSpot CMS design manager and page editor

OK folks, let's talk about the two most important tools in the CMS. The design manager and the editor are the heart and soul of the CMS. These are the tools for generating templates and for building pages from templates.

Let's start with the design manager. The design manager is an IDE, or integrated development environment, where developers create and maintain templates, modules, CSS, and Javascript files. For web developers, this is the most important part of the CMS and the place where you'll spend most of your time.

Let’s briefly walk through the UI of the design manager. On the leftmost side of the design manager, there’s a finder for creating and organizing assets like templates and modules. The finder behaves a lot like a file system in a typical computer OS. You can create new files, clone files, and organize them in folders.

One important aspect of the finder is the “Actions” menu. This menu gives you access to some important file behaviors such as copying between portals, accessing revision history, and finding dependent assets.

To the right of the finder is the main workspace of the design manager. This area is contextual depending on the asset you're editing. If you're working on a drag and drop template, the workspace consists of a drag and drop editor and an inspector for working with individual components. If you're working in a CSS or JS file, this entire area becomes a text editor with syntax highlighting and error reporting. This text editor implements CodeMirror. Check out the resources tab for a link to their keyboard shortcuts documentation.

Also, check out some of our other videos on specific topics like templates and modules to get more in-depth details on using the design manager in these contexts.

Now that you have a basic understanding of the design manager, let's talk about the editor. The editor is where content editors build pages, emails, and blog posts from templates. To be clear, there’s no single editing experience for website pages, emails, and blog posts. Each of these is accessed separately in the main navigation, and the editing UI varies slightly between them. That being said, the same basic relationship between templates and published content exists for each of these, so from a developer’s perspective, it's helpful to reduce this relationship to templates and “the editor.”

The main section of the editor UI for all file types consists of an inline editing area where editors can intuitively flow content into templates. As the template builder, you have a significant degree of control over how editors interact with this editing area. The modules you decide to use and the labels you apply to these modules can help make the editing experience more intuitive. Check out my lesson on templates for more information on this topic.

To the left of this area is a utility bar that gives quick access to preview options, a list of all the modules used in the template, and suggestions for optimizing the page. Depending on the type of file, there are also options for things like testing emails in different email clients and A/B testing.

Above the editing area is a tab-style navigation where editors can access things like settings and publishing schedules. The settings tab is especially important to take note of here. There are many settings in here for things like page metadata and even additional code snippets that you may want to consult with your editors about.

This brings me to my final point: The design manager and editor are optimized for creating templates and publishing pages respectively, but the actual execution of these activities isn't always clearly divided between web developers and marketers. It's up to everyone involved to define roles and assign responsibilities. As the web developer, it's in your best interest to work proactively with your editors to hand off intuitive editing experiences and establish conventions and guidelines for the technical aspects of creating and maintaining pages.