Advanced List Module for Divi is the solution to create an SEO-friendly list in Divi. This module is featured-riched and multipurpose. Let’s see what feature this module can offer-
Global Content Tab
The content tab of the list module has child items which will be your list. You will find three prepopulated items there after the first initiation. You can add unlimited list items by clicking “Add New Item”.
Child Item
Divi child items also consist of three tabs. Let’s explore them one by one.
Content Tab Child Item
Content
Here are the options for your content or list items. It consists of the following-
- Title: Here is the text area for adding a title.
- Body: You can add full-featured texts here under each title. This is a regular text area where you can add headings, links, images, etc.
- Title Tag: Define your title HTML tag from the dropdown list. By default, it H4.
- Show Tooltip: From here, you can turn ON the tooltip for the item.
- Tooltip Content: After turning the tooltip ON, a new text area will appear for the tooltip text. This Text area has the same feature as the body text.
Icon
Here we have an icon option for the child item.
Icon type: For the child item, we have different types of icon selection options available. Depending on the icon type selection, some features may vary.
- Icon: By default, this one is selected as an icon.
- Choose an Icon: This will allow choosing an icon from the list.
- Image: You can choose an image instead of an Icon.
- Image Alt Text: Give a custom alt text for your image.
- Text: You can also choose text instead of image or icon.
- Lottie: Use the Lottie file as an icon from here. Selecting this as an icon type will show two new features related to Lottie.
- Source type: Here, you need to define the Lottie file source. Either you can select an external URL or upload option.
Note: If you want to upload the Lottie file, which is a JSON file, you need to turn on the JSON file support extension. To Do so-Go to WordPress dashbroad> DiviFlash> Dashbroad> Extension> JSON file upload. Turn the toggle ON and Save.
- None: If you don’t want to use an icon, select the none option.
Show Icon Only: If you don’t want to show any text, turn ON this feature. This one is available for the icon, image and Lottie.
Show Icon On Hover: Here you can select the icon or image to show on hover only by turning this feature ON.
Use Icon for Title: If you want to show a secondary icon just after the title, then turn this feature ON. This will allow you to select an icon from the icon list. You can also show this on hover only.
Lottie Settings
Lottie can be animated in four ways using the Animation Trigger. Choose None if you don’t want to trigger an animation.
- Viewport: When you select the viewport trigger option, the Lottie animation begins as soon as it appears in the viewport. In addition, you can specify a threshold value between 0 and 1. In the case of 0.5, the animation will be activated when Lottie is 50% visible.
- On Click: Click to initiate the Lottie animation.
- On Hover: Hover over Lottie to trigger the animation.
- On Scroll: Trigger the Lottie animation while scrolling.
Loop: Lottie files can be animated continuously when the Loop effect is activated. So you can create non-stop Lottie animations.
Animation Speed: The animation speed feature controls Lottie’s animation speed. Milliseconds are used to measure it.
Reverse direction: Lottie’s animation can be reversed using the Reverse Direction feature. You could make the Lottie animation run on the right if it starts on the left.
Renderer: The renderer feature can render Lottie files as SVG or Canvas.
Note: The tooltip setting is only available when the tooltip feature is ON.
Tooltip Settings
Here is the list of features to customize the tooltip.
Arrow: Add an arrow on the tooltip pointing to the list item.
Placement: Place the tooltip around the list item among 12 different positions, including the Top, Bottom, Left, and Right.
Animation: The tooltip can be revealed in any of the 6 animations- Fade, Scale, Rotate, Shift-away, shift-toward, and perspective.
Trigger: Set a trigger option from Hover, Click, or Hover & Click for tooltip interaction.
Hover Over Tooltip: Activating this feature brings two more options,
- Tooltip Hover Area: Define the size of the invisible border area around the tooltip that hides the tooltip when the cursor move-out from that border.
- Tooltip Content Hide Delay: Set a delay time to hide the tooltip while the cursor is moved away.
Follow Cursor: Force the Tooltip to follow the cursor movement.
Max Width: Define the maximum width of the tooltip.
Tooltip Distance: Place the arrow wherever you want on the tooltip fringe and set a suitable distance between the tooltip and the list item.
Link
You can set a link to your whole child item or to the title only.
Background
Here is the background option for your child’s item or list. You will find all the regular background option divi usually offer available here.
Design Tab Child Item
Item Wrapper Style
Add a wrapper background and border with corner rounding & shadow effect. Also, you can align the child item to the left, right, and center inside the wrapper container.
Icon style
The list module does have various icon options to choose from. Depending on the icon type you choose, these features will change accordingly.
If you select icon as icon type from the content tab, then you will find icon color, Background color, Icon size, the gap between icon and text, placement or position option, and so on.
Similarly, choose your icon to be an image. You will see options like image width, height, spacing, and positioning.
On the other hand, if you choose Lottie or text as your icon option, then the features will change accordingly.
Except for those you will also find common options like a shadow, rounded corners, border, etc with all the icon options.
Icon Text
If you are using text as your icon, then the text customization option is available. You can style color, size, alignment, and more.
Title styles
Here you can change the title background and add a border around the title with a shadow effect.
Title Text
The typography features available in the icon text are also available for the title text.
Body styles
The Body Styles option has the same features as Title Styles.
Body Text
You can change the body text font, style color, size, alignment, and more with this feature. Also, you can do the same for the link text, ordering, numbering, and quote.
Body Heading Text
You can change the body heading’s style, color, size, alignment, and more. This feature works only if you use any heading inside the body text.
Tooltip styles
Style the tooltip from here. Apply a tooltip background and arrow color with a stylish border around it.
Tooltip text
You can change the tooltip text font, style color, size, alignment, and more. Also, you can do the same for the link text, ordering, numbering, and quote.
Tooltip Heading Text
You can change the tooltip heading style, color, size, alignment, and more. This feature works only if you use any heading tag in the tooltip.
Sizing
You can adjust the child item’s content width. Also, you can adjust the entire item’s width, alignment, and height.
Custom spacing
Set a margin & padding around the icon and icon wrapper. Also, you can add margins & padding around the title, body, & wrapper. You can set padding for the item tooltip as well.
Border
Add a stylish border around the child item with radius and shadow effects.
Box Shadow
Choose one of the 7 preset shadow effects for the child item. You can adjust the values to make it your style.
Advanced Tab Child Items
This document covers features from the Advanced tab.
Note: All features here are specific to the child item.
Global Content Tab
Setting
Layout Type: Choose a layout from two different types, List & Grid.
Layout Column: If you choose grid as your layout, then define how many items you want to show in a single row from here.
Item Gap: Set a consistent gap between the items for both layouts.
Item Horizontal Alignment: Align all items horizontally at once to the left, right, or center.
Apply Item Equal Width: Make an equal width for all the items at once, and this feature applies to both layouts.
Item Vertical Alignment: Align the item containers vertically; this feature is available only for grid layouts.
Apply Vertical Alignment for Elements: Align vertically all the items placed inside the container. This feature is available only for grid layouts.
Background
Apply a background to the entire module at once. You can use an image, gradient, video, pattern, and mask as the background.
Global Design Tab
Each feature you get in the child item design tab is also available in the global design tab. Only one small change for the Icon Styles feature is here.
Icon styles
The show Content Outside Wrapper option is missing from this feature in the global tab, and the rest is the same.
Global Advanced Tab
The advanced tab is covered in the General Doc.
