STEP 5 – Customizing Your Layout for Different Screens

1. Click the blue add widget button at the top right corner of the editor screen.

2. Switch to the mobile screen option using the device screen selector. Notice that the layout from the desktop view is scaled down to fit inside the mobile screen. In many cases this outcome is not desired. Instead you may want to readjust the layout by resizing and repositioning the widgets in the layout. You may also want to make complex customizations to completely change the mobile experience.

You can do all of this of this once you toggle on customization for the desired screen size. Notice that when the customize toggle is off the toolbar is not visible. You'll want to toggle on the customize button to display the toolbar and make edits to the mobile layout.

3. Once you have made the desired adjustments you'll want to proof the page in the emulator. To do this all you need to do is click the preview button at the bottom right corner of the screen. Be sure to disable your browser's popup blocker before doing this.

4. Once your preview is ready a new tab will launch your page in the emulator. You can use the emulator controls to toggle between device modes. You can also point your device camera at the QR code displayed in the emulator to load the page directly on your device.