- MDX: Manage > Ads > New > Design New HTML5 Ad
- Sizmek Advertising Suite: Creative > Ads > New Ad > Design HTML5 Ads
An HTML5 Pushdown Expandable ad expands the panel downwards while pushing down the existing content on the webpage. In Ad Builder for HTML5, you configure this functionality on the banner level using the Pushdown action located in the Actions list. The ad loads in the collapsed state, and can be expanded following a user action. From the expanded state, the user can click a user action, or close the ad and return to the collapsed state.
- In the Ad Builder Welcome page, click Blank Ad, provide a name for the ad, and in the Format list select Expandable.
- Set the banner and panel dimensions.
The banner is set as the Master_Banner and cannot be removed once the ad is configured.
- Click Create.
Ad Builder opens displaying your expandable ad. The ad elements are displayed in the Instances pane.
- Click .
- To configure the Master_Banner in the Properties pane, perform these steps:
- Click Master_Banner in the Instances pane.
- Set the default image for the ad. This step is mandatory.
- To configure the banner to expand to a pushdown panel, perform these steps:
- Select the banner.
- Add a component, for example, a button that expands the panel when the user clicks the button on the banner.
- In the Action and Animations section, add an event that will trigger the panel to expand using the pushdown expansion action, for example: a Tap/Click event.
- To assign the Pushdown action to the panel, click Add Action,
- and select the Pushdown action from the Expandable category in the Actions list.
- Select the target panel.
- In the Instances pane, select the panel and configure the Pushdown expansion animation settings:
- Animation Direction: Sets the panel expansion direction.
- Duration: Sets the time it takes for the panel to expand.
Note: If you do not want to add animation to the expansion panel, set the duration to zero. This is the default value.
- Ease: Sets smoothness of the movement.
- Configure the panel to collapse when the user clicks the close button:
- Add a Button component to the close the banner when clicked.
- In the Action and Animations section, add an event that will trigger the panel to collapse using the pushdown expansion action, for example: a Tap/Click event.
- Assign the collapse action to the button by clicking the Ad Action
and selecting the Collapse action from the Expandable category in the Actions list.
- Configure the Collapse animation. The settings are identical to the Expansion animation settings.
- Preview the ad and the panel animations in the Sizmek MDX platform:
- Click Save and Edit Ad Setup.
- In the platform, click Preview.