In this guide, we will show you how to use the “Step Process widget“ on your Elementor website. The Step Process widget allows you to display a step-by-step flow in a visually organized and interactive format. It’s perfect for showcasing processes, workflows, or tutorials with clear guidance for your website visitors. With its responsive design and unique layout variations, the Step Process widget helps simplify complex information and enhances user engagement.
Let’s explore the customization options available in the “Step Process widget” for Elementor below.
Elementor Free Step Process Tutorial Video
Add a Free Step Process to Elementor
Add a Free Step Process Widget to an Elementor Page
Elementor Step Process Widget General Settings
Items Source
This indicates that the content for the widget is currently being manually added or defined as individual items within the widget itself, rather than pulling from a dynamic source.
Items: Manually defined items (currently selected).
Posts: WordPress blog posts.
WooCommerce Products: Products from a WooCommerce store.
ACF Custom Field: Data from an Advanced Custom Fields field.
JSON or CSV: Data from a JSON or CSV file.
Gallery: Images from a WordPress media gallery.
Terms: WordPress taxonomy terms (categories or tags).
Users: WordPress user data.
Menu: Items from a WordPress navigation menu.
RSS: Content from an RSS feed.
Instagram: Content from an Instagram feed.
API Integrations: Data from various API services.
Debug - Show Input Data
This setting is off, meaning it’s not currently displaying raw data for debugging purposes.
Graphic Element Animation
Adds animation effects to the graphic elements of each step/item to make them visually engaging.
Show Title
Displays the title of each step/item, helping users identify each step clearly.
Show Text
Displays the main description or content of each step/item to provide more details.
Show Label
Displays labels such as step numbers, helping indicate the sequence of steps.
Layout
Controls the arrangement of steps (horizontal or vertical) for better visual structure.
Vertical Breakpoint
Sets the screen width at which the layout switches to vertical, optimizing for tablets and mobiles.
Item Image Size
Determines the size of images used for each step/item, balancing clarity and performance.
Enable Remote Connection
Allows this widget to be connected to and controlled by other widgets, or to control other widgets.
Widget Name for Connection
Automatically sets the widget’s name for connection purposes; other widgets use this name to target it.
Sync
Enables the slide run or step progress of this widget to be synchronized with other widgets in the same group.
Sync Group
Assigns the widget to a synchronization group so that all widgets in the same group update together.
Show Debug
Displays debug information showing which remote widgets are connected.
Title
Set the main header text for this step.
Text
Add the detailed description or explanation for this step.
Label
Define the number or short text that appears inside the graphic element.
Graphic Element
Choose the type of visual that represents the step.
Graphic Element Icon
Select the specific icon to display if Icon is chosen.
Graphic Element BG
Set the background color of the icon, label circle, or shape.
Graphic Element BG Hover
Set a different background color for when a user hovers over the graphic element.
Graphic Element Border
Define the style, width, and color of the border around the graphic element.
Icon Color
Set the color of the icon.
Label BG
Set the background color specifically for the label text.
Title Color
Choose the color for the Title text of this step.
Enable Link
Toggle to make the entire step a clickable link.
Link
Enter the URL the user will be taken to when they click this step.
Enable Schema
Enable Schema for the selected widget.
Schema Source
Choose the Schema Source:
From List
Custom
Custom JSON Schema
We can also add a Custom JSON Schema.
Schema Type
Choose the Schema Type:
FAQ (FAQ Page)
List of Person (Person)
How To
Recipe
Courses (Course)
Books (Book)
Items List (ItemList)
Event
Places (Place)
Products (Product)
Tourist Destinations (TouristDestination)
Event Series (EventSeries)
Music Playlist (MusicPlaylist)
Search Results Page (SearchResultsPage)
We are continuously expanding the list of supported Schema types in upcoming releases.
Schema Main Title
Enter a Schema title that describes the action, for example, how to tie your shoes.
Enable Fields Mapping
Enable manual field mapping by roles. Post-related fields are applicable only
When the content is sourced from posts.
Show Schema Debug
Display Schema debug information in the front-end footer.
Elementor Step Process Widget Style Settings
Element Width
Sets the width of the graphic element container.
Element Height
Sets the height of the graphic element container.
Element Size (Inner)
Sets the size of the inner content (icon or number) within the element.
Background Color
Defines the fill color of the graphic element container.
Color
Defines the color of the icon or number inside the container.
Element Typography
Opens controls to set font, size, weight, etc., if the element is a number.
Element Image Fit
Controls how an image scales within the container if the element is an image.
Element Type
Switches between different design types or visual variations for the element.
Radius
Sets the border radius to control the shape of the element.
Border Type
Selects the style of the border
Default
None
Solid
Double
Dotted
Dashed
Groove
Shadow
Opens controls to add a box shadow effect to the graphic element.
Label Background
Sets the fill color behind the label text.
Label Color
Defines the text color of the label.
Label Typography
Access controls to set the font family, size, weight, and other text styling for the label.
Label Padding
Adds internal space around the label text, increasing the size of its background area.
Label Border Type
Select the style of the border around the label
Default
None
Solid
Double
Dotted
Dashed
Groove
Label Radius
Sets the corner rounding for the label’s background area.
Label Shadow
Opens controls to add a box shadow effect to the label.
Label X Position
Defines the horizontal placement of the label relative to the graphic element.
Label Y Position
Defines the vertical placement of the label relative to the graphic element.
X Space
Adjusts the horizontal offset of the label from its chosen X Position.
Y Space
Adjusts the vertical offset of the label from its chosen Y Position.
Minimum Width
Sets a minimum fixed width for the label container.
Minimum Height
Sets a minimum fixed height for the label container.
Content Padding
Adds internal space between the container border/background and the text elements (Title and Description).
Content Align
Sets the horizontal alignment of the text within the content container.
Content Spacer
Defines the vertical space between the Title and the Description text.
Content Background
Sets the fill color for the background of the content area.
Content Radius
Sets the corner rounding for the content container’s background area.
Content Border Type
Selects the style of the border around the content container
Default
None
Solid
Double
Dotted
Dashed
Groove
Content Shadow
Opens controls to add a box shadow effect to the content container.
Title Color
Defines the color of the step’s title text.
Title Typography
Accesses controls to set the font family, size, weight, line height, and other text styling for the title.
Title Spacing
Sets the margin or space after the title, separating it from the description text below.
Title Padding
Adds internal space around the title text, useful if adding a background or border.
Title Background
Sets a fill color specifically behind the title text.
Title Radius
Sets the corner rounding for the title’s background area (if a background is used).
Title Border
Defines the thickness, style, and color of a border around the title text.
Text Color
Defines the color of the step’s description text.
Text Typography
Accesses controls to set the font family, size, weight, line height, and other text styling for the description.
Text Spacing
Sets the margin or space after the description text, separating it from any content that follows.
Step Process Widget Design Examples For Elementor
Here are some live use cases for the Step Process widget.
Step Process with Mixed.
Step Process with Interactive.
Thank you for using the Step Process Widget for Elementor! This interactive and visually engaging tool allows you to showcase processes, workflows, or tutorials in a clear, step-by-step format. Highlight each step with titles, descriptions, icons, or images to guide your visitors efficiently and enhance understanding. Designed for flexibility and responsiveness, it offers full customization options to seamlessly match your website’s style. For support or inspiration, feel free to get in touch or explore our demo.