---
title: "Customize a Highlight"
slug: "customize-a-highlight"
updated: 2026-08-13T11:41:26Z
published: 2026-08-13T11:41:26Z
canonical: "support.whatfix.com/customize-a-highlight"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize a Highlight

Once you have created the Highlight project and chosen the template for it, start customizing your Highlight.

> [!NOTE]
> Info:
> 
> The customization options differ based on the Highlight template you choose.

You get the following options to configure:

**Header**

- Under the **Header** section, edit the Header Text, change the **Font Family**, **Font Size**, **Weight** of text, **Alignment** of text, **Text Color**, and **Bottom Margin**. Also [add user property](/mobile/docs/personalization) to personalize the experience for your end user. ![2022-12-02_17-37-44](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2022-12-02_17-37-44.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A12%3A59Z&se=2026-10-29T18%3A12%3A59Z&sr=c&sp=r&sig=78B2f0Y%2BIqBCHag59luCdhSszGzzLy5kZDh7Tue5o5M%3D)
- Align the Header to the top or bottom, add any content block, or delete the Header section using the action bar. ![highlight_header_action_bar](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/highlight_header_action_bar.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A12%3A59Z&se=2026-10-29T18%3A12%3A59Z&sr=c&sp=r&sig=78B2f0Y%2BIqBCHag59luCdhSszGzzLy5kZDh7Tue5o5M%3D)

**Body**

- On the Body of the Highlight, edit the **Text**, **Font Family**, **Font Size**, **Weight** of text, **Alignment** of text, **Text Color**, and **Bottom Margin**. Also [add user property](/mobile/docs/personalization) to personalize the experience for your end user. ![design_body](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/design_body.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A12%3A59Z&se=2026-10-29T18%3A12%3A59Z&sr=c&sp=r&sig=78B2f0Y%2BIqBCHag59luCdhSszGzzLy5kZDh7Tue5o5M%3D)
- Align the Body text to the top or bottom, add any content block, or delete the Body section using the action bar. ![delete.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/delete.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A12%3A59Z&se=2026-10-29T18%3A12%3A59Z&sr=c&sp=r&sig=78B2f0Y%2BIqBCHag59luCdhSszGzzLy5kZDh7Tue5o5M%3D)
- Customize the button that appears on your Highlight. Choose to have one or two buttons, adjust the button width, alignment, height, radius, and the bottom margin. ![button_config](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/button_config.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A12%3A59Z&se=2026-10-29T18%3A12%3A59Z&sr=c&sp=r&sig=78B2f0Y%2BIqBCHag59luCdhSszGzzLy5kZDh7Tue5o5M%3D)

**Button**

- Click the **Button Actions** dropdown to customize the individual buttons. Change the button color, stroke of the button outline, text, font family, font size, font weight, and button action. Also [add user property](/mobile/docs/personalization) to personalize the experience for your end user. ![individual_button](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/individual_button.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A12%3A59Z&se=2026-10-29T18%3A12%3A59Z&sr=c&sp=r&sig=78B2f0Y%2BIqBCHag59luCdhSszGzzLy5kZDh7Tue5o5M%3D)

The following are the Button Actions you may configure:

| Button Action | Description |
| --- | --- |
| Dismiss | When the user clicks the button, the Highlight is dismissed from the app screen |
| External Link | When the user clicks the button, they are routed to the URL that is attached to the button |
| Deep Link | When the user clicks the button, they are routed to the app screen within the same app that is attached to the button |

- Align the Buttons to the top or bottom, add any content block, or delete the Buttons using the action bar. ![button_action_bar](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/button_action_bar.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A12%3A59Z&se=2026-10-29T18%3A12%3A59Z&sr=c&sp=r&sig=78B2f0Y%2BIqBCHag59luCdhSszGzzLy5kZDh7Tue5o5M%3D)

**Layout**

1. On the left, click **Layout**. ![2023-02-06_16-48-23.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2023-02-06_16-48-23.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A12%3A59Z&se=2026-10-29T18%3A12%3A59Z&sr=c&sp=r&sig=78B2f0Y%2BIqBCHag59luCdhSszGzzLy5kZDh7Tue5o5M%3D)
2. Enable **OVERLAY**, change the Highlight color, edit the **MASK** and add **RIPPLE EFFECT**. ![layout.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/layout.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A12%3A59Z&se=2026-10-29T18%3A12%3A59Z&sr=c&sp=r&sig=78B2f0Y%2BIqBCHag59luCdhSszGzzLy5kZDh7Tue5o5M%3D)

> [!WARNING]
> Note
> 
> The **Mask** option enables you change shape and radius of the spotlight on the Highlight. ![2023-03-16_16-35-41 1.gif](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2023-03-16_16-35-41%20%281%29.gif?sv=2026-02-06&spr=https&st=2026-10-29T17%3A12%3A59Z&se=2026-10-29T18%3A12%3A59Z&sr=c&sp=r&sig=78B2f0Y%2BIqBCHag59luCdhSszGzzLy5kZDh7Tue5o5M%3D)
3. Click **Done**. ![done_tooltip](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/done_tooltip.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A12%3A59Z&se=2026-10-29T18%3A12%3A59Z&sr=c&sp=r&sig=78B2f0Y%2BIqBCHag59luCdhSszGzzLy5kZDh7Tue5o5M%3D)

The Highlight you create is automatically saved.

> [!NOTE]
> Info:
> 
> - [Preview projects on a device](/mobile/docs/preview-projects-on-a-device) before making it live for your end users.
> - After creating and designing the Highlight, click Publish to make the Highlight live for your end users. For more information on publishing Whatfix Mobile content, see [Publish Whatfix Mobile content](/mobile/docs/publish-whatfix-content).