---
title: Create Visual Builder content from scratch
slug: cms-13/docs/create-visual-builder-content-from-scratch
docTags: 
createdAt: 2026-07-30T20:22:02.890Z
---

Build a page from scratch when you want full control over the layout and content structure. Start with a blank experience and add sections, rows, columns, and elements to assemble your page.

1. Go to **Root > More (...) > Create Page** in the page tree.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/oUeqbGDsF4YkpAxY_frFD_5ec386e1bd7738416ddc68480cb834f70f862a031f9dfa48b744fddde06d64e8-image.png)

The **Create Page** window displays with saved blueprints.

2. Enter a **Name** for the experience.
3. Select **Blank Experience**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/grUjuncDPk_hgppGyutxg_d85119e0601399462f041ea58129616a58737619a239c53eda2e1a258e395715-image.png)

4. Click **Create**. The page displays in the page tree.
   Visual Builder displays the page tree and an empty outline on the left and a blank preview on the right. The outline pane is where you create a collection of sections that build your experience. Unpin the page tree and asset panes to create more space for content editing. Your blank preview can contain site-specific settings, such as headers or footers, depending on your implementation.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/XqeWtQytEgfgagzEwKFSG_8bb70344ab60408f28d7aeb221a5b92e23fbca10a699800942ac41c97daf73db-image.png)

5. Click **Add Section (+) > Add Section** (or the link below it) to start a new section.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/ENZ8ukk7ZVvFQjC1D74Sa_8000b0042b4b8e149993d7cf177e1b86a2672f9e03dc39c4f3584f8f5efb7422-image.png)

6. Select a blank section and click **Add Section**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/xzOiNaKZEXQj3BnGgDJG-_ab63010f598690f98e15ea4f54f852c0073cf1d1c02f39ccf04d12a571e8026a-image.png)

7. Visual Builder creates a **New Blank Section**, which you can rename by clicking the name or selecting **More (...) > Rename** and entering another name.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/xr7rvxVHwOnXQxHBkkcdT_d9c15d1a3a98c47aa52ec9cf37a9173f193ebab9c1ba01199896cba47d2bc6f8-image.png)

8. Click **Add Row** to start your first row.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/1FNI9lWbMlfhCNNnGuz62_e9c564eaa889ff8428c98a726580b421b51dff4f275f9332092b454ca0a5f0bb-image.png)

9. Click **Add Column** to start your first column in row 1.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/ASbbIabQ5DUhc433qCNiO_51afd0507165f4602d099e4f550727321b98e6fc2a9cc51ea98c02a9f796e2b6-image.png)

10. Click **Add Element** and select the element you want in row 1, column 1. See [Elements in Visual Builder](docId\:poWrdQQWhlJ7bQg3Sxoal).

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/QnZRoQ2WTvRs3_T9_Esdp_487eb74a61d9ee2d0a2bd977093710d2bc8f44ef2942bba7b9d73450b76b8413-image.png)

The following image shows a section with a row, column, and added elements (**Heading**, **Image**, **Paragraph**). Styles were applied to the **Heading** and **Image** elements. See [Elements in Visual Builder](docId\:poWrdQQWhlJ7bQg3Sxoal) and [Select Visual Builder styles](docId:6TsN4WhTUJgDtmxOKHe3r).

Add as many rows, columns, or elements as you need to a section. Elements within an outline are collapsed by default. Click to expand one element at a time.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/PlKuER_ue9LWN79mofGxc_3a85156d203e8ab7bfd2d2408c21bf27cebff9804b188a4d01a85eae24052c5d-image.png)

The total number of validation errors displays next to each section that has required fields that you have not completed. You can go to the outline within a section to view the breakdown of validation errors on each row, column, and element within that section.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/7ygcn6xL2XhTpEqf3CQTs_cms13validationerror.png)

:::hint{type="info"}
**Note**
Visual Builder uses the TinyMCE editor for text fields. See [Edit content using the TinyMCE rich-text editor](docId\:DayuLEILGFjNErMEFIEmK).
:::

To remove a section, select **More** (...) > **Remove**. Click **Remove Section** to confirm the removal.

See [Create Visual Builder content from a blueprint](docId\:N2mIVb3NiqhcVROXZvo6C) for more actions you can take with Visual Builder to customize your experience.
