{"id":2533,"date":"2018-04-18T19:37:56","date_gmt":"2018-04-19T02:37:56","guid":{"rendered":"https:\/\/www.elegantthemes.com\/documentation\/?p=2533"},"modified":"2022-07-12T23:04:14","modified_gmt":"2022-07-13T06:04:14","slug":"divi-builder-javascript-api","status":"publish","type":"post","link":"https:\/\/www.elegantthemes.com\/documentation\/developers\/code-reference\/divi-builder-javascript-api\/","title":{"rendered":"Divi Builder JavaScript API"},"content":{"rendered":"<h2>window : <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Window\" target=\"_blank\" rel=\"noopener\"><code style=\"font-size: 16px;\">Window<\/code><\/a><\/h2>\n<p>Global window object.<\/p>\n<p><strong>Kind<\/strong>: global typedef<br \/>\n<strong>Emits<\/strong>: <code>event:et_builder_api_ready<\/code><\/p>\n<h2 id=\"etbuildermodule--codereact.componentcode--codeobjectcode\">ETBuilderModule : <a href=\"https:\/\/reactjs.org\/docs\/react-component.html\" target=\"_blank\" rel=\"noopener\"><code>React.Component<\/code><\/a> | <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\" target=\"_blank\" rel=\"noopener\"><code>object<\/code><\/a><\/h2>\n<p>Custom module for the Divi Builder.<\/p>\n<p><strong>Kind<\/strong>: global typedef<\/p>\n<p><strong>Static Properties (Required)<\/strong><\/p>\n<table class=\"responsiveTable\">\n<thead>\n<tr>\n<th>Name<\/th>\n<th>Type<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>slug<\/td>\n<td><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/td>\n<td>The module\u2019s slug as defined in it\u2019s PHP class<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p><strong>Methods (Required)<\/strong><\/p>\n<table class=\"responsiveTable\">\n<thead>\n<tr>\n<th>Name<\/th>\n<th>Type<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/reactjs.org\/docs\/react-component.html#render\" target=\"_blank\" rel=\"noopener\">render<\/a><\/td>\n<td><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Function\" target=\"_blank\" rel=\"noopener\"><code>function<\/code><\/a><\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 id=\"api\">API<\/h2>\n<p>Divi Builder API object passed to registered callbacks of the <a>event:et_builder_api_ready<\/a> event.<\/p>\n<p><strong>Kind<\/strong>: global constant<\/p>\n<ul>\n<li><a href=\"#API\">API<\/a>\n<ul>\n<li><a href=\"#API.Modules\">.Modules<\/a>\n<ul>\n<li><a href=\"#API.Modules.register\">.register(modules)<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#API.Utils\">.Utils<\/a>\n<ul>\n<li><a href=\"#API.Utils._\">._()<\/a><\/li>\n<li><a href=\"#API.Utils.classnames\">.classnames()<\/a> \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/li>\n<li><a href=\"#API.Utils.decodeOptionListValue\">.decodeOptionListValue(encoded_value)<\/a> \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\" target=\"_blank\" rel=\"noopener\"><code>object<\/code><\/a><\/li>\n<li><a href=\"#API.Utils.fontnameToClass\">.fontnameToClass(font_name)<\/a> \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/li>\n<li><a href=\"#API.Utils.linkRel\">.linkRel(saved_value)<\/a> \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/li>\n<li><a href=\"#API.Utils.maybeLoadFont\">.maybeLoadFont(font_name)<\/a><\/li>\n<li><a href=\"#API.Utils.processFontIcon\">.processFontIcon(icon, is_down_icon)<\/a> \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/li>\n<li><a href=\"#API.Utils.setElementFont\">.setElementFont(font_data, use_important, default_values)<\/a> \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/li>\n<li><a href=\"#utils.hasValue-value-\u21d2-codebooleancode\">.hasValue(value)<\/a> \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Boolean\" target=\"_blank\" rel=\"noopener\"><code>boolean<\/code><\/a><\/li>\n<li><a href=\"#utils.generateStyles-moduleArgs-\u21d2-codearraycode\">.generateStyles(moduleArgs)<\/a> \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\" target=\"_blank\" rel=\"noopener\"><code>array<\/code><\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#API.isRegistered\">.isRegistered(slug)<\/a> \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Boolean\" target=\"_blank\" rel=\"noopener\"><code>boolean<\/code><\/a><\/li>\n<li><a href=\"#API.registerModules\">.registerModules(modules)<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3 id=\"api.modules\">API.Modules<\/h3>\n<p>Manage custom modules.<\/p>\n<p><strong>Kind<\/strong>: static property of <a href=\"#API\"><code>API<\/code><\/a><br \/>\n<strong>Since<\/strong>: 3.1<\/p>\n<h4 id=\"modules.registermodules\">Modules.register(modules)<\/h4>\n<p>Register one or more custom modules.<\/p>\n<p><strong>Kind<\/strong>: static method of <a href=\"#API.Modules\"><code>Modules<\/code><\/a><br \/>\n<strong>Since<\/strong>: 3.1<\/p>\n<table class=\"responsiveTable\">\n<thead>\n<tr>\n<th>Param<\/th>\n<th>Type<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>modules<\/td>\n<td><a href=\"#ETBuilderModule\"><code>Array.&lt;ETBuilderModule&gt;<\/code><\/a><\/td>\n<td>Modules to register.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h3 id=\"api.utils\">API.Utils<\/h3>\n<p>Useful functions<\/p>\n<p><strong>Kind<\/strong>: static property of <a href=\"#API\"><code>API<\/code><\/a><br \/>\n<strong>Since<\/strong>: 3.1<\/p>\n<ul>\n<li><a href=\"#API.Utils\">.Utils<\/a>\n<ul>\n<li><a href=\"#API.Utils._\">._()<\/a><\/li>\n<li><a href=\"#API.Utils.classnames\">.classnames()<\/a> \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/li>\n<li><a href=\"#API.Utils.decodeOptionListValue\">.decodeOptionListValue(encoded_value)<\/a> \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\" target=\"_blank\" rel=\"noopener\"><code>object<\/code><\/a><\/li>\n<li><a href=\"#API.Utils.fontnameToClass\">.fontnameToClass(font_name)<\/a> \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/li>\n<li><a href=\"#API.Utils.linkRel\">.linkRel(saved_value)<\/a> \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/li>\n<li><a href=\"#API.Utils.maybeLoadFont\">.maybeLoadFont(font_name)<\/a><\/li>\n<li><a href=\"#API.Utils.processFontIcon\">.processFontIcon(icon, is_down_icon)<\/a> \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/li>\n<li><a href=\"#API.Utils.setElementFont\">.setElementFont(font_data, use_important, default_values)<\/a> \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/li>\n<li><a href=\"#utils.hasValue-value-\u21d2-codebooleancode\">.hasValue(value)<\/a> \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Boolean\" target=\"_blank\" rel=\"noopener\"><code>boolean<\/code><\/a><\/li>\n<li><a href=\"#utils.generateStyles-moduleArgs-\u21d2-codearraycode\">.generateStyles(moduleArgs)<\/a> \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\" target=\"_blank\" rel=\"noopener\"><code>array<\/code><\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4 id=\"utils._\">Utils._()<\/h4>\n<p>Lodash &#8211; A modern JavaScript utility library delivering modularity, performance &amp; extras.<\/p>\n<p><strong>Kind<\/strong>: static method of <a href=\"#API.Utils\"><code>Utils<\/code><\/a><br \/>\n<strong>Link<\/strong>: <a href=\"https:\/\/github.com\/lodash\/lodash\">https:\/\/github.com\/lodash\/lodash<\/a><br \/>\n<strong>License<\/strong>: MIT<br \/>\n<strong>Copyright<\/strong>: JS Foundation and other contributors <a href=\"https:\/\/js.foundation\/\">https:\/\/js.foundation\/<\/a><\/p>\n<h4 id=\"utils.classnames-\u21d2-codestringcode\">Utils.classnames() \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/h4>\n<p>Generates className value based on the args provided. Takes any number of args which can be a string or an object. The argument <code>foo<\/code> is short for <code>{ foo: true }<\/code>. If the value associated with a given key is falsy, the key won\u2019t be included in the output.<\/p>\n<p><strong>Kind<\/strong>: static method of <a href=\"#API.Utils\"><code>Utils<\/code><\/a><br \/>\n<strong>Link<\/strong>: <a href=\"https:\/\/github.com\/JedWatson\/classnames\">https:\/\/github.com\/JedWatson\/classnames<\/a><br \/>\n<strong>License<\/strong>: MIT<br \/>\n<strong>Copyright<\/strong>: 2017 Jed Watson<\/p>\n<table class=\"responsiveTable\">\n<thead>\n<tr>\n<th>Type<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\"><code>string<\/code><\/a> | <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\" target=\"_blank\" rel=\"noopener\"><code>Object.&lt;string, boolean&gt;<\/code><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Examples:<\/strong><\/p>\n<pre>classNames('foo', 'bar');                 \/\/ =&gt; 'foo bar'\r\nclassNames('foo', { bar: true });         \/\/ =&gt; 'foo bar'\r\nclassNames({ 'foo-bar': true });          \/\/ =&gt; 'foo-bar'\r\nclassNames({ 'foo-bar': false });         \/\/ =&gt; ''\r\nclassNames({ foo: true }, { bar: true }); \/\/ =&gt; 'foo bar'\r\nclassNames({ foo: true, bar: true });     \/\/ =&gt; 'foo bar'<\/pre>\n<p>&nbsp;<\/p>\n<h4 id=\"utils.decodeoptionlistvalueencoded_value-\u21d2-codeobjectcode\">Utils.decodeOptionListValue(encoded_value) \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\" target=\"_blank\" rel=\"noopener\"><code>object<\/code><\/a><\/h4>\n<p>Decode string value of <code>option_list<\/code> module setting field type.<\/p>\n<p><strong>Kind<\/strong>: static method of <a href=\"#API.Utils\"><code>Utils<\/code><\/a><br \/>\n<strong>Since<\/strong>: 3.1<\/p>\n<table class=\"responsiveTable\">\n<thead>\n<tr>\n<th>Param<\/th>\n<th>Type<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>encoded_value<\/td>\n<td><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/td>\n<td>Value to be decoded<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h4 id=\"utils.fontnametoclassfont_name-\u21d2-codestringcode\">Utils.fontnameToClass(font_name) \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/h4>\n<p>Returns CSS class for a google font.<\/p>\n<p><strong>Kind<\/strong>: static method of <a href=\"#API.Utils\"><code>Utils<\/code><\/a><br \/>\n<strong>Since??<\/strong>:<\/p>\n<table class=\"responsiveTable\">\n<thead>\n<tr>\n<th>Param<\/th>\n<th>Type<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>font_name<\/td>\n<td><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/td>\n<td>Font name for which to return a CSS class<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h4 id=\"utils.linkrelsaved_value-\u21d2-codestringcode\">Utils.linkRel(saved_value) \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/h4>\n<p>Generate link rel HTML attribute value based on a value saved in a module\u2019s settings.<\/p>\n<p><strong>Kind<\/strong>: static method of <a href=\"#API.Utils\"><code>Utils<\/code><\/a><br \/>\n<strong>Since<\/strong>: 3.1<\/p>\n<table class=\"responsiveTable\">\n<thead>\n<tr>\n<th>Param<\/th>\n<th>Type<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>saved_value<\/td>\n<td><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/td>\n<td>Value saved in module settings<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h4 id=\"utils.maybeloadfontfont_name\">Utils.maybeLoadFont(font_name)<\/h4>\n<p>Loads a Google Font if it hasn\u2019t already been loaded.<\/p>\n<p><strong>Kind<\/strong>: static method of <a href=\"#API.Utils\"><code>Utils<\/code><\/a><br \/>\n<strong>Since<\/strong>: 3.1<\/p>\n<table class=\"responsiveTable\">\n<thead>\n<tr>\n<th>Param<\/th>\n<th>Type<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>font_name<\/td>\n<td><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/td>\n<td>The name of the font to load<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h4 id=\"utils.processfonticonicon-is_down_icon-\u21d2-codestringcode\">Utils.processFontIcon(icon, is_down_icon) \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/h4>\n<p>Generates HTML for a saved font-based icon value.<\/p>\n<p><strong>Kind<\/strong>: static method of <a href=\"#API.Utils\"><code>Utils<\/code><\/a><br \/>\n<strong>Since<\/strong>: 3.1<\/p>\n<table class=\"responsiveTable\">\n<thead>\n<tr>\n<th>Param<\/th>\n<th>Type<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>icon<\/td>\n<td><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/td>\n<td>The saved icon value<\/td>\n<\/tr>\n<tr>\n<td>is_down_icon<\/td>\n<td><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Boolean\" target=\"_blank\" rel=\"noopener\"><code>boolean<\/code><\/a><\/td>\n<td>Whether or not the icon is one of the down arrow icons<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h4 id=\"utils.setelementfontfont_data-use_important-default_values-\u21d2-codestringcode\">Utils.setElementFont(font_data, use_important, default_values) \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/h4>\n<p>Generates font related CSS style properties from font data saved in a module\u2019s settings.<\/p>\n<p><strong>Kind<\/strong>: static method of <a href=\"#API.Utils\"><code>Utils<\/code><\/a><br \/>\n<strong>Since<\/strong>: 3.1<\/p>\n<table class=\"responsiveTable\">\n<thead>\n<tr>\n<th>Param<\/th>\n<th>Type<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>font_data<\/td>\n<td><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/td>\n<td>Font data saved in module settings<\/td>\n<\/tr>\n<tr>\n<td>use_important<\/td>\n<td><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Boolean\" target=\"_blank\" rel=\"noopener\"><code>boolean<\/code><\/a><\/td>\n<td>Whether or not to use <code>!important<\/code><\/td>\n<\/tr>\n<tr>\n<td>default_values<\/td>\n<td><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\" target=\"_blank\" rel=\"noopener\"><code>object<\/code><\/a><\/td>\n<td>Mapping of default values for the font settings<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h4 id=\"utils.hasValue-value-\u21d2-codebooleancode\">Utils.hasValue(value) \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Boolean\" target=\"_blank\" rel=\"noopener\"><code>boolean<\/code><\/a><\/h4>\n<p>Check whether given value can be printed or not (string). Originally a simpler way to check against empty string, but later several checks were added as well to avoid unnecessary repetition. A value considered empty if:<\/p>\n<ul>\n<li>&#8211; is an empty string<\/li>\n<li>&#8211; is undefined<\/li>\n<li>&#8211; is false<\/li>\n<li>&#8211; is NaN<\/li>\n<\/ul>\n<p><strong>Kind<\/strong>: static method of <a href=\"#utils._\"><code>Utils<\/code><\/a><br \/>\n<strong>Since<\/strong>: 4.14.9<\/p>\n<table class=\"responsiveTable\">\n<thead>\n<tr>\n<th>Param<\/th>\n<th>Type<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>value<\/td>\n<td><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\" target=\"_blank\" rel=\"noopener\"><code>mixed<\/code><\/a><\/td>\n<td>Value to check.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h4 id=\"utils.generateStyles-moduleArgs-\u21d2-codearraycode\">Utils.generateStyles(moduleArgs) \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\" target=\"_blank\" rel=\"noopener\"><code>array<\/code><\/a><\/h4>\n<p>Use the `Responsive.generateResponsiveCSS` with addition to generate sticky state styles if module enable it.<\/p>\n<p><strong>Kind<\/strong>: static method of <a href=\"#utils._\"><code>Utils<\/code><\/a><br \/>\n<strong>Since<\/strong>: 4.17.5<\/p>\n<table class=\"responsiveTable\">\n<thead>\n<tr>\n<th>Param<\/th>\n<th>Type<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>moduleArgs<\/td>\n<td><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\" target=\"_blank\" rel=\"noopener\"><code>object<\/code><\/a><\/td>\n<td>Module arguments.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Examples:<\/strong><\/p>\n<pre>\r\n\/**\r\n * Module arguments.\r\n *\r\n * @typedef moduleArgs\r\n * @type {Object}\r\n * @property {string} address: ''\r\n * @property {Object} attrs: {}\r\n * @property {string} name: ''\r\n * @property {string} defaultValue: ''\r\n * @property {string} type: ''\r\n * @property {boolean} forceReturn: false\r\n * @property {string} selector: '%%order_class%%'\r\n * @property {string} cssProperty: ''\r\n * @property {boolean} important: false\r\n * @property {boolean} hover: true\r\n * @property {boolean} sticky: true\r\n * @property {boolean} responsive: true\r\n * @property {null|boolean} isStickyModule: null\r\n * @property {string} stickyPseudoSelectorLocation: 'order_class'\r\n *\/\r\n\r\n\/**\r\n * Hello World module inline styling.\r\n *\r\n * @param {Object} props Module attribute names and values.\r\n * @param {Object} moduleInfo Module info.\r\n *\r\n * @return array\r\n *\/\r\nstatic css(props, moduleInfo) {\r\n  const additionalCSS = [];\r\n  const {\r\n    generateStyles,\r\n  } = window.ET_Builder.API.Utils;\r\n\r\n  \/**\r\n   * Box colors arguments.\r\n   *\r\n   * @var {moduleArgs}\r\n   *\/\r\n  const boxColorsArgs = {\r\n    attrs: props,\r\n    name: 'box_color',\r\n    selector: '%%order_class%% .smpl-hello-world-box-area',\r\n    cssProperty: 'background-color',\r\n  };\r\n  const boxColors     = generateStyles(boxColorsArgs);\r\n\r\n  \/**\r\n   * boxColors output:\r\n   * \r\n   * [\r\n   *    {\r\n   *       selector: '%%order_class%% .smpl-hello-world-box-area',\r\n   *       declaration: 'background-color: red;',\r\n   *       device: 'desktop', \/\/ desktop, tablet, phone\r\n   *    }\r\n   * ]\r\n   *\/\r\n  additionalCSS.push(boxColors);\r\n\r\n  return additionalCSS;\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h3 id=\"api.isregisteredslug-\u21d2-codebooleancode\">API.isRegistered(slug) \u21d2 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Boolean\" target=\"_blank\" rel=\"noopener\"><code>boolean<\/code><\/a><\/h3>\n<p>Whether or not a component is registered.<\/p>\n<p><strong>Kind<\/strong>: static method of <a href=\"#API\"><code>API<\/code><\/a><br \/>\n<strong>Since<\/strong>: 3.1<\/p>\n<table class=\"responsiveTable\">\n<thead>\n<tr>\n<th>Param<\/th>\n<th>Type<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>slug<\/td>\n<td><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\" target=\"_blank\" rel=\"noopener\"><code>string<\/code><\/a><\/td>\n<td>The component\u2019s slug<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h3 id=\"api.registermodulesmodules\">API.registerModules(modules)<\/h3>\n<p>Convenience wrapper for <a href=\"#modules.registermodules\">register<\/a><\/p>\n<p><strong>Kind<\/strong>: static method of <a href=\"#API\"><code>API<\/code><\/a><br \/>\n<strong>Since<\/strong>: 3.1<\/p>\n<table class=\"responsiveTable\">\n<thead>\n<tr>\n<th>Param<\/th>\n<th>Type<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>modules<\/td>\n<td><a href=\"#ETBuilderModule\"><code>Array.&lt;ETBuilderModule&gt;<\/code><\/a><\/td>\n<td>Modules to register.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>The builder&#8217;s JavaScript API definition.<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,22],"tags":[],"class_list":["post-2533","post","type-post","status-publish","format-standard","hentry","category-code-reference","category-developers"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Elegant Themes Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.elegantthemes.com\/documentation\/developers\/code-reference\/divi-builder-javascript-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Divi Builder JavaScript API - Elegant Themes Documentation\" \/>\n<meta property=\"og:description\" content=\"The builder&#039;s JavaScript API definition.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.elegantthemes.com\/documentation\/developers\/code-reference\/divi-builder-javascript-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Elegant Themes Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-19T02:37:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-13T06:04:14+00:00\" \/>\n<meta name=\"author\" content=\"Dustin Falgout\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dustin Falgout\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/code-reference\\\/divi-builder-javascript-api\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/code-reference\\\/divi-builder-javascript-api\\\/\"},\"author\":{\"name\":\"Dustin Falgout\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/0e2387f96b40940c4d33e54bac52e79b\"},\"headline\":\"Divi Builder JavaScript API\",\"datePublished\":\"2018-04-19T02:37:56+00:00\",\"dateModified\":\"2022-07-13T06:04:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/code-reference\\\/divi-builder-javascript-api\\\/\"},\"wordCount\":644,\"articleSection\":[\"Code Reference\",\"Developer Documentation\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/code-reference\\\/divi-builder-javascript-api\\\/\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/code-reference\\\/divi-builder-javascript-api\\\/\",\"name\":\"Divi Builder JavaScript API - Elegant Themes Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\"},\"datePublished\":\"2018-04-19T02:37:56+00:00\",\"dateModified\":\"2022-07-13T06:04:14+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/0e2387f96b40940c4d33e54bac52e79b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/code-reference\\\/divi-builder-javascript-api\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/code-reference\\\/divi-builder-javascript-api\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/developers\\\/code-reference\\\/divi-builder-javascript-api\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Divi Builder JavaScript API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\",\"name\":\"Elegant Themes Documentation\",\"description\":\"Just another WordPress site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/0e2387f96b40940c4d33e54bac52e79b\",\"name\":\"Dustin Falgout\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4e8ced4a3ccff2b6839ae64b6e01266bb3da7dcbd5d0d391a1886029e7feac13?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4e8ced4a3ccff2b6839ae64b6e01266bb3da7dcbd5d0d391a1886029e7feac13?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4e8ced4a3ccff2b6839ae64b6e01266bb3da7dcbd5d0d391a1886029e7feac13?s=96&d=mm&r=g\",\"caption\":\"Dustin Falgout\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elegant Themes Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.elegantthemes.com\/documentation\/developers\/code-reference\/divi-builder-javascript-api\/","og_locale":"en_US","og_type":"article","og_title":"Divi Builder JavaScript API - Elegant Themes Documentation","og_description":"The builder's JavaScript API definition.","og_url":"https:\/\/www.elegantthemes.com\/documentation\/developers\/code-reference\/divi-builder-javascript-api\/","og_site_name":"Elegant Themes Documentation","article_published_time":"2018-04-19T02:37:56+00:00","article_modified_time":"2022-07-13T06:04:14+00:00","author":"Dustin Falgout","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dustin Falgout","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.elegantthemes.com\/documentation\/developers\/code-reference\/divi-builder-javascript-api\/#article","isPartOf":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/developers\/code-reference\/divi-builder-javascript-api\/"},"author":{"name":"Dustin Falgout","@id":"https:\/\/www.elegantthemes.com\/documentation\/#\/schema\/person\/0e2387f96b40940c4d33e54bac52e79b"},"headline":"Divi Builder JavaScript API","datePublished":"2018-04-19T02:37:56+00:00","dateModified":"2022-07-13T06:04:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/developers\/code-reference\/divi-builder-javascript-api\/"},"wordCount":644,"articleSection":["Code Reference","Developer Documentation"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.elegantthemes.com\/documentation\/developers\/code-reference\/divi-builder-javascript-api\/","url":"https:\/\/www.elegantthemes.com\/documentation\/developers\/code-reference\/divi-builder-javascript-api\/","name":"Divi Builder JavaScript API - Elegant Themes Documentation","isPartOf":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/#website"},"datePublished":"2018-04-19T02:37:56+00:00","dateModified":"2022-07-13T06:04:14+00:00","author":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/#\/schema\/person\/0e2387f96b40940c4d33e54bac52e79b"},"breadcrumb":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/developers\/code-reference\/divi-builder-javascript-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.elegantthemes.com\/documentation\/developers\/code-reference\/divi-builder-javascript-api\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.elegantthemes.com\/documentation\/developers\/code-reference\/divi-builder-javascript-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.elegantthemes.com\/documentation\/"},{"@type":"ListItem","position":2,"name":"Divi Builder JavaScript API"}]},{"@type":"WebSite","@id":"https:\/\/www.elegantthemes.com\/documentation\/#website","url":"https:\/\/www.elegantthemes.com\/documentation\/","name":"Elegant Themes Documentation","description":"Just another WordPress site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.elegantthemes.com\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.elegantthemes.com\/documentation\/#\/schema\/person\/0e2387f96b40940c4d33e54bac52e79b","name":"Dustin Falgout","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4e8ced4a3ccff2b6839ae64b6e01266bb3da7dcbd5d0d391a1886029e7feac13?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4e8ced4a3ccff2b6839ae64b6e01266bb3da7dcbd5d0d391a1886029e7feac13?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4e8ced4a3ccff2b6839ae64b6e01266bb3da7dcbd5d0d391a1886029e7feac13?s=96&d=mm&r=g","caption":"Dustin Falgout"}}]}},"_links":{"self":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts\/2533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/comments?post=2533"}],"version-history":[{"count":20,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts\/2533\/revisions"}],"predecessor-version":[{"id":10123,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts\/2533\/revisions\/10123"}],"wp:attachment":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/media?parent=2533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/categories?post=2533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/tags?post=2533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}