How to Use Step Flow Widget

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 any certain action. That’s where Step Flow widget comes handy!

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

To Insert Widget

Inserting widget is just a matter of drag and drop. However, click and hold on the widget icon from the menu and drag it 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 Step Flow widget, take a tour to the demo page.

Missed The Black Friday offer this year? Get up for flat 50% discount right now.