Custom Layout Settings

Use Shared Layout Settings to make sure components and groups behave the same way on all screen sizes.

Skill Level: Intermediate

Before You Begin

• Make sure you understand the definitions and terms.

• Make sure you have read through the previous guides, especially how to access the Layout tab and the Shared Layout Settings.

Video

Walkthrough

1. To access the custom layout settings, simply toggle off screen size(s) in the Shared Layout Settings.

When you do this the Screen Layout settings for that component or group is broken out into its own menu so that the settings can be changed independently of the other screen sizes.

2. When you break out a screen size into Custom Layout settings, you still have the same options as before, except all settings now have separate behavior from any Shared Layout settings.

• Scaling: The group or component will scale or resize its width according to the setting for just that screen size, regardless of any group or rectangle it is a part of.

• Anchoring: The group or component will anchor itself according to the setting for just that screen size, regardless of any group or rectangle it is a part of.

• Positioning: The positioning or location of the component on-screen can be completely different for that screen size, regardless of the group or rectangle it is a part of. Note that for groups, the group boundaries will expand to accommodate the change in its position across screen sizes.

3. Click on the dropdown arrow to reveal the same options as Shared Layout, except any changes here will not affect the other screen sizes. Note the different settings in the screenshot below:

4. In addition to how your components scale and are anchored, any positioning and component sizing adjustments you make in the Custom layout settings are saved separately from the shared settings.

This makes it possible to now stack elements based on screen size, adjust the number of columns in a layout, and move information around on screen for specific screen sizes. Notice in the GIF below, how the Pricing cards and buttons stack on mobile, but are side-by-side on tablet and desktop.

Click the animation to enlarge.

Learn More

• Turning off responsive visibility for a component or group in a specific screen size will also disable its shared screen settings for that screen size.

• Check out the Responsive Apps templates when creating a new app - they can help you learn how to create the best layouts possible!

Help

If you need additional help with this article, you can always ask in our community forum or hire an Expert to help! Be sure to paste the link to this article in your post as well!

Do you have a tutorial or help doc request? Let us know!