Divi Essential Documentation

⌘K
  1. Home
  2. Docs
  3. Divi Essential Documentat...
  4. Modules Documentation
  5. Divi Feature List

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

    How can we help?