Mobile Customization

The Mobile Customization feature allows users to optimize website layouts, navigation, and performance specifically for mobile devices and tablets. You can adjust layouts, edit content, change fonts and colors, rearrange elements, add or hide sections, widgets, etc.

How to enable Mobile Customization mode?

1. Click on the monitor icon in the top bar.
2. Select the phone device from the list.

However, you can enable mobile customization mode to adjust the mobile view.

3. Open the ‘Device Preview’ by clicking on the mobile icon in the top bar. Next, switch the ‘Device state’ toggle.

Now you can adjust the position, dimensions, scale, opacity, and other properties of widgets in your layout for mobile view.

5. You can hide the unnecessary widgets for mobile view without affecting the desktop view.

How to create a separate section for mobile view?

If you want to make changes such as removing a widget, changing the text of a text block, or rearranging widgets in the layers panel without affecting the desktop view, you can create a separate section for mobile.

1. Switch to the Desktop view. Select the desired section and duplicate it by copying and pasting it.

2. Rename a new section to distinguish it from the original one.
3. Hover over the new section and click the eye icon to hide it for desktop view.

4. Switch to the Phone view.
5. Hide the original section, then unhide the duplicated section.

6. Now you can feel free to make any adjustments without affecting the desktop view.

The 'Auto Layout' function changes the CSS positioning of widgets from 'Absolute' to 'Relative', which may require some additional steps before applying it.

Switch to the Desktop view and follow these steps:

1. If you have a set of elements that you want to keep in their original arrangement, be sure to group them first.
2. Next, arrange your layers in the order you want them to appear in mobile view.

3. Open the ‘Devices Preview’ menu and switch on the ‘Device State’ toggle. Next, click on the arrow on the right from the phone icon and switch on the ‘Auto Layout’ toggle.

Let’s look at some popular examples and see how to adjust the layout.

1. How to adjust the text? If your text has been broken during the auto-optimizing process, changing the font size and line height will help you adjust it.

2. How to adjust the position of elements? Since the 'Auto Layout' function converts the CSS position of all elements to 'Relative,' you should use margins and paddings to adjust the space between your elements.

However, sometimes you may need to return to the 'absolute' CSS position.

1. In this case, you should select your element and switch to the 'Absolute' option from the list in the Control Panel.

After you switch the element's CSS position to 'absolute,' your layout may break slightly because the section height will be determined relative to other elements.

2. Then you should set the height of your section from 'auto' to a suitable value (e.g., 2100px as in the example).
3. Next, you should position your element correctly.

How to adjust the element if it doesn’t fit the workspace?

1. Select your element and ensure that the element’s container has proper dimensions.
2. Expand the ‘Transform’ section in the Control Panel and set the ‘scale’ attribute to the appropriate value.
3. Adjust the section height if necessary.

Finally, make the necessary adjustments to the other sections.