Just five steps to Valhalla

Web Spotlight is a separate extension of Kontent for managing web pages and their content. It lets your content creators (mainly web editors and marketers) produce content in a way they’re used to from traditional CMSs. Instead of content inventory that’s sometimes harder to imagine, they see the website’s page tree and manage the content from it.

With that, Web Spotlight brings ease to the authoring experience. Still, Kontent is the engine behind Web Spotlight, so you can use all of its headless CMS advantages. And even though Web Spotlight is focused on web, you can still use the content for any other channel as well. Web Spotlight’s page tree creates a hierarchy just for your website.

It creates the necessary content model for website navigation, which is cool for new projects. Existing projects already have working navigation, so those will need some adjustments. However, the changes are not complicated. As Richard Shackleton, Kentico’s MVP from NetConstruct, tweets:

Before you start, let’s break through the first fear. By activating Web Spotlight, your existing project and all apps connected will still work as nothing changes. The newly created content types won’t change how your project works.

Also, you can leave the existing navigation in place and only switch to the new navigation when everything is set up and tested.

Let’s look into the five steps to transition your existing project to Web Spotlight.

1. Choose the right navigation option

As Kontent is versatile, there have always been multiple ways to build navigation. As the article states, there are three types of navigation:

1. Hard-coded navigation – the whole sitemap is in the code, connected to specific content items
2. Implicitly generated navigation – the whole sitemap is in the code, connected to specific content types through listings
3. Explicitly modeled navigation – the whole sitemap is defined with the content model; business users have the navigation in their hands with this type only

Depending on which type you’ve chosen in the past, your transition path will differ. For Web Spotlight to work, you need 3) explicitly modeled navigation. That means that you model the page tree via the content model, and your content creators can edit the page tree based on their permissions.

If youʼre using 1) or 2) at this moment, you will create the whole navigation logic as you would for a new project. For that, we recommend going through the content modeling guide and then following this tutorial further.

Explicitly modeled navigation has two sub-options. You either 3a) keep your content and navigation in one content item, tightly bound together, or 3b) split your content from navigation into separate content items. While 3a) is a more straight-forward option most suitable for simpler projects, 3b) is the way to go for companies and their content collection with a multichannel or omnichannel presence. Or at least the ambition for one of them—you never know when you’re going to launch a mobile app.

This separation lets you focus on individual parts of your project without them influencing one another. Your developers and web editors can focus on web content, and other teams can produce content without thinking about its final location or used channel.

However, both sub-options work with Web Spotlight, so it’s up to you which way you’ll go.

2. Set up your homepage

A website’s page tree starts with its homepage and then grows with every page you add to it. It’s the same with content in Web Spotlight. Once you activate Web Spotlight, you’ll find a new item named Homepage in your project for that matter. It comes with two elements, Content and Subpages, that you need to fill in.

In the Subpages element, add pages to define your website’s top-level navigation. The Content element is a linked item element and specifies what content is displayed on the homepage. If you want to use the tightly-bound navigation (3a), replace the element with elements for the actual content, and fill them in.

If you already have a content type and a content item for the homepage, you can adjust the newly created ones to reflect the old counterparts.

3. Add pages to your page tree

Web Spotlight creates the Page type for pages. It’s prepared for the separated navigation from content (3b). You can either use the new Page type and connect the existing content to it or use your original navigation and redo it into Web Spotlight’s navigation.

Using the new Page type

In this case, move the relevant elements from the original navigation to the new Page type. If you had used the tightly-bound navigation with content, youʼd most likely need to move sitemap specific elements like subpages or SEO properties (keywords, description, etc.).

If you have separate navigation, it will mean moving all elements to the new Page type. However, we recommend using the original navigation if this is your case as it will be significantly easier for you.

Using the original navigation

Whether your navigation is in the same content type as content or not, you need to change your navigation to use the Subpages element instead of the Linked items element.

Create the Subpages element manually for all content types where it makes sense, link the same page as in the original Linked items element, and remove the original Linked items element when you verify that all works. You can do the second and third things programmatically to save time if you have a lot of content. For example, you can use the Kontent CLI to help you with this.

Tip: What about localization?

If you have a multilingual website, we recommend creating the page tree in one language first and then migrating the subpages to other languages programmatically. Similarly to the above, use the Kontent CLI for this task. This way you’ll establish a common page tree across your multilingual project and adjust the page titles for each language.

4. Set up preview

You minimize the benefits of Web Spotlight (and Kontent as well) if you don’t set up preview. You’re missing out. With preview, you don’t need to publish your content just to check if it fits. And with preview and Web Spotlight, you can live edit your content directly in Kontent.

Provide preview URLs for every content type that has its own URL in your website to let Kontent know where your pages live. For example, a content type like Landing page will have a URL, whereas Image or Call to action won’t. That’s the gist of it. Check out this tutorial on setting up preview to dive into the specifics.

5. Enable live editing your content

This will let your content creators live edit the content directly from preview. To enable this feature, enhance your website with clickable regions, called editable elements, by using the new Kontent Smart Link SDK. The SDK goes through your website’s HTML output looking for specific data attributes.

These data attributes specify things like your project ID and language, the IDs of content items shown on the page, and the individual content elements from which the displayed content is taken.

When you combine the data attributes with the SDK, you’ll see editable elements with pencil icons on your pages.

When website management is fun

That’s it. When you switch your apps to work with the new navigation, it will all start working. Don’t forget to clean up your project afterward to avoid bloating your content with obsolete data.

With this change, you don’t have to worry about the rest. Web Spotlight follows the same permission model as you’re used to. So, users will have access to those content items in the page tree as they did before that. If you want to restrict someone from creating pages in the page tree, limit the user role so that they don’t have the create permission.

It also works automatically with environments. So you can test out your new features with no scares.

Check out our tutorials on Web Spotlight to find out more details. And if you have any additional questions regarding the transition to Web Spotlight, contact our support with the bottom-right chat button.