On-page editing view

📘

Note

A developer needs to set OnPageEditing to true in appSettings.json to enable on-page editing in the user interface (UI).

JSON

services.Configure<CmsFeatureOptions>(options =>
  {
      options.OnPageEditing = true;
  });

All content displays in the Visual Builder by default, but you can switch to on-page editing only for pages and shared block content, not experiences (experiences only use the Visual Builder).

For pages and shared block content, you can switch from the Visual Builder to on-page editing by clicking Select view > On-Page Editing.

From here, you can start editing content; the areas available for editing are highlighted, as shown in the following image.

The available areas depend on how you defined the page type, and each area is set up with a property type that controls what you can do with each area. For example, one area can have an image property type and is intended for images; another area can have a page description property and is intended for text describing the page. This means that you will have different editing options when clicking an area, depending on the area's property type. Typically, for a page, you can edit the page name, description, the main editorial area, and perhaps a content area with shared blocks.

📘

Note

Areas and properties available for editing are implementation-specific and depend on the property type and how the rendering is built on your application.

Edit a page with On-Page Editing view

This example describes how to edit a page, but the procedure is similar when editing shared blocks.

1. Select the page to edit from the page tree in the navigation pane.

   

2. Click an area to edit (property names are displayed on mouse-over).

3. Make your changes by updating the content properties as needed. For updating rich text content, see Edit content using TinyMCE.

   

   Your changes save automatically in a draft version of the content.

4. Click Preview at any time to see what the published version will look like.

   

5. Click Publish > Publish Changes to publish the content when ready.