* For early access, please email email@example.com
Our all new Eclipse format offers an immersive, dynamic experience that opens to a full screen video or background image, while ensuring the user is visually aware of the main site navigation and scroll to content functionality. As the user scrolls, the unit elegantly fades away to a secondary leave behind.
Note: A separate blank canvas will show on Screen 1 (expanded video wall) and Screen 2 ( Banner + Wallpaper) when you begin to build your ad. The Wallpaper portion will not show in the builder – you will need to Preview along the way.
For this tutorial, we will be creating The North Face ad unit.
Let's Build this ad unit:
In the Builder, Create a New File, type in File Name, and select Eclipse from the format dropdown.
Set your dimensions for the second screen portion of your build by selecting "custom" from the dropdown and putting in your Width and Height 1st and 2nd screen dimensions.
Backup Image – Any image asset that matches the dimensions you’ve entered will be displayed in the dropdown list. You can select one here or add a backup in the builder under general properties in the “Fallback Image” field. This Backup Image will be displayed if the user’s browser is out of date and cannot support HTML5.
Click URL – The default click URL. The click URL is automatically applied to any area of the ad unit without an associated click or event action (i.e. buttons, hitboxes, expand actions etc.). Users that click on the fallback image will also be directed to this URL.
Setting Up Your Canvas
A blank canvas will load on Screen 1 and Screen 2.
Screen 1 will show a transparent full width background where your full screen video will be. You will only ever see the transparent background here. Now let's select which assets will be used.
*You can place additional assets, like logos, and overlays onto the screen 1 canvas.
If you place an overlay on screen 1, you will need to Float the element.
Ensure that you have clicked on the logo or asset that you have overlaid on screen 1.
Go to the Design properties pane on the right hand side, and select "Float element."
The arrows indicate which region of the screen the asset will float on.
Floating the element allows it to stay in frame when the ad unit is scaled.
On the right-hand side, you will see a properties pane called "Eclipse Settings."
Header Height: Set the header height pixels to accomodate for your specific website design.
Go to Content Button Color: Modify the color for the call to action, which appears at the bottom of the full width video.
Go to Content Button Text: Modify the call to action which appears at the bottom of the full width video.
Initial Load Image: Select an image that will load before the video plays
Upon clicking on the gray bar, your assets will open.
Click on the desired initial load image, and click Submit.
Show Leave Behind: Select how many refreshes you would like to have before screen 2 is displayed. This will default to 4 refreshes before the leave behind appears.
*If set you "never," Screen 1 will always be displayed.
* If set to "always", then Screen 2 will always display, bypassing screen 1.
Enable Muting Controls: Gives the viewer the ability to mute or unmute audio.
Mute Button Position: Choose the location for the mute button
Background Type: Allows you to select between using a youtube link, or an uploaded asset.
Source: Allows you to choose the video that you would like to use, if you are utilizing our uploaded asset feature. When clicked, this will open a Finder or File Explorer window, which will allow you to search your computer for the desired asset.
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.
Ad Properties (In the Properties panel to the right of the Builder)
Width and Height
The Width and Height of each canvas will be the sizes you chose from the Create New File template.
GO TO SCREEN 2
Add desired header image from your assets in the lefthand side.
This will open your file explorer, or finder window, and will allow you to select the logo or image of your choice.
Click on the desired asset, and select "Insert."
You may repeat these steps to add additional assets. In this instance, we clicked on "Assets" again, and added a png logo file.
Now, we will take a look at the Eclipse Settings for screen 2, on the right-hand side within the properties panel.
Header Height: Set custom header height by pixels.
Page Width: Set pixels for page width
Background Color: Select a background color, or set as transparent.
Return to First Screen Button Color: Designate the color for the return the screen button.
Image Wall: The selected image will act as a wallpaper, filling the canvas.
Source: Allows you to choose the photo that you would like to use for the wallpaper edging, if you are utilizing our uploaded asset feature. When clicked, this will open a Finder or File Explorer window, which will allow you to search your computer for the desired asset.
Wall Clickthrough: Type in the desired clickthrough URL if viewer clicks on the image or video wall.
Open in: Designate if you would like clickthrough URL to open in a new tab or the same tab.
Screen 2 with asset
Go to Preview to view your ad unit.
You will initially see the content from Screen 1 loading. The fullscreen video will play.
As you scroll down, or click on "Get the News," the screen will progress to the website's native content.
After the screen has been refreshed a certain number of times (based on the value set in your Eclipse Settings), the screen will progress to your Screen 2 content, incorporating your screen 2 assets, and your wallpaper image wall.