End Card Overlay
Paola Croce avatar
Written by Paola Croce
Updated over a week ago

End Card Overlay

The End Card Overlay template horizontally splits the screen space between the lower half containing an end card layout (banner img, title, description, CTA button etc.), and the upper half dedicated to a looping segment of gameplay (video).

When to use it?​

This template is great if your game contains a lot of visually-attractive elements that you want to showcase at the end of a video ad. For example, you can present the user with a choice of characters, levels or items.

How to use it?​

Required assets​

The following are the required assets in order to make this template a success.

  • Background video or image

  • Game icon

  • Eye-catching description

Configurable Fields​

This template includes a selection of general configurable fields which are all detailed here.

The specific fields which are provided with the End Card Overlay template are listed below.

Images Section​

Field

Type/Options

Details

App Icon

Image file (.png, .jpg, .jpeg, etc.)

The icon shown in the middle of the screen, if nothing is chosen the device App Store icon will be displayed.

App Banner

Image file (.png, .jpg, .jpeg, etc.)

The banner shown below the app icon, if nothing is chosen then the placeholder image will disappear on the live version.

Icon Size (default and landscape)

Float value (Number value that allows decimals, negative values not allowed)

This determines the size of the icon image, the higher the value the larger the image will be. The scale is done in rem, so 1 will roughly equal 5% of the viewport's size.

Banner Size (default and landscape)

Float value (Number value that allows decimals, negative values not allowed)

This determines the size of the banner image, the higher the value the larger the image will be. The scale is done in rem, so 1 will roughly equal 5% of the viewport's size.

Show Icon (default and landscape)

On or Off

Toggle whether the App Icon should be displayed or not.

Show Banner (default and landscape)

On or Off

Toggle whether the App Banner should be displayed or not.

Overlay Background

Click on the color bar to open the color context menu and begin choosing a color.

The color behind the end card portion of the template (the lower half).

Title Section​

Field

Type/Options

Details

Text

String (Letters, Numbers and Symbols)

The title text that will appear below the App Icon and App Banner.

Font Size (default and landscape)

A float value (Number value that allows decimals, negative values will default the value used back to 1)

The size of the title text, the larger the value entered the larger the text will be. The scale is done in rem, so 1 will roughly equal 5% of the viewport's size.

Text Color (default and landscape)

Click on the color bar to open the color context menu and begin choosing a color.

The color of the title text.

Description Section​

Field

Type/Options

Details

Text

String (Letters, Numbers and Symbols)

The description text that will appear below the title text.

Font Size (default and landscape)

A float value (Number value that allows decimals, negative values will default the value used back to 1)

The size of the description text, the larger the value entered the larger the text will be. The scale is done in rem, so 1 will roughly equal 5% of the viewport's size.

Text Color (default and landscape)

Click on the color bar to open the color context menu and begin choosing a color.

The color of the description text.

Call To Action Section​

Field

Type/Options

Details

Text

String (Letters, Numbers and Symbols)

The text that will appear over the CTA button.

Font Size (default and landscape)

A float value (Number value that allows decimals, negative values will default the value used back to 1)

The size of the button text, the larger the value entered the larger the text will be. The scale is done in rem, so 1 will roughly equal 5% of the viewport's size.

Text Color (default and landscape)

Click on the color bar to open the color context menu and begin choosing a color.

The color of the button text.

Footer Section​

Field

Type/Options

Details

Text

String (Letters, Numbers and Symbols)

The text that will appear below the CTA button.

Font Size (default and landscape)

A float value (Number value that allows decimals, negative values will default the value used back to 1)

The size of the footer text, the larger the value entered the larger the text will be. The scale is done in rem, so 1 will roughly equal 5% of the viewport's size.

Text Color (default and landscape)

Click on the color bar to open the color context menu and begin choosing a color.

The color of the footer text.

Advanced Settings Section​

Whilst the Advanced Settings section is universal, this template contains unique settings listed below.

Field

Type/Options

Details

Element Spacing (default and landscape)

A float value (Number value that allows decimals, negative values will default the value used back to 1)

The amount of space between fields in the end card section of the template. Increasing the amount of space will enlarge the end card as a whole to accommodate.

Landscape Alignment

Left or Right

Decides whether the end card portion of the template will position itself on the left or right of the screen in landscape mode.

Overlay Layout

-Normal: The video will be resized to fit the portion of the screen that isn't occupied by the end card.
-Overlay: The video will fill to fit the screen, including the space behind the end card segment.

Decides how the gameplay video should fit into the template.

Landscape Content Alignment

Center, Left or Right

Decides how the fields within the end card segment are aligned horizontally.

Landscape Content Spread

-No Spread: Default layout.
-Spread Evenly: Evenly spaces the fields apart.
-Spread Evenly (except header & footer): Even spacing except for header and footer.
-Center Description: Ensures the Title and Description occupy the center area (vertically).

Decides how the fields within the end card are positioned vertically. Examples below.

Footer Font

Font file (.ttf only)

The font to be used for the footer text.

Landscape Content Spread example

Spread Mode

Example

No Spread

Spread Evenly

Spread Evenly (except header & footer)

Center Description

Did this answer your question?