how to create rich media ad
8 minutes read

Rich media ads contribute a great deal to making the internet a more interesting, fun, and worthwhile place to be. So, it’s a very exciting time for online marketing.

Rich media advertisements have been around for a few years, but recently they’ve reached new heights thanks to the HTML5 technology. HTML5 allows agencies to create innovative and unparalleled interactive ads that enlarge, float, start playing videos or roll out a game the moment they’re touched by the mouse. More and more marketers include rich media ads in their online advertising campaigns because of their excellent results:

  • higher user engagement,
  • conversions and
  • cash

What is rich media?

You’ve probably seen a banner floating around a web page or expanding the moment you hovered your mouse over it, at least once in your netizen lifetime. These are not regular banners (as you might have noticed).

They’re called rich media ads and their broad category goes far beyond floating and expanding.


Rich media definition according to Google:

“Rich media is a digital advertising term for an ad that includes advanced features like video, audio, or other elements that encourage viewers to interact and engage with the content. While text ads sell with words, and display ads sell with pictures, rich media ads offer more ways to involve an audience with the content.”

As the name suggests, rich media ads incorporate numerous types of elements such as video, audio, or other media elements that invite a user to interact and engage with the ad.

The possibilities to build rich media banners for desktop or mobile ads, and to creatively surprise the people surfing the internet are practically endless. These ads and take the form of pop-ups, peel-offs, push-downs, light-boxes, and many more.


Given their surprising nature, state-of-the-art media technology, and abundance of content, rich media advertisements have a humongous impact on users. Considerably bigger than that of standard display ads.

Research has shown that rich media ads can outperform standard and animated display ads with increased click-through rates and conversions by as many as five times!

I’d say this is a notably solid reason to incorporate rich media ads into your own online strategy.

How to create rich media ads in Creatopy

I’d like to show you how you can create a simple rich media banner similar to the one below, in just a few minutes, without any previous design course.

rich media

Here we go:

Step 1: Choose a size

From your dashboard, go to Start creating and choose a preset size for your banner or create a custom one from the right side where it says Custom dimension.

Step 2: Pick a background image

Click on Blank design and get started. You can either browse through our stock image database or upload a picture from your computer.

rich media banner

Step 3: Upload picture

Upload a picture of a car from your computer.

You need to cut the car from a picture prior to uploading.

Step 4: Duplicate

Duplicate the car as many times as you like.

Step 5: Choose the color

  • Go to every car layer and change the color of the car.
  • Click on the car, go to Color and change the color.
  • For better results, you can change the color of the car in Photoshop and then upload those files separately.

rich media how to

Step 6: Add your text and logo

Step 7: Animate

  • After you have created all your layers, you can start animating the objects.
  • Add the animation effect for your first car.
  • Go to the layer with the first car and click on the object.
  • Check to see where the object is listed in the Timeline view and click on the layer.
  • Go to the small rectangle at the left of the layer and click on it to see all the animation effects.

For this banner, we chose the “Slide right” effect.

  • Then, you need to set the timing for each car, so that you can create the impression the car is changing its color. Adjust the layers in the timeline.
  • Make sure to animate your last car using the “Slide right” animation so that the car will move to the right side of the banner and leave the landscape.

Step 8: Add the button

Time to add the button.

  • Go to the Button menu from the left side and pick a button. Then, add your text.
  • Next, choose an animation effect. We used “Slide up” for the button.

Step 9: Download

Download your banner as an animated GIF, MP4, or HTML5 file.

The benefits of rich media ads

  1. Higher engagement – Unlike standard banners, rich media banners can function as video, audio, or invite users to perform certain actions. These ads actively seek a user’s attention and aim at engaging him with the brand. And when you offer an entertaining experience, people are happy to interact with your ad.
  2. Higher performance – More click-throughs and conversions. Engagement leads to clicks and conversions. Using a wide array of media to convey your message you have more chances to motivate people to click and visit your website. And eventually, convert them into buyers.
  3. You can include video or audio – Video is king nowadays and you can integrate your videos into your banners and they will be shown anywhere on the internet. With video, you can say so much more about your brand and promotion. Studies show people prefer video ads because they entertain, educate, and inspire.
  4. More space – With rich media ads, you get more space to show off your products and speak about your brand, because you’re not restricted to stick to only one layout. You can use more images, calls to action, text, videos, or voice over.  
  5. Multiple buttons – You can send people to multiple landing pages because you can include buttons in various areas of the ad. For example, if you’re selling clothes you can send women to a page and men to another one, by using two different buttons.
  6. Better tracking – When running online ads you want to know a variety of details about people who interact with your ads and their performance. This is possible. You can not only track impressions and click-throughs but also facts about users’ behavior and multiple link tracking.

