Design Manager BETA

Table of contents
Close

Reference

Keyboard Shortcuts

A list of the keyboard commands available in the code editor can be found here. Note: At the bottom of that list there are a number of commands related to find/replace.

There are also a few helpful commands available across the design manager. They are listed below in the format Mac/Windows.

  • Delete/Backspace: Deletes a selected module(s).
  • Command/Control + Click: Select multiple modules in the drag and drop editor.
  • Command/Control + S: Save file.
  • Command/Control + P: Focus on search in the finder.
  • Command/Control + Z: Undo last action.
  • Command/Control + Y: Redo an undo.

General info about content scope

There are many options available for controlling flow and access to content editing. Some of these options are described elsewhere, however since this topic is paramount to effective template design it may be helpful to consolidate the myriad available options here.

  • Prevent editing in content editors: Available for modules inside a template and fields inside a custom module. This option allows you to make an entire module or specific fields in a module uneditable by the user in the editor.
  • Global groups: Global groups are groups of components that are shared throughout a portal. They are not editable at the page level, although there is a link from the page to edit the group in the design manager.
  • Global modules: Global modules are modules that are not editable at the page or template level. In all other ways, they are simply modules.

Components

When editing a drag and drop template, the add tab in the inspector gives you quick access to all of the available components in your portal. This is a diverse library of assets that are divided into the following categories.
NOTE: It may seem that the terms component and module are used interchangeably, but this is not quite accurate. The term component describes both modules and groups. So not every component is a module, but every module is a component.

Default Modules

A number of modules are built into the HubSpot CMS. These may be simple modules such as Image or One Line of Text or they may be complex modules like Image Gallery. The modules themselves are locked and cannot be edited, but you can clone them and modify the copies if you wish.

Custom Modules

If you choose to clone default modules and modify them or build modules from scratch, they will be categorized as custom modules. Custom modules can be small snippets of reusable code or complex combinations of HTML, HubL, CSS, and JS. Documentation on the module framework can be found here.

Structural Modules

There are only two structural modules: Groups and Flexible Columns. Groups are simply a grouped set of components. Flexible columns are a special container type that allows an end user to add new components to a template via the editor.

Global Groups

Global groups are grouped sets of components that are used throughout many pages on a portal. These groups are not editable at the page level since the content is repeated in many places.

Global Modules

Global modules are modules that have been designated as “global” and cannot be edited at the page or template level. This distinction simply allows a designer/developer to have the functionality of a module but for a static set of content.

File types

Files in the CMS are separated into a few different file types. Although there can be some crossover in coded files, for the most part each of these file types are mutually exclusive.

Drag & Drop

Drag and drop templates are the bread and butter of the CMS. There are a few template types available as described in the next section of this reference guide. Drag and drop templates allow developers to quickly build bulletproof layouts on a bootstrap grid. The drag and drop interface is also intuitive enough to allow people with no coding experience to modify or even construct layouts from scratch.

HTML & HubL

HTML & HubL templates can be used in place of drag and drop templates if a developer wants more granular control over markup. These templates do not utilize the inspector pane. Builders will need to refer to HubL documentation to build any CMS functionality into these files.

Stylesheet

A CSS file. HubL is available here. Variables and macros can be especially helpful in this context. Note that HubL used in CSS files is evaluated on page publish, not on page view.

JavaScript

A JavaScript file.

Module

A module is a reusable component with its own HTML & HubL, CSS, and JS. Modules are documented in detail here.

Template types

Blog

Out of the box, blog templates are virtually identical to page templates. The crucial difference is that they are flagged internally and can be selected in content settings as blog templates whereas page templates cannot. Developers are in full control of the functionality they add to these templates.

Email

Email templates are templates that can be used in the email tool. They have the most stringent set of requirements since they need to be viewed in many different email clients and conform to best practices to ensure proper deliverability. Both drag and drop and coded email templates come pre-populated with baseline components.

Page

Page templates are the most open ended template type. They can serve as any flavor of web page or landing page. Drag and drop page templates are not pre-populated with any components. Coded page templates come pre-populated with sparse boilerplate markup including suggested HubL tags for meta info, title, and required header/footer includes.

System Pages

Like blog pages, system page templates are flagged internally for their specific purpose. Error pages can be set in Content Settings as either 404 or 500 pages. Password prompt pages are set via Content Settings as well. Both of these page types are empty by default. The three templates for email subscription templates are flagged for their use in Content Settings and pre-populated with the appropriate components.

Template Partials

Template partials are coded files that can be included in other coded files. This allows developers to take a more modular approach to building complex documents and share markup between multiple files. The syntax for including a partial in an HTML/HUBL file is:


    {% include "/template_partial_filename.html" %}