With Web Spotlight, you can seamlessly link, edit, and preview your web content in real-time, ensuring that your content is both engaging and optimized for various devices.
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:
In Web Spotlight, select a page.
Switch to the Editor tab.
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:
In Web Spotlight, select a page.
Switch to the Preview tab.
In the top right, select Actions > Show editable elements.
(Optional) Select Actions > Autorefresh to get the preview refreshed automatically as you edit.
Find the place where you want to add content to the page.
Click and then select one of the options.
This opens the in-context editor with a content item that will hold the new content.
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
In Web Spotlight, select the page you want to view.
Switch to the Preview tab.
In the top right, select Actions > Show editable elements.
(Optional) Select Actions > Autorefresh to get the preview refreshed automatically as you edit.
Find editable parts (with the pencil icon ).
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.
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.
In Web Spotlight, select the page you want to view.
Switch to the Preview tab.
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.
At the top-right, click Actions.
Select Share preview.
Click .
Anyone with access to your project and the page you share the preview of can use the link.
The instructions below apply to the default Web Spotlight settings. You might need to look for different types or elements, depending on how your project admins set up your project.
Preview doesn't refresh automatically?If your preview doesn't refresh automatically after you make a change, first make sure the Autorefresh option under Actions is selected. If this option is disabled for you, ask your developers to set up automatic refresh in Web Spotlight.
Missing edit icons?If you don't see any editable elements, your developers first need to set up your website's preview so that it tells Kontent.ai what's on the displayed page.
The share option grayed out?Your developers need to update the Smartlink SDK to version 3.1.0 or newer to make sharing preview links available.
Web Spotlight, select a page.
Actions > 
Show editable elements.
and then select one of the options.
Refresh manually.
).
Desktop
Tablet
Mobile
Fit screen option to reset the view back to default.
.
Rotating the preview resets the scale to fit the screen. Use the Scale menu to set a custom scale.
Share preview.
.
. All rights reserved.
