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

Blueprints let you start with a predefined layout so you can build pages faster and maintain consistent design across your site. Select a blueprint when creating a page to get a preconfigured outline that you customize for your needs.

:::hint{type="info"}
**Note**
Create experiences in any part of the page tree, but only the Mosey Bank example branch has a configured preview in the sample site. Create your experience under that structure. To create, find, rename, or delete a blueprint, see [Manage blueprints](docId\:KkY2_Lj82dHr5d2jPZCvo).
:::

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

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

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

2. Enter a **Name** for the experience and then select one of the available blueprints. Filter blueprints by name, type, and layout to find the blueprint you want.

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

3. Click **Create**.

Visual Builder displays the new page with the blueprint you selected, starting with the same outline, which you can customize by changing section names, reordering sections, and so on.

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

The left side displays the page tree and outline; the right side displays the preview. You can select desktop (shown), tablet, or mobile views. See [Preview Visual Builder content](docId:_NZhDzXG1kge9dscSRp3p) for more information.

## Rename a section

1. Select the section you want to rename in the outline.

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

2. Click the name or select **More (...) > Rename** and enter another name.

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

## Add a section

1. Click **Add Section (+) > Add Section** in the outline.

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

The **Add Section** window displays.

2. Select **Blank Section** to create one from scratch, or select a blueprint to use a section that is already defined for you.
3. Click **Add Section**.

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

The section is added to the bottom of the outline. Elements within an outline are collapsed by default. You can click to expand one element at a time.

## Reorder sections, rows, columns, and elements

Drag and drop a section to reorder it. Reorder rows, columns, and elements to customize your experience. Visual Builder numbers rows and columns. The result displays in the **Preview** pane when you reorder them.

:::hint{type="info"}
**Note**
You cannot drag an element from one column to another.
:::

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

## Remove a section

1. Select the section that you want to remove from the outline.
2. Click **More (...) > Remove**.

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

3. Click **Remove Section** to confirm.

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

## Copy and paste a row or column

Copy a row or a column within a section by clicking **More (...) > Copy** for the row or column you want to copy. Then select **More (...) > Paste** on the row or column where you want to paste.

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

Paste rows under other rows only. If you copy a row, then click **More (...)** on a column, the paste option is not clickable.

Unlike rows, you can paste columns under rows or columns. If you copy a column, then click **More (...) > Paste** on a row, the Visual Builder adds the column to the bottom of that row's hierarchy.

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

Drag and drop to reorder the pasted column, or select **More (...) > Paste** directly on the column where you want to paste. Visual Builder adds the column directly below that column instead of at the bottom of the entire row hierarchy.

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

## Validation errors

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)

## Edit section properties

Edit the properties for a section directly in Visual Builder to control layout and display settings.

1. Select a section from the outline.
2. Click **Properties**.

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

3. Edit the section's properties as desired.

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

For information about customizing the elements of your experience, see [Elements in Visual Builder](docId\:poWrdQQWhlJ7bQg3Sxoal) and [Select Visual Builder styles](docId:6TsN4WhTUJgDtmxOKHe3r).