---
title: Build a layout in 5 steps
slug: build-a-layout-in-5-steps
docTags: 
createdAt: 2023-03-03T22:19:52.000Z
---

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

- Anyone with the Homescreen and HS Sections (editable) permissions
- Additional viewing permissions are needed for the app content you wish to place in the layout (e.g. Focus Content)
:::

The steps below show you how the [layout structure](docId:3weFlVpI-4Imq7mL-15_2), introduced earlier can be built in the layout editor, one section and block at a time.

# Step 1: Set up first section, Top

By default, the first section has already been created for you,** Top, **with the **Grid layout **option enabled and the **Include content **option disabled.

![](https://api.archbee.com/api/optimize/aL1TvWcESMCDQPkBf0hc--HGPJOK8U69mkdeRIPb6GU-20240823-154924.png)

# Step 2: Add sections, Lefty & Righty

 Within the **Top** section, add two sections:

- Within the left column, place a nested section called **Lefty**.
- Within the right column, place a nested section called **Righty**.

Select a tab below to see the setup for each.

::::Tabs
:::Tab{title="Lefty section"}
![](https://api.archbee.com/api/optimize/aL1TvWcESMCDQPkBf0hc--grzqUKC1cjyNPz3bJDDvz-20240823-155008.png)
:::

:::Tab{title="Righty section"}
![](https://api.archbee.com/api/optimize/aL1TvWcESMCDQPkBf0hc--Rh780_JspsreDd6ZQsekM-20240823-155041.png)
:::
::::

# Step 3: Place blocks

Within the section, **Lefty**, one block was placed within each slot: 

- Place a Feature block (News & Notices) in the top-left slot.
- Place a Content block (Focus Content) called **About us**, in the lower-left slot.

Select a tab below to see each block within the **Lefty** section.

::::Tabs
:::Tab{title="Feature block (News & Notices)"}
![](https://api.archbee.com/api/optimize/aL1TvWcESMCDQPkBf0hc--0z7Eb7Mpja8IVK-VBU14M-20240823-171604.png)
:::

:::Tab{title="Content block (Focus Content)"}
![](https://api.archbee.com/api/optimize/aL1TvWcESMCDQPkBf0hc--CfhsTxt26ycOxfx51_TO3-20240823-171621.png)
:::
::::

Within the section, **Righty**, place two blocks within the first two slots:

- Place a Feature block (Calendar) in the top-right slot.
- Place a Menu block in the second slot, linking to a Feature (Discounts).

Select a tab below to see each block within the **Righty** section.

::::Tabs
:::Tab{title="Feature block (Calendars)"}
![](https://api.archbee.com/api/optimize/aL1TvWcESMCDQPkBf0hc--8wnSdwirqKFm2mk3RfDoY-20240823-183322.png)
:::

:::Tab{title="Feature block (Discounts)"}
![](https://api.archbee.com/api/optimize/aL1TvWcESMCDQPkBf0hc--7yR2tuOCU2H-8OyUL1euW-20240823-183337.png)
:::
::::

# Step 4: Add section, My Stuff

Within the third slot of the **Righty** section, place a nested section called **My stuff:**

![](https://api.archbee.com/api/optimize/aL1TvWcESMCDQPkBf0hc--dECOzdNxYRqlHq3uH9PDt-20240823-185240.png)



# Step 5: Place blocks

Within the section, **Your stuff, **place two blocks:

- Place a Feature block (Challenges) in the first slot.
- Place a Feature block (Video routines) in the second slot.

Select a tab below see each block in this section.

::::Tabs
:::Tab{title="Feature block (Challenges)"}
![](https://api.archbee.com/api/optimize/aL1TvWcESMCDQPkBf0hc--fJUqcKMsu6KBbuGaY9U7y-20240823-183433.png)
:::

:::Tab{title="Feature block (Video Routine)"}
![](https://api.archbee.com/api/optimize/aL1TvWcESMCDQPkBf0hc--_dWGtzMy6Khj1rKdZAAsV-20240823-183550.png)
:::
::::