# Page & Layout

This guide is for the person who is responsible for designing the page structure and content layout in your OTT system.

As an OTT Platform as a Service (OTT PaaS) provider, we aims to make it flexible for you to customize your OTT platforms. So the page & layout are dynamic so that you can customize your pages & structure your content layout in a way that fit your needs.

## Features

Features in the Page & Layout management section on Vimai CMS:

<table data-view="cards"><thead><tr><th>Feature</th><th></th></tr></thead><tbody><tr><td><strong>Manage OTT Platform</strong></td><td><ul><li>Manage OTT Platforms, which each platform having separated page structure &#x26; content layout.</li><li>Add / Remove OTT Platforms dynamically on Vimai CMS.</li></ul></td></tr><tr><td><strong>Manage Page</strong></td><td><ul><li>Manage Page Structure (Navigation Bar) for each OTT Platform separately.</li><li>Add / Remove / Reordering pages dynamically on Vimai CMS.</li></ul></td></tr><tr><td><strong>Manage Page Layout</strong></td><td><ul><li>Manage Page Content Layout Structure for each page separately.</li><li>Flexible, highly-configurable &#x26; dynamic content curation rule for each ribbons / carousels in the page.</li><li>Add, remove and reorder ribbons / carousels / page submenu (tabs) dynamically on Vimai CMS.</li></ul></td></tr></tbody></table>

## Concepts

These are the concepts used in our page & content layout structure&#x20;

### **OTT Platform**

OTT Platform (used interchangeably as Platform in Vimai Guidelines) represent your OTT platforms. In normal use case, use usually only need to create one OTT platform for all your app device platform (Web, Mobile, CTV).

Platform is used to separate the design layout, content layout structure & potentially to separate your contents. Example use-case where you might need to create more than one platforms:

* You want to create 2 separate sites with separate page structure / content layout & separate contents, like: One separate site for Documentaries, and one separate site for Anime. (Both with different page structure, content layout & content list)
* You want to use a different page structure because the page structure on your site consists of many page that cannot fit your mobile app bottom navigation bar.

### Pages & Menu Bar

{% tabs %}
{% tab title="Page management on CMS" %}

<figure><img src="/files/cRy2sRBaB0hOBOsc1c8P" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Display on web/mobile/ctv" %}

<figure><img src="/files/ShP0qjJinGu3dSAKkeq4" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Please checkout [ Manage Pages](/vimai-cms/page-and-layout/manage-pages.md) for guideline on managing pages.
{% endhint %}

Menu bar, consisting of page list, is the main navigation in client app in your platform.

The menu bar can be configured in the "Manage Pages":

<figure><img src="/files/lZHCiOZy17g6bTUg3Khw" alt="" width="375"><figcaption></figcaption></figure>

with each page corresponding to one menu item in the menu bar.

Once configured, those page (menu bar item) will show up on your app platform accordingly:

<figure><img src="/files/J8AKOyb4Kx777i8Am5O3" alt="" width="375"><figcaption></figcaption></figure>

### Page Layout

#### Overview

{% tabs %}
{% tab title="Page layout management on CMS" %}

<figure><img src="/files/OtgvdtGU7a8OXIJcysyx" alt="" width="188"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Display in web/mobile/ctv" %}

<figure><img src="/files/eAwKPhC0NtyV1Uz5p51v" alt="" width="188"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Please check out [Manage Page Layout](/vimai-cms/page-and-layout/manage-page-layout.md) for guidelines on managing page layout
{% endhint %}

A Page Layout will consist of:

* One Banner / Cover section: containing a list of contents that you would like to highlight in the page)
* Multiple Ribbon / Carousels: Each Ribbon / Carousels contains a list of automatically-added contents (based on ribbon / carousels content filter conditions).

The position of ribbons / carousels can be reordered in Layout management page (See Manage Page Layout)

Each ribbon / carousels will have the following customizations:

