How to use the responsive editor

Responsive Editing mode enables you to design and edit layouts that automatically adapt for a seamless user experience across all devices.

How to access Responsive Editing mode

To activate you can use any one of the following methods:

1. Click the Responsive Toggle icon next to row, column, or module settings.

2. Navigate to the Tools menu and select Responsive Editing.

3. Use the keyboard shortcut 'R' to toggle Responsive Editing mode on and off.

Note: Once activated, Responsive Editing mode will remain enabled even after closing the Settings window. To exit, click the Exit button.

Responsive Editor UI

With Responsive Editor mode enabled, you can preview your page's layout on various screen sizes and make adjustments as needed to ensure a seamless and optimised user experience across all devices.

Breakpoint

The Breakpoint drop-down menu enables you to switch between different device sizes (Extra Large, Large, Medium, and Small). The responsive editor will automatically adjust to the selected device size, allowing you to preview and refine your layout. Additionally, the device buttons will update the Responsive Toggle in the row, column, or module settings, making it easy to optimise your design for various device sizes.

Width & Height

Use the Width and Height options to customize the layout preview dimensions, allowing for precise control and flexibility in testing your design's responsiveness.

Zoom

Adjust the preview scale using the Zoom options, which include 100%, 75%, 50%, and Fit to Window, allowing you to focus on specific details or view the layout in its entirety.

Drag Handles

Alternatively, use the Drag Handles to dynamically adjust the layout preview's dimensions. Simply click and hold a handle, then drag left/right to adjust the width or up/down to adjust the height, allowing for intuitive and precise resizing.