---
title: "Customize a Full Screen"
slug: "customize-a-full-screen"
updated: 2026-08-13T12:00:10Z
published: 2026-08-13T12:00:10Z
canonical: "support.whatfix.com/customize-a-full-screen"
---

> ## 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 Full Screen

Once you have [created the Full Screen project](/mobile/docs/create-a-full-screen) and chosen a template, start to design and configure the Full Screen.

Click **Full Screen** to configure the following:

Expand the following accordions for more details:

**Header**

- Under the **Header** section, edit the Header text, font, font size, font weight, text alignment, text color, and bottom margin. Also [add user property](/mobile/docs/personalization) to personalize the experience for your end user. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/header_fullscreen.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)
- To align the Header to the top or bottom, add a content block, or delete the Header section using the action bar. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/header_actionbar_fullscreen.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**

- Go to the **Body** section. To edit the text, change the font, font size, font weight, text alignment, text color, and bottom margin. Also [add user property](/mobile/docs/personalization) to personalize the experience for your end user. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/body_fullscreen.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. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/body_actionbar_fullscreen.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 Divider to the top or bottom, add any content block, or delete the Divider using the action bar. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/divider_fullscreen.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)

**Media**

- Under the **Media** section, click the **Edit** icon to add images to your Full Screen from your local drive and then configure the image size, alignment, and bottom margin. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/media_fullscreen.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)

> [!NOTE]
> Info:
> 
> Whatfix Mobile only supports image formats including .jpg, .png, and .gif. GIF files are supported up to 500 KB, while all other formats are supported up to 100 KB.

- Enable the **CLICK ACTION** toggle to link any action to your image. Clicking the image triggers the action that you configure. ![click_action](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_action.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 Action | Description |
| --- | --- |
| Dismiss | When the user clicks the media, the Full Screen is dismissed from the app screen |
| External Link | When the user clicks the media, they are routed to the URL that is attached to the media |
| Deep Link | When the user clicks the media, they are routed to the app screen within the same app that is attached to the media |

> [!NOTE]
> Info:
> 
> Provide a name for the action you add to your media using which you track the analytics on how many users are clicking the media. ![click_events](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_events.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 **Media** to the top or bottom, add any content block, or delete the Media section using the action bar. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/media_actionbar_fullscreen.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**

- To customize the button that appears on your Full Screen, choose to have one or two buttons, adjust the button width, alignment, height, radius, and the bottom margin. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/button_fullscreen.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)
- Click the **BUTTON** 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. ![customize_button_drawer](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/customize_button_drawer.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)

Configure the following button actions:

| Button Action | Description |
| --- | --- |
| Dismiss | When the user clicks the button, the Full Screen 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. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/button_actionbar_fullscreen.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. Click the **Layout** option on the left, or the **Edit** icon to customize the position of the Full Screen to the left or right of your app screen and enable Overlay and the **Close** icon to dismiss the Full Screen. ![edit_icon_drawer](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/edit_icon_drawer.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)

- Change the **Fill Color** of the Overlay and enable your end user to dismiss the Full Screen by clicking the Overlay.
- Change the color of the Full Screen template and also customize the position of the **Close** icon, the background color, and the color of the icon.

![Mobile_layout config_full screen.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_layout%20config_full%20screen.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)

1. Click **Done**. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/done_fullscreen.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 Full Screen 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 Full Screen, click **Publish** to make the Full Screen live for your end users. For more information on publishing Whatfix Mobile content, see [Publish Whatfix Mobile content](/mobile/docs/publish-whatfix-content).