<table><thead><tr><th width="138">Customization Field</th><th width="193">Description</th><th>Available Values</th></tr></thead><tbody><tr><td>Display</td><td>Customization the display of the ribbon / carousel items</td><td><p>Either:</p><ul><li>Thumbnail (Landscape Poster): Display ribbon / carousel item image in landscape poster size.</li><li>Poster (Portrait Poster): Display ribbon / carousel item image in portrait poster size.</li></ul></td></tr><tr><td>Ribbon Type<br>(Ribbon's content curation rule)</td><td>Except for the "Master" ribbon type, the other ribbon type will be the content-curation rule.<br><br>The content-curation for ribbon is the automatic ribbon content population mechanism.<br>The rule will specify which types of contents will be automatically be added to the ribbon.</td><td><p>Either:</p><ul><li>Automatic: Automatically curate contents into the ribbons using filtering condition (by category, by genre, by producing country) with selectable ordering strategy (by popularity, by on-air time, by popularity &#x26; on-air time combination) </li><li>New Release: Automatically curate newly-released contents sorted by release date into the ribbon.</li><li>Recent Movie (Recently Watched): Automatically curate the user's recently-watched content into the ribbon.</li><li>Top Content: Automatically curate the top 10 content with highest view count into the ribbon</li><li>Paid TVOD Content: Automatically curate user's paid TVOD/PPV contents into the ribbon.</li><li>Favorite Contents: Automatically curate user's favorite (liked) contents into the ribbon.</li><li>Recommendation (Using AI): Automatically curate recommended contents for the user (based on users' watch history) using AI algorithm (Matrix Factorization)</li><li>Master: For indicating this ribbon to be the Banner / Cover (containing items for the banner / cover)</li></ul></td></tr></tbody></table>

#### Sample Page Layout Configuration

When we configure a page layout with the below ribbons / carousels:

<table><thead><tr><th width="206">Ribbon / Carousel Name</th><th>Ribbon Type</th><th>Additional Ribbon Config</th></tr></thead><tbody><tr><td>Watching Contents</td><td>Recent Movie (Recently Watched)</td><td></td></tr><tr><td>You might like</td><td>Recommendation (Using AI)</td><td></td></tr><tr><td>New Releases</td><td>New Release</td><td></td></tr><tr><td>Only on VD</td><td>Automatic</td><td><p>Content curation rule:</p><ul><li>Category: "Only on VD"</li></ul></td></tr><tr><td>Sports</td><td>Automatic</td><td><p>Content curation rule:</p><ul><li>Category: "Movies"</li></ul><p>Content Sorting Strategy:</p><ul><li>By On-Air Time</li></ul></td></tr><tr><td>Hot Drama</td><td>Automatic</td><td><p>Content curation rule:</p><ul><li>Category: "Drama"</li></ul><p>Content Sorting Strategy:</p><ul><li>By Popularity</li></ul></td></tr><tr><td>Trending Movies</td><td>Automatic</td><td><p>Content curation rule:</p><ul><li>Category: "Movies"</li></ul><p>Content Sorting Strategy:</p><ul><li>By Popularity</li></ul></td></tr><tr><td>Discovery</td><td>Automatic</td><td><p>Content curation rule:</p><ul><li>Category: "Movies"</li></ul><p>Content Sorting Strategy:</p><ul><li>By On-Air Time</li></ul></td></tr><tr><td>Comedy</td><td>Automatic</td><td><p>Content curation rule:</p><ul><li>Category: "Comedy"</li></ul><p>Content Sorting Strategy:</p><ul><li>By On-Air Time</li></ul></td></tr><tr><td>Documentaries</td><td>Automatic</td><td><p>Content curation rule:</p><ul><li>Category: "Documentary"</li></ul><p>Content Sorting Strategy:</p><ul><li>By On-Air Time</li></ul></td></tr><tr><td>Asia Drama &#x26; Movies</td><td>Automatic</td><td><p>Content curation rule:</p><ul><li>Category: "Drama", "Movies"</li><li>Region (Producing Country): Asia</li></ul><p>Content Sorting Strategy:</p><ul><li>By On-Air Time</li></ul></td></tr><tr><td>Europe Drama &#x26; Movies</td><td>Automatic</td><td><p>Content curation rule:</p><ul><li>Category: "Drama", "Movies"</li><li>Region (Producing Country): Europe</li></ul><p>Content Sorting Strategy:</p><ul><li>By On-Air Time</li></ul></td></tr></tbody></table>

The page layout will be displayed as:

<figure><img src="/files/eAwKPhC0NtyV1Uz5p51v" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://how.vimai.io/vimai-cms/page-and-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.