The Divi Builder includes 46 modules to build your layouts. Modules include all of the basic building elements such as text, images, galleries, forms, maps, blogs, headers, and lots more. As great as these modules are, there are times when you’ll want a feature that isn’t included within these modules. Fortunately, new modules can be added to the Divi Builder. Let’s talk about Divi custom modules.

What is a Divi Custom Module?

A Divi custom module is a third-party module that’s added to the Divi Builder through either a Divi Extension (in the form of a plugin) or embedded within a Divi child theme.

Most third-party modules add a physical element that can be used within the layouts. They include the standard Content, Design, and Advanced tabs and can be styled and customized like any Divi module. Some are not readily visible, adding features such as popups or 404 pages.

What’s in a Custom Divi Module?

Custom Divi Modules are created using web programming languages such as PHP, JavaScript, HTML, CSS, and ReactJS. They’re defined with a PHP class which defines all of the settings and renders the module’s HTML output on the frontend of WordPress.

Each module also has a JavaScript ReactJS component class that renders the module inside the Divi Builder. CSS is used for styling such as effects and margins.

How do you Create a Divi Custom Module?

Creating a custom module for Divi requires a working knowledge of the coding languages PHP, JavaScript, HTML, CSS, and ReactJS.

You’ll need to create a development environment, create the extension, and then create the module. Let’s briefly look at each step.

Step 1 – Development Environment

First, set up a development environment. This will include a WordPress installation, the latest version of Divi, LTS version of NodeJS, Yarn, and gettext.

For a local development environment Elegant Themes prefers Docker. Other options include Vagrant, Local by Flywheel (our preferred way), and XAMPP.

Step 2 – Create a Divi Extension

Next, create a Divi extension. This is a plugin that adds the module to Divi. Use the Create Divi Extension tool to streamline the process by entering commands into the command line.

Open a terminal and navigate to your WordPress plugins directory using the cd wp-content/plugins command. Create your extension by running the npx create-divi-extension my-extension command. Provide your extension’s details.

Once you’ve done this you’ll see your extension inside your WordPress plugins directory. Open your extension’s directory. You’ll see an example project structure. Modify this to create your own extension.

Step 3 – Create your Divi module

Finally, create your Divi module. Using the example module, rename the HelloWorld directory to the name of your module. Next, rename the HelloWorld.php file to the name of your module with the .php extension.

Open it and then edit it with your own code. Define the module’s settings in the get_fields() method.

Create a React Component class that will handle the rendering of your module based on its props. This will make your module available in the Divi Builder. Rename the HelloWorld.jsx file inside your module’s directory to the name of your module.

Update the import and export statements in includes/modules/index.js and then edit the render() method so it produces the output that you defined in your PHP render() method. Add your desired margin and other default styles in style.css.

Finally, compile the JSX code into regular JavaScript by running the yarn start command inside your plugin’s directory. Once this is complete your new module will be available within the Divi Builder.

Example of Custom Divi Modules

I mentioned earlier that there are lots of Divi modules available. Here’s a look at two popular modules available in the Divi Cake store.

Divi Breadcrumbs

Divi Breadcrumbs adds a module to help your visitors see their position within your website’s navigation structure. This hierarchy is sent to Google, greatly improving your website’s SEO.

The module is fully customizable. Hide the home page and current page if you want. Define the home text, choose the separator, set the orientation, style the font, and lots more.

Price $14.99-39.99 | More Information | Demo

FB Comments Module

FB Comments Module adds a new commenting system so visitors can comment using their Facebook accounts. Comments can be sorted by top, newest, or oldest. It includes the Facebook Like feature. You can also allow visitors to share the comment on their Facebook page.

You can set the number of comments that displays by default and it will show a button so visitors can see more comments. Choose between light or dark fonts, set the background, spacing, borders, box shadow, and animation to style the comments with your website’s branding.

Price $9.99-24.99| More Information | Demo

Ending Thoughts

Creating your own Divi custom modules is not an easy task but if you’re skilled with a few WordPress languages such as PHP and JavaScript, creating your own modules is a great way to add new features to Divi. Even if you don’t code, knowing the process can help in communicating with developers. Before developing your own though, it’s a great idea to check the marketplaces, such as the awesome plugin shop here at Divi Cake. The feature you need might already be available.

Your turn. Have you created your own Divi custom modules? Let us know about your experience in the comments.