--- title: Configure Visual Builder slug: cms-13/docs/configure-visual-builder docTags: createdAt: 2026-07-30T20:22:04.235Z --- Visual Builder provides a layout and composition system for building structured content from reusable components. Content managers design, modify, and reuse [blueprints](docId\:WjkZ69dlSUtkIbWymqDTP) directly in the CMS 13 UI. ## Visual Builder overview Visual Builder organizes content into three hierarchical building blocks that separate layout from content data: - [Pages](docId\:poWrdQQWhlJ7bQg3Sxoal) – The main, routable entry point of Visual Builder. A page extends a regular CMS page with access to the layout system and `UnstructuredData`, an array of editor-added content. `UnstructuredData` is an array property on pages and sections that stores inline content data added by the editor. Pages use the `outline` layout type, a flat, ordered list of sections. - [Sections](docId\:poWrdQQWhlJ7bQg3Sxoal) – A vertical chunk of a page. A section extends a block with access to the layout system and `UnstructuredData`. Sections use the `grid` layout type, a hierarchical structure of rows, columns, and elements. - [Elements](docId\:poWrdQQWhlJ7bQg3Sxoal) – The smallest building block in Visual Builder. An element contains the content data and extends a block, but restricts the property types it supports. Elements are leaf nodes and do not have children. ## Layout system The layout system controls how Visual Builder arranges pages and sections into structured, renderable hierarchies. Pages and sections use the layout system in Visual Builder. The layout maintains structure, styling, and content references. Two layout types exist: `outline` and `grid`. ### Outline The outline layout defines a flat, ordered list of section nodes. Each section node binds to the inline content data of that section. Visual Builder stores the section content data in the `UnstructuredData` property of the page. The following example shows a layout for a page with two sections: :::hint{type="info"} **Note** A property binding is a reference that links a layout node to its corresponding content data in `UnstructuredData`. ::: ```json { "type": "outline", "nodes": [ { "type": "section", "name": "Hero", "propertyBinding", "UnstructuredData[28C004E487B041F090A7877DA42E6C55]" }, { "type": "section", "name": "Teasers", "propertyBinding", "UnstructuredData[43CBB515BF71440480CEAE14A2399205]" } ] } ``` ### Grid Sections use the grid layout, which defines a hierarchical structure of rows, columns, and elements. Each element node binds to the inline content of that element. Visual Builder stores element content data in the `UnstructuredData` property of the section. The following example shows a layout for a hero section with a single row, two columns, and multiple elements: ```json { "type": "grid", "nodes": [ { "id": "F2796537CDB4427C970EE48DF7647A16", "type": "row", "nodes": [ { "id": "BC6E9722983D41B5990C4608811FD836", "type": "column", "nodes": [ { "type": "component", "propertyBinding": "UnstructuredData[6477A4CE3A7F45A680DBB183E808C748]" }, { "type": "component", "propertyBinding": "UnstructuredData[047F427B24EF4CABB0BC0F089C9A95B5]" } ] }, { "id": "FA7640A627AA466F8AAF71985782482C", "type": "column", "nodes": [ { "type": "component", "propertyBinding": "UnstructuredData[1353D9483DA3417A93B8BEB95E90F850]" } ] } ] } ] } ``` ## Content manager editing Content managers use Visual Builder to author and arrange elements directly in the UI. :::hint{type="warning"} **Important** Custom editors are not supported. Optimizely plans to add this functionality in a future release. ::: ## Display templates Display templates let developers define styling options that content managers apply to layout nodes without changing code. Developers define display templates to control the styles available on nodes. Content managers then apply styles to nodes in the Visual Builder UI. Display templates have an ordered list of settings, each with several options the editor picks from. Optimizely Graph indexes the selected display templates and settings with the page and delivers the data to the front end. The delivery site then renders the content. ### Define display templates Display template definitions control which styling options are available in the editor. Associate a display template with a `baseType`, a specific `contentType`, or a `nodeType`. - **Base type** – Associate display templates with a base type. Values for the `baseType` property are `experience`, `section`, and `component`. - **Content type** – Associate display templates with a content type. Use any content type key derived from the base types `experience`, `section`, and `component`. - **Node type** – Associate display templates with a node type. Values for the `nodeType` property are `row` and `column`. ### Display setting editors The following values are available for the `editor` on the display settings: - `select` – Drop-down list supporting single-item selection. Default `yes`. - `checkbox` – Toggle. Default `no`. ## Example display templates The following example shows a display template available for sections. When selected, the template lets the editor change the color scheme and choose whether to highlight the section. - The color scheme setting lets the editor choose `default`, `primary`, and `secondary`. - The highlight setting is a checkbox with a true or false value. - The JSON shows the format when creating the display template using the CMS REST API and the **Create display template** endpoint. ```json { "key": "defaultSection", "displayName": "Default Section", "baseType": "section", "isDefault": true, "settings": { "colorScheme": { "displayName": "Color scheme", "editor": "select", "sortOrder": 10, "choices": { "default": { "displayName": "Default", "sortOrder": 10 }, "primary": { "displayName": "Primary", "sortOrder": 20 }, "secondary": { "displayName": "Secondary", "sortOrder": 30 } } }, "highlight": { "displayName": "Highlighted", "editor": "checkbox", "sortOrder": 10 } } } ``` Treat templates, settings, and options as abstractions. Do not add dependencies on how the delivery site uses them. In this example, defining color schemes as `"Primary"` and `"Secondary"` instead of `"red"` and `"green"` keeps the data meaningful across channels. This approach also protects your data if brand colors change to `"orange"` and `"purple"`. ## Composition Optimizely Graph indexes the composition of joined page and section layouts as a queryable object model. The delivery site gets structured access to layout and content data. Query this object model through Optimizely Graph. For information on queries, see [Optimizely Graph documentation](docId\:aM0WpNsNXe_n26IhkX5sG). The following example shows the data indexed to Optimizely Graph for a page with a single section: ```json { "_metadata": { "key": "151A1E2E6358462FB3ABF0705FDCD03E", "locale": "en", "version": "1", "types": [ "BlankExperience", "_Experience", "_Page", "_Content" ], "displayName": "My Experience", "status": "Draft", "container": "C4B3DD92E0144001A046E010434DF13D", "path": [ "151A1E2E6358462FB3ABF0705FDCD03E" ], "routeSegment": "my-experience", "lastModified": "...", "lastModifiedBy": "search-indexer", "created": "...", "createdBy": "search-indexer", "locales": [ "en" ], "url": { "hierarchical": "/en/my-experience/", "internal": "cms://content/151A1E2E6358462FB3ABF0705FDCD03E?loc=en&ver=1", "default": "/en/my-experience/", "type": "HIERARCHICAL" } }, "composition": { "displayName": "My Experience", "key": "151A1E2E-6358-462F-B3AB-F0705FDCD03E", "type": "BlankExperience", "nodeType": "experience", "displayTemplateKey": null, "displaySettings": [], "nodes": [ { "displayName": "Hero", "key": "6A953CCD-741A-4B1B-B6E5-562434DC3ED1", "type": "BlankSection", "nodeType": "section", "displayTemplateKey": "defaultSection", "displaySettings": [ { "key": "colorScheme", "value": "primary" }, { "key": "highlight", "value": "true" } ], "nodes": [ { "key": "FB554790-2871-45D7-9502-DA8B4CAD4B13", "nodeType": "row", "displayTemplateKey": null, "displaySettings": [], "nodes": [ { "key": "DE42C8FB-AF10-4D31-8C16-CE12EB03B35D", "nodeType": "column", "displayTemplateKey": null, "displaySettings": [], "nodes": [ { "key": "6ED087C6-7504-45AC-9295-6AD568978EFF", "type": "HeadingElement", "nodeType": "component", "displayTemplateKey": null, "displaySettings": [], "component": { "_metadata": { "displayName": "Heading", "types": [ "HeadingElement", "_Component", "_Content" ], "status": "Draft", "lastModified": "...", "locale": "en" }, "Heading": "My Heading" } } ] } ] }, { "key": "598A9EC0-FCAE-40FF-8283-E7056A9CA637", "nodeType": "row", "nodes": [ { "key": "C413CC9B-0977-4E1E-821A-389CB212C129", "nodeType": "column", "displayTemplateKey": null, "displaySettings": [], "nodes": [ { "key": "106B2993-1766-4D9A-834D-0E11CF9F491F", "type": "TextElement", "nodeType": "component", "component": { "_metadata": { "displayName": "Text", "types": [ "TextElement", "_Component", "_Content" ], "status": "Draft", "lastModified": "...", "locale": "en" }, "Body": { "html": "

Here goes some stuff

", "json": "{\"type\":\"richText\",\"children\":[{\"type\":\"paragraph\",\"children\":[{\"text\":\"Here goes some \"},{\"text\":\"stuff\",\"bold\":true}]}]}" } } } ] } ] } ] } ] } } ``` ## Blueprints Blueprints let content managers save authored content as reusable templates, reducing repetitive setup for pages and sections with common layouts. A blueprint is a template stored in the `blueprints` folder under `root` in the page tree. Save page and section content as blueprints to reuse layouts. Create blueprints only through the editor in the UI. The CMS 13 REST API does not support blueprint creation. See [Manage blueprints](docId\:KkY2_Lj82dHr5d2jPZCvo). When a blueprint instantiates a page or section, Visual Builder copies the layout to the content. The content is detached and not connected to the source blueprint. Changes to the base blueprint do not affect instances created from it. ## Preview Previewing content in Visual Builder validates the layout and content before publishing. CMS 13 integrates with delivery sites using the `communicationInjector`. For information about configuring communication between CMS 13 and the site, see [Enable live preview](docId\:Zf5jt75itfclDZhhUceIm).