Hi, everyone, today we want to complete our Divi 3.1 Series by finishing our ‘i Divi Advanced Audio’ plugin.

We cover in order 1) How to fix some issues about the rendering on Visual Builder when you are customizing an existing Divi module; 2) How to style your module in Standard and Visual builder in order to make it recognizable; 3) How to export your Divi plugin and be ready for sharing/selling it. So, let’s get started!

SOME ISSUES ON VISUAL BUILDER

In the last Series post we gave a peek on how and eventually why we can customize an existing Divi module instead of creating a new one. This way, however, does arise some display issues when on Visual Builder linked with the adding Css styles to our module (like widths, margins, colors etc.).

The easiest way (already updated in the code of the last post) to avoid these problems is to add few lines of code in our render function (just above the check for the $render_slug) to check if the $output is an array and return it.

However, this is a shortcut. A better and more standardized way to get our goal and get around the problem is to rewrite all our Css styles in the ‘render’ function using the ‘ET_Builder_Element::set_styles()’ Divi function:

ANOTHER LITTLE BUG

Another little issue in which we occur concerns the targeting of the audio module. When we apply our Css style – if we add more than one audio module – we see the style affects all the Audio modules: so, for example if we apply a feature image custom width of 50% we will find that every Audio module in the page will have this image width!

It happens that because in our ‘ET_Builder_Element::set_style()’ we specify for ‘selector’ property the value ‘.et_pb_audio_cover_art’; it lacks the more specific class referring to that specific module that is in our case ‘.et_pb_audio_0’. In order to add this particular class that Divi automatically adds to every module we just have to include in our ‘selector’ value ‘%%order_class%%’.

Doing this way our Css style will apply just to the module we have modified and not to all Audio modules; we can now set for our first Audio module an image width of 70% and the Css style will apply to the selector ‘.et_pb_audio_0 .et_pb_audio_cover_art’ and then set a second Audio module with an image width property of 50% and it will apply just to the ‘.et_pb_audio_1 .et_pb_audio_cover_art’.

FINAL CONSIDERATIONS ON CUSTOMIZING MODULES

Ok! Now our Css styles are properly applied to our module. Remains the main issue with working this way: at the moment you can’t see the changes on Visual Builder and is far complicated to fix it. The Divi team, however, should add soon the documentation about the customization of existing modules; we will keep on track with them and let you know.

STYLING OUR CUSTOM MODULES

Either you choose to create a new custom module or customizing an existing one is highly recommended to style a little (do not overdo it!) your custom modules in the builder in order to make them recognizable and standing out among all the Divi Modules.

We can do it just adding some Css rules. For styling your modules in the backend builder you can add this css in your main ‘style.css’ file:

NOTE: If you created the plugin with the ‘Create Divi Extension’ tool remember to place your css files in the ‘Styles’ folder!

A little bit different if you want to style your modules in the Visual Builder; in this case you have to add your css in the ‘/style.css’ file that the ‘Create Divi Extension’ tool will add automatically in the /modules/[your-custom-module] path of your plugin (remember you can add in this file also Css for existing Divi modules like our Audio one!):

SAVE AND EXPORT OUR DIVI PLUGIN

Once you finished your Divi plugin you just have to close your terminal (we still have the terminal window with the ‘yarn start’ command running, remember?) and re-open it, change directory to the plugin folder and run the command ‘yarn build’ or ‘yarn zip’.

The first one will optimize your plugin to be ready for production adding some minified css and javascript files, while with the second command in addition to the optimization for production you will also get a zipped file of your plugin.

NOTE: If you opt for using ‘yarn build’ you can also zip manually your plugin folder excluding the following files:

  • /node_modules/
  • yarn.lock
  • package.json
  • asset-manifest.json
  • .gitignore
  • /all the jsx files/
  • /all the scripts and styles non minified/

FINAL THOUGHTS

Finally we have created our Divi Plugin. We have seen how to customize an existing Divi module as well as create a brand new one starting from the ‘Create Divi Extension’ tool. The code shown above is partial and is just for example purposes but hope it can be useful to understand some passages on the way to create a Divi Custom Module, wrap it in a plugin and be ready for distributing it.

In the next weeks we deepen the React component of our modules and possibly how to implement also this part for existing customized ones.

Let us know what you think in the comments. See you next post!

SupportHost

You have Successfully Subscribed!

CodeCanyon Plugins

You have Successfully Subscribed!

Elegant Themes

You have Successfully Subscribed!

Try Divi!

You have Successfully Subscribed!

Divi Plugins

You have Successfully Subscribed!

Advanced Blurbs Plugin

You have Successfully Subscribed!

Bloom!

You have Successfully Subscribed!

Divi Cake Layouts

You have Successfully Subscribed!

Divi Cake Plugins

You have Successfully Subscribed!