Add a Scalable, Custom-Width Editor Canvas

[x-kyrk]

Describe the Problem

When working in Elementor on a smaller display, such as a 13-inch laptop, it is difficult to accurately design and review desktop, laptop, and widescreen layouts inside the editor.

This is not a problem with Elementor’s responsive breakpoints or with how the website itself is designed. The desired breakpoints may already be configured correctly. The limitation is the editor workspace.

Elementor fits the editing canvas into the horizontal space left over after accounting for the editor panel and browser interface. On a smaller screen, this makes it difficult to work with larger viewport widths accurately.

Reducing the browser zoom creates more room, but it also shrinks the entire Elementor interface, including controls, labels, menus, and text. The page canvas cannot be adjusted independently from the rest of the editor.

Propose a Solution

Add independent viewport width and canvas scaling controls to the Elementor editor.

The user should be able to enter any custom preview width, such as:

1366px
1440px
1600px
1920px
Any other custom width

The editor could then provide a Fit to Workspace option that automatically scales the page canvas until the complete selected viewport fits within the available editor area.

For example, a user could enter a viewport width of 1920px and select Fit to Workspace. Elementor would display the complete 1920px canvas at whatever visual scale is necessary to fit the laptop screen.

The selected viewport would still behave as a 1920px viewport. Only its visual size inside the editor would be reduced.

The Elementor panels, controls, menus, and interface text would remain at their normal size.

Display the Current Canvas Scale

When Fit to Workspace is enabled, Elementor should display the automatically calculated canvas scale for reference.

For example:

Viewport width: 1920px
Canvas mode: Fit to Workspace
Current display scale: 58%

The scale could update automatically as the Elementor panel is opened, closed, or resized.

Users could also have the option to enter a custom scale when needed, but preset scale percentages would not be required.

Alternative 100% Canvas View

Elementor could also allow the canvas to be viewed at its actual 100% size.

When the selected viewport is wider than the available editor workspace, the canvas area would support independent horizontal and vertical scrolling.

This would allow users to pan across a full-size 1440px, 1600px, or 1920px page without forcing the canvas to shrink or changing the browser zoom.

Ideal Workflow

The viewport controls could include:

A custom width input
A custom height input
Fit to Workspace
Current scale percentage
Optional custom scale input
100% view with horizontal and vertical canvas scrolling

The viewport width and the canvas display scale should be separate settings.

Changing the canvas scale would only affect how large the page appears inside the editor. It would not change the website’s responsive breakpoint, CSS viewport width, or frontend appearance.

Example

A user working on a 13-inch laptop wants to edit a page at a 1600px viewport width.

They enter 1600px in the preview-width control and choose Fit to Workspace.

Elementor automatically scales the canvas to approximately 70% so the complete 1600px layout is visible. The Elementor interface remains at 100% size.

The user can then accurately edit the widescreen layout without reducing the browser zoom or changing the website’s breakpoint settings.

Additional Context

The main workaround is reducing the browser zoom. However, this shrinks the full Elementor interface rather than only the page canvas.

Another workaround is repeatedly switching between the editor and a separate frontend preview. This helps with testing, but it does not provide an efficient visual editing experience.

Neither workaround provides a custom-width canvas that can independently scale to fit the available workspace.

Benefits

This feature would:

Make desktop and widescreen editing practical on laptops and smaller monitors.
Allow users to preview any custom viewport width.
Preserve the actual selected viewport while visually scaling the canvas.
Keep Elementor’s controls and interface at a readable size.
Reduce dependence on browser zoom.
Reduce constant switching between the editor and frontend preview.
Improve the accuracy of responsive design work.
Bring Elementor’s canvas workflow closer to modern visual design tools and other visual website builders.

This would improve the editing experience without requiring users to change their website design, breakpoint strategy, or responsive workflow.

Agreement

• I confirm I have read and followed all the guidelines and instructions outlined in the Feature Request form.
• I agree that my discussion may be closed without further action if it doesn't meet all the requirements outlined in the Feature Request form.