- MDX: Manage > Ads > New > Design New HTML5 Ad
- Sizmek Advertising Suite: Creative > Ads > New Ad > Ad Builder
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.
- 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.
|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.|
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 HTML5 Ad
- Sizmek Advertising Suite: Creative > Ads > New Ad > Ad Builder.
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.
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 pixels on the ad.
What do you want to do?
Add a Guide
- Click and drag from ruler axis to create a guide on the canvas.
View the Guide Pixel Value
- Select the guide, click and hold the left mouse button.
Delete a Guide
- Double-click the guide or drag the guide back to the ruler.
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.
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.
Access the Components view by clicking on the taskbar. Click a component to place on the canvas and proceed to configure the component using the Properties pane on the right
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.
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.
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.