---
title: Create Visual Builder content from a blueprint
slug: cms-saas/docs/create-visual-builder-content-from-a-blueprint
createdAt: 2026-07-30T20:18:09.000Z
---

:::hint{type="info"}
**Note**
Developer configuration is necessary to create Visual Builder content from scratch. For detailed instructions, see [Configure Visual Builder](docId:0o9L75GP0gCgPCxNO1CvS).

Also, you can create experiences in any part of the page tree, but only the Mosey Bank example branch has a configured preview in the sample site, so you should create your experience under that structure. To rename or delete a blueprint, see [Blueprints](docId:1BKg0DT13K7h17Nd26VgZ).
:::

In the page tree, select Root's **More** (**...**) > **Create Page**.

![screenshot of creating a page in the CMS page tree](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/2mkRot5mfkFd4jG7Uzhaa_create-page.png)

The **Create Page** window displays with saved blueprints. In this example, enter **Opticon Sweden** in the **Name** field and select the **Optimizely One** blueprint that was saved from the **Opticon** experience. You can filter blueprint names by entering text in the search field to find the blueprint you want more quickly.

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

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

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/D7LYR6gS9P-DhCv-RYcRd_b2f70f2753e68954be48a8db2f7369cf2681a25a4241cdadc4ead2972801cf69-400c38d2799631ef452a07b7ab6558a243ab05b8ebd541adb6a0a49c9433cb27-from-blueprint-7.png)

The left side displays the page tree and outline; the right side displays the preview. You can select desktop, tablet (shown), or mobile views. See [Preview an experience](docId\:kmtzvoxtdeZ-u4DgwORPo) for information.

On the section you want to rename, select **More** (**...**) > **Rename**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/X0rT6QGztAfAVFfjMkPHa_ae0a8410d7c83d1feb2466a3a2c5a0cdf21eab682023cf1a6454b7bb5fa83383-from-blueprint-4.png)

In this case, rename **Hero** to **Opticon Tour Hero**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/E0Cazi2vkcrqEVyxMMUL6_6a5e7505c7984641497f3bda9ef5bfa52fcb58fb181e22fe605c1d156ae934c5-14a2fe507d09d4133b93fa08db875b53e307ae4e31eb715f4e0f4e04df6c14bc-from-blueprint-5.png)

## Add a section

To add a section, click **Add Section** on an outline.

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

The **Add Section** window displays. If you have sections saved as blueprints, you can select it and click **Add Section** to use a section that is already defined for you.

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

The section is added to the bottom of the outline.

## Reorder sections, rows, columns, and elements

You can drag and drop a section to reorder it. You can also drag rows, columns, and elements to customize your experience. Visual Builder numbers rows and columns. You see the result 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/EvGWvcwKWa6WSj-QmMNfr_b285d86ad9f816f51377994617b78385c3af711cfbca2ea854b57fb0898572db-e8a0df92f752b5be259847fd0eb839c1da9293e39a9533508537ff9861992ffd-image.png)

## Rename a row or column

By default, a row or column shows its type, **Row** or **Column**, as its name. Rename a row or column to describe its content, the same way you rename a section. Descriptive names help you find what you need in large layouts.

1. Select **More** (...) > **Rename** on the row or column.
2. Enter a name and press ENTER. To cancel, press ESCAPE.

## Edit a section or element

The outline shows the rows, columns, and elements of every section, so you edit the whole experience in one view.

- **Section properties** – Select **More** (...) > **Properties** on the section.
- **Element or block used as a section** – Click the icon or name of its tile in the outline. Visual Builder opens it for editing. For a shared block, this opens the shared block.

To return to the outline, click **Outline**. The outline keeps the sections you expanded and the item you selected.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/lUeYz7zT9wRTFAzTSV4OT_return-to-outline-in-vb.png)

## Remove a section

1. Select **More** (...) > **Remove**.

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

2. Click **Remove Section** to confirm.

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

## Copy and paste a row or column

You can copy a row or a column. When you paste it, Visual Builder adds the row or column to the bottom of the hierarchy.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/5wUQxYzVIVKaI6Q67kEBW_05c61d9f13e5204296fc6b680054b5dc23738d46ad5d2c4e49cac2dd7f372ab6-7afb9243020348f5c3e0fcd8e9d9c6aeddbaf80a049baa24b78a2bfaaa254dc3-image.png)

See [Select styles](docId\:BvwirGlmyuK-_HgUNw93b) for information about customizing the elements of your experience.