HomeDev GuideRecipesAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide

Manage blueprints

Create, find, rename, and delete Visual Builder blueprints in Optimizely CMS 13. Save sections and experiences as reusable layout templates.

Blueprints are reusable layout templates that you use with Visual Builder to create content directly in the user interface (UI). You can save sections and experiences as blueprints, such as a campaign landing page, a contest entry form, a masthead or hero image, and column or grid content.

See this interactive demonstration about how to create, use, and manage blueprints.

Find, rename, or delete blueprints in Settings > Blueprints.

Screenshot of the Blueprints settings page where editors find, rename, and delete blueprints

Search for blueprints

Type the name (or partial name) of a blueprint in the search field to filter the list. Use the Blueprint Type drop-down list to filter blueprints further.

Screenshot of the blueprint search field and Blueprint Type filter where editors search for blueprints by name or type

Rename a blueprint

  1. Select More (...) > Rename on the blueprint card.

    Screenshot of a blueprint card with the More menu showing the Rename option where editors rename a blueprint

    The Rename Blueprint window displays.

  2. Enter a new Name.

    Screenshot of the Rename Blueprint dialog with a Name field where editors enter a new name for the blueprint
  3. Click Save.

Delete a blueprint

  1. Select More (...) > Delete on the blueprint card.

    Screenshot of a blueprint card with the More menu showing the Delete option where editors delete a blueprint

    A Delete Blueprint window displays.

  2. Click Delete Blueprint to confirm the deletion.

    Screenshot of the Delete Blueprint confirmation dialog where editors confirm the deletion

Save an experience as a blueprint

Save an experience as a blueprint when you create a layout you want to reuse across your site.

  1. Click More (...) > Save as Blueprint... on the experience.

    Screenshot of the experience More menu with the Save as Blueprint option where editors save an experience as a reusable blueprint
  2. Enter a name for the blueprint.

    Screenshot of the Save as Blueprint dialog with a name field and auto-generated thumbnail where editors name the experience blueprint

    Visual Builder generates a thumbnail image for the blueprint automatically. Click Upload to change it with another image, or click Reset to revert to the original thumbnail image.

  3. Click Save as Blueprint. When you create an experience, your experience blueprint displays in the list among the other blueprints.

Save a section as a blueprint

  1. Click More (...) > Save as Blueprint... on the section.

    Screenshot of the section More menu with the Save as Blueprint option where editors save a section as a reusable blueprint
  2. Enter a name for the blueprint.

    Screenshot of the Save as Blueprint dialog with a name field and auto-generated thumbnail where editors name the section blueprint

    Visual Builder generates a thumbnail image for the blueprint automatically. Click Upload to change it with another image, or click Reset to revert to the original thumbnail image.

  3. Click Save as Blueprint. When you create a section, your section blueprint displays in the list among the other blueprints.