In Elementor it’s quite hard to see the true responsive preview within the Elementor Editor. You can only change to “Mobile” with 360 pixel width, “Tablet” with 768 pixel (default, it depends on the breakpoints) and “Desktop” with width depending on your screen size and resolution. The snippets below helps you to set several custom screen or browser dimensions.
Just insert the code within the Elementor Plugin at the file
/wp-content/plugins/elementor/includes/editor-templates/editor-wrapper.php
between
<div id="elementor-preview-responsive-wrapper" class="elementor-device-desktop elementor-device-rotate-portrait">
and
<div id="elementor-preview-loading">
Note: Please save the original file before editing.
The two mentioned lines above are in the code below. They must appear only once. So you can override them by copy and paste.
<div id="elementor-preview-responsive-wrapper" class="elementor-device-desktop elementor-device-rotate-portrait">
<!-- Custom Dimensions Elementor Editor START-->
<!-- Modification by flextensions.com -->
<style>
#elementor-preview-responsive-wrapper-resize-container {
position: relative;
top: 0px;
text-align: center;
}
.elementor-preview-responsive-wrapper-resize {
width: 58px;
}
</style>
<div id="elementor-preview-responsive-wrapper-resize-container">
<input id="resizer-width" type="number" size="4" step="10" class="elementor-preview-responsive-wrapper-resize"> x
<input id="resizer-height" type="number" size="4" step="10" class="elementor-preview-responsive-wrapper-resize">
<a href="#" id="responsive-mode-save">
<i class="elementor-icon eicon-save" aria-hidden="true"></i>
</a>
</div>
<script>
jQuery( window ).load( function () {
var responsiveMenu = jQuery( '#elementor-panel-footer-responsive .elementor-panel-footer-sub-menu');
var resizerContainer = jQuery( '#elementor-preview-responsive-wrapper-resize-container' );
var responsiveWrapper = jQuery( '#elementor-preview-responsive-wrapper' );
var minDesktopWidth = responsiveWrapper.css( 'min-width' ).replace( 'px', '' );
var resizerWidth = jQuery( '#resizer-width');
var resizerHeight = jQuery( '#resizer-height' );
var isDesktopMode = true;
var isFullHeight = true;
function showDimensions() {
resizerWidth.val( responsiveWrapper.width() );
if ( isDesktopMode && responsiveWrapper.height() > maxDesktopHeight ) {
responsiveWrapper.height( maxDesktopHeight );
resizerHeight.val( maxDesktopHeight );
}
else {
resizerHeight.val( responsiveWrapper.height() );
}
isFullHeight = ( resizerHeight.val() == maxDesktopHeight );
}
var mut = new MutationObserver(function(mutations, mut){
jQuery( '.elementor-responsive-switcher.tooltip-target' ).on( 'click', function () {
deviceClicked = jQuery( this ).data( 'device' );
if( deviceClicked != jQuery( 'body' ).attr( 'class' ).split( 'elementor-device-' )[1].split( ' ' )[0] ) {
responsiveWrapper.width( '' );
responsiveWrapper.height( '' );
jQuery( '.elementor-panel-footer-sub-menu-item' ).removeClass( 'active' );
jQuery( '[data-device-mode=' + deviceClicked + ']:not([data-mode])' ).addClass( 'active' );
}
});
});
mut.observe(document.querySelector('#elementor-panel-content-wrapper'),{
'attributes': true
});
let resizeObserver = new ResizeObserver(() => {
showDimensions();
});
resizeObserver.observe(responsiveWrapper[0]);
function getMaxDesktopHeight() {
maxDesktopHeight = jQuery( window ).height() - resizerContainer.height();
if ( isDesktopMode && isFullHeight ) {
responsiveWrapper.height( maxDesktopHeight );
}
}
getMaxDesktopHeight();
jQuery( window ).on( 'resize', getMaxDesktopHeight );
function addMenuTrigger() {
jQuery( '.elementor-panel-footer-sub-menu-item, .elementor-responsive-switcher' ).on( 'click', function () {
responsiveWrapper.width( '' );
responsiveWrapper.height( '' );
jQuery( '.elementor-panel-footer-sub-menu-item' ).removeClass( 'active' );
jQuery( this ).addClass( 'active' );
isDesktopMode = ( jQuery( this ).data( 'device-mode' ) == 'desktop' );
});
jQuery( '[data-mode="custom"]' ).on( 'click', function () {
responsiveWrapper.width( jQuery( this ).data( 'width' ) );
responsiveWrapper.height( jQuery( this ).data( 'height' ) );
});
jQuery( '.responsive-mode-delete' ).on( 'click', function () {
jQuery( this ).closest( '.elementor-panel-footer-sub-menu-item' ).remove();
});
}
addMenuTrigger();
resizerWidth.on( 'change', function () {
if( isDesktopMode && parseInt(jQuery( this ).val()) < minDesktopWidth) {
jQuery( this ).val( minDesktopWidth );
alert('Min width for desktop modus: ' + minDesktopWidth + ' pixels.');
responsiveWrapper.width( minDesktopWidth );
}
responsiveWrapper.width( jQuery( this ).val() );
});
resizerHeight.on( 'change', function () {
if( isDesktopMode && jQuery( this ).val() > maxDesktopHeight ) {
jQuery( this ).val( maxDesktopHeight );
alert('Max height for desktop modus: ' + maxDesktopHeight + ' pixels.');
isFullHeight = true;
}
else {
isFullHeight = false;
}
responsiveWrapper.height( jQuery( this ).val() );
});
function saveDimensions() {
var dataDeviceMode = jQuery( 'body' ).attr( 'class' ).split( 'elementor-device-' )[1].split( ' ' )[0];
jQuery( '#elementor-panel-footer-responsive' ).addClass( 'elementor-open' );
jQuery( '.elementor-panel-footer-sub-menu-item' ).removeClass( 'active' );
responsiveMenu.html( '<div class="elementor-panel-footer-sub-menu-item active" data-device-mode="' + dataDeviceMode +
'" data-mode="custom" data-width="' + resizerWidth.val() +
'" data-height="' + resizerHeight.val() +
'"><i class="elementor-icon eicon-device-' + dataDeviceMode +'" aria-hidden="true"></i><span class="elementor-title">Custom</span> <i class="elementor-icon eicon-close responsive-mode-delete" aria-hidden="true"></i><span class="elementor-description">' + resizerWidth.val() +
' x ' + resizerHeight.val() +
'</span></div>' +
responsiveMenu.html() );
addMenuTrigger(); // <i class="elementor-icon eicon-frame-expand" aria-hidden="true"></i>
}
jQuery( '#responsive-mode-save' ).on( 'click', saveDimensions );
});
</script>
<!-- Custom Dimensions Elementor Editor END-->
<div id="elementor-preview-loading">You can see the dimensions of the preview iframe on top of the page you’re editing. By changing the width (first input field) and height on top, the window size adjust as you leave the input field or you press enter. With the top and down arrows on the keyboard the pixel size increase or decrease by steps of 10.
By clicking on the Save Button ( ) the actual view is saved for this session. The button so choose the custom dimension of the preview appears at the “Responsive Mode” at the editor panel footer. You can add unlimit variations and delete them with .
