Content types in the UI

Content types define the structure of every page, block, and media item in Optimizely CMS 13. Administrators configure them to control what editors create, which properties they fill in, and how content renders on the site. Editing content types requires CMS administrator permissions.

Content in Optimizely can be page types and block types, folders, or media files such as images and documents. Content can also be products in a product catalog in Optimizely Commerce Connect. Additionally, developers can create content types through code.

Content types and properties

Content types contain the properties where editors enter information, such as a link to an image on a web page.

The Type column identifies the foundational type each content type inherits from, such as Page, Block, Media, Experience, or Section. Content types whose base type cannot be determined (for example, those registered from a package that has since been removed) display an Undefined label in the Base type column.

For a content type, you define properties that can hold information, such as a link to an image, a web page, or editorial text. A typical website has a set of content types that match the identified functions needed on that website.

The content type is the foundation for creating one or many page or block instances. The page type or block type and its properties must be mapped to the corresponding rendering to display content to visitors.

The content concept in Optimizely Content Management System (CMS) is based on inheritance from a "generic" content type, which is then used to create specific content types, such as a page type or a media folder. Using this feature, developers can create custom content types when they configure new websites.

• Define page types in code or from Settings. Define block types only in code.
• For page types defined in code and for all block types, you can define "non-breaking changes" of properties in the admin view.
• You are notified if you cannot change the settings defined in code in the admin view.
• If you change a page type defined in code, you can reset the changes to the original values defined in code.

Page types

❗️

Warning

Changing page type settings can break the website. Although you can create page types in the admin view, you should create them from code.

Edit a page type

To edit settings for an existing page type:

1. Go to Settings > Content Types.

2. Select the page type from the list, such as Article. The Properties view displays for the page type.

3. Click Settings and modify the form.

   
   • Name – Enter an internal, programmatic identifier for the content type, often used in development and system configurations. In the image, the name is ArticlePage.
   • Display name – Enter a user-friendly name of the content type that is shown in the user interface. In the image, the display name is Article.
   • Description – This field provides a brief explanation of the content type's purpose or its intended use. The description in the image is Used to publish news articles on the website.
   • Sort index – Enter a numerical value for the order in which the content type appears in lists or menus within the system. A value of 0 is shown in the image.
   • Available in edit view – Select to control whether content editors can create and edit content of this type.
   • Reset Content Type – Click to discard any changes made to the content type that have not been defined in the underlying code, reverting it to its default, code-based configuration.

4. Click Save.

Because you can identify page types and their properties in code or from the Settings view, you can change some settings from the Settings view. If a page type is created from code, this is shown on the page type information page under General.

📘

Note

You cannot delete certain page types defined in code. These are typically page types upon which other page types are based, such as the standard or default page and the start page.

Using the Access level area, you can define which users or user groups have access to the page type.

Create a page type from the Settings view

1. Go to Settings > Content Types , select  Create New >  Page Type, and modify the form.

   
   • Name – Enter an internal, programmatic identifier for the content type, often used in development and system configurations. In the image, the name is AlloyTech.
   • Display name – Enter a user-friendly name of the content type that is shown in the user interface. In the image, the display name is Alloy Tech.
   • Description – This field provides a brief explanation of the content type's purpose or its intended use. The description in the image is This page will display Alloy technical specifications.

2. Click Create.

3. Set values in the new page Settings tab.

   
   • Name – Automatically filled from the name you entered when you created the page type.
   • Display name – Automatically filled from the name you entered when you created the page type.
   • Description – Automatically filled from the name you entered when you created the page type.
   • Sort index – A number determining the (ascending) sort order in the list of available page types. The default is 0.
   • Available in edit view – Select to make the page type available for selection when creating pages in the editorial interface. You should hide rarely used page types, such as the start page type. You can make these available when needed and then hide them again.

4. Set the values on the Permissions tab.

   You can use the Search box to filter and find users and groups to which you want to give access. Enter partial text to find the users or groups you want.

   

5. Set values on the Default Values tab.

   You can set default values for some of the built-in properties in Optimizely CMS from the admin view. You can also specify default values for the properties from code which are not visible in the admin view.

   
   • Use adjusted default settings for pages using this page type – Select to enable or disable adjusted default settings for pages created with this page type.
   • Visibility – A section for configuring how pages of this type are displayed.
     • Show this page type in navigation (page tree) – Select to control whether pages of this type appear in the navigation tree.
     • Sort index – A field to specify the sorting order.
     • Target Frame – Select the target frame for pages of this type.
   • Children – A section for configuring child pages.
     • Sort subpages – Select to determine how subpages are sorted; default is According to creation date (latest first).
   • Automatically publish – A section for setting automatic publishing rules.
     • Publish after – Select set a rule for when to automatically publish; default is Never.
     • Unpublish after – Select to set a rule for when to automatically unpublish; default is Never.

