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?
How do you Create a Divi Custom Module?
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
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.
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 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.
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.
Your turn. Have you created your own Divi custom modules? Let us know about your experience in the comments.