# Design a Page Template

### Overview

Admins can create custom templates with enhanced design features for greater flexibility and ease of use. Widgets snap to a grid for precise alignment, while a visual grid helps maintain a structured layout. Drag-and-drop functionality allows easy repositioning of widgets, and adjustable height and width settings enable precise customization.

***

### Step 1: Title

Click the **Design Your Own** button located at the top right of the **Page Template** menu. This will take you to the template creation wizard.

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FijLmIYJ4iz657JVm7Qym%2F03-03-2025-10-34-34.png?alt=media&#x26;token=d944b1eb-10b2-41ca-9d4d-573f28a9e7f5" alt="" width="563"><figcaption></figcaption></figure>

To get started, enter a **Title** for the template. This title is **required** and must be **unique**. No two templates may have the same Title.

Optionally, add a template **Description** (255 character max) and an **Icon**. This icon will appear along with the title of the template when viewed in the User Portal. Users can change this icon when editing the template upon page creation.

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FdttuRWcGPWCbYG2olLVj%2F03-03-2025-10-45-02.png?alt=media&#x26;token=eefc176b-a07d-4bd9-b4e5-aaef7423cb72" alt="" width="563"><figcaption></figcaption></figure>

Upload a **Template Image**. Each template must include an image. Choose simple, easily recognizable images that are relevant to the template's purpose. Avoid using overly complex or detailed images.

* Minimum image size: 165 x 175px
* Recommended image size: 330 x 350px

***

### Step 2: Design

In this step, admins can use the designer to customize the page as needed. The designer includes a widget gallery with over 50 widgets that can automatically pull existing content from your MangoApps domain and display it on the page.&#x20;

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2Fc0abnHF5TIoguiDPSFwN%2F03-03-2025-10-55-56.png?alt=media&#x26;token=bf98823c-1901-4e2e-87b2-ae3b51bdfee8" alt="" width="563"><figcaption></figcaption></figure>

Admins can also add static content if needed. The dynamic page templates allow users to resize, reorder, add, and remove widgets, giving full control and flexibility to design the page without requiring programming knowledge.

**Adding Widgets**

Select widgets from the Widget Gallery and click **+ Add**. Then, drag and resize the widgets across multiple rows and columns to your preference.

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FpOrKt1NO9KoQiLvaqP7X%2Fezgif-4d3c5429c2a233.gif?alt=media&#x26;token=952102c9-f7ec-414d-9fcc-c04676db9920" alt="" width="563"><figcaption></figcaption></figure>

**Fixed vs. Variable Height Widgets**

The **Fixed Height** setting ensures that all widgets in a row have the same height. This is enabled by default for all new pages, but can be adjusted as needed.&#x20;

***

### Step 3: Preview

In this step, users will be able to preview the template as it will appear in both Web and Mobile formats.

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FMFc3CpxdLNazLRGf2WH4%2Fezgif-2764c6f122ebea.gif?alt=media&#x26;token=e37f9b94-5c15-4543-9048-0161ec589931" alt=""><figcaption></figcaption></figure>

Users can return to previous steps to make changes by clicking **Previous** or the step name in the bottom bar. They can also save their progress as a draft to resume editing later, or navigate to the next step to configure the template settings.

***

### Step 4: Settings

In this final step, users can configure the default settings for the template. These settings can be updated later based on the use case and user preferences when a page is published in the User Portal using this template.

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FvOd3wOW19X7eq9QPgXys%2F03-03-2025-09-06-48.png?alt=media&#x26;token=ca6c7297-57c7-419d-8a00-5d362c4b295e" alt="" width="563"><figcaption></figcaption></figure>

**Hashtags**: Assign keywords for easier searchability (e.g., #Sales, #Engineering).

**Turn on comments**: Allow users to post feedback and suggestions.

**Turn on reactions**: Users can react to content.

**Turn on change log**: Track modifications made to the page.

**Only admins can see who has viewed this page**: Admins can limit visibility while tracking page views.

Click **Save and Publish** or **Save as Draft** to exit.

{% hint style="info" %}
These settings do not affect the template itself; instead, they serve as the default configuration when a user uses the template as a base for creating a page within the User Portal.
{% endhint %}

***

Once saved, the new template will be listed in the **Page Template** section.