Module: Model website presentation components
3 of 11 Pages
Define presentation components
Kentico comes with a user-friendly interface called Page Builder that allows non-technical users to build pages from configurable page templates, sections, and widgets prepared by the developers. Editors can create pages, each with a different layout, without the help of developers. Using content personalization, they can also tailor the page’s content based on visitors’ previous activities.
Page templates define the overall look of the page. Developers build the templates to display content, and editors assign them when they create new or change the layout of existing pages. Editors can also save template configurations into page presets and speed up content creation.
- General purpose page templates display data stored in a structured format. Editors input content through unified form fields in the admin UI, and the template shows the content dynamically. The website can have multiple templates to display the same content differently, or each template can have specific properties to adjust the page layout. Find out more about page templates in Kentico documentation.
- Page Builder templates display data through the Page Builder widgets and provide editors with great layout and design options. Find out more about page templates with Page Builder in the documentation.
Even if the page templates display structured content dynamically, we recommend that developers enable Page Builder.
Sections define the page’s vertical and horizontal layout with Page Builder. They determine areas where editors place the content in widget zones. Sections can have properties editors use to define what the sections with widget zones look like, for example, their background and the number of columns where editors input widgets or adjust whitespace around individual content pieces.
Widgets are the most granular Page Builder components. Editors use them to add or display content on the page or to add specific functionality. Widgets are reusable, and different pages or website channels can share the same set of widgets. This dramatically helps the editing experience. Your team gets used to how to create pages in one channel, and they can quickly transfer this knowledge when your company decides to introduce other new website channels, for example, campaign microsites.
Similarly to other Page Builder components, developers prepare widgets to display reusable content from the Content hub or allow editors to create one-off content for individual pages. Based on the project requirements, each widget can have its properties that editors configure which data to display and what it will look like on the page. Editors can also create personalized variants of the widget’s content to tailor the page experience to specific visitor segments.
We recommend that developers build page templates with editable properties editors will use to create their pages. To make their content future-friendly, editors should store it in the structured format and use widgets to display it on the website.
Identify individual page components
Let’s take a look at two pages on the Kbank website.|
Article reusable content type |
Product content type |
|
Article page template |
Product page template |
|
|
|
|
The Article detail page is composed of several reusable components. First, there’s an article teaser block that displays a teaser image, title, summary, and publishing date. Then there’s a full article section that contains the main article text. The article detail page contains related content. Editors added a Featured news widget to highlight one selected article, followed by Related articles widgets. To capture the reader’s attention for the ongoing promotion, they used the Page heading widget for the campaign claim and a Call-to-action widget that directs the user to the offer. |
The Product detail page is composed of sections that define the page flow and widgets that display content. The Hero banner widget features a headline, supporting text, and an image, followed by a short summary and a Product highlights section that pairs an image with key features and details. The Promotion widget highlights basic details and displays an image, followed by a collapsible section. Editors then split the layout into two columns, with Benefits widget on the left and a Featured article card widget linking to a related news article on the right. Further down, editors added a full‑width Image widget to provide visual emphasis, and a lead‑capture form allows users to submit their contact information. |
Define editable properties for individual components
Let’s take a look at individual component and their properties. The following list describes individual widgets and their properties, which you can find on the Kbank demo site. It represents one of the options, and you can approach your content creation differently.
The following section shows different Page Builder components and their configuration options. You can see them in action on the Kbank demo site.