Types of rich media ads

A. On page rich media ads

#1. In-banner Video

You’re probably familiar with this type of banner ad and things are pretty simple: you create a banner, embed a video, and save it as an HTML5. With Creatopy, embedding videos into banners is a one-click job.

The result you get is a banner that offers a nice short presentation of your product, without the need for the user to leave the page and go to another website. No disruption. Everything happens right here and now.

Have a look at Eurogamer’s rich media video ad:

#2. Expanding banners

Note: Expanding banners cannot be designed in Creatopy. You can use Google Web Designer to do this.

Using expanding banner ads to present your product’s benefits or promotion is a sure way to get attention.

How they work: expanding banners act as normal one-side/header banners until the moment you hover your mouse over them. That’s when they enlarge to cover a bigger area of the screen and start displaying a visual story of a brand/product/promotion.

Instead of using a classic size banner with one or two frames to tell your story, you can spread your ad to cover a wider area of the screen and roll out your story.

These banners can expand from up to down, from left to right or from right to left. You can use multiple slides, special animation effects and invite people to interact with the ad or incorporate a nice video.

rich media expanding banners example

Credit: Feliz Genzmer

B. Out of page rich media ads

#1. Pop-up ads

Pop-up banners have long been with us, that’s why agencies had to find new innovative ways to pop-up without being annoying or boring.

Pop-ups were first invented to break out from the regular, on-site content, and grab users’ attention, given the banner blindness most people have when surfing the internet.

rich media pop ups example

Today, pop-ups range from classic size pop-up banners to out-of-the-ordinary tiny animated stories that leave you hungry for more.

Here is an example I find truly inspiring: Overwatch’s animated pop-up banner for their new Super Heroes game. The way they built the ad is suggestive for the game. It’s like a sneak peek at the game.

#2. Floating ads

Floating banners are another type of rich media ads that apparently exist independently from a web page. These banners can move with the page as you scroll down or can maintain a locked position.

There are endless possibilities to create an impressive floating banner. There’s no need to stick to a square or rectangular shape, to one or two slides. Depending on your product or creative idea, a floating banner can take the form of…just about anything.

rich media floating ads example

Credit: Matrudev

#3. Lightboxes

Lightboxes are pretty advanced interactive ads because they can actually integrate a mini website and engage the user to complex actions.

Lightbox is an expanding creative that works on both desktop and mobile. On desktop computers, a two-second mouseover expands the Lightbox. On mobile devices, you tap to expand. When expanded, the Lightbox takes over most of the available screen space to feature brand content, including videos, maps, games, and more.Google

This is a beautiful example of an expanding lightbox.

In-stream video ads

Marketers realized people are already used to commercial breaks from TV, so they identified the opportunity for in-stream video ads on the internet a long time ago.

This is a great placement because you can match an audience’s interest with what your brand has to offer. In-stream video ads are placed within videos that people willingly choose to watch. Generally, users will watch the videos until the end so they will accept watching non-skippable video ads too.

For example, you can place your video ad for a cleaning product 2 minutes into a video about cooking at home.

People are already in the lean-back mode, open to receive the information, and the video ad is just like a small commercial break.

In-stream videos can be inserted into videos on Youtube, Facebook, news websites, private blogs, and so on. Basically, wherever there’s video content and an audience for your product.

Here’s a quick example of an in-stream video ad for Petronas, an oil and gas company, during the streaming of a video debate for a Formula 1 race, on SkySports. See how they matched the audience with the product benefits?

The team at Animatron has recently conducted a study that shows just how important video ads are in online marketing campaigns. Videos can drive people to your website, promote new products, and covert random viewers into buyers.

purposes of video ads infographic

“ Video ads are on the rise. In 2018, 76% of businesses use video ads to drive traffic to their websites and promote new content, and 82% of consumers are likely to proceed and learn about the product or service after watching a video ad. This tells us a lot about the power of video ads. If a business wants to boost its online presence, be it on social or not, it is essential to start using video.” Olga Bedrina, Animatron

 

EnRich your online campaigns. Have a try

All righty now, we’ve reached the end! I hope you’ve learned a few things from the rich media examples I listed above. You can try creating a rich media banner for your website, in Creatopy right now, free of charge. Our users usually experiment with our editing tool and create some pretty spectacular stuff. See what you can do for yourself!

Diana Teslaru
Content Marketing Specialist. I'm an enthusiastic digital writer with extensive experience (15+ years) in content writing and advertising. I've helped many popular brands find their voice, build trust and gain customers through compelling articles and copy. If you want to connect with me, you can find me on LinkedIn.

Leave a reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You may also like