Skip to main content
All CollectionsDevelopers
Divi Builder Javascript Hooks
Divi Builder Javascript Hooks

Learn about the Javascript hooks that are available in Divi Builder features.

Updated over a year ago

Layout

{module_type}.css.selector

Filters module selector on the rendered layout.

This filter is fired before selector processing. Third-party extensions may use this filter to modify module CSS selectors such as removing builder selector prefix, appending child element class, etc.

Type: Filter

Since: 4.0.0

Param

Type

Description

selector

string

Module selector.

type

string

Module slug.

Examples:

/**
 * Filters Hello World module selector after builder content is loaded.
 */
document.addEventListener('ETDOMContentLoaded', function() {
    // Module type: smpl_hello_world.
    wp.hooks.addFilter('smpl.hello.world.css.selector', 'smpl-setting-update', function(selector){
        // Processing Hello World module selector here ...
        return selector;
    });
});

{module_type}.processed.css.selector

Filters processed module selector on the rendered layout.

This filter is fired after selector processing. Third-party extensions may use this filter to modify module CSS selectors such as removing builder selector prefix, appending child element class, etc.

Type: Filter

Since: 4.17.6

Param

Type

Description

selector

string

Processed module selector.

type

string

Module slug.

Examples:

/**
 * Filters Hello World module selector after builder content is loaded.
 */
document.addEventListener('ETDOMContentLoaded', function() {
    // Module type: smpl_hello_world.
    wp.hooks.addFilter('smpl.hello.world.processed.css.selector', 'smpl-setting-update', function(selector){
        // Processing Hello World module selector here ...
        return selector;
    });
});
Did this answer your question?