Flip Banners

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 300x250 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 300x250 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.