Follow
  • MDX: Manage > Ads > New > Design New HTML5 Ad
  • Sizmek Advertising Suite: Creative > Ads > New Ad > Design HTML5 Ads

Overview

The Ad Builder authoring tool enables you to build HTML5 ads directly in the Sizmek platform. The interface is easy to use and does not require any knowledge of HTML code. You can build your HTML5 ad from scratch or create a new ad using our built-in templates which are based on the most commonly used ad formats in the industry. After you finish building your ad, you can test, preview, and save your ads to one location in the platform.

Rules and Guidelines

  • Saving your HTML5 ad in Ad Builder automatically uploads the ad to the platform in form of an HTML5 Workspace. 
  • The size of an HTML5 ad is the total size of all assets in the ad’s Workspace, at the compressed size. This includes images, the largest video, fonts, JavaScript files, HTML files and any other files. We do not count additional assets for dynamic creative or videos. Compression is automatically applied which reduces the size of each asset type to the compressed size.
  • A Standard ad is a lightweight ad that can include the following components: Image, Text, Hotspot, HTML, Button, and Shape and is limited to 200k.
  • It is mandatory to configure a default image per ad prior to uploading the ad. The default image is limited to 200k.
  • Ad Builder is compatible with the following browsers: Google Chrome, Mozilla Firefox, and Apple Safari.

Feature List

Feature Description
Adaptive Ads The Sizmek HTML5 Adaptive ad solution enables you to create a single HTML5 ad to be served in different placements on mobile web, mobile in-app and desktop browsers.
Smart Versioning You can add Smart Versioning functionality to your HTML5 ads by assigning smart items to your components in Ad Builder.
Built-in HTML5 Templates vs. building ads from scratch Ad Builder templates allow you to easily and quickly create your HTML5 ads. All that is required is to select a template and customize the different aspects of the ad to your needs.
Mobile Preview Provides a dedicated integrated ad preview interface that allows you to preview your ads and generate QR codes to preview the ads on mobile devices.
Video Auto-Play on Mobile Devices Allows advertisers to deliver a richer ad experience on mobile ads, by playing a segment of the video automatically when the ad loads.
Components
Component Description
360° Viewer Rotate a video or image 360 degrees around its axis.
Button  
Facebook Feed Adds social feeds to your HTML5 ads.
Facebook Share Shares advertiser content on their personal Facebook accounts and add a personalized message before publishing the share.
Hotspot  
HTML Adds HTML5 code to your ads using an embedded HTML5 code editor.
Image Adds images to your ads.
Media Gallery Creates a slideshow that displays slides that can include either images, video, or HTML5 code.
Pinterest  
Shape Adds a shape to your ad without having to prepare or upload an image.
Text Supports adding text with a wide range of fonts and text settings.
Twitter Adds the Tweet button, with the Tweet Text contains the default "check out this ad" text.
Twitter Feed Adds a customizable widget that displays a list of Tweets from a user's timeline or a custom timeline.
Video Adds a video to your ad.
Youtube Add the YouTube video to your ad.


 

Actions
Actions Action Types
URL Actions
  • Clickthrough
  • Custom ClickThrough
  • Custom Interaction
  • Got URL
Mobile Actions
  • Call Number
  • SMS Number
  • Email
Custom Actions
Video Actions
  • Play, Stop Pause, Replay, Mute, Unmute
Animations
  • Slide In, Slide Out, Motion, Fade In, Fade Out
    Show, Hide, Rotate, Scale
Sequence
  • Pause
  • Start
  • Stop
Social Actions
  • Get Feed Data
Gallery Actions
  • Show Next Slide
  • Show Previous Slide
  • Go To Slide
  • Stop Slideshow
  • Play Slideshow

Getting Started

The Ad Builder user interface elements are described.

Accessing Ad Builder

Ad Builder is accessible directly from the platform and does not require to be download or installed. Access Ad Builder by navigating to these paths in our platforms:

  • MDX: Manage > Ads > New > Design New HTML5 Ad
  • Sizmek Advertising Suite: Creative > Ads > New Ad > Design HTML5 Ads
    In the Sizmek Advertising Suite, you can access Ad Builder directly from the homepage.
     

Welcome Page

Based on your platform login credentials, a personalized Welcome Page opens when accessing Ad Builder from the platform. From your personalized welcome window, you can get straight into HTML5 and:

  • Access your recently created ads.
  • Create new ads from scratch or using templates.
  • Access a Template Gallery.

HTML5 Templates Gallery

We've put together a few of the most common creative type to help you get started. For more information, see HOW TO: Work with Ad Builder Templates.

Canvas

The canvas is your creative work space, use the Properties pane to adjust the ad dimensions. Embedded rulers and guides allow you to accurately manage the space. 

Rulers and Guides

Ad Builder provides rulers and guides, which help you accurately and easily place, measure, and adjust your ad and its related components on the canvas. Dedicated ruler and guide buttons are located on the right bottom area of the canvas and allow you to show and hide the rulers and guides. Rulers and guides are preserved when saving the ad.

Working with Rulers

Rulers are located on the top and left sides of the canvas. 

The following notes apply to rulers:

  • When you open Ad Builder, rulers appear by default
  • Rulers display measurements in pixels.
  • The rulers on the canvas are calculated in relation to the ad on the canvas. The top left corner of the ad is considered the start point (0,0). All additional components added to the ad are measured according to their relation to the base ad.
  • Zooming in and out preserves the ratio between the ad's height and width.
  • Expanding the Instance pane hides the Vertical left pane. 
Working with Guides

An instance is an ad element including a banner or a panel. Guides are viewable lines on the canvas that you can see for each instance.  Guides allow you to align the different ad components in the instance. You can perform a set of guide-related actions including adding, deleting, and viewing the pixel value.

Note: The Show/Hide Guides button is disabled by default, and is enabled when you add a guide to the canvas.

The following illustration displays different components centered according to x: 162 px on the ad.

What do you want to do?
  • Click and drag from ruler axis to create a guide on the canvas.
  • Select the guide, click and hold the left mouse button.
  • Double-click the guide or drag the guide back to the ruler.

Ad Settings

Contains general ad settings. The fields vary depending on the platform and the ad formats or features that have been selected:

  • Adaptive Ad (MDX2.0 only: Sets the ad as an adaptive ad. For more information, see HOW TO: Build a Single-Tag Adaptive HTML5 Ad.
  • Update all placement ad settings (Sizmek Advertising Suite only): Once the ad is saved to the platform, all the changes to the master ad are propagated to the attached placement ads. 
  • Disable the MRAID Native Close Button When serving in In-App: Certain advertisers may want a bit more control over the Close button look-and-feel, position, or behavior. This field allows the designer to disable the MRAID native Close button so that they can customize their own.
  • Format: Enables you to change the ad format. For more information, see HOW TO: Change the Ad Format of an Existing Ad in Ad Builder .
  • Format Settings: The Sizmek custom development team embeds variables in the Ad Builder templates. The Format settings section displays these variables and the default values. These values can be edited.

Instances Manager

This pane displays the ad parts including the banner and panels on an expandable ad. The interfaces serve as the building blocks for responsive ads. 

The Instances Manager displays the different ad elements including banner and panels for Expandable and Polite Banner Ads.

Each responsive ad "version" is considered an instance and all the instances configured for the ad are displayed in the pane. The first instance created is labeled the Master instance and is used if other instances are not applicable. When uploading an ad, all the instances are uploaded to the platform as part of the ad.

The component located at the top of list is displayed in the foreground whereas the lowest in the list is located in the background. This is useful if your ad includes many components.

You can perform the following actions to components:

  • Hide selected components.
  • Lock a component on the stage.
  • Rearrange layers.
  • Identify smart components.

Note:  indicates that a Smart Item is assigned to the component. For more information on Smart Versioning in Ad Builder, see the Adding Smart Versioning to your Component section.

Adding Multiple Banners and Panels to Your Ad Is Easier Than Ever

You can now add up to 20 panels or banners in the Create New Panel dialog box. This dialog box provides a set of predefined industry banners or panels. 

Components View

Access the Components view by clicking  on the taskbar. Click a component to place into the ad and configure the component using the Properties pane on the right For more information, see, HOW TO: Add Components to Your HTML5 Ad in Ad Builder.

Properties Pane

The properties pane displays the settings for the selected component.

Actions and Animations

To animate, define an event and then add actions. You can add multiple actions to your event and sequence them using a timeline. You can also preview the actions here for a quick preview. For more information, see HOW TO: Assign Actions and Animations to Events in Ad.

Save

The Save option is located on the menu bar. Saving your ad in Ad Builder automatically uploads and saves your ad directly to the platform.

Note: Ad Builder in the Sizmek Advertising Suite platform has an embedded autosave feature that saves a draft of your ad every five minutes. Autosave is activated after you perform the initial process of saving your ad to the platform. When you open Ad Builder or if for any reason your ad crashes, a message appears allowing you to select the platform version of your ad or the latest draft version.

Preview

The Preview option is located on the menu bar. Ad Builder provides a basic internal Preview tool and access to the advanced Sizmek Advertising Suite Preview tool. You can also preview on a mobile device using our handy QR code feature. For more information, see HOW TO: Preview Your HTML5 Ad in Ad Builder.

Was this article helpful?
3 out of 10 found this helpful
Have more questions? Submit a request

Comments