Manage and preview content in Web Spotlight

Pages vs content in Web Spotlight

In Web Spotlight, your page content relies on linking. For each page, you specify an item that represents the content of the page. By default, pages don’t contain any content on their own, they only link to it. Find more about the concept of linking content together.

Add content through the Editor tab

To attach existing content to your web page:

1. In Web Spotlight, select a page.
2. Switch to the Editor tab.
3. In Content, specify a content item you want to be displayed on this page.
   • For example, the content item you choose can represent a landing page, article, or blog post.

Use the same approach for replacing content items linked to other pages.

Add content directly from the preview

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

1. In Web Spotlight, select a page.
2. Switch to the Preview tab.
3. In the top right, select  Actions > Show editable elements.
4. (Optional) Select Actions > 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  Actions 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 page content

1. In Web Spotlight, select the page you want to view.
2. Switch to the Preview tab.
3. In the top right, select  Actions > Show editable elements.
4. (Optional) Select Actions > 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, click Open in editor.
7. After you make the change, wait for the preview to refresh automatically or click  Actions and then Refresh manually.

See the preview in various resolutions

In Web Spotlight preview, you can change the preview resolution to test what your pages look like on various devices.

1. In  Web Spotlight, select the page you want to view.
2. Switch to the Preview tab.
3. In the top left, open the dropdown menu with resolution options.

There are a couple of presets to get you started:

•  Desktop
•  Tablet
•  Mobile

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  Actions.
2. Select  Share preview.
3. Click .

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