Using the inspector and editor
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.
Adding and editing contentIn 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.
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.
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.
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 ⅓.
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.
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.
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.
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.
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.