Manage and preview content in live preview

Add content directly to the live preview

To insert a content item or a component to a specific place on your preview:

1. In  Content & assets, go to your root content item.
2. Click to reveal the live preview panel.
3. Select   > Show editable elements.
4. (Optional) Select > Autorefresh to get the preview refreshed automatically as you edit.
5. Find the place where you want to add content to the page.
6. Click and then select one of the options.
   • This opens the in-context editor with a content item that will hold the new content.
   • The options can differ depending on whether you're adding content to a rich text element or a linked items element.
7. After you make the change, wait for the preview to refresh automatically or click and then Refresh manually.

The new component or a linked item will be added to a specific element within the content item, depending on where the button is located.

Preview and edit content

1. In  Content & assets, select the content item you want to view.
2. Click to open the live preview panel.
3. In the top right, select  > Show editable elements.
4. (Optional) Select > Autorefresh to get the preview refreshed automatically as you edit.
5. Find editable parts (with the pencil icon ).
6. Click the part of the page you want to change.
   • This opens the in-context editor. It doesn’t support certain actions, like adding a note. To open the full editor in a new tab, click .
7. After you make the change, wait for the preview to refresh automatically or click and then Refresh manually.

See the preview in various resolutions

In live preview, you can change the preview resolution to test what your content looks like on various devices.

1. In  Content & assets, select the content item you want to view.
2. Click to open the live preview panel.
3. Right below, select one of the resolution options to preview your content.

There are a few presets to get you started:

•  Desktop
•  Tablet
•  Mobile
• Responsive

Use the  Fit screen option to reset the view back to default.

Customize the preview resolution

You have two options:

• Type the exact dimensions into the Resolution fields at the top.
• Drag the right or bottom edges of the preview frame.

When you type in the resolution, Kontent.ai scales the preview frame to fit your screen. Use the Scale menu to set a custom scale. To reset the resolution and scale to default, click .

Rotate the screen

To see your pages both in portrait and landscape modes, click . Rotating the preview resets the scale to fit the screen. Use the Scale menu to set a custom scale.

Share the preview with colleagues

You can share a link to the particular preview setup with your colleagues.

1. At the top-right, click  More actions.
2. Select  Share.
3. Select one of the options to share the preview link.

Anyone with access to your project and the content you share the preview of can use the link.