Divi Feature List

With the Divi Feature List module, you get to showcase your product features in styles that are trendy, sleek, and professional.

Content → New Item

Add either text, number or Image as bullet points for the feature list design layout.

Content → Text

1. Title – type title text here in the text field
2. Use Number Index – if you want to have a numbered list, enable this option.
3. Use Image – enable this to use an image for each item
4. Use Icon – place an icon for each item

Design → Icon Settings

1. Icon Color -pick a color for the icon using the pointer or simply put the hex code to get the exact color you need
2. Icon Background Color – Add color to the icon background
3. Rounded Corners – include rounded corners by adjusting the four corner
4. Border Styles – add a border to any side you like or have borders on all four sides

Design tab → Icon Settings (continued)

1. Icon Border Width – adjust the width of the border
2. Icon Border Color – select a color for the border
3. Icon Border Style – include a style to the border from the collection of prebuilt styles available
4. Box-shadow – add a box-shadow to the element as well

Design tab → Image Settings

1. Image Width – adjust the width of the image using the slider 
2. Image Position – select a position for the image applied to the item

Design → Item Text

1. Text Vertical Alignment – use the set of positions available to align the text
2. Font – Choose a font. All Google web fonts are available here. You can upload a custom font as well. 
3. Font Weight – select the weight of the font from Light to Ultra Bold
4. Font Style – select a font style from
5. Text Alignment – align the text to left, right, or center
6. Text Color – pick a text color using the pointer or simply place the hex code to get the exact color needed
7. Text Size – resize the text as needed

Design → Item Text (continued)

1. Letter Spacing – Adjust the spacing between the letters of the text
2. Line Height – adjust the space between multiple lines added to the design 
3. Text Shadow – add a shadow to the text from the prebuilt shadows

Design → Icon Settings

1. Position – position the icon using the options available
2. Icon Color -pick a color for the icon using the pointer or simply put the hex code to get the exact color you need 
3. Icon Background Color – Add color to the icon background
4. Icon Size – resize the icon using the slider
5. Icon Rounded Corners – include rounded corners by adjusting the four corner

Design tab → Icon Settings (continued)

1. Icon Border Styles – include a border to the icon
2. Icon Border Width – adjust the width of the border
3. Icon Border Color – select a color for the border
4. Icon Border Style – include a style to the border from the collection of prebuilt styles available
5. Box-shadow – add a box-shadow to the element as well

Design → Title Settings

1. Font – Choose a font. All Google web fonts are available here. You can upload a custom font as well. 
2. Font Weight – select the weight of the font from Light to Ultra Bold
3. Font Style – select a font style from the following (e.g italic, all caps, and more)
4. Text Alignment – align the text to left, right, or center
5. Text Color – pick a text color
6. Text Size – resize the text as needed using the slider
7. Letter Spacing – Adjust the spacing between the letters of the text

Design → Title Settings (continued)

1. Line Height – adjust the space between multiple lines added to the design 
2. Text Shadow – add a shadow to the text
3. Rounded Corners – include rounded corners by adjusting the four corners
4. Box-shadow – add a box shadow to the element
5. Text Border Styles – add a border to any side you like or have borders on all four sides

Design → Title Settings (continued)

• Border Width – adjust the width of the border
• Border Color – select a color for the border
• Border Style – include a style to the border from the prebuilt styles
• Box Shadow – Include box-shadow to the title and configure the settings to your liking. 

Design tab → Image Settings

1. Image Background Color – Add an overlay background fill color or gradient on top of the image
2. Image Width – adjust the width of the image using the slider
3. Image Rounded Corners – include rounded corners by changing the four corner
4. Image Border Styles – add a border to the image 

Design tab → Image Settings

1. Image Border Width – adjust the width of the border added to the image
2. Image Border Color – select a color for the border with the pointer or simply put the hex code to get the exact color required
3. Image Border Style – include a style to the border from the collection of prebuilt styles
4. Image Box-shadow – add a box-shadow to the element

Design tab → Image Settings

1. Image Hue – adjust image hue using the slider
2. Image Saturation – adjust the intensity of the image 
3. Image Brightness – configure the brightness of the image
4. Image Contrast – include contrast to the image
5. Image Invert – use this to shift to an inverted image
6. Image Sepia – adjust to apply sepia color tone to the image
7. Image Opacity – adjust the opacity of the image
8. Image Blur – add blur to the image
9. Image Blend Mode – Select from the 16 types of image blend mode for a quick configuration