- MDX: Manage > Ads > New > Design New HTML5 Ad > Actions and Animations > Events > Expandable > Expand to Full Screen
- Sizmek Advertising Suite: Creative > Ads > New Ad > Design HTML5 Ads > Actions and Animations > Events > Expandable > Expand to Full Screen
Important: This feature applies to HTML5 Expandable ads only.
You can configure a panel to expand to either predefined dimensions, or alternatively to full screen. The full screen depends on the device on which the ad is served. When the ad expands to full screen, the banner size does not change but a border is added around the ad to fit the full screen. This border is defined as the background, whereas the panel is considered the foreground area.
The following example illustrates how the ad remains the same size across all platforms and the background changes to match the screen size.
The Expand to Full Screen action contains the background settings. These settings include the background color, the opacity, and the close button. The default background is set to the ad panel's background color with 70% opacity.
- Access the Ad Builder for HTML5 Welcome page.
- Create a new Expandable ad and configure the banner and panel dimensions.
Tip: Design your panel dimensions according to the smallest version, which could then scale up automatically when served to larger screen sizes.The panel dimensions do not change during serving but a border is added as a background.Ad Builder for HTML5 opens and displays the Master_Banner on the canvas and the banner and panel setting in the Instance pane.
- In the Instances pane, select the panel.
- In the Properties pane, select Responsive Panel.
- Assign the Expand to Full Screen action to any component on the banner:
- In the Instances pane, select the banner.
- Select a button or any other target component that will trigger the banner to expand to a panel.
- In the Actions and Animations panel, click Create New Event and select an event, for example, click a button component to expand the panel.
- Click Add Action and select Expand to Full Screen from the Expandable category.
- Select the target panel.
- To configure the background color and opacity, perform one of the following steps:
The background color is defined according to the hex system whereby #FFFFFF is white and is set as the default color.
- To change the color, click anywhere in the Hex color field and select a color using the color picker.
- To set a color gradient, click . This is a linear gradient which requires defining two color stops.
- To upload an image as a background, click . The image is duplicated to fit the background and is not expanded or decreased to fit the background.
Note: In platform Preview, you can preview the duplicated images in the background.
- To set the opacity, enter a percentage between 0% - 100%. The default is set to 70%.
- (Optional) Add a Close button to the ad.
Select the default button , or upload a user-defined Close button which you can place on one of the corners of the background.
The selected corner is highlighted in grey.
- Test the ad.
Click Preview in the menu bar to view the expandable components.
- Upload the ad to the platform.