How to Use the Mobile Design View with the Drag and Drop Editor

The Drag and Drop editor will also generate fully responsive messages. Now, you can easily view the mobile design without leaving the editor. You simply toggle between the mobile or desktop design views. 

How It Works

When editing a drag and drop message, you'll see two icons in the top left corner. These icons toggle between the desktop and mobile view.

The desktop view will allow you to work with the same builder you already know. If you switch to the mobile view, the builder content area will reduce to 320px. 

When you have the mobile view enabled, you can continue to design using all the same features and options. The only unavailable option is content area width. Keep in mind that the mobile design mode uses a grey backdrop that is not part of your design.

Editing in Mobile View

You can edit the message while in the Mobile Design View. These changes will also apply to the desktop version as well. This means that you can design the message in whatever way you feel more comfortable. 

Visibility Options 

Have you noticed that some content block appears translucent / out of focus? You're likely looking at content hidden from the design view you're using. Hidden content will appear translucent so you can quickly identify it.

If you'd prefer to see only the version of content intended for your design view, you can turn off visibility by clicking on the eye icon in the top left.

Specifying Mobile Only or Desktop Only Content

For a few design settings, you can specify that it applies to mobile or desktop only. You can identify these options by clicking to edit a content block and then looking for the mobile indicator in the sidebar. You can also choose to hide a whole row on desktop or mobile.

For example, you could insert two versions of your header into a message. One is an optimized logo only for mobile devices and the other is a separate logo and menu links for desktop devices. As a result, you have hidden these content blocks from the respective devices. In the desktop design view, content hidden from desktop (e.g. mobile only content) will appear translucent.