6. Set values on the Child Content Types tab.

   When creating pages, limit the available page types in the page type list to make it easier for editors to choose the correct page type. For example, for an Alloy Tech parent page, select Selected and then specify that the only available page type is Alloy Tech or Article.

   

7. Click Save.

Copy a page type

When you copy a page type, its properties are also copied. You can then edit the information for the page type and its properties. Copy a page type as follows:

1. Select More (…) > Copy on the page type that you want to copy.

   

2. Enter the text you want in the Copy of Page Type dialog box (which displays Copy of...) and click Create.

   

3. Edit the page type information to suit your requirements and click Save.

📘

Note

Copied page types are untyped, and you need to add the path to the display template; otherwise, pages based on the page type will not have a preview.

Block types

🚧

Important

Defining a custom block type in the CMS is only the first step. For a newly created custom block to render and appear on a webpage in a PaaS environment, a developer must implement a corresponding MVC View in the website's codebase. This view acts as the rendering component that translates the block's data into visible HTML. Without this developer-side implementation, the block will not be visible on the frontend, even if content editors can create instances of it in the CMS.

A block type is a component that makes up a portion of a web page. It is reusable content you can display with a template. It does not have a URL. It can consist of other block types, content, and media types. The following are some examples of block types:

• A carousel container, used for holding multiple slides.
• A slide used in a carousel.
• A button.
• A navigation menu.
• SEO settings for a page.
• Label dictionary for the application.
• An interactive map.

Block types are similar to page types, and you can modify some settings from the Settings page.

📘

Note

Sections and elements do not support blocks containing complex types such as nested block types. If you try, the following message displays: Cannot set Enable as Element because this content type contains property type that elements cannot have. (See property 'SiteLogoType')

Create a block type

1. Go to Settings > Content Types and click Create New > Block Type. The Create New Block Type window displays.

   
   

2. Click Settings in the new block type.

   

   • Name (required) – Enter a name for the block type.

   • Display name – Enter the name to be displayed in the list of available block types.

   • Description – Enter the text describing the block type also displays in the list of available block types.

   • Sort index – Enter a number to determine the (ascending) sort order for content types listed on the Content Types page.

   • Available in edit view – Select to make the block type available when creating content in the editorial interface. You should hide rarely used block types, such as the start block type. You can make these available when needed and then hide them again.

   • Available for composition in Visual Builder – Important! Select to let this block work in Visual Builder. If you do not select this, your block will not display in the element or section selection.

     • Section – Select to display this block as a section in Visual Builder.
     • Element – Select to display this block as an element in Visual Builder. Selecting Element affects the available options for adding properties to the block.

3. Select Properties and specify the components of your block type. For example, the CardTitle content type has a Text property, which is further defined as an XHTML string (>255) in the Configure Property panel.

   

4. Modify Permissions and other properties as needed.

   

5. Click Save to define the block type.

Block as an element

If you selected Available for composition in Visual Builder in the content type settings, when you click Add Element in a Visual Builder Outline, the block type (for example, Card) is listed among the selections.

The following image shows a view of Card when it is added as an element of a section:

Block as a section

If you selected a block (such as Card Component) to display in Visual Builder as a section, when you click Add Section in a Visual Builder Outline, Card Component is among the selections.

Selecting it creates a New Card Component section in the outline.

The following image shows a partial view of Card Component as a section:

Media types

Media types are similar to page types. From the Settings view, you can add properties, modify permissions, and set some Settings.

Edit a media type

Edit the settings for an existing media type as follows:

1. Go to Settings > Content Types, and select a media type (Image, Video, or Media).

2. Click Settings.

3. Enter the following information.

   • Name – A name for the media type.

   • Display name – The name to be displayed in the list of available media types.

   • Description – The text describing the media type also displays in the list of available media types.

   • Sort index – A number determining the (ascending) sort order in the list of available media types. The default is 100.

   • Supported media extensions – Comma-separated list of file extensions the media type supports. 

     

4. Click Save.

Create a media type from the Settings view

1. Go to Settings > Content Types, and select Create New > Media Type.

   

2. Enter the following information.

   • Name – A name for the media type.

   • Display name – The name to be displayed in the list of available media types.

   • Description – The text describing the media type also displays in the list of available media types.

   • Sort index – A number determining the (ascending) sort order in the list of available media types. The default is 100.

   • Type –  Required for image and video types. Select the media type.

     

   • Supported media extensions – Comma-separated list of file extensions the media type supports.

3. Click Save.

Other content types

By default, there are generic content types for other types of content, such as folders and media files. Based on these existing types, developers can create custom content types. For example, you can create a specific folder or media file content type that lets you add properties such as Copyright or Photographer.

Advanced content types

For experience, section, Connect from Graph, contract, and orphaned types (and for typed content references in code), see Advanced content types.