Multistep Component

Multistep Overview

Multistep content is displayed through the Multistep component and consists of four elements to modify:

1. Title
2. Description
3. Icon Image
4. Call to Action Link

Access the Multistep Component

1. Navigate to the Multistep Folder from Content > Agency Name Here > Content modules > Multistep Folder from the Content Tree.

OR

2. Navigate to the _resources folder under the page.
a. If it does not exist, insert a Multistep Folder.

Create a Multistep

The Multistep component is a two-step process. First you create the Multistep component that contains the title, description, and image and then create the links that appear below the description.

Insert the Multistep Links item

1. Right-click on the Multistep Folder item.
2. Insert the Multistep Links option.

3. Name the Multistep title.

4. Modify the Multistep Title if needed.
a. This field is automatically populated from the file name.

5. Enter the Multistep Description.
a. Select the ‘Show editor’ link to add content from the Rich Text Editor.

6. Enter the Multistep Image.
a. Optional field.
b. The image size should be approximately 50x50 px.
c. Ensure an Alternate text is added for the image.
d. Ensure the image has been optimized for quicker load.

7. Select the Save icon (top left in the Content Editor Ribbon).

Insert the Multistep Link item

1. Right-click on the Multistep Links item you just created.

2. Insert the Multistep Link option.

3. Name the Multistep Link title.

4. Enter the Multistep Title.

5. Select the Multistep link.
a. Select the ‘Insert link’ to link to a page in Sitecore.
b. Select ‘Insert media link’ to link to a document file in Sitecore.
c. Select the ‘Insert external link’ to link to an off-site website.

6. For internal Sitecore links, select the page you want to link.
a. There is no need to enter the navigation title in the ‘Description’ field.

7. Select the Insert button.

8. Select the Save icon (top left in the Content Editor Ribbon).

Repeat steps 1-8 to create additional Multistep Links that display on the Multistep component.

Example 1: Multistep with icon

Example 2: Multistep with no icon

Example 3: Multistep with one link

Example 4: Multistep with no links