What is a Flip Banner?

Flip banners initially have the appearance of a standard banner. For the
sake of an example, consider that you have a 300×250 banner placed in the right
column of your web site. Now, suppose you hover your mouse over that banner and
suddenly it does a 3D flip to reveal another image on the back side with additional
details about the offer. That is essentially how a flip banner works. It takes
a standard banner space that you already have and effectively gives the advertiser
double the creative space without making any changes to your site.

Live Example

They say a picture is worth a thousand words, but I’ll do you one better with a
live example.

Creating a Flip Banner

Already know how to create a graphic banner with AdvertServe? The process for
creating a flip banner is very similar. In fact, the only difference is
that you have two images with a flip banner. One image is for the front and the
second image is for the back.

  1. Go to Media and create a new media.

    • Give your media a name and select the advertiser to associate it with.
    • Select Flip Banner for the media type.
    • The size you choose will depend on the size of your banner zone,
      but for this example I am going to use a 300×250 banner.
    • Next you need to upload the Front Image and Back Image using the provided fields.
    • Then you will want to enter a Redirect URL for the banner, which is simply a link
      to the offer on the advertisers web site.
  2. You’ll obviously want to set up a campaign next to schedule your flip banner media
    to run in a zone on your live web site, but for the purpose of this example we’ll skip
    those extra steps.
  3. Once your media has been created you can preview it in the control panel to see how it shows up.
  4. To test your media out on an actual page, simply click on the Generate Code link
    found in the upper right corner of the media preview page. From there select the type
    of code you want. In most cases the HTML code is the best choice. Then simply copy and
    paste that code into your test page where you would like the banner to appear.

The Result

Here is what my flip banner ended up looking like. Hover your mouse over it (or touch it on your mobile device)
to see the 3D flip effect in action.


Note that if you happen to be using an older browser or mobile device that does
not support CSS 3D transforms you will see that the front image is simply swapped
with the back image.

Final Thoughts

At the end of the day, the flip banner is yet another tool that you can deploy
to increase the earnings potential of your web site. There is a fine line between
too much ad space and too little content space. The flip banner can help you
break through that barrier by not taking up any more content space than a standard
banner. Plus, since zero coding is required on the part of the advertiser their
creative development costs drop dramatically, which leaves more funds for them to
direct at their ad spend.