Eclipse

An immersive, dynamic experience that opens to a full screen video or background image while ensuring visual awareness of the main sites navigation

Resources:

Explore our Ad Gallery for examples of this format

In this article, you will learn:

How to build an Eclipse unit

How to configure the Eclipse units properties

For access to this format within Adventive, please contact customer support

How to build an Eclipse unit

Below you will find a step-by-step process to build an Adhesion unit.

  1. Provide a unique Name for the unit, and select Eclipse from the Format dropdown
  2. Define your leave-behind ad dimensions (Initial dimensions are always 100% x 100%)
  3. Backup Image (Optional) and Click URL (Optional) may be left blank at this time, click Submit

new-eclipse

Configuring the canvas

The builder will now load the main Eclipse canvas (referred to as Screen 1), and represents the "expanded" or full screen video/creative wall.  Screen 2 represents the leave behind (wallpaper & banner) ad unit and is defined by the dimensions inputted in step #2.

Screen 1: Expanded (Video Wall / Creative Wall)

Screen 1 will only show a transparent full width background placeholder where your video will be, the video will not load in the builder, but will be accessible in the preview of the ad unit.


In addition to the background video, you may wish to include images "overlayed" on top of the video such as call to actions, or logos.  It is important to ensure these overlays are configured to "Float" to ensure that they maintain consistent positioning regardless of the size of the users screen.

To float an asset, add it to the stage, and then select it to reveal its properties in the right-hand menu (be sure to check the Float Element in the Design menu). The arrows indicate which region of the screen the asset will float on, allowing it to stay in frame when the ad unit is scaled. Optionally you can increase the level of padding around the object if necessary:

float-element

Screen 2: Leave Behind (Wallpaper / Banner)

You may configure the Eclipse without the use of the leave behind.  See below for instructions on setting the leave behind frequency.

eclipse-screen2

Configuring the General Ad Properties

Modifications can easily be made to the general ad configuration using the General Ad Properties panel on the right-hand side of the builder window.  See this article for instructions on configuring the General Ad Properties. 

How to configure the Eclipse units properties

The Eclipse properties configuration options are explained below:


Screen 1: Expanded (Video Wall / Creative Wall) Specific Settings

Header Height This setting can be used to accommodate the main sites header and is expressed in pixels
Go to Content Button Color The color of the "Go To Content" button located in the lower middle of Screen 1
Go to Content Button Text The text of the "Go To Content" button
Initial Load Image An optional placeholder image that will load prior to the video playback start (this is particularly useful for heavy or long loading video content)
Show Leave Behind Instructs Adventive to begin showing the leave behind when the viewer has seen the main expanded video wall X number of times.
When set to Never, the leave behind will never be shown
Enable Muting Controls Enables the mute/unmute button for the video wall
Mute Button Position Defines the location of the mute / unmute button
Background Type Choose "Uploaded Asset" to use a video or asset uploaded to Adventive, or YouTube to utilize a YouTube Video
Source The source file, or YouTube URL
Background Display Select "Fill" if you would like the image to fully fill the container. Select "contain", if you want to keep the exact file size.


Screen 2: Leave Behind (Wallpaper / Banner) Specific Settings

Header Height This setting can be used to accommodate the main sites header and is expressed in pixels
Page Width The page container width expressed in pixels
Background Color The Background Color
Return to First Screen Button Color The color of the "Return to Screen" button
Image Wall Enable an image wall (background image)
Source The image wall asset
Wall Clickthrough Specific click through for the secondary screen / image wall
Open In Opens the click through in a new tab, or within the same tab