List

Divi Plus List module is a simple yet powerful tool to help you create and customize lists with text, icons, or images in various layouts.

How to add List module to your webpage

Once Divi Plus is activated, it adds several modules to the Divi builder. To add a module on the page, use the following steps:

1. Create/Edit a Page that uses Divi builder.
2. Create/Edit a row.
3. Click on the Add New Module option; choose the DP List module.

Content Options

Add New List Item: In this section, you can add individual list items and customize their settings.

Configuration

Layout: The DP List module provides two layout options: Default and Inline.

• Default: All the list items are displayed vertically in a list format.
• Inline: List items are displayed horizontally in a row.

DP List Item Setting

Content

Text: Insert the text here that you want to appear in the list item.

Image/Icon as Thumbnail: Choose between using an image or an icon as the thumbnail for the list item.

• Icon: When selecting an icon, you can choose the specific icon you want to use.
• Item Thumbnail Alt Text: If you opt for an image, you can upload the image and provide alternative text for the image thumbnail.

DP List Item Design Settings

In the DP List Module, the design settings allow you to customize the appearance of list items, including text and icon thumbnails.

Item Text

• Customize item text font, weight, style, text color, text size, letter spacing, and line height.

Icon

Toggle the “Style Icon” option to enable additional settings for the icon.

• Adjust shape background, icon color, display shape border, and border color as per your preference.

Shape: Choose from different shapes like hexagon, circle, or square for the icon.

Design Setting

In the Design Panel, you find settings that apply globally to all lists. Customize the design for item text, icon, image, and divider elements here.

List

Alignment

You can control the alignment of the list by selecting the desired alignment options.

Item Text

In this section, you can control the settings for the list item text. Set the text indent, item text font, item text font weight, style, text color, size, and spacing.

Icon

In the icon setting, you can adjust the icon font size and change the icon color.

Image

In the image setting, you can set the thumbnail width.

Divider

Using this setting, you can add a divider and choose the divider style, divider color. Additionally, you have the toggle option to hide the last divider.