How to Customize the Steps Design Element

NOTEThis Design Element is still in development and will be released soon.

This article shows how to use the Steps Design Element and lists all its features.

TABLE OF CONTENTS

• Prerequisites
• What Is the Steps Design Element?
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Insert the Steps Design Element
  • Step 3: Add content
  • Step 4: Customize the Design
  • Step 5: Save
• Steps Features
  • A. Items Tab
  • C. Design Tab
  • D. Advanced Tab
  • E. Custom CSS Tab

Prerequisites

• You must have the ShortPoint SPFx version 8.6.0.0 or later installed in your SharePoint environment.
• You must be a ShortPoint Designer with an active license.

What Is the Steps Design Element?

Looking for ways to showcase your organization's process? The Steps Design Element is perfect for you! Starting from ShortPoint SPFx version 8.6.4.0 or later, you now get to enjoy this new addition to ShortPoint's library of Design Elements. With it, you can display steps or processes in a clear and eye-catching way.

The Steps Design Element lets you customize the content of each step to match your needs. You can add titles, descriptions, links, and even icons.

Plus, you can add as many steps as you want, allowing you to truly capture your company's processes.

You are also in complete control when it comes to its design, allowing you to adjust colors, styles, and layouts to complement your brand identity.

Interactive Tutorial

Click Get Started to learn how to customize the Steps Design Element:

NOTETo learn more about the features you can customize for Steps, check out Steps Features.

Step-by-step Tutorial

Follow the detailed guide below to start using Steps:

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit.

• Close the Toolbox:

• Click the Edit properties icon:

Step 2: Insert the Steps Design Element

• Choose where you want to add Steps and click the plus icon:

• Use the search box to look for Steps and click it:

Step 3: Add content

• Go to the Items tab.
• Click Add New to add a Step:

• Select the cogwheel icon:

• Customize the content according to your preferences.
• Click the back icon:

• Repeat the same steps if you need to add more steps.

NOTEYou can also connect the Steps Design Element to external or internal sources to create dynamic content. To learn how, check out ShortPoint Connect: Basic Tutorial. 

Step 4: Customize the Design

• Go to the Design tab.
• Customize the look of the Steps according to your preferences.
• (Optional) Go to the Advanced tab.
• (Optional) Customize the margin values around the Steps.
• Once satisfied, click the green check mark.

NOTETo learn more about the features you can customize for Steps, check out Steps Features.

Step 5: Save

• Click the eye icon to see your page in real-time:

• Save your changes:

That's it! You can now showcase your organization's processes in a clear and eye-catching way with the Steps Design Element.

Steps Features

Below are the options you can find in the Steps Settings window 

A. Items Tab

The Items tab allows you to add new items and organize the content inside the Steps. It has the following options:

	Add New	allows you to add a new item.
	Drag icon	allows you to rearrange the items.
	Duplicate icon	allows you to copy an item.
	Cogwheel icon	allows you to edit the content of an item. See the table below to see the options you can find inside.
	Trash icon	allows you to remove an item.

COGWHEEL ICON OPTIONS

	Icon	allows you to choose the icon to be shown.
	Title	allows you to add a title.
	Description	allows you to add a description.
	Link URL	allows you to add a clickable link.
	Linking Option	allows you to specify how the link will be opened. You can choose from the following: Same Window - opens the link in the same window. Lightbox - opens the link in a lightbox. New Window - opens the link in a new window. Dialog - opens the link in a dialog box.

C. Design Tab

The Design tab allows you to customize how the Steps will look. It has the following options:

SETTINGS

	Color	allows you to modify the primary color of the Steps. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Roundness	allows you to adjust the roundness value of the Steps.
	Fill Background	when enabled, the background of the icon will be filled.
	Size	allows you to choose the size of the Steps. You can choose from Small, Medium, or Large.

D. Advanced Tab

The Advanced tab allows you to customize the margin values around the Steps Design Element. It has the following options:

	Margin Top	allows you to adjust the top margin value in px, %, or em.
	Margin Right	allows you to adjust the right margin value in px, %, or em.
	Margin Bottom	allows you to adjust the bottom margin value in px, %, or em.
	Margin Left	allows you to adjust the left margin value in px, %, or em.

E. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and JavaScript code to customize the Steps Element. 

NOTECheck out our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.

NOTEThe Connect and Visibility tabs are currently unavailable in Live Mode.

Related articles:

• How to Customize the Abbreviation Design Element
• How to Customize the Lead Design Element
• How to Customize the Small Design Element
• How to Customize the Search Box Design Element
• How to Customize the Image Boxes Design Element
• How to Customize the Icon Boxes Design Element