Module: Model website presentation components
2 of 11 Pages
Connect content and presentation
When defining the content model, teams often forget to pause to identify content types that play crucial roles in their planned customer journeys across different channels.
In this article, you’ll learn to:
- Align your website’s presentation layer with your content strategy to support marketing goals.
- Define different presentation components to help you display data effectively on your website, drive conversions for specific products, or generate new leads with articles.
- Use page templates, sections, and widgets to create pages and tailor content based on visitors’ previous activities.
Align your presentation layer with your content strategy
Imagine your website as a stage and the presentation layer as the spotlight. Here’s where you can tailor the customer experience. If you have correctly defined the components, you can guide visitors toward their intended actions by identifying specific areas in this layer.
The content model defines a conceptual framework that describes how data elements interact within the system. The content model outlines how editors will capture the data, store it in the system, what are the relationships between the data and retrieval rules to display it to customers. This model ensures clarity and consistency, guiding the organization’s data infrastructure. If you are not familiar with Xperience by Kentico, please find out more about content modeling in our documentation.
Know your goals and desired outcomes before defining what components you need to display your content on the website. Without understanding your content strategy, the presentation layer you’ll define for your data will be incomplete.
Since you have done your content modeling sessions, you already know which types help you build your pages in your website channel.
We recommend designing website pages as a wrapper over a reusable content type stored in the Content hub. The page wrapper or page envelope stores only the data that make sense for website page-specific content, such as SEO data and search engine instructions, like no-index directives.
|
Wrapper page |
Article reusable content type |
Product content type |
|
|
|
|
|
You can see that the content is split into two groups: Components for storing data and Components for displaying data. Editors can store data in a structured format, including a reusable content type for Articles with fields such as title, teaser image, summary, text, article type, or article publication date. They can display the article data using the Article page content type and enrich it with SEO-specific and OpenGraph-specific fields, such as title, description, and image. From a presentation perspective, you can design display components such as Page template, Featured article widget, Related articles widget, and Call to action widget that editors use to display article data. |
The Article content type contains core fields such as the title, teaser image, summary, taxonomy, article text, related articles, author, and publication date. The article references an Asset content type, which provides fields such as media description, alt text, and the media file itself. Articles are categorized through a Core Taxonomy that supplies tags. Social profile information is stored within the Social media content type, offering link, icon, and label fields that articles can reference when needed. Author information is captured in an Author content type that includes first name, last name, job title, portrait image (refernce to an asset), biography, email, and social media links (handled through social media content type). Authors can also be associated with specific companies through the Company content type, which stores a company name and links to an Address content type containing details such as street, city, country, postal code, and geographic coordinates. |
The Product – Account content type contains core fields include the title, short description, media (referencing a separate Asset type), taxonomy, and detailed product information. Benefits and Product Features are handled through dedicated content types. Benefits store descriptions or icons, and Product Features define items such as label, key, price, value, or availability via a taxonomy group, and can be used to compare different products alongside. The Product – Account content type also includes financial fields, such as annual percentage rate and interest rate, via reusable schemas, along with taxonomy‑based fields for currencies and regional availability. Additional product‑specific fields capture requirements such as minimum inflow and overdraft limits. |
Talking to our customers, we’ve seen a familiar pattern: teams not using or thinking of their content in the omnichannel mode often start with the presentation layer and define typical “pages” you’ll see in your website sitemap. Information Architecture vs. Sitemaps: What’s the Difference? Missing the data modeling exercise that helps make the content modular, reusable, and future-friendly locks them into old patterns, leading to content duplicity, complex maintenance, and subpar content curation experience.
Think of customer journey and conversions
Let’s look at two content types on our Kbank demo sites and see their target goals.
|
Article page |
Product page |
|
|
With a little bit of prototyping (and later, by experience), you’ll soon identify website components that will help your team achieve their goals, such as:
- Adding calls to action to guide people through their journey.
- Showing and revealing relevant information depending on the page and circumstance.
- Personalize content.