---
title: Design your layout
slug: design-your-layout
docTags: 
createdAt: 2023-03-21T02:50:50.000Z
---

:::hint{type="info"}
**Who can do this: **

- Anyone with editing permissions for Structure, Homescreen and HS Sections
- Additional viewing permissions are needed for any content tied to the Focus Content (e.g., Form, Media Collection)
:::

Learn how to design your app’s [layout](docId:3weFlVpI-4Imq7mL-15_2)  by building with sections, block, and sets—then customize the look and organize your content to match your goals.

![](https://api.archbee.com/api/optimize/aL1TvWcESMCDQPkBf0hc--tGKvOtYQ_9JUYoYT_6Rsw-20240907-164248.png)

### Mobile vs desktop layout

The layout can be viewed and edited in either the desktop or mobile view. In the mobile view, the layout structure flattens into a linear format, from 2D to 1D. 

The layout is built by adding sections and blocks in the following order:

- Outside to inside 
- Left to right
- Top to bottom 

:::hint{type="warning"}
### How do I design the best possible layout?

The recommended approach is to **design the layout in the desktop view,** so you can make full use of one screen, ensuring an optimal layout. As a rule of thumb, one full screen in the desktop layout gives you a reasonable amount of content for the mobile layout. 

If you have additional content that doesn’t fit on one screen, you can link to a new screen, using [Menu blocks.](docId\:mGpkvk1z3wPXsu-wSl3sk)
:::

# In this section

- [Open & use the layout editor](docId\:yMRrPEw-npSgy7go3lmZ8) 
- [Build with sections, sets, & blocks](docId\:Rfg6KHBqVOkLg0Z6TzWlp) 
- [Style your layout](docId:7zK6q37zPPXgX2cui--o4)