Mobile Design Mode
Last updated
Last updated
Mobile Design Mode is a feature within the builder that facilitates the creation and adjustment of designs for mobile devices. It offers an easy way to toggle between desktop and mobile views, simplifying the optimization process. It allows specific settings to be applied only to the mobile version of the design.
In the builder interface, you'll find toggle icons in the upper left-hand corner that let you switch between desktop and mobile views. Switching to mobile view reduces the builder content area to 320px. This mode features a grey backdrop for better visibility but it's not part of the design.
When you are in mobile view, you can proceed to use the builder's features just as you would in desktop view. The only exception is that the content area width option is unavailable.
Settings that can be applied specifically to the mobile version of the design are marked with a mobile indicator icon in the sidebar.
Next to the design mode toggle, you'll find a visibility icon resembling an eye. This feature is off by default. When enabled, it allows you to see content that is set to be hidden on the type of device corresponding to your current design mode. Hidden content will appear translucent.
Content that's hidden depending on the device type appears translucent in the design mode. For example, if you have two logos, one optimized for desktop and one for mobile, and you hide them appropriately, they will appear translucent in the opposite design mode.
If you wish to edit this hidden content, you'll need to switch to the design mode where it's visible. However, settings for these content blocks can be changed from any view.
Mobile Design Mode offers optimization settings that are exclusively applicable to mobile devices. These settings include:
Alignment
Button width
Padding
Spacer height
Text size
Look for the mobile icon in the sidebar to identify these options. If there are no mobile-specific settings, the icon will be gray. Once you make changes to these settings, the icon will turn purple, indicating that changes have been made specifically for the mobile version of the design.
