06. Final Step - Event Handling

Now in our final step we need to add devices to the event handler for this work. Now we will be editing editor.min.js file in following directory

elementor/assets/js/

If you check the file it will contain minified version of editor.js in same directory. It will be hard to identify and modify particular variables in minified versions, so what you can do it modify the editor.js file and minifying it using online tools and replace the contents of editor.min.js with minified version of your modified code.

Register Devices in JS File

Open your Editor.js file and check for the following code in line number 11145

Editor.js

initStylesheet: function() {
	var breakpoints = elementorFrontend.config.breakpoints;
	
	this.stylesheet = new Stylesheet();
	
	this.stylesheet
		.addDevice( 'mobile', 0 )
		.addDevice( 'tablet', breakpoints.md )
		.addDevice( 'desktop', breakpoints.lg );
},

just like we did earlier we will add our devices to the stylesheet object as follows

Please use copy button of the code panel, if you do manual select ,copy , paste it might break the code ! Gitbook Bug i guess..

Editor.js

initStylesheet: function() {
	var breakpoints = elementorFrontend.config.breakpoints;

	this.stylesheet = new Stylesheet();

	this.stylesheet
		.addDevice( 'width940', breakpoints.width940 )
		.addDevice( 'width900', breakpoints.width900 )
		.addDevice( 'width840', breakpoints.width840 )
		.addDevice( 'width800', breakpoints.width800 )
		.addDevice( 'width750', breakpoints.width750 )
		.addDevice( 'width700', breakpoints.width700 )
		.addDevice( 'width640', breakpoints.width640 )
		.addDevice( 'width540', breakpoints.width540 )
		.addDevice( 'width480', breakpoints.width480 )
		.addDevice( 'mobile', 0 )
		.addDevice( 'tablet', breakpoints.md )
		.addDevice( 'desktop', breakpoints.lg );
},

Now find the following devices variable at line number more or less to 5602

Editor.js

devices: [ 'desktop', 'tablet', 'mobile' ],

and replace it with following code adding devices to the list

Please use copy button of the code panel, if you do manual select ,copy , paste it might break the code ! Gitbook Bug i guess..

Editor.js

devices: [ 'desktop', 'tablet', 'mobile', 'width480', 'width540','width640','width700','width750','width800','width840','width900','width940'],

After Modifying the file replace the contents of editor.min.js file with the minified version of the above modified file. You can use any online minifier tools like JavaScript Minifier, Minifier which ever you like and replace it.

Only if the minified version of js or css is used in Elementor, So make sure the modification is updated in minified files for this to work.

Files Attachment

In case you need more reference you can check the modified files i have included.

383KB

editor.js

232KB

editor.min.js