Divi Essential Documentation

  1. Home
  2. Docs
  3. Divi Essential Documentation
  4. Modules Documentation
  5. Step Flow

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.
Was this article helpful to you? Yes No 1

How can we help?