Step Flow

Create an awesome step by step visual imagery with instructions using this smart module. Change directions, counters, and make them look creative with icons, texts, and colors.

Content → Step Flow

1. Icon – select an icon from the collection for your step flow design. This will appear in the middle of the center circle.
2. Badge Title – input a title for your badge in the text field.
3. Alignment – align the design either to the left, center, or right.

 

Here, we will talk about what happens when you enable the Use Image switch for your Step Flow design.

 

Content → Step Flow (Use Image)

1. Use Image – enable to open the settings available when using an image for your design. 
2. Image – upload the image you plan on using within the design
3. Badge Title – input a title for your badge in the text field.
4. Alignment – align the design either to the left, center, or right.

Content → Image Mask

1. Use Image Mask – enable the switch to use Image Mask
2. Select Shape – select a prebuilt shape to mask the image to
3. Select Mask Size – select how you want the image to cover or contain within the shape of the mask
4. Image Horizontal Position – adjust the horizontal position of the image within the shape
5. Image Vertical Position – adjust the vertical position of the image within the shape

Content → Image Mask

1. Use Image Mask – enable the switch to use Image Mask
2. Select Shape – select a prebuilt shape to mask the image to
3. Select Mask Size – select how you want the image to cover or contain within the shape of the mask
4. Image Horizontal Position – adjust the horizontal position of the image within the shape
5. Image Vertical Position – adjust the vertical position of the image within the shape

Content → Text

1. Title – place an attractive title to the content design
2. Description – write a small paragraph or a summary related to the title. 

Design → Direction

1. Use Direction – enable to view the settings for the direction of the arrow
2. Style – select a prebuilt style for the step flow arrow
3. Color – you can change the color by using the pointer or simply place the hex code to get the exact color required
4. Width – adjust the width of the direction arrow
5. Angle – adjust the angle at which the arrow should be pointed
6. Offset Top – using the slider simply adjust the direction of the arrow to either on top or bottom
7. Offset Left – using the slider simply adjust the direction of the arrow further to the left or attach it to the circle of the step flow design.

Design → Icon Box Style

1. Size – adjust the size of the icon box
2. Background Color – select a suitable background color for the box behind the icon.
3. Icon Color – select a color for the icon using the pointer or simply put the hex code to get the exact color required
4. Icon Size – resize the icon
5. Rounded Corners – adjust the four corners to apply rounded corners

Design → Icon (continuation)

1. Border Styles – include a border around the icon box
2. Border Width – adjust the width of the border using the slider.
3. Border Color – pick a color for the border you’ve added.
4. Border Style – select a style of the border from the premade border styles
5. Circle Shadow – add a box shadow to the circle element

Design → Badge Style

1. Background Color – select a color for the background using the pointer
2. Badge Padding – add padding to the sides of the badge
3. Badge Margin – use this to re-position the badge
4. Rounded Corners – include rounded corners by adjusting the four corners
5. Border Styles – add a border to the badge

Design – Badge Style (continued)

1. Border Width – adjust the width of the border using the slider.
2. Border Color – pick a color for the border you’ve added.
3. Border Style – select a style of the border from the premade border styles
4. Badge Shadow – add a box shadow to the Badge element

Design → Title Text 

1. Heading Level – select a level for the heading from the options given. (H1 being the largest to H6 being the smallest heading level)
2. Font – Select a font from the collection or use a custom font.
3. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
4. Font Style – Pick a style of font for both front and back.
5. Text Alignment – align the text for both the front and back text.
6. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
7. Text Size – easily resize the title text for the Step Flow design.

Design → Title Text (continued)

1. Letter Spacing – space out the letters using the slider for an easier read for the website visitors.
2. Line Height – easily include gaps between the lines using the slider
3. Title Text Shadow – add text shadow to have the texts highlighted.

Design → Body Text 

1. Body Font – Select a font from the collection or use a custom font.
2. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
3. Font Style – Pick a style of font for both front and back.
4. Text Alignment – align the text for both the front and back text.
5. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
6. Text Size – easily resize the body text for the Step Flow design.

Design → Body Text (continued)

1. Letter Spacing – space out the letters using the slider for an easier read for the website visitors.
2. Line Height – easily include gaps between the lines using the slider
3. Body Text Shadow – add text shadow to have the texts highlighted.

Design → Badge Text 

1. Badge Font – Select a font from the collection or use a custom font.
2. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
3. Font Style – Pick a style of font for both front and back.
4. Text Alignment – align the text for both the front and back text.
5. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
6. Text Size – easily resize the badge text for the Step Flow design.
7. Badge Letter Spacing – space out the letters using the slider for an easier read for the website visitors.

Design → Badge Text (continued)

1. Line Height – easily include gaps between the lines using the slider
2. Body Text Shadow – add text shadow to have the texts highlighted.