fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

wordpress-black-friday-deals
toggle-button-for-elementor
elementor-widget-library

Step Process for Elementor

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.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Step Process”
  3. Hover over the widget in the search results and click install
  4. Add your “Step Process” widget to any Elementor Page

General Settings #

1

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
2

Show Title

Show/Hide the title.

3

Text

Show/Hide the text element.

4

Label

Show/Hide the label.

5

Layout

Choose the layout from the given options.

  • Horizontal
  • Vertical
  • Horizontal and Vertical on Breakpoint

 

Connected Widgets Settings #

1

Enable Remote Connection

This enables the remote connection functionality for this widget.
2

Visit Name for Connection

Provide a name for the connection that other widgets will use to connect and control this widget.

3

Sync

You can connect two item-based widgets and sync them.
4

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
1

Title

Set a Title for your step.

2

Text

Type the text to display in step.

3

Label

Type text to display as label.

4

Graphic Element

Choose any of the given graphic elements.

  • Icon (Icon Library or Upload Custom SVG)
  • Text
  • Image
5

Graphic Element Icon

Choose an icon for graphic element.

6

Graphic Element Text

Type text to display as a graphic element.

7

Graphic Element Image

Choose an image to display as a graphic element.

8

Graphic Element BG

Set the graphic elements background color.

9

Graphic Element BG Hover

Set the graphic elements background hover color.

10

Icon Color

Set the icon color.

11

Label BG

Set the background color of the label.

12

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.

  1. None
  2. Triangle
  3. Trapezoid
  4. Parallelogram
  5. Rhombus
  6. Pentagon
  7. Hexagon
  8. Heptagon
  9. Octagon
  10. Nonagon
  11. Decagon
  12. Bevel
  13. Rabbet
  14. Left Arrow
  15. Right Arrow
  16. Left Point
  17. Right Point
  18. Left Chevron
  19. 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.

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!