Responsive Editing

Responsive Editing Mode lets you preview pages as they appear on medium and small devices and edit them directly in that device size view.

The Drag & Drop editor's default layout is for large screens, and Responsive Editing Mode makes it much easier to adjust the settings for medium and small devices. If you prefer, you can enter Responsive Editing Mode immediately and build a mobile layout, then adjust for larger screens. Either way, chances are that as you work you will want to tweak your original design to optimize it for every device size.

Enter Responsive Editing Mode in any of the following ways:

  • Click the responsive settings icon next to settings that have it for a row, column, or module.
    Your page view will stay in responsive editing mode even if you close the Settings window. Use the Exit button to close responsive editing.
  • On the Tools menu, click Responsive editing.
  • Type the keyboard shortcut R
    This keyboard shortcut toggles responsive editing mode to open in medium device view, change from medium to small device view, and close the responsive editing window.
    Note that keyboard shortcuts are always lowercase letters.

mobile layout options

Column Stacking:

Make sure the columns have stacked the way you expected them to. You can reverse the stacking order, or you can prevent stacking by adding column width values in the small-device column settings. For example, to preserve the layout from the large screen used in this example, set each of the four column widths to 50%.

Reverse column stacking order:

By default, column groups (columns that stand side by side on a large device) change to stacked columns on a small device, where left to right becomes top to bottom.

You can easily reverse the stacking order with a setting on the Advanced tab so the columns stack bottom to top. The reversed stacking order applies to the entire column group, so you only have to change the setting for one of the columns in the group.

Prevent column stacking with custom widths:

You can prevent column stacking on smaller devices by setting column widths differently for each device size.

More Information: