{"id":2472,"date":"2018-04-16T14:37:28","date_gmt":"2018-04-16T21:37:28","guid":{"rendered":"https:\/\/www.elegantthemes.com\/documentation\/?p=2472"},"modified":"2022-02-28T19:23:43","modified_gmt":"2022-03-01T02:23:43","slug":"how-to-create-a-divi-builder-module","status":"publish","type":"post","link":"https:\/\/www.elegantthemes.com\/documentation\/developers\/divi-module\/how-to-create-a-divi-builder-module\/","title":{"rendered":"How To Create A Divi Builder Module"},"content":{"rendered":"

Note:<\/strong> This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.<\/p><\/blockquote>\n

Custom Divi Builder Modules<\/h2>\n

Divi Builder modules consist of PHP, JavaScript, HTML, & CSS code. Each module is defined using a PHP class. The class defines all of the module’s settings and is responsible for rendering the module’s HTML output on the frontend. Additionally, each module has a ReactJS<\/a> component class (in JavaScript) that handles rendering the module inside of the Divi Builder. In this tutorial, you’ll learn how to create a custom header module. The module will be fully functional in the builder, both on the frontend and on the backend.<\/p>\n

Custom Divi Builder modules must be implemented within a theme, child-theme, or Divi Extension. In this tutorial we\u2019re going to implement a custom module in a Divi Extension. If you haven’t already done so, go ahead and create a Divi Extension<\/a>.<\/p>\n

Module Definition<\/h2>\n

Divi Builder modules are defined using a PHP class. Look inside your extension’s directory and find the example module located in includes\/modules<\/code>. We’ll use it as a starting point to create a custom header module. First, let\u2019s rename the HelloWorld<\/code> directory to SimpleHeader<\/code>. Next, rename HelloWorld.php<\/code> to SimpleHeader.php<\/code>, open it, and then edit it as shown below:<\/p>\n