Turn Your Minimum Efforts Into Maximum Results

Table Of Contents

How to Use Step Flow Widget

The Step Flow widget is a convenient tool, brought you by Element Pack Pro. This widget basically shows instructions with steps and arrows. Many times you need your visitors to follow a certain chain of instructions to subscribe, buy a product, or do any certain action. That’s where the Step Flow widget comes in handy!

From here, I’ll show you bit by bit how to use this widget proficiently. Let’s Go!

To Insert Widget

Inserting Step Flow Widget

Inserting the widget is just a matter of drag and drop. However, click and hold on the widget icon from the menu and drag the Step Flow Widget to the drop point. Follow the picture above.

Content Tab

The Content tab is the basic options tab of the Step Flow widget. This tab is divided into 3 sections. However, the Read More section is by default turned off with a switcher. So basically, you can see 2 sections at the first look.

Step Flow

Go to Content Tab> Step Flow

After you drag and drop the widget in a new section, you will see this section on the screen. From here, you can change the Icon Type, Title, and Description. Also, you can put a Title Link as well.

A little down on the Step Flow section, you will find a number of switchers. The Title Separator and Read more Switchers is turned off by default. You can turn them on and add more options to your widget screen. Also, you can show or hide the step direction arrow with the Show Direction switcher.

Read More

In this section, you can edit the text of the Read More button. You can redirect your visitors to another link by adding a link to the button. Also, you can add Icon over it. Lastly, this section allows you to make the Read More button Hover at mouse point.

Go to Content tab> Read More> and customize as your suit.

Badge (Step)

Go to Content Tab> Badge

This is the last part section of the Content tab. From there, you can customize the badge or step box with the position and offset. You can, however, change the text also.

Duplicating the Widget

Mostly, to show the steps, you might need to repeatedly insert the widget again and again. But you can do it easily by copy/pasting it. The pictures above represent the process very clearly.

Follow the step: Click on the Column icon> Click on Duplicate and there you have it.

Style Tab

Now, time for some style. In this Style tab, you will have more options to further customize your Step Flow widget as you like. This tab has a light complexion. Let’s have a look.


Go to Style Tab> Icon/Image

This is the first section of the Style tab. Here, you can change the appearance of the Icon of your Step Flow widget. You can, however, change icon color, background color, shadow, padding, border, etc. Also, you can rotate the icon and adjust the offset.


Change the Title of this widget with the Title section from the style tab. However, you can change the color and typography from here.

Go to the Style tab >Title >and check the options.


Go to Style Tab> Description

In this section, change the format and color of the description text of the step flow widget. You can also add the hover effect here.

Title Separator

Go to Style Tab> Title Separator

This section gives you many options to customize the Title Separator bar with ease. With several different styles, you can provide any look for it. However, you can change the title separator by picking from a large number of options.

Read More

From this section, you can change the color, border, padding, etc. or I can say the overall look of the Read More button. The image above shows only a few options. However,

Go to Style tab> Read More> and explore all options.


Go to Style Tab> Direction

Another amusing thing is that you can even edit the tiny little Direction arrow from this section. This feature is only available with the widgets made by Element Pack Pro.

Since the Element Pack 5.2.0 update, the arrow style has been gone under a change and is now style animation instead of a flat object.

Badge (Step)

Go to Style Tab> Badge (Step)

Lastly, you can change the color, shadow, or even put and image as a background for the badge from the Badge (Step) section. Pretty cool, right?

Video Assist

Well done. Seems you have learned the whole thing and how it works. It is easy and fun. Watch Video Assist and to get more in-depth ideas about the usage of the Step Flow widget by Bdthemes, take a tour of the demo page.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.

Subscribe to newsletter

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Join Now

Join Thousands of Happy Users

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge