Navigation and content in Web Spotlight

Jan Cerman

4 minutes

Web Spotlight

Download PDF

Web Spotlight separates the page tree information from your content. Discover why this is a good thing and how the approach works in practice!

In Web Spotlight, your navigation is separate from content by default. This means that one group of content items defines your page tree navigation, while another group of items defines your content. The items from these two groups are linked in one direction. For example, the root item can link to a landing page, or a page can link to a blog post. Separating content from pages like this helps you ensure content creators don’t accidentally change the page tree and only work on their assigned content.

In your Website root item, notice the elements Subpages and Content.

The Subpages element is used to create a page tree. You link other pages using this element.
The Content element is used to add the actual content. You link to a content item with the content you want to show on that page.

Let’s now set up a landing page for your root item.

Define a landing page

Create a new content type named Landing page with the following elements:

A text element named Title.
A rich text element named Body.
An asset element named Image.

That’s it. Keep it simple. You can now create your landing page using the new content type.

Add a landing page to your website root

Let’s go back to your page tree in Web Spotlight and add a landing page to the root of the page tree.

In Web Spotlight, select Website root.
Switch to the Editor tab.
In the Content element, click Create new item.
Select Landing page as the content type.
In Content item name, type Hello Web Spotlight.
Fill in the Title and Body text elements.
Upload an image to the Image asset element. You can use our Web Spotlight logo.

Content-wise, you’re all set. You have a page linked to its content.

In Web Spotlight, your navigation is separate from content by default. This means that one group of content items defines your page tree navigation, while another group of items defines your content. The items from these two groups are linked in one direction. For example, the root item can link to a landing page, or a page can link to a blog post. Separating content from pages like this helps you ensure content creators don’t accidentally change the page tree and only work on their assigned content.

In your Website root item, notice the elements Subpages and Content.

The Subpages element is used to create a page tree. You link other pages using this element.
The Content element is used to add the actual content. You link to a content item with the content you want to show on that page.

Let’s now set up a landing page for your root item.

Define a landing page

Create a new content type named Landing page with the following elements:

A text element named Title.
A rich text element named Body.
An asset element named Image.

That’s it. Keep it simple. You can now create your landing page using the new content type.

Add a landing page to your website root

Let’s go back to your page tree in Web Spotlight and add a landing page to the root of the page tree.

In Web Spotlight, select Website root.
Switch to the Editor tab.
In the Content element, click Create new item.
Select Landing page as the content type.
In Content item name, type Hello Web Spotlight.
Fill in the Title and Body text elements.
Upload an image to the Image asset element. You can use our Web Spotlight logo.

Content-wise, you’re all set. You have a page linked to its content.

Sign in

Sign in with your Kontent.ai credentials or sign up for free to unlock the full lesson, track your progress, and access exclusive expert insights and tips!

A simple content type for a landing page.

Sign in

More than one way to manage navigationWeb Spotlight separates navigation and content, but you can do it differently if you need to. Choose a navigation approach that works for you.

Understand the navigation in Web Spotlight

Define a landing page

Add a landing page to your website root