Refine layouts for all devices

Experience Builder allows you to configure and create different page layouts for your web experiences, so they perform well on all screen sizes. The configuration of each separate layout is based on adaptive design, where you can create unique designs for large, medium, and small screen sizes. Each layout is an adaption of the experience, which offers greater flexibility for more app customization and better use of screen size and different content.

The templates have been built to work with multiple screen sizes. When you select a blank fullscreen app or blank scrolling page template, they have Auto layout enabled for medium and small screen devices. This keeps all widgets synchronized with the widgets in the layout for the large screen device and also arranges them automatically.

To create a separate layout for a medium or small screen device, click the Custom button next to the layout of your page or window. This allows you to manually arrange and resize widgets and windows for the selected screen device. If you need to remove a widget from a small device layout, click the Move to the pending list button Move to the pending list on the widget's toolbar. This removes the widget from the canvas of the current device and saves its configuration in case you need to add it back to the layout. Once you enable the custom layout option, if any other widgets are added to other device modes, they aren't added to the current device. You can manually add them from the Pending tab on the Insert widget panel.

Tip:

To test the layouts for the different screen sizes and devices, click Live view on the builder toolbar. Live view allows you to confirm that the content is adapted properly before you save and publish. You can also experiment by adjusting some settings and manipulate the interactive and dynamic widgets to see how they'll work.