A Pushdown Ad format will load as a teaser and on click, hover, timed or in view, it pushes down the page content to reveal a large ad (per site specs). This article will walk you through creating a Pushdown Ad using Adventive’s Pushdown template.
Examples:
Example here
Fashion example here
WATCH VIDEO (shown with previous builder icons)
Note: A separate blank canvas will show on Screen 1 (collapsed teaser ad) and Screen 2 (expanded larger ad) when you begin to build your ad. Default “Expand Ad” and “Collapse Ad” placeholders will also show on each canvas – these can be deleted if you plan to apply an auto expand/collapse push action later.
Pushdown Ad Unit
In the Builder, Create a New File, type in File Name, and select Pushdown from the dropdown.
Select and set your dimensions by selecting from the dropdown or creating custom.
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.
Click Submit.
Setting Up Your Canvas
A blank canvas will load on Screen 1 and Screen 2. 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 canvas will be the sizes you chose from the Create New File template.
Screen 1:
Example Build
While in Screen 1, Click on the Asset icon and select your asset, or upload a new one by clicking the cloud icon at the bottom left of the window.
You will now have a layer at the bottom of the builder for your image, as well as the “Expand Ad” placeholder.
If you want to delete the “Expand Ad” placeholder and set the action to an image area with a hitbox, select the placeholder layer and then delete by pressing Delete on your keyboard or clicking Delete.
A window to confirm deletion will pop up – Select Cancel or Delete.
Now click on the image layer/area for a hitbox and use the Properties Panel to the right in the builder to add Actions.
Example of timed/auto-expand push action:
You can also add any other elements to the ad using the Tools/Components.
Follow similar steps as above for Screen 2. Click on the Asset icon and select your asset, or upload.
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 placeholder 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/area for a hitbox and use the Properties Panel to the right in the builder to apply a close Action.
Example of timed/auto-collapse push action:
* 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.)
You can also add any other elements to the ad using the Tools/Components.
Example of placing the Hitbox tool over the Close button:
Select the Hitbox icon .
A transparent blue hitbox will appear in the top left corner of the ad. You can move it over the area for action as well as resize it. (Note: You can have an unlimited about of Hitboxes over areas).
Hitbox placed over Close Button:
With the Hitbox selected, apply a close action in the Properties panel.
Save the ad.
Note: In this example, Your Pushdown ad will auto expand/push, then auto collapse after 5 seconds. It will also close if the viewer clicks on the Close button.
Go to the Preview icon to view the ad.