1. Home
  2. Docs
  3. Content Elements
  4. Step Flow

Step Flow EA Element

A step flow is the series of steps that a buyer goes through on your website. Create an excellent step by step visual diagram and instructions using this smart widget exclusively built for Elementor. Change directions, counters and make them look amazing with icons, texts, and colors. Here in this tutorial, you’re going to learn how to use the Step Flow element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Step Flow Element

 

»Content

 

Step Flow

⇒Icon: Select an icon from the icon library or upload your own SVG.

⇒Badge: Add text for the badge on the step flow. Keep it blank, if you want to remove the Badge.

: Add title and description.

→Title: Enter the title for step flow content. Click on Dynamic settings to apply the AnalogWP Classes to the title. (Ex. Add a light background)

→Description: Enter the description for step flow content. Click on Dynamic settings to apply the AnalogWP Classes to the content. (Ex. Add a dark background)

⇒Link: This is where you can add your Desire link or URL so that your Step Flow can get alive by linking to other pages. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link

⇒Alignment: Set the step flow alignment either left, center or right.

⇒Show Direction: Enable show direction to show the direction on the step flow.

 


»Style

 

Icon

⇒Size: Customize the size of the icon manually for different dimensions.

⇒Padding: Generate the padding value around the icon for different dimensions.

⇒Bottom Spacing: Control the bottom spacing of the icon manually for different dimensions.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the icon for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the icon border on the flow.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the icon for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Color: Customize the icon color.

⇒Background Color: Customize the icon background color.

 

Badge

⇒Padding: Set the padding value for the top, right, bottom and left around the badge text for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the badge for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the badge border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the badge for different dimensions.

⇒Color: Customize the badge text color.

⇒Background Color: Customize the background color of the badge.

⇒Typography: Set the typography options for the badge text.

⇒Offset: Set a custom offset to your icon badge for left and top in different dimensions. Or you can always get back to the default setting.

 

Title & Description

⇒Title

→Bottom Spacing: Control the bottom spacing of the title manually for different dimensions.

→Color: Add a custom color to the title text of the step flow.

→Text Shadow: Customize the text-shadow color, control the blur radius and set the horizontal and vertical value of the shadow.

→Typography: Set the typography options for the titles.

 

⇒Description

→Bottom Spacing: Control the bottom spacing of the description manually for different dimensions.

→Text Color: Add a custom color to the description text of the step flow.

→Text Shadow: Customize the text-shadow color, control the blur radius and set the horizontal and vertical value of the shadow.

→Typography: Set the typography options for the description text.

Direction

⇒Style: Set the step flow direction style from the style list.

⇒Width: Customize the width of the direction for different dimensions.

⇒Offset: Set a custom offset to your step flow direction for left and top in different dimensions. Or you can always get back to the default setting.

⇒Color: Add a custom color to the step flow direction.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Step Flow Element.


Was this article helpful to you? Yes No

How can we help?