By now, I’m hoping you feel like there’s not much you can’t achieve after a little bit of practise with CSS and jQuery. However, there are times when it can feel like simply editing Divi’s structure in this way is overkill, when all you want to do is make some small edits to the HTML elements: Changing a h1 to a h2, or moving the position of a link for example. The wonderful thing about Divi, is that for the most part, the HTML structure of a page is created using Builder Modules, and the good news for us is that these are totally replicatable and editable.

NOTE: We’re diving into PHP for this section. This goes well beyond the scope of ‘CSS and jQuery’ but I think it’s an easy enough to follow a long with and can prove to be invaluable in the long run. If you follow along with this code then you will have created your very own Divi Module! You ready to dive in?

So from that we now know that the only thing we need to include our functions file is a call to the new module in our child theme:

function course_load_new_modules(){
add_action('et_builder_modules_load', 'course_load_new_modules');


From there we can add as many duplicated modules or even create our own from scratch, ensuring that each one has a unique class and slug.


class ET_Builder_Module_New_Blurb extends ET_Builder_Module...

 $this->slug = 'et_pb_new_blurb';

new ET_Builder_Module_New_Blurb;

= Must be unique + class must begin with ET_



When this course material was put together the 3.1 update was not available and this was the standard way to create new modules. Since then a bunch of developer documentation has been released and we know that editing modules and creating new ones is way more complicated, requiring extensive understanding of PHP and React.js. There are some basic tutorials available here, but you can also expect a more in-depth course right here on 🙂

Until then, have fun editing modules in the classic way and remember that they won’t be supported for front end editing.