Layouts, or Layout Templates, allow you to build a page structure that will be consistent across multiple pages of your app. So suppose you want certain pages in your app to have your logo and a menu in the header, you would build this layout and then assign that layout to whichever pages you wish. There are several types of reusable layouts you can choose from, including system components such as menus, login buttons, sign up buttons, headers, and more. etc., to apply to multiple pages on your app.
In the builder, Pages are organized by their layouts, which is why layouts are listed in bold in the list of Pages and Layouts.
To add a new layout, start by clicking on Pages, select + Add and choose Layout Template. Give your layout a name and click Save:
Once you've added the layout, add the system components you'd like to appear on the page as part of the layout, such as a menu, header, footer, login button, sign up button, etc.
Once you've done that, you can then go ahead and assign the layout to the pages of your choosing. To assign a layout to a page, click on the page you'd like to assign the layout to, click Settings, choose the layout, and then click Save:
Say for example we added a layout with a menu and a footer and applied this layout to our page. This is the before preview of how our page will look prior to adding the layout:
And here's what our page will look like after we added the layout with a menu and footer:
*In the builder, Pages are organized by the Layouts they are assigned to, which is why Layouts are listed in bold with Pages listed underneath the Layouts they're assigned to.
For example, any page that is assigned to our Default Layout will appear below the layout titled Default.
If a page does not have a layout assigned to it, the page will appear in the bottom of the list below No Layout: