Expandable

Easily served into any placement, expand in any direction.

Resources:

Explore our Ad Gallery for examples of this format

In this article, you will learn:

How to Build an Expandable unit

How to Configure the Expand and Collapse Functionality

How to Build an Expandable 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 Expandable from the Format dropdown
  2. Define your initial ad dimensions (or select one of Adventive's pre-populated options)
  3. Define your expanded ad dimensions (or select one of Adventive's pre-populated options)
  4. Backup Image (Optional) and Click URL (Optional) may be left blank at this time, click Submit

new-expandable

Configuring the canvas

The builder will now load the main Expandable canvas based on the dimensions inputted in step #2 (referred to as Screen 1), while the expanded state screen based on the dimensions inputted in step #3 (referred to as Screen 2).

By default, Adventive will insert a "Expand Ad" and "Collapse" ad placeholder on their respective screens.  These can be deleted if you plan to supply your own, or if you plan to apply auto expand and collapse functionality.  See this article for information on expansion and collapse actions.


Screen 1:  Collapsed State

expandable-screen1

Screen 2:  Expanded State

expandable-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 Expand and Collapse Functionality

Expandable ad units (or any multiscreen) ad units require either actionable buttons to navigate between screens, or automated timers to navigate between screens.

In the below example, we will use the default "Expand Ad" and "Collapse Ad" buttons to demonstrate how this functionality works, and how it can be applied to virtually any asset on the canvas.

Configuring an Expand Action

Click on the Expand Ad layer on Screen 1

  • The properties panel to the right-hand side of the builder will show the "Action" menu as seen below.  This action has been predefined by the format you've selected, however, you can add a action with similar functionality to any asset by clicking the "Add Action" button when the object you would like to program has been selected:

KB-Expandable-Action1

The Action properties configuration options are explained below:  

For a detailed guide and explanation of all actions and their associated settings, take a look at this article

Report Label (Optional) The label used to identify any action that occurs on this particular object in the analytics reports.
Action The action that occurs when the user performs the defined action specified in the Action on dropdown.
Action On The action required of the user for the action event to fire.
Screen The screen in which the action will be navigating to.
Transition

The type of transition - Slide, Fade, or Push.

  • Slide - This transition is selected by default for the Expandable ad format. The ad content will slide over the top of any page content below it.
  • Fade - A fade effect will occur during the transition.
  • Push - The site content will be pushed down on ad expansion.
Transition Time The amount of time for the transition to occur, expressed in milliseconds.
Direction If "Slide" or Fade" is selected for the Transition, you can choose the direction of the transition (which way will the ad expand).

* Note - You can change the transition types for the buttons within the ad, however this will change the inherent "Expandable" functionality of the ad format as a whole. 

For example, the "Push" transition will mimic the Pushdown ad format functionality instead.


Configuring a Collapse Action

Click on the Collapse Ad layer on Screen 2.

  • The procedure for configuring the collapse action is nearly identical to that of the expand action, however, the screen destination is updated to Screen 1 as seen below:

KB-Expandable-Action3