When choosing an image for your Divi’s Blurb module, you have the option to choose from pre-made icons or upload your own custom image. However, it’s important to note that you can only upload images with file extensions that are included in the WordPress registered file list.
If you want to upload an SVG file to get its benefits for the Divi blurb module, unfortunately WordPress media upload does not currently support SVG files. However, don’t worry – we’ve put together a tutorial to guide you through the process of using a custom SVG icon for your blurb module in Divi
Add a Custom SVG icon in Divi
Step 1: Enable SVG Upload for WordPress
To use SVG files in the Divi blog module on WordPress, you must first enable the ability to upload them. Before making any changes, it is recommended to create a backup of your site and use a child theme to prevent any potential issues or loss of modifications when updating the parent theme.
Once you’re ready, navigate to the theme file editor by going to Appearance → Theme File Editor on your WordPress admin dashboard (if you’re using a block theme, the theme file editor can be found under the Tools menu). Then, add the following code to the bottom of the functions.php file in the Theme File list.
function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
Save changes made to the file by clicking the Update File button.
Now, your WordPress will have the ability to upload SVG files for your Divi’s blurb module.
Step 2: Blurb Module with SVG Icon
Adding the SVG icon to your blurb module is just like adding any other image to the module. It’s by going to your desired blurb module or create a new one on the Divi Builder and add the icon by clicking on the +Add Image on the Image & Icon block.
And that’s it!
The Bottom Line
When selecting an image for Divi’s Blurb module, you have the option to choose from pre-made icons or upload your own custom image. And if combined with an SVG file for the illustration or icon, your content will load faster as SVG files tend to be smaller in size compared to other image extensions. This tutorial shows you how to use an SVG file on the blurb module in Divi.
