Source: https://divicake.com/blog/divi-custom-modules/ [Blog](https://divicake.com/blog/)/[Tips & Tricks](https://divicake.com/category/tips-tricks/) # Divi Custom Modules (Beginner's Guide) By Divi Cake·17 May 2018·Updated 19 August 2026·4 min read Divi Custom Modules (Beginner’s Guide) We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [What is a Divi Custom Module?](https://divicake.com#what-is-a-divi-custom-module) - [What’s in a Custom Divi Module?](https://divicake.com#whats-in-a-custom-divi-module) - [How do you Create a Divi Custom Module?](https://divicake.com#how-do-you-create-a-divi-custom-module) - [Step 1 - Development Environment](https://divicake.com#step-1---development-environment) - [Step 2 - Create a Divi Extension](https://divicake.com#step-2---create-a-divi-extension) - [Step 3 - Create your Divi module](https://divicake.com#step-3---create-your-divi-module) - [Example of Custom Divi Modules](https://divicake.com#example-of-custom-divi-modules) - [Divi Breadcrumbs](https://divicake.com#divi-breadcrumbs) - [FB Comments Module](https://divicake.com#fb-comments-module) - [Ending Thoughts](https://divicake.com#ending-thoughts) 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](https://divicake.com/go/divi-development-environment-setup/). This will include a WordPress installation, the latest version of [Divi](https://divicake.com/go/divi/), LTS version of [NodeJS](https://nodejs.org/), [Yarn](https://yarnpkg.com/), and [gettext](http://www.gnu.org/software/gettext/). Divi Builder interface displaying 46 modules, including text, images, galleries, forms, maps, blogs, and headers. Custom modules can be added to enhance features not included in the standard se For a local development environment Elegant Themes prefers [Docker](https://www.docker.com/what-container). Other options include [Vagrant](https://varyingvagrantvagrants.org/), [Local by Flywheel](https://local.getflywheel.com/) (our preferred way), and [XAMPP](https://www.apachefriends.org/). ### 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](https://github.com/elegantthemes/create-divi-extension) tool to streamline the process by entering commands into the command line. Collection of Divi Builder modules including text, images, galleries, forms, maps, blogs, and headers. Custom modules can be added to extend Divi Builder’s functionality. 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](https://divicake.com/go/divi-builder-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 Divi Extension 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. Collection of Divi Builder modules including text, images, galleries, forms, maps, blogs, and headers. Custom modules can be added to extend Divi Builder’s functionality. 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 Image showing the Divi Breadcrumbs Module example 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](https://divicake.com/products/divi-breadcrumbs-module/) | [Demo](https://divibreadcrumbs.com/) ### FB Comments Module Facebook 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](https://divicake.com/products/facebook-comments-module/) | [Demo](https://divicake.com/go/divi-marketplace/) ## 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](https://divicake.com/products/category/divi-plugins/) 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. About the author Written by Divi Cake. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Tips & Tricks [ Divi Condition Options Explained Tips & Tricks6 min read ### Divi Condition Options Explained How Divi condition options work: show or hide any section, row, column or module by post info, location, user, interaction, device or WooCommerce state. 3 October 2026](https://divicake.com/blog/a-look-at-the-new-divi-condition-options/) [ Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Tips & Tricks6 min read ### Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Set Divi 5 video autoplay with the built in Video module settings, muted playback, and loop options, no plugin or custom code needed for it to work on phones. 26 February 2026](https://divicake.com/blog/divi-5-video-autoplay-no-plugin/) [ Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Reviews7 min read ### Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Divi Pro pricing bundles AI, hosting, cloud and support into one plan. See what each add-on costs alone and the point where the bundle stops paying off. 25 February 2026](https://divicake.com/blog/divi-pro-pricing-bundle-vs-addons/)