---
title: Customising the Activate Home Page
slug: customising-the-activate-home-page
createdAt: 2025-07-17T03:18:57.743Z
---

# Introduction

Activate provides several prebuilt examples of home pages that can be used as a starting point for creating a custom home page design. These examples demonstrate different layout and design options for tiles, quick links, and background images.

By default, these examples appear at the bottom of the standard home page for easy selection during setup. In production environments, this panel should be removed once the desired layout has been chosen.

All example configurations can be found in **Activate Studio **under:
`//Resources/Configuration/Web`

Each example consists of related webform parameters such as:

- `Example_HomePage1_Image`
- `Example_HomePage1_QuickLink`
- `Example_HomePage1_Tiles`, etc.

These examples serve as a guide to help you tailor the home page to your needs.

# General Design Guidelines

- Home page tiles should provide links to **top-level items** that users need most frequently.
- Most home pages work well with **up to 20 tiles** (approximately 5 rows of 4 on a medium screen).
- Order tiles by **frequency of use** — the most common or business-critical items should appear first.
- **Admin tiles** can appear early in the list if the page is targeted at administrative users.
- **Service-related tiles** (Services, Distribution Lists, Mailboxes, etc.) typically come before user or role-based items.
- Use **Landing Pages** for advanced or administrative functions to reduce clutter on the main home page.
- Users can personalise their experience by adding **Favourites**, which appear beneath the search bar.
  - This allows users (especially admins) to quickly access their most-used dashboards, tasks, or pages without modifying the shared standard layout.

# Standard Version

The **Standard Home Page** is the default layout provided with Activate.
It includes tiles for accessing all areas of the platform and supports user favourites for quick customisation.

- Consider adding an **Admin tile** that links to a landing page for administrative users.
- Users can **add or remove favourites** easily, creating a personalised view under the search bar without changing the shared layout.

***

# Quick Links

Quick links provide secondary navigation options for items that are not used frequently or are specific to particular applications or systems.

- Use the **sidebar** for secondary or optional links — in most cases, a tile is preferred.
- Quick links are **hidden on mobile** by default, replaced with a ribbon bar layout for better usability.
- You can also include quick links in the **Drawer Menu** at:
  `//Resources/Users/Web.User.Drawer`
  This makes them accessible from anywhere, including mobile devices.
- Tiles in the sidebar example are centred; however, **left-aligned tiles** follow the Activate design standard.
- **Favourites** can also be displayed within the quick links area for quick access.

# Small Tiles Layout

The **Small Tiles** example shows how to adjust the tile size and density for more compact layouts.

- Set `Size='small'` to enable smaller tiles (no custom CSS required).
- Adding a **description** below each tile increases tile height; removing it creates a more compact layout.
- Use small tiles sparingly — too many can make the page feel cluttered.
- The example also shows the **search bar positioned inside the top info bar** for a streamlined appearance.

# Using Background Images

When using a background image on the home page:

- Choose an image that provides **strong text contrast** — dark image with light text or vice versa.
- The **Page Size** is set to `FULL`, so you must manually add padding to components such as tile containers.
- The background image uses `object-fit: cover` to adapt to all screen sizes.
- In newer builds, you can use the `BackgroundImage`** property** on the panel instead of custom CSS to simplify setup.

:::hint{type="warning"}
Avoid using custom.less in Activate V8 unless absolutely necessary. It should only be used for very specific custom cases and not for modifying built-in components.
:::