- MDX: Manage > Ads > New > Design New HTML5 Ad > Components
- Sizmek Advertising Suite: Creative > Ads > New Ad > Design HTML5 Ads > Components
The Media Gallery component in Ad Builder enables you to create a slideshow that displays slides that can include either images, video, or HTML5 code. Slides are displayed in carousel view, and navigation arrows and buttons enable users to navigate from slide-to-slide. A set of dedicated Media Gallery actions located in the Actions and Animations pane enables you to trigger, stop, start, and move between slides from different elements in the ad.
The Media Gallery component properties includes the following tabs:
- Design Tab: Enables you to configure the look and feel of the gallery navigation elements.
- Content Tab: Enables you to configure the gallery slides and their behavior, for example, slide progression, adding images, videos, and HTML to slides, and assigning click-through URLs to slides.
Styling the Navigation Gallery
You can customize the navigation arrows and buttons to create a more enhanced user experience. The sliding motion is automatically applied when the Media Gallery runs on mobile.
Configure the Navigation Arrows
- Add the Media Gallery component to your ad.
- (Optional) In the Design tab, modify the look and feel of navigation arrows using one of the following options:
- Change the color of the custom Ad Builder arrows.
- Customize your own arrows by uploading arrow images.
Configure the Navigation Bullets
- In the Design tab, change the navigation bullets using one of the following options:
- Configure the bullet properties including the shape, size, color, and hover over color.
- Hide the navigation bullets. By default the bullets are displayed. You can remove the Show Navigation Bullets check box to hide the bullets.
Configuring Slide Progression
You can configure slide progression in the Content tab. Slides can progress when the user clicks the next arrow or bullet, or automatically according to a your predefined number of seconds. You can set a wait period between slides. In addition, you can set whether a gallery loops from the last slide to the first. By default, the gallery is set to Autoplay and to run in a loop.
- In the Content tab, configure autoplay settings. Autoplay advances the slide automatically every x seconds. You can decide whether autoplay will halt upon user interaction.
- In the Transition Duration field, you can set the wait period between each slide in milliseconds.
- By default the gallery is set to run in a loop. To run the slides once, clear the Loop Gallery check box.
Adding Slides to the Media Gallery
You can include multiple images, videos, or HTML5 code within the Media Gallery. Slides are displayed in the Media Gallery according to the order in which they were uploaded. You can change the order of the slides by simply dragging the slide to its target location in the table.
Add Images or Videos
- You can upload images or videos from your local drive or from the Assets Library.
Note: The Auto Play Video functionality is not supported on mobile.
Add an HTML Slide
You add an HTML slide using our integrated HTML editor.
- Click to add an HTML slide.
- Add HTML code using the Ad Builder code editor.
- Click Open Code Editor
- Type the HTML code.
- Click Apply.
Adding Click-through URLs
You can add a global click-through URL that will appear on each slide, and configure a separate click-through for each slide. If both click-through URLs are assigned, the slide click-through overrides the Gallery click-through.
Add click-through URLs using one or both of the following methods:
- In the Gallery Click-through box, enter a global click-through URL.
- Assign a click-through URL to each slide:
- Select the relevant slide in the slides table.
- In the Slide Click-through box, type the click-through URL.
Triggering Media Gallery Actions from Within an Ad
You can trigger a range of Media Gallery related actions from elements within your ad. These actions are associated with the navigation arrows but can also be triggered from objects of your choice. For example, an ad displays a set of images each representing a different brand. Clicking on a specific image using the Go To Slide action routes to the relevant slide in the Media Gallery.