Divi content box customization

The Divi theme is a popular WordPress theme that allows users to create custom layouts using its built-in modules. One of these modules is the Content Box, which allows you to display text, images, and other content in a styled box.

To customize the appearance of the Divi Content Box, you can use custom CSS code. Here’s an example of how you can change the background color, font size, and padding of the Content Box:

/* Custom CSS for Divi Content Box */
.wpsnippets_custom-content-box {
    background-color: #f2f2f2;
    font-size: 16px;
    padding: 20px;
}

In the above example, we’re targeting the Content Box by using the class .wpsnippets_custom-content-box. You can replace this class with your own custom class name.

To apply this custom CSS to the Divi Content Box, you have a few options:

1. Add the CSS code to your theme’s stylesheet: You can add the CSS code to your theme’s stylesheet (style.css) file. This will apply the custom styles to all instances of the Content Box on your website.

2. Use the Divi Theme Options: If you’re using the Divi theme, you can navigate to “Divi > Theme Options” in your WordPress admin dashboard. In the “Custom CSS” section, you can add the CSS code. This will apply the custom styles to all instances of the Content Box on your website.

3. Use a custom CSS plugin: If you prefer to keep your custom CSS separate from your theme’s files, you can use a custom CSS plugin like “Simple Custom CSS and JS”. Install and activate the plugin, then navigate to “Appearance > Custom CSS” in your WordPress admin dashboard. Add the CSS code to the custom CSS editor. This will apply the custom styles to all instances of the Content Box on your website.

Remember to replace .wpsnippets_custom-content-box with your own custom class name if you decide to use a different class.

By customizing the CSS of the Divi Content Box, you can create unique and visually appealing designs that match your website’s branding or style.

Examples

Example 1: Changing the background color of a Divi content box

This example demonstrates how to customize the background color of a Divi content box using custom CSS.

function wpsnippets_custom_content_box_styles() {
    echo '<style>
        .et_pb_content_box {
            background-color: #ff0000;
        }
    </style>';
}
add_action( 'wp_head', 'wpsnippets_custom_content_box_styles' );

In this code example, we define a custom function wpsnippets_custom_content_box_styles that echoes a <style> tag with CSS rules to change the background color of the .et_pb_content_box class. We then use the wp_head action hook to add this custom CSS to the head section of the website.

Example 2: Adding a custom icon to a Divi content box

This example demonstrates how to add a custom icon to a Divi content box using the et_pb_content_box_icon filter.

function wpsnippets_custom_content_box_icon( $icon, $args ) {
    if ( $args['title'] === 'My Content Box' ) {
        $icon = '<i class="fas fa-star"></i>';
    }
    return $icon;
}
add_filter( 'et_pb_content_box_icon', 'wpsnippets_custom_content_box_icon', 10, 2 );

In this code example, we define a custom function wpsnippets_custom_content_box_icon that takes the current icon and arguments as parameters. We check if the content box title is “My Content Box” and if so, we replace the icon with a custom icon using HTML markup. Finally, we return the modified icon.

Example 3: Changing the font size of a Divi content box title

This example demonstrates how to change the font size of a Divi content box title using the et_pb_content_box_title filter.

function wpsnippets_custom_content_box_title( $title, $args ) {
    if ( $args['title'] === 'My Content Box' ) {
        $title = '<h2 style="font-size: 24px;">' . $title . '</h2>';
    }
    return $title;
}
add_filter( 'et_pb_content_box_title', 'wpsnippets_custom_content_box_title', 10, 2 );

In this code example, we define a custom function wpsnippets_custom_content_box_title that takes the current title and arguments as parameters. We check if the content box title is “My Content Box” and if so, we modify the title by wrapping it in an <h2> tag with a custom font size. Finally, we return the modified title.