Design Manager BETA

Table of contents

Using the inspector and editor

The inspector and editor give you quick access to all template and component options. In this section we’ll start with template settings and then take a look at adding and editing components. The examples in this page pick up from the Using the finder page if you'd like to follow along.

Editing template settings

The inspector is contextual. In the case of drag and drop templates, the inspector will show options related to the currently selected component in the editor. If no component is selected, it will show options for the template itself.

The screenshot below shows our demo template. We haven’t yet added any components so the editor is empty and the inspector is showing template options.

Specifically, the inspector gives you quick access to linked CSS/JS as well as access to the body tag, head markup, and markup at the very bottom of the document. You can also rename the file from here as well.

HubSpot Help article screenshot

Adding and editing content

In this section, we'll get to know the editor and inspector by walking through the process of adding and editing components. There are many available components, so we’ll only be scratching the surface here. For a more detailed look at available components, please refer to the reference page.

Add a Rich Text module

With the Add column of the inspector selected, scroll down through the list of available components to find the Rich Text module. Drag and drop it into the Body section of the editor.

HubSpot Help article screenshot

Select the new Rich Text module in the editor

Select this new Rich Text module in the editor. The inspector switches to Edit mode and shows options related to this component as shown below. We’ve intentionally cropped this screenshot to the top options. Let’s take a look at those first and then explore the rest.

HubSpot Help article screenshot

In addition to naming this component, you also have the option to split, clone, group, or delete the component. By using the More dropdown, you can also access options specifically related to the type of component you are editing.

Split the Rich Text module

Click the Split module button. The Rich Text module in the editor becomes two, side by side modules.

Hover between the two modules

In the editor, hover between these two modules. Notice that a dotted line appears around each module with a small 6 in the top left corner. This line indicates column width in a 12 column grid. In this case, each of these modules spans 6 columns, meaning they are each half of the total width.

HubSpot Help article screenshot

Drag to change the column width

Click and drag to the right until the columns read 8 and 4 respectively. Now the left Rich Text module takes up ⅔ of the available width and the right Rich Text module takes up ⅓. 

HubSpot Help article screenshot

Switch the left Rich Text module to an Image module

Click the Rich Text module on the left to select it. In the inspector, change this module to an image module by clicking on the component type dropdown and choosing Image. The Rich Text module changes to an Image module.

HubSpot Help article screenshot

Compare the inspector options for each module

In the inspector, scroll down and take a look at the options below the buttons we’ve already discussed. Then, select the Rich Text module in the editor and take a look at its options. The two modules share styling options, but the default content reflects fields that are particular to each module.

HubSpot Help article screenshot

Styling options
The styling options section allows you to add a class to the component’s rendered markup, add an inline style to the markup, or wrap the component in some custom HTML. Hover over the info icon at the top right corner of each of these fields for help with specifics and syntax.

Default content
This is the content that will appear in the editor when a user creates a page using this template. Depending on the template and the user, this content could be suggestive, instructive, or fallback content.

Expand the default content section of the Rich Text module

With the Rich Text module selected in the editor, click the Expand button in the top right corner of the Default content section. The default content section of the inspector now fills the editor to give you more screen real estate. Use the Back to template button to return the editor to full template view.

HubSpot Help article screenshot

Select both modules in the editor for multiple module options

With the editor back in full template view, use the command/control key to select both the Rich Text module and the Image module. The Inspector now shows options for multiple selected components. This allows you to group components or delete multiple components simultaneously. You also have the ability to add CSS classes to multiple components at once.

HubSpot Help article screenshot
Note: We've intentionally left the Editor options section at the bottom of the inspector out of this page of the guide. The Lock module content option is covered in General info about content scope.