Manage styles

Use the Optimizely CMS Content API to manage styles in Optimizely CMS (SaaS). You can configure styles on rows, columns, sections, or experiences to influence how content displays. Styles can target global base types, global node types, or unique content types built for the specific CMS (SaaS) instance.

For details on implementing styles in Visual Builder, see Select styles.

Styles

Styles in CMS (SaaS) are abstract settings used to control the presentation of content across various channels. Unlike standard CSS, these styles act as metadata descriptors. They can be interpreted and rendered based on the presentation channel, such as websites, apps, or smart devices.

Styles in CMS (SaaS)

• describe how content is presented as an abstract layer.
• provide reusable settings for content administrators to maintain visual consistency.
• permit the union of overlapping styles, merging their effects when applicable.
• are managed through the DisplayTemplate API.

Use case

Styles are commonly applied with characteristics such as animation, size, height, width, alignment, and other design decorators. These styles provide the client with an instruction set on how to present content. The channel delivering that content is responsible for interpreting and rendering the styles accordingly.

For example, a fitness company manages its website to promote classes, trainers, and membership plans. Using CMS (SaaS), the company creates and applies reusable styles, including animation effects, to keep the website visually engaging and user-friendly.

For example, a style for "Animation Type" might include:

• Fade in – Smoothly reveals content as users scroll down the page.
• Bounce in – Adds dynamic, attention-grabbing movement when content displays.

The company creates a "Featured Trainers" section to showcase its top instructors. To enhance the user experience they implement the following:

• The section heading uses the Fade in animation to display subtly as users scroll.
• Individual trainer cards use the Bounce in animation to grab attention when loaded.

These styles ensure a consistent, branded look while making the site interactive and engaging. CMS (SaaS) defines these animations as abstract settings, which the website interprets and renders using CSS or JavaScript. See Create a style for steps to create the example animation types.

Apply styles in CMS (SaaS)

You can apply styles to different levels of content structure in CMS (SaaS). These include:

• Global base types – Apply styles to sections or content blocks for uniform styling across multiple pieces of content.
• Global node types – Apply styles to rows and columns for consistency across content.
• Unique content types – Apply styles to custom content types for tailored styling based on specific needs.

See Configure Visual Builder for information.

DisplayTemplate API information

You can create styles using the DisplayTemplate API. Styles apply globally for the base, node, or content type you assigned it to and you cannot restrict it depending on the context where you use it. See Content base types.

In the following sections, replace example.com with your CMS (SaaS) instance URL. See the API reference documentation for information on finding your instance URL.

Create a style

To create a new style, send a POST request to the displaytemplates endpoint.

POST https://example.com/\_cms/preview2/displaytemplates

Include the parameters in JSON format in the request body. For example, see the following code sample:

{  
   "settings": {  
      "AnimationType": {  
         "displayName": "Animation Type",  
         "editor": "string",  
         "choices": {  
            "One": { "displayName": "Fade In", "sortOrder": 1 },  
            "Two": { "displayName": "Bounce In", "sortOrder": 2 }  
         }  
      }  
   },  
   "displayName": "Animation",  
   "baseType": "section",  
   "key": "GlobalStyleAnimation"  
}  

Confirm the response includes a summary of the newly added style. Your created style displays in Visual Builder like the following image:

See Create display template endpoint in the API reference documentation.

List styles

List the styles in your CMS (SaaS) instance sending a GET request to the displaytemplates endpoint.

GET https://example.com/_cms/preview2/displaytemplates

Use the following query parameters to filter the list of styles:

• pageIndex – The zero-based index of the current page.
• pageSize – The number of items on each page.

Example:

GET https://example.com/_cms/preview2/displaytemplates?pageIndex=5&pageSize=123

See List display templates endpoint in the API reference documentation.

Get styles

You can retrieve information about the style by sending a GET request to the displaytemplates endpoint with the unique key of the display template.

The following code sample calls a GET request on the displaytemplates endpoint with AnimatedHeadingStyles as the key.

GET https://example.com/_cms/preview2/displaytemplates/AnimatedHeadingStyles

See Get display template endpoint in the API reference documentation.

Create or replace styles

You can create or replace a style by sending a PUT request to the displaytemplates endpoint with a unique key of the new display template. If a display template with the provided key exists, it is replaced. Otherwise, a new display template is created.

PUT https://example.com/_cms/preview2/displaytemplates/IconImage

Include the parameters in JSON format in the request body. For example, see the following code sample:

{
  "displayName": "Icon",
  "contentType": "ImageElement",
  "isDefault": false,
  "settings": {
    "roundedCorners": {
      "displayName": "Rounded corners",
      "sortOrder": 20,
      "choices": {
        "full": {
          "displayName": "Full",
          "sortOrder": 60
        },
        "medium": {
          "displayName": "Medium",
          "sortOrder": 30
        },
        "small": {
          "displayName": "Small",
          "sortOrder": 20
        },
        "none": {
          "displayName": "None",
          "sortOrder": 10
        }
      }
    },
    "size": {
      "displayName": "Size",
      "sortOrder": 10,
      "choices": {
        "large": {
          "displayName": "Large",
          "sortOrder": 30
        },
        "small": {
          "displayName": "Small",
          "sortOrder": 10
        }
      }
    }
  }
}

Confirm the response includes a summary of the newly added style. Your created style displays in Visual Builder like the following image:

See Create or replace a display template endpoint in the API reference documentation.

Update style

You can update a style by sending a PATCH request to the displaytemplates endpoint with a unique key of the new display template.

PATCH https://example.com/_cms/preview2/displaytemplates/IconImage
     --header 'content-type: application/merge-patch+json'

Include the parameters of what you want to update in JSON format in the request body.

For example, to update the Icon style you created in the Create or replace styles section by adding an option to add borders around images, see the following code sample:

{
  "displayName": "Icon",
  "settings": {
    "border": {
      "displayName": "Border",
      "sortOrder": 100,
      "choices": {
        "yes": {
          "displayName": "Yes",
          "sortOrder": 30
        },
        "no": {
          "displayName": "No",
          "sortOrder": 40
        }
      }
    }
  }
}

Confirm the response includes a summary of the newly added style. Your updated style displays in Visual Builder like the following image:

See Update display template endpoint in the API reference documentation.

Delete style

You can delete a style by sending a DELETE request to the displaytemplates endpoint with a unique key of the display template you want to delete.

DELETE  https://example.com/_cms/preview2/displaytemplates/IconImage

Confirm the response includes a summary of the deleted style. Your style no longer displays as an option in the Visual Builder.

See Delete display template endpoint in the API reference documentation.