Easily create your own custom modules in the Divi Builder!

The Divi Module Builder opens up a whole new realm of possibilities within the Divi theme. Tired of using shortcodes? Wish there were more modules to choose from in the Divi Builder? Looking for an easy way to create your own custom modules for yourself or your clients? Look no further.

This section was created using the custom blog grid module from the demo video above. You can download this module for free and import it into the Div Module Builder plugin for an instant and easy-to-customize grid module.

The Divi Module Builder provides an easy way for you to add new modules to the Divi Builder with an easy-to-use interface. The possibilities truly are endless. Here’s how it works:

  1. Activate the plugin and your single site or unlimited site license
  2. Create a new module and give it a title (this will be the title shown in the Divi Builder)
  3. Add fields to your module (text, textarea, color picker, image, icon, yes/no toggle)
  4. Add HTML/PHP output to display the fields any way you choose
  5. Add custom CSS to control the visual design (optional)
  6. Add custom Javasacript (optional)
  7. Publish your new module
  8. That’s it!!!!

Once your new module is published, it will instantly become available in the Divi Builder. All of the fields you added in step 3 will become options within the module. Add your new module to any page/post and configure the options you added. You just created a new Divi module that does exactly what you need!

It also comes with these powerful features:

  • Easily create your own custom modules in just a few minutes
  • New modules instantly become available within the Divi Builder
  • Add multiple field types that can be customized within the created module
  • Add HTML, PHP, CSS and Javascript to your modules
  • Import and Export your modules to other sites

Create a new module

After activating the plugin and activating your single site or unlimited site license, it’s time to start creating modules! You can see in the screenshot that you can give your module a title. This will be the title shown in the Divi Builder.

Next you can add fields to your module (text, textarea, color picker, image, icon, yes/no toggle). You also have the option to add font control over text and textarea fields.

Once you’ve added all of your fields, you simply need to add your HTML output. In the HTML Output box, you can create any layout you want using HTML and/or PHP and inserting your fields wherever you need them.

Once you’re finished adding your HTML output, you can optionally add custom CSS and Javascript.

Configure your new module

If you thought creating a new module was fun (it was), wait till you see your new module instantly available in the Divi Builder! Open any page or post, click to add a new module, and BAM!!! There it is, waiting for you to click it and customize all of the fields you created earlier. It doesn’t get much easier than that.

Add your module to your layout

The Divi Builder makes it easy to customize the look of your new module. Add it to a two, three, or four column row to make a grid layout. Add it to a single column row and create your own grid with as many columns as you want using CSS. You can even add it to a fullwidth section. You can literally create any layout you want.

Easily create your own custom modules in the Divi Builder!

Share This