Icon List module is like the Divi Blurb Module but more enhanced and well-aligned. If you want to create a list with icons then this module is helpful.

Content Options

Adding Icon List

Click on + Add new Item to add your first Icon List . Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Icon List.

See below for individual Icon List Item settings.

After you add your first Icon List, you will see a gray bar appear with the title of your Icon List shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Icon List.

Design Options

Text

Text Indent

Here you can add padding between the text and icon.

And you can play with the text by changing its font, size, color and weight and even add shadow to the text.

Icon

Icon Color

Here can define a custom color for the icon.

Icon Background

Here you can define a custom background color for the icon.

Padding

Here you can add padding in the icon to make to look perfect if you are using the background color.

Icon Font Size

Here you can change the actual size of the Icon by increasing or decreasing the Icon font size.

Icon Rounded Corners

Here you can control the corner radius of the icon. Enable the link icon to control all four corners at once, or disable to define custom values for each.

Border

Play around with the icon by adding a border to four corners or any of the sides of the icon and change its color as well.

Image

Background

Here you can define a custom background color for the Image.

Image Padding

Here you can add padding in the icon to make to look perfect if you are using the background color.

Image Width

Adjust the width of the image by sliding the slider or enter your own value to change the size of the image.

Image Rounded Corners, Border and Box Shadow

Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image

List Items

Layout

Here you'll be able to change the Layout of the Icon List to either Vertical or Horizontal.

Alignment

Change the alignment of the Icon List Item to Right, Center or Left.

Vertical Alignment

The List can be placed either above, below or in the center of the module.

Direction

Here you can choose the direction of the Icon, if you'll select Left to Right the icon will be on Left and the text on Right. And same goes for the Right to Left option, text on left and icon on right.

Space Between

Add some Space between Icon List Items.

Background Color

Add a Background color to all Icon List Items here.

Padding

Here you can define custom padding for the icon list item.

List Item Rounded Corners, Border and Box Shadow

Here you can add Corner Radius, Border and Box Shadow to the List Item.

Advanced Options

Use the advanced options to give your Icon List module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Icon List Item Content Options

Add text to the icon list here.

Use Icon

You can enable this switch to use Icon and browse from hundreds of Icon from Divi Icon Library. Disabling this switch will show (+) button to add an image to the list rather than Icon.

Tooltip

Use Tooltip

Enable this switch to enable the Use of Tooltip and show a tooltip when Hover to Icon List item.

Content

After enabling the use of Tooltip, you'll see a field to enter the Content you want to show when Hover to Icon list item.

Icon List Item Content Options

Icon

Icon Color

Here can define a custom color for the icon.

Icon Background

Here you can define a custom background color for the icon.

Padding

Here you can add padding in the icon to make to look perfect if you are using the background color.

Icon Font Size

Here you can change the actual size of the Icon by increasing or decreasing the Icon font size.

Icon Rounded Corners

Here you can control the corner radius of the icon. Enable the link icon to control all four corners at once, or disable to define custom values for each.

Border

Play around with the icon by adding a border to four corners or any of the sides of the icon and change its color as well.

Image

Background

Here you can define a custom background color for the Image.

Image Padding

Here you can add padding in the icon to make to look perfect if you are using the background color.

Image Width

Adjust the width of the image by sliding the slider or enter your own value to change the size of the image.

Image Rounded Corners, Border and Box Shadow

Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image

Tooltip

Placement

Here you can change the Placement of the Tooltip to:

• Top
• Right
• Bottom
• Left Background Color

Here you can change the Color of the Tooltip.

Tooltip Padding

You can define a custom padding inside of the Tooltip content here.

Tooltip Max width

To increase the width of the Tooltip change the max width of the Tooltip here.

And else you can play around with Tooltip text's font, size, color, weight and more.

Text

And you can play with the text by changing its font, size, color and weight and even add shadow to the text.

List Item Advanced Options

Use the advanced options to give your Icon List Item custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.