Divi icon list module

The Divi theme is a popular WordPress theme that allows users to create beautiful and functional websites without any coding knowledge. One of the modules available in Divi is the Icon List module, which allows you to display a list of items with icons.

To use the Divi Icon List module, you need to add it to a page or post using the Divi Builder. Once you have added the module, you can customize it by adding items, choosing icons, and configuring the layout.

Here is an example of how you can use the Divi Icon List module in your code:

<?php
function wpsnippets_divi_icon_list_module() {
    ob_start();
    ?>
    <div class="divi-icon-list">
        <ul>
            <li><span class="et-pb-icon"></span> Item 1</li>
            <li><span class="et-pb-icon"></span> Item 2</li>
            <li><span class="et-pb-icon"></span> Item 3</li>
        </ul>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode( 'divi_icon_list', 'wpsnippets_divi_icon_list_module' );

In this example, we have created a custom shortcode called [divi_icon_list] that will output the HTML markup for the Divi Icon List module. You can add this shortcode to any page or post to display the icon list.

To add the shortcode to a page or post, simply edit the content and add [divi_icon_list] where you want the icon list to appear.

Note that this is just a basic example and you can customize the HTML markup and styling to fit your needs. You can also add dynamic content or additional options to the shortcode function if desired.

Examples

Example 1: Creating a Divi Icon List Module with Custom Icons

This use case demonstrates how to create a Divi Icon List module with custom icons. By using the wpsnippets_divi_icon_list function, you can easily add a custom icon to the Divi Icon List module.

function wpsnippets_divi_icon_list( $fields ) {
    $fields['icon'] = array(
        'label'             => esc_html__( 'Icon', 'divi' ),
        'type'              => 'select_icon',
        'option_category'   => 'basic_option',
        'class'             => array( 'et-pb-font-icon' ),
        'description'       => esc_html__( 'Choose an icon to display.', 'divi' ),
        'default'           => '',
    );

    return $fields;
}
add_filter( 'et_pb_icon_list_fields', 'wpsnippets_divi_icon_list' );

In this code example, the wpsnippets_divi_icon_list function adds a new field called “Icon” to the Divi Icon List module. This field allows you to select a custom icon from the available options. The function is hooked into the et_pb_icon_list_fields filter to add the custom field.

Example 2: Modifying the Divi Icon List Module Output

This use case demonstrates how to modify the output of the Divi Icon List module. By using the wpsnippets_divi_icon_list_output function, you can customize the HTML markup and styling of the module.

function wpsnippets_divi_icon_list_output( $output, $args ) {
    // Modify the output here

    return $output;
}
add_filter( 'et_pb_icon_list_output', 'wpsnippets_divi_icon_list_output', 10, 2 );

In this code example, the wpsnippets_divi_icon_list_output function is hooked into the et_pb_icon_list_output filter to modify the output of the Divi Icon List module. You can customize the HTML markup and styling of the module by modifying the $output variable within the function.

Example 3: Adding Custom CSS to the Divi Icon List Module

This use case demonstrates how to add custom CSS to the Divi Icon List module. By using the wpsnippets_divi_icon_list_css function, you can easily add custom CSS styles to the module.

function wpsnippets_divi_icon_list_css() {
    ?>
    <style>
        /* Add custom CSS styles here */
    </style>
    <?php
}
add_action( 'wp_head', 'wpsnippets_divi_icon_list_css' );

In this code example, the wpsnippets_divi_icon_list_css function adds custom CSS styles to the Divi Icon List module. The function is hooked into the wp_head action to output the CSS styles within the <style> tags. You can add your own CSS rules inside the <style> tags to customize the appearance of the module.