An Expandable Ad format can be served into any ad placement and can expand in any direction. This article will walk you through creating an expandable ad using Adventive’s Expandable template.
Note: Initially, expandable ads are created with two screens - Screen 1 (collapsed state) and Screen 2 (expanded state). Default “Expand Ad” and “Collapse Ad” placeholders will be automatically added to each screen – these can be edited or deleted/replaced with another asset or hitbox.
Expandable Ad Unit
Open the Builder, and Create a New File.
Input the file name, and select Expandable from the format dropdown.
Select ad dimensions or click custom to enter your own for the initial and expanded screen states.
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 for Screen 1 (collapsed state) and Screen 2 (expanded state). This is where you'll place your ad content.
Ad Properties (In the Properties panel to the right of the Builder)
Width and Height
The width and height of each screen or canvas will be the sizes you choose from the Create New File template. You can change these at any time.
Opacity of the ad canvas
Selecting this option will automatically scale the ad screen to the size of the user’s browser.
Sticky Ad. You can find sticky ad settings in the General Ad Properties panel on the right of the builder. If you do not have this option, the ad format you’ve selected cannot be made sticky. Sticky ads stick to the top of the page instead of scrolling off screen.
See article on Sticky Ad for settings.
Click to change or update the name of your ad
Default Click URL
Click to change or update the default click URL
You can choose to have the Default Url open in a “New Tab” or the “Same Tab” by clicking on the dropdown arrow next to the “Open In” field in General Properties:
Click to add or update your fallback image. This will open your assets, displaying only images that are identically sized to the initial load screen dimensions of your ad unit.
Screens and Layers (at the bottom of the Builder)
Screen 1 (collapsed state) and Screen 2 (expanded state). Default “Expand Ad” and “Collapse Ad” placeholders will be automatically added to each. You can also add screens, by selecting + at the right.
Note, you can add additional screens to any ad format by clicking the + icon in the screens and layers panel as well as Rename. * You can select a screen and drag it/reorder the screens - this will automatically update the ordering numbers listed on the Screen tabs. (You should check any previous actions you have in case you need to update Go to Screen actions, etc.) Also see Screens & Layers article here.
The Properties panel to the right will change according to which screen you have selected.
To Delete a Screen, select it and click the X to the right.
As you add assets and tools/components, a layer will be created for each.
To reorder/hide layers, select a layer and drag it up or down.
To delete a layer, select it and click on the Trash icon at the bottom right of the Screen selection.
To replace an asset, select your asset layer and right click.
In this example, the “Expand Ad” placeholder is a layer in Screen 1. Each layer will have an eye icon next to it.
Selecting the layer will bring up Actions in the Properties Panel to the right for you to set actions.
Set Action to expand to Screen 2:
- Go To Screen – opens another screen within the ad (Set to Open to Screen 2)
- Action On – how the action will happen – choose click, hover over, hover off, timed, or in view. (Also see Actions)
- Screen - the screen in the ad unit that will launch/open
- Transition – type of transition – choose slide, fade or push.
Slide – Screen slides left, right, up or down
Fade – Screen crossfades to the next
Push – Screen pushes page content down or up
- Transition time – how fast the effect of the animation happens/speed. Default is set at 300ms
- Direction – Up, Down, Left, Right, X-Auto (auto detect)
- Report Label - (optional) append a unique label for the Go To Screen action - will display in campaigns and reporting. Select if you want to track users interacting/expanding, etc.
If you want to delete the “Expand Ad” placeholder (and have the ad auto expand instead), select the Expand Ad layer and delete by pressing Delete on your keyboard. A window to confirm deletion will pop up – select Delete.
While in Screen 1, Click on the Asset icon and select or upload your asset.
You will now have a layer at the bottom of the builder for your image.
Click on the image layer and use the Properties Panel to the right in the builder to apply a Border or Actions.
From here you can set the Action to “Go To Screen” (Go To Screen 2) and set it as “Timed” to auto-expand.
Follow similar steps as above for Screen 2. Click on the Asset icon and select or upload your asset.
You will now have a layer at the bottom of the builder for your image, as well as the “Collapse Ad” placeholder.
If you want to delete the “Collapse Ad” placeholder, select the layer and drag it above your image layer to view on the canvas/then delete by pressing Delete on your keyboard.
A window to confirm deletion will pop up – Select Cancel or Delete.
Now click on the image layer and use the Properties Panel to the right in the builder to apply a Border or Actions.
From here you can set the Action to “Go To Screen” (Go to Screen 1) and set it as “Timed” to auto-collapse.
An example would be to add Text:
Select the Text icon to the left of the builder. A text box will appear as a separate layer and on the asset. You can move this box as well as resize either with your mouse, or using the Width/Height in the General section (top right of screen). Click into the field to type your text.
With the text field selected, use the Properties panel to the right to choose your Font, Size, Color, Style, Alignment, Shadow, Glow or Stroke.
*Color Picker - once you click in the Color box - you can select a color, type in the hex number, or click in the white rectangle/bottom left to bring up the color picker:
Select the color picker icon and place it over any area in the builder of the color you wish to select. The info and object selected will change to the color of what you have selected to match.
Another example would be to set a Hitbox over an area of the ad:
Select the Hitbox icon to the left of the builder.
You’ll now see a transparent blue box appear in the top left of your ad:
You can move this box as well as resize either with your mouse, or using the Width/Height in the General section (top right of screen). In this example we will place the Hitbox over the “Save 50% off today” section of the ad:
Be sure you have the Hitbox selected and now give it an action – go to “Actions” to the right of the Builder and make your selections:
If you want to use your own custom close box – upload your png file by clicking the Asset icon . Your close button will appear on the ad and you can move to the appropriate area and set an action with it selected using the Properties Panel.
Save the ad.
Go to the Preview icon to view the ad.