Elementor Developers

# JS Hooks

Elementor Core Intermediate

Elementor has a number of JS hooks that allow developers to change default behavior and even add new functionality.

# Frontend Filters

# frontend/handlers/menu_anchor/scroll_top_distance

Applied to the menu anchor widget, sets a custom top distance

# Arguments

Argument Type Description
scrollTop integer The default scrollTop. It only takes the WordPress admin bar into account

# Example

jQuery( function( $ ) {
	// Add space for Elementor Menu Anchor link
	if ( window.elementorFrontend ) {
		elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor/scroll_top_distance', function( scrollTop ) {
			return scrollTop - 30;
		} );
	}
} );

add_action( 'wp_footer', function() {
 if ( ! defined( 'ELEMENTOR_VERSION' ) ) {
 return;
 }
	?>
	<script>
 jQuery( function( $ ) {
 // Add space for Elementor Menu Anchor link
 if ( window.elementorFrontend ) {
 elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor/scroll_top_distance', function( scrollTop ) {
 return scrollTop - 30;
 } );
 }
 } );
	</script>
	<?php
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# Frontend Actions

# elementor/frontend/init

Loads the Elementor frontend.

# Arguments

None

# Example

elementorFrontend.hooks.addAction( 'elementor/frontend/init', function() {
 // Do something that is based on the elementorFrontend object.
} );
1
2
3

# frontend/element_ready/global

Runs on every element (includes sections and columns) when it’s ready.

# Arguments

Argument Type Description
$scope The current element wrapped with jQuery
$ The jQuery instance

# Example

elementorFrontend.hooks.addAction( 'frontend/element_ready/global', function( $scope ) {
	if ( $scope.data( 'shake' ) ){
		$scope.shake();
	}
} );
1
2
3
4
5

# frontend/element_ready/widget

Runs on every widget when it’s ready.

# Arguments

Argument Type Description
$scope The current element wrapped with jQuery
$ The jQuery instance

# Example

elementorFrontend.hooks.addAction( 'frontend/element_ready/widget', function( $scope ) {
	if ( $scope.data( 'shake' ) ){
		$scope.shake();
	}
} );
1
2
3
4
5

# frontend/element_ready/{elementType.skinName}

Runs on a specific element type and its skin when it’s ready.

# Arguments

Argument Type Description
$scope The current element wrapped with jQuery
$ The jQuery instance

# Example

// For a widget without a skin (skin = default)
elementorFrontend.hooks.addAction( 'frontend/element_ready/image.default', function( $scope ) {
	if ( $scope.find( 'a' ) ){
		$scope.find( 'a' ).lightbox();
	}
} );

// For a widget with a skin named `satellite`
elementorFrontend.hooks.addAction( 'frontend/element_ready/google-maps.satellite', function( $scope ) {
	var $iframe = $scope.find( 'iframe' );
	var $iframeUrl = $iframe.attr( 'src' );
	$iframe.attr( 'src', $iframeUrl + '&maptype=satellite' );
} );
1
2
3
4
5
6
7
8
9
10
11
12
13

# Editor Hooks

# panel/open_editor/{elementType}

Applied when the settings panel is opened to edit an element.

# Arguments

Argument Type Description
panel object The panel object
model object The backbone model instance
view object The backbone view instance

# Example

elementor.hooks.addAction( 'panel/open_editor/widget', function( panel, model, view ) {
	if ( 'section' !== model.elType && 'column' !== model.elType ) {
		return;
	}
   var $element = view.$el.find( '.elementor-selector' );

   if ( $element.length ) {
   	$element.click( function() {
   	  alert( 'Some Message' );
   	} );
   }
} );
1
2
3
4
5
6
7
8
9
10
11
12

# panel/open_editor/{elementType}/{elementName}

Applied when the settings panel is opened to edit a specific element name.

# Arguments

Argument Type Description
panel object The panel object
model object The backbone model instance
view object The backbone view instance

# Example

elementor.hooks.addAction( 'panel/open_editor/widget/slider', function( panel, model, view ) {
   var $element = view.$el.find( '.elementor-selector' );

   if ( $element.length ) {
   	$element.click( function() {
   	  alert( 'Some Message' );
   	} );
   }
} );
1
2
3
4
5
6
7
8
9

←