{"id":581,"date":"2021-10-05T17:28:24","date_gmt":"2021-10-05T11:58:24","guid":{"rendered":"https:\/\/codexcoach.com\/?p=581"},"modified":"2026-06-18T17:28:47","modified_gmt":"2026-06-18T11:58:47","slug":"custom-divi-builder-module","status":"publish","type":"post","link":"https:\/\/codexcoach.com\/custom-divi-builder-module\/","title":{"rendered":"How To Create Custom Divi Builder Module"},"content":{"rendered":"\n

What is the Divi Builder module?<\/h2>\n\n\n\n

Web programming languages such as PHP, JavaScript, HTML, CSS, and ReactJS are used to construct custom Divi modules. They are specified by a PHP class that defines all of the options and produces the HTML output of the module on the WordPress front end.<\/p>\n\n\n\n

Each module also includes a JavaScript ReactJS component class, which renders the module within the Divi Builder. CSS is used to style elements like effects and margins.<\/p>\n\n\n\n

How to Make a Divi Custom Module?<\/h2>\n\n\n\n

Creating a custom Divi module necessitates familiarity with the coding languages PHP, JavaScript, HTML, CSS, and ReactJS.<\/p>\n\n\n\n

You must first establish a development environment, then the extension, and finally the module. Let’s take a quick look at each stage.<\/p>\n\n\n\n

Try This Code<\/strong><\/p>\n\n\n\n

Easy way to create a Module for Divi Builder. Create the cxc-divi-module.php<\/strong> file and include it in the functions.php file (this file is located in your theme folder). You can use the below code to include the file cxc-divi-module.php<\/strong>.<\/p>\n\n\n\n

Module settings are defined in the get_fields() method.<\/p>\n\n\n\n

include ‘cxc-divi-module.php<\/strong>‘;<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<?php\nadd_action( 'et_builder_ready', 'cxc_custom_slider_register_modules' );\n\nfunction cxc_custom_slider_register_modules() {\n\n\tif( class_exists( 'ET_Builder_Module' ) ) {\n\n\t\tclass Logo_Slider extends ET_Builder_Module {\n\t\t\tfunction init() {\n\t\t\t\t$this->name       = et_builder_i18n( 'Logo Slider' );\n\t\t\t\t$this->plural     = esc_html__( 'Logo Slider', 'et_builder' );\n\t\t\t\t$this->slug       = 'et_pb_logo_slider';\n\t\t\t\t$this->vb_support = 'on';\n\t\t\t}\n\n\t\t\tpublic function get_fields() {\n\t\t\t\treturn array(\n\t\t\t\t\t'src'                 => array(\n\t\t\t\t\t\t'label'              => et_builder_i18n( 'Logo Image' ),\n\t\t\t\t\t\t'type'               => 'upload-gallery',\n\t\t\t\t\t\t'option_category'    => 'basic_option',\n\t\t\t\t\t\t'upload_button_text' => et_builder_i18n( 'Upload an image' ),\n\t\t\t\t\t\t'choose_text'        => esc_attr__( 'Choose an Image', 'et_builder' ),\n\t\t\t\t\t\t'update_text'        => esc_attr__( 'Set As Image', 'et_builder' ),\n\t\t\t\t\t\t'hide_metadata'      => true,\n\t\t\t\t\t\t'affects'            => array(\n\t\t\t\t\t\t\t'alt',\n\t\t\t\t\t\t\t'title_text',\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'description'        => esc_html__( 'Upload your desired image, or type in the URL to the image you would like to display.', 'et_builder' ),\n\t\t\t\t\t\t'toggle_slug'        => 'main_content',\n\t\t\t\t\t\t'dynamic_content'    => 'image',\n\t\t\t\t\t\t'mobile_options'     => true,\n\t\t\t\t\t\t'hover'              => 'tabs',\n\t\t\t\t\t),\n\t\t\t\t\t\n\t\t\t\t\t'wc_autoplay'            => array(\n\t\t\t\t\t\t'label'            => esc_html__( 'AutoPlay', 'et_builder' ),\n\t\t\t\t\t\t'description'      => esc_html__( "Disabling AutoPlay will remove the autoplay in slider.", 'et_builder' ),\n\t\t\t\t\t\t'type'             => 'yes_no_button',\n\t\t\t\t\t\t'option_category'  => 'basic_option',\n\t\t\t\t\t\t'options'          => array(\n\t\t\t\t\t\t\t'on'  => et_builder_i18n( 'Yes' ),\n\t\t\t\t\t\t\t'off' => et_builder_i18n( 'No' ),\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'default_on_front' => 'on',\n\t\t\t\t\t\t'toggle_slug'      => 'elements',\n\t\t\t\t\t\t'affects'          => array(\n\t\t\t\t\t\t\t'bullet_color',\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'mobile_options'   => true,\n\t\t\t\t\t\t'hover'            => 'tabs',\n\t\t\t\t\t),\n\t\t\t\t\t'wc_loop'            => array(\n\t\t\t\t\t\t'label'            => esc_html__( 'Loop', 'et_builder' ),\n\t\t\t\t\t\t'description'      => esc_html__( "Disabling Loop will remove the loop in slider.", 'et_builder' ),\n\t\t\t\t\t\t'type'             => 'yes_no_button',\n\t\t\t\t\t\t'option_category'  => 'basic_option',\n\t\t\t\t\t\t'options'          => array(\n\t\t\t\t\t\t\t'on'  => et_builder_i18n( 'Yes' ),\n\t\t\t\t\t\t\t'off' => et_builder_i18n( 'No' ),\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'default_on_front' => 'on',\n\t\t\t\t\t\t'toggle_slug'      => 'elements',\n\t\t\t\t\t\t'affects'          => array(\n\t\t\t\t\t\t\t'bullet_color',\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'mobile_options'   => true,\n\t\t\t\t\t\t'hover'            => 'tabs',\n\t\t\t\t\t),\n\t\t\t\t\t'time_duration' => array(\n\t\t\t\t\t\t'label'           => esc_html__( 'Time Duration', 'et_builder' ),\n\t\t\t\t\t\t'type'            => 'text',\n\t\t\t\t\t\t'option_category' => 'basic_option',\n\t\t\t\t\t\t'description'     => esc_html__( 'Enter Time Duration.', 'et_builder' ),\n\t\t\t\t\t\t'toggle_slug'     => 'main_content',\n\t\t\t\t\t),\t\t\t\t\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tpublic function render( $unprocessed_props, $content = null, $render_slug ) {\n\t\t\t\tob_start();\n\t\t\t\t$attachment_ids = $this->props['src'];\n\t\t\t\t$time_duration = $this->props['time_duration'];\n\n\t\t\t\tif( !empty( $time_duration ) ){\n\t\t\t\t\t$time_duration = $time_duration;\n\t\t\t\t}else{\n\t\t\t\t\t$time_duration = '5000';\n\t\t\t\t}\n\n\t\t\t\t$autoplay = $this->props['wc_autoplay'];\n\t\t\t\tif($autoplay == 'on'){\n\t\t\t\t\t$autoplay = 'true';\n\t\t\t\t}else{\n\t\t\t\t\t$autoplay = 'false';\n\t\t\t\t}\n\n\t\t\t\t$loop = $this->props['wc_loop'];\n\t\t\t\tif( $loop == 'on' ){\n\t\t\t\t\t$loop = 'true';\n\t\t\t\t}else{\n\t\t\t\t\t$loop = 'false';\n\t\t\t\t}\n\n\t\t\t\t$logo_cust_id = rand(1111111,9999999);\n\n\t\t\t\tif( !empty( $attachment_ids ) ){\n\t\t\t\t\t$attachment_ids = explode( ",", $attachment_ids );\n\t\t\t\t\tif( $attachment_ids ){\n\t\t\t\t\t\t?>\n\t\t\t\t\t\t<link rel="stylesheet" href="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/OwlCarousel2\/2.3.4\/assets\/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj\/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" \/>\n\t\t\t\t\t\t<link rel="stylesheet" href="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/OwlCarousel2\/2.3.4\/assets\/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4\/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa\/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" \/>\n\t\t\t\t\t\t<div id="logo-slider-<?php echo $logo_cust_id; ?>" class="owl-carousel owl-theme">\n\t\t\t\t\t\t\t<?php\n\t\t\t\t\t\t\tforeach($attachment_ids as $attachment_id){\n\t\t\t\t\t\t\t\t?>\n\t\t\t\t\t\t\t\t<div class="item1">\n\t\t\t\t\t\t\t\t\t<img width="180" height="80" src="<?php echo wp_get_attachment_url( $attachment_id );?>">\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<?php } \n\t\t\t\t\t\t\t?>\n\t\t\t\t\t\t<\/div>\t\t\t\t\n\t\t\t\t\t\t<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/OwlCarousel2\/2.3.4\/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7\/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"><\/script>\n\t\t\t\t\t\t<script>\n\t\t\t\t\t\t\tjQuery(document).ready(function($){\n\t\t\t\t\t\t\t\t$('#logo-slider-<?php echo $logo_cust_id; ?>').owlCarousel({\n\t\t\t\t\t\t\t\t\tloop: <?php echo $loop; ?>,\n\t\t\t\t\t\t\t\t\tmargin: 30,\n\t\t\t\t\t\t\t\t\tautoplay:<?php echo $autoplay; ?>,\n\t\t\t\t\t\t\t\t\tautoplayTimeout:<?php echo $time_duration; ?>,\n\t\t\t\t\t\t\t\t\tnav:true,\n\t\t\t\t\t\t\t\t\tdots: false,\n\t\t\t\t\t\t\t\t\tresponsiveClass: true,\n\t\t\t\t\t\t\t\t\tresponsive: {\n\t\t\t\t\t\t\t\t\t\t0: {\n\t\t\t\t\t\t\t\t\t\t\titems: 1,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t600: {\n\t\t\t\t\t\t\t\t\t\t\titems: 3,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t1000: {\n\t\t\t\t\t\t\t\t\t\t\titems: 5,\n\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t<\/script>\n\t\t\t\t\t\t<?php\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn ob_get_clean();\n\t\t\t}\n\t\t}\n\t\tnew Logo_Slider;\n\t}\n}\n?><\/code><\/pre><\/div>\n\n\n\n
Conclusion<\/strong><\/p>\n\n\n\n
Divi Builder is now a wiser WordPress page builder tool than it was before, thanks to additional features like more modules, a front-end visual editor, and more layouts.<\/p>\n\n\n\n
There are over 30 content modules to pick from, as well as a plethora of fantastic configurable page layouts. Divi Builder is a truly versatile tool that allows users to create any type of website with WordPress.<\/p>\n
<\/div>","protected":false},"excerpt":{"rendered":"
What is the Divi Builder module? Web programming languages such as PHP, JavaScript, HTML, CSS, and ReactJS are used to construct custom Divi modules. They are specified by a PHP class that defines all of the options and produces the HTML output of the module on the WordPress front end. Each module also includes a […]<\/p>\n","protected":false},"author":1,"featured_media":15771,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_aib_schema_json_ld":""},"categories":[7,10],"tags":[],"_links":{"self":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/581"}],"collection":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/comments?post=581"}],"version-history":[{"count":7,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/581\/revisions"}],"predecessor-version":[{"id":1447,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/581\/revisions\/1447"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/media\/15771"}],"wp:attachment":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/media?parent=581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/categories?post=581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/tags?post=581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}