PRODUCT
Follow
  • Creative > Ads

Note

Note: To learn more about this format or to see build guides for other authoring tools, see About Scroll Reveal. For an overview of Sizmek Ad Suite (SAS) Ad Builder, see Introduction to Ad Builder .

Selecting the Ad Format

Procedure
  1. Click New Ad > Ad Builder.

    Ad Builder opens.

  2. Select Template Gallery:

    1. In the search box, type Scroll Reveal.

    2. Click Create to create a new instance of the template.

Creating the Ad

The following image shows an example of the Ad Builder interface displaying the various panes that are available when creating an ad. Refer to this image and the procedure to get familiar with actions you should perform every time you create a Scroll Reveal in Ad Builder.

ScrollReveal-Ad_Builder.jpg
Procedure
  1. Click the settings icon next to the logo to verify that the ad format, Scroll Reveal, is defined correctly. You can change the ad name and custom variables. For more information, see Customizing Scroll Reveal.

    Note

    Note: The advertiser or media agency may have provided you with a naming convention that you should use to name your ad. If not, use a name that describes the creative. For example, advertiser-campaign_name-dimensions → amazon-back_to_school-300x250.

  2. By default, the panel dimension for the ad is set to 300 x 250. You can change the dimensions in the Properties pane.

  3. Select/clear the check box if you want the panel to have responsive or fixed dimensions.

    Note

    Note: For fixed dimensions, change the Positioning Type to Page Relative - Percentage, X: 50, y: 50.

  4. In the Components pane, click Hotspot to add a click-through button. This button creates a transparent overlay that makes your creative clickable. In the Properties pane, set the width and height to match your ad, and set the X and Y coordinates to 0.

  5. In the Actions and Animations pane, click Create New Event, and then select Tap/Click as the event type.

  6. Add a click-through action to ensure that the entire hotspot is clickable.

  7. Click Save.

Customizing Scroll Reveal

The following table presents the most common custom variables that you can set using the settings icon (Ad Settings).

Variable Name

Type

Description

Default Value

Auto Snap Type

Integer

  • 0: Snap disabled.

  • 1: Only snap upwards.

  • 2: Only snap downwards.

  • 3: Snap both upwards and downwards.

3

Bottom Bar Color

String

You can put any HTML color name or HTML hex color code.

white

Bottom Bar Height

Integer

Height of the bottom text bar in pixel.

20

Bottom Bar Label

String

Text in the bottom text bar.

SCROLL TO CONTINUE WITH CONTENT

Bottom Bar Label Style

String

CSS style for bottom text bar.

color:grey;

font-size:10px;

font-family:arial;

text-align:center;

Collapse After Scroll Away

Boolean

Determines if ad should be collapsed when scroll away or snap away.

False

Display Bottom Bar

Boolean

Determines if the ad needs to display bottom text bar.

False

Display Top Bar

Boolean

Determines if the ad needs to display top text bar.

False

Percentage For Snap In

Integer

Determines the percentage of the browser height that ad must exceed for the snap in when user scrolls the ad in.

50

Percentage For Snap Out

Integer

Determines the percentage of the browser height that the ad must exceed for the snap out when user scrolls the ad away.

75

Top Bar Color

String

You can put any HTML color name or HTML hex color code.

white

Top Bar Height

Integer

Height of the top text bar in pixel.

20

Top Bar Label

String

Text in the top text bar.

ADVERTISEMENT

Top Bar Style

String

CSS style for top text bar.

color:white;

font-size:10px;

font-family:arial;

text-align:center;

Top Bounding Selector

String

The HTML selector for the object to which the ad should snap on the top. For example, some publisher sites have a header or top menu that should not be covered by Scroll Reveal. In this case, use this custom variable to declare the header or top menu element. If the header is a div with header as its ID, the value would be div#header.

null

Saving as a Reusable Template

Note

Note: These instructions are not part of the mandatory procedure. You can use them to create a reusable template if required.

Clicking the arrow next to Save, and selecting Save as template enables you to save your layout as a template. This template will be available for all users in your account, and can speed up your workflow the next time you build a Scroll Reveal.

Adding Components and Animations to Your Ad

Now that the essentials of your creative are set, you can start creating and animating the content. For more information, see the following :

Previewing and Testing

After you finish creating your ad, make sure that you preview and test it. For more information, see Preview Your Ads and Test Your Ads.

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

Comments