The Step Process widget can be used to show your product’s advantages or your company’s progress in very cool and amazing layouts. You can customize your Step Process widget to your Elementor website’s specific needs using its vast range of customization options.You can turn on or off any part of the Step Process widget to make it look exactly the way you want and suit your website needs. It also supports advanced options such as Remote Connection and syncing with other widgets.
Let’s look at each of the options in the “Step Process Widget” below.
Install Step Process Widget for Elementor
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Step Process”
- Hover over the widget in the search results and click install
- Add your “Step Process” widget to any Elementor Page
Graphic Element Animation
Choose the desired animation from given options.
- Pulse Grow
- Pulse Shrink
- Bounce In
- Bounce Out
- Grow Rotate
- Skew Forward
- Skew Backward
- Wobble Vertical
Show/Hide the title.
Show/Hide the text element.
Show/Hide the label.
Choose the layout from the given options.
- Horizontal and Vertical on Breakpoint
Connected Widgets Settings
Enable Remote Connection
Visit Name for Connection
Provide a name for the connection that other widgets will use to connect and control this widget.
Choose the same group for two or more item-based widgets so they can sync together.
Manage the step elements using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Set a Title for your step.
Type the text to display in step.
Type text to display as label.
Choose any of the given graphic elements.
- Icon (Icon Library or Upload Custom SVG)
Graphic Element Icon
Choose an icon for graphic element.
Graphic Element Text
Type text to display as a graphic element.
Graphic Element Image
Choose an image to display as a graphic element.
Graphic Element BG
Set the graphic elements background color.
Graphic Element BG Hover
Set the graphic elements background hover color.
Set the icon color.
Set the background color of the label.
Set the title color.
Step Process Widget Styling
There are different styling options available for the widget and each aspect of its design can be controlled with its styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Set the spacing, width and color of the divider.
Graphic Elements Styling
Style the elements width, height, size, color, typography, border, etc. in normal, active and hover state.
Choose graphic element clip-path to create unique-looking shapes.
- Left Arrow
- Right Arrow
- Left Point
- Right Point
- Left Chevron
- Right Chevron
Below is an example of what you can achieve:
You can set the background, color, typography, padding, border, positioning, width and height of the label element.
The label can be used for a number or even a word to add more information on top of the icon in one of the corners. Below is an example of label usage.
In this section, set the padding, alignment, spacing, background, and border of the content.
Style the color, typography, spacing, padding, background, radius, and border of the title.
Here, you can style the color, typography, and spacing of the text element.
Here are some live use cases for the Step Process Widget.
Step Process widget with sync widgets.