In modern web design, managing responsiveness is crucial, especially when dealing with content layouts that need to adapt across different devices. Unlayer builder provides a few important features to help developers and end-users manage responsiveness in their designs:

• Do Not Stack on Mobile: By default, columns in a block are set to stack on mobile devices for a better user experience. End-users have the option to change this setting for each block.
• Hide on Mobile: Allows specific content to be hidden on mobile devices, improving control over mobile layouts.

By default, these options come with preset values, but developers can customize the default settings to suit the needs of their applications.

Customizing Mobile Controls

You can change the default behavior for Do Not Stack on Mobile and Hide on Mobile by configuring the unlayer.init() method. This is done through the _override option in the editor configuration, which allows you to set default values for mobile settings.

Example: Changing Default Value for “Do Not Stack on Mobile”

The "Do Not Stack on Mobile" property is only available for blocks (rows).

unlayer.init({
  tools: {
    rows: {
      properties: {
        noStackMobile: {
          editor: {
            _override: {
              mobile: {
                defaultValue: true,  // Default value for 'Do Not Stack on Mobile'
              },
            },
          },
        },
      },
    },
  },
});

Example Explained

• tools: This top-level object represents all the available tools in the editor (e.g., rows, images, text, etc).
• rows: Refers to the row tool, which is commonly used to manage the layout structure in the design.
• properties: This object contains the various properties that can be modified for the row tool.
• noStackMobile: This property refers to the “Do Not Stack on Mobile” feature. When enabled, columns in rows won’t stack vertically on smaller screens like mobile devices.
• _override: This setting allows you to change the default behavior of the property for a non-desktop device.
• mobile.defaultValue: Defines the default value for the “Do Not Stack on Mobile” option. Setting it to true ensures that blocks do not stack by default on mobile devices.

Example: Changing Default Value for "Hide on Mobile"

In this example, we will change the default value for "Hide on Mobile" for Button tool. This means that buttons will be hidden on mobile devices by default. This is for demonstration only and not a good idea in practice.

unlayer.init({
  tools: {
    button: {
      properties: {
        hideMobile: {
          editor: {
            _override: {
              mobile: {
                defaultValue: true,
              },
            },
          },
        },
      },
    },
  },
});

📘

The end-user still has the option to toggle this off in the builder

Use Cases

Custom Mobile Layouts: Applications with unique mobile design requirements can modify the default values for mobile responsiveness to ensure that content behaves as expected without requiring the end-user to manually change the settings.

Consistent Branding: Developers can enforce consistent branding guidelines by adjusting the default behavior for mobile stacking and visibility to match their brand’s responsive design standards.

Notes

• Setting a default value through the _override property will ensure that newly created content in the builder start with the specified behavior, but end-users can still manually change the option if needed.
• This feature gives developers more control over the initial design behavior on mobile devices, making it easier to maintain responsive designs across different applications.