Skip navigation

Build landing pages

6 min read
Download PDF

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.

Table of contents

    Key points – Landing pages made easy, fast, and multichannel

    • Easy: Building a landing page is like assembling a jigsaw puzzle. You link various pieces of content to make a new whole.
    • Fast: Once you create one landing page, you can use the groundwork for any number of other landing pages.
    • Multichannel: When you build landing pages using structured content in Kontent.ai, you can serve them to any device via any channel.

    Linking content in a nutshell

    Video about linking content together in Kontent.ai

    With structured content, you have separate content items for product pages, articles, their authors, and so on. Your landing page will consist mostly of excerpts from these various pieces of content.

    To build a landing page, you need a content type that serves as a blueprint of the landing page. You use this type to create a landing page content item and link to it all the existing content you want in the landing page. And you connect 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 beginning

    When 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.

    The good news is, you go through this once, and then you can create more landing pages on your own.

    Think through your landing page structure

    The first step is to think through the content you want to use in your landing page. The result of this activity should include:

    1. Content types of existing content you want to reuse
      • Examples: featured articles, your partners' logos and names, products, illustration images
    2. Types of single-use content you'll use only in the landing page
      • Examples: welcome messages, CTAs, tiles with your portfolio highlights

    Single-use and reusable content

    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.

    The 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 where, it's time to put your ideas to action. Create a new content type and define its structure according to your content mapping.

    Content item in Kontent.ai and its representation on the website.

    Landing page built in Kontent.ai with single-use content for the welcome message and reused linked items with CTAs, partner logos, and other content

    For example, to build a page similar to the one in the picture above, you'd have one rich text element for the main welcome message in the hero area. You'd also add a linked items element for call-to-action buttons.

    Then, you'd have an asset element for the hero image, a linked items element for your most important products, and so on.

    Specify allowed content types

    When you prepare the content type, it's useful to limit what type of content can be used where.

    For example, the rich text for the hero area may need to use the Call to Action or Image types for linked items or components. On the other hand, you may not want to allow the Author or Product details content types.

    Define visual options

    When you're building the content type for the landing page, you may need to create additional content types for structural units like the CTAs or image components. 

    Consider your use cases of your components – you may want to add display options like alignment or size for image components, CTAs may have different colors, and so on.

    A component for an image in the rich text element. The component has multiple-choice elements for setting the display width and the alignment of the image.

    An image component with alignment and size options

    Put together the landing page

    Congratulations, you have the content model ready, all that remains is to create the landing page!

    1. Create a content item of your landing page content type.
    2. Write texts to introduce and connect the sections in the landing page.
    3. Add single-use components like CTAs or images.
    4. Link the content you already have to the landing page.

    This is how we link existing items to build a landing page for our Kontent.ai website.

    Learn in more detail about the options you have when structuring content.

    Preview and publish your piece of 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 should 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.

    When you're happy with your landing page, publish it and enjoy your day!

    What's next?

    You now know how to build landing pages in Kontent.ai. Here are some related materials that can help you achieve more: