Landing pages or home pages are typically made of parts of existing content and show what your website or app is about. In this tutorial, you’ll learn how to approach building a landing page in Kontent.ai and what steps to take so you quickly land up with a successful landing page.
Linking content in a nutshell
With structured content, you have separate content items for product pages, articles, authors, and so on. Your landing page mainly features excerpts from these various pieces of content.To build a landing page, you need a content type that serves as a blueprint. You use this type to create a landing page content item and link all the desired existing content to the landing page. Then, tie it all together with single-use pieces of content, such as a welcome message or a hero image.
Think through your landing page structure
The first step is to think through the content you want to use on your landing page. The result of this activity should include:
Content types of existing content you want to reuse
Examples: featured articles, your partners’ logos, and names, products, illustration images
Types of single-use content you’ll use only on the landing page
Examples: welcome messages, CTAs, tiles with your portfolio highlights
When reusing existing content, we recommend linking content items. Content items can be used in multiple places; each item has its own workflow life and can be published separately.Single-use content that’s only in one place doesn’t need to have its own separate life. For this content, use rich text with components. A component exists only within one content item and shares its workflow.
Create landing page content type
When you’re clear on what content you want and where, it’s time to put your ideas into action. Create a new content type and define its structure according to your content mapping.For example, to build a page similar to the one in the picture above, you’d have one rich text element for the welcome message in the hero area. You’d also add a linked items element for a call-to-action button.Then, you’d have a linked items element for your most important partners or products, and so on.
Define single-use content
When you’re building the content type for a landing page, you may need to create additional content types for structural units like the CTAs or image components.Consider the use cases of your components – you may want to include additional metadata, such as the licensing rights for the images used on your website.
Put together the landing page
Congratulations, you have the content model ready! Now, let’s create the landing page:
After you’re done filling in the elements of your new landing page, it’s time to preview it. At the top of the content item, you can see the preview button that opens the page preview. If you don’t see the button, contact your developers – they’ll set it up for you.Alternatively, use Web Spotlight to preview your landing page directly in the Kontent.ai platform.When you’re happy with your landing page, publish it and enjoy your day!
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!
Landing page built in Kontent.ai with single-use content for the welcome message and reused linked items for CTAs, logos, and other content.
An image component with metadata in a separate content group
You'll need your developers in the beginningWhen you build your first landing page, you need your developers to adjust your app accordingly. It's best to talk to them as early as possible. They may have valuable technical insight.Once this initial setup is completed, you'll be able to independently create landing pages as needed.
Specify allowed content typesWhen you prepare the content type, it’s useful to limit what type of content can be used where.For instance, you might want the hero section’s rich text to include the Call to Action type, but exclude Author or Product details content types.
Try it yourself!Before you dig deeper, open a project in Kontent.ai and follow the steps in this lesson for the best learning experience.
. All rights reserved.
