1. Home
  2. Knowledge Base
  3. Codex
  4. JS API
  5. JS Functions
  6. DiviArea.register()
DiviArea.register(id, options, type)

Turns a plain element into a Divi Area. Both, Divi Areas Pro and Popups for Divi will call this function automatically for any detected Area. Use this function, if you want to manually turn any section/div/etc. into a Divi Area.

A registered Area is removed from the DOM tree and can be displayed again by calling DiviAreas.show().

Inline Areas:
When you register an Inline-Area, it is not removed from the DOM tree but stays visible without calling DiviAreas.show().


(string|jQuery) Identifies the Area to register. The # -prefix is optional.
(object) Optional. Area configuration.
When no options are defined, the area configuration is determined from the Area class and data attributes.
For a full list of options, see the DiviArea.config() documentation.
(string) Optional. Defines the Area type – possible values are popup, flyin, inline, hover.
When no type is defined, the area type is determined from the Area class: divi-area-type-<type>, e.g. divi-area-type-popup.


The function returns the Area as a jQuery element. When no element with the given id is found in the DOM tree, the return value is false.

When the Area was already registered earlier, the function returns the already registered Area element.


// The "#" prefix is optional. Following statements are identical:
// The return value is the jQuery element of the Area or false.
var area = DiviArea.register('#sample');
if (area) {
// Manually register a hover area.
DiviArea.register('#sample', {}, 'hover');

// And display the hover area next to any <a> element, on mouseenter.
jQuery('a').on('mousenter', function(event) {
    DiviArea.show('#sample', event);


Was this article helpful?

Related Articles