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.
Video Tutorial #
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
General Settings #
Graphic Element Animation
Choose the desired animation from given options.
- Grow
- Shrink
- Pulse
- Pulse Grow
- Pulse Shrink
- Push
- Pop
- Bounce In
- Bounce Out
- Rotate
- Grow Rotate
- Float
- Sink
- Bob
- Hang
- Skew
- Skew Forward
- Skew Backward
- Wobble Vertical
Show Title
Show/Hide the title.
Text
Show/Hide the text element.
Label
Show/Hide the label.
Layout
Choose the layout from the given options.
- Horizontal
- Vertical
- 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.
Sync
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Items Settings #
Manage the step elements using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Title
Set a Title for your step.
Text
Type the text to display in step.
Label
Type text to display as label.
Graphic Element
Choose any of the given graphic elements.
- Icon (Icon Library or Upload Custom SVG)
- Text
- Image
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.
Icon Color
Set the icon color.
Label BG
Set the background color of the label.
Title Color
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.
Divider Styling #
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.
- None
- Triangle
- Trapezoid
- Parallelogram
- Rhombus
- Pentagon
- Hexagon
- Heptagon
- Octagon
- Nonagon
- Decagon
- Bevel
- Rabbet
- Left Arrow
- Right Arrow
- Left Point
- Right Point
- Left Chevron
- Right Chevron
Below is an example of what you can achieve:
Label Styling #
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.
Content Styling #
In this section, set the padding, alignment, spacing, background, and border of the content.
Title Styling #
Style the color, typography, spacing, padding, background, radius, and border of the title.
Text Styling #
Here, you can style the color, typography, and spacing of the text element.
Usage Examples #
Here are some live use cases for the Step Process Widget.
Step Process widget with sync widgets.
