Build landing pages

David Klement

8 minutes

0% complete

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.

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.

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.

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.

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.

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.

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:

Create a content item of your landing page content type.
Write texts to introduce and connect the sections on the landing page.
Add single-use components like CTAs or images.
- Set the metadata in the components you defined when building the content type.
Link the existing content to the landing page.

Preview and publish your work

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 switch on the preview toggle, which reveals the page preview in your content item. If you don’t see the Preview toggle, 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!