Welcome to the Bannerboo Blog

Tips, advice, and blogs by our team

How to create HTML5 banner ads in 2021 – a step-by-step guide

2 February 2021

Did you know that in less than five years, internet ad spend nearly doubled? $299 billion was spent on global internet advertising in 2019 compared to $156 billion in 2015. Despite the talk about "banner blindness" and the low CTR of display ads, banner ads continue to be actively used by marketers — and all that advertisers have to do is become more inventive, conduct various studies, and look for new solutions.

$299 billion was spent on global internet advertising in 2019 compared to $156 billion in 2015

HTML5 is recognized as one of the most effective banner formats in online advertising. It is a combination of images, animation, and text. These banner ads are suitable for different types of devices, easily adapt to any platform, and have an excellent visual resolution.

How to make professional HTML5 banner ads in a few minutes

Create HTML5 banner with BannerBoo
Creating HTML5 banners with BannerBoo

Creating HTML5 banners can be a daunting task for a beginner. Here we give step-by-step instructions on how to make high-quality advertising quickly and without any knowledge of programming languages.

Step 1. Sign up and create an account in BannerBoo

Get started by creating an account on the BannerBoo website. Just enter your email and confirm your registration by following the link in the email you receive.

Step 1: Sign in

Step 2. Set the dimensions of your banner ad

In your personal account, click on "Create banner" to go directly to the ad builder and get access to creating and editing. At this stage, we set the dimensions of the future advertisement. If you want to know more about ad dimensions, you can read Google's guide to ad sizes.

Top performing ad sizes

In our banner maker, there are a lot of predefined sizes for different advertising and social media platforms. You can also enter your custom HTML5 banner ads parameters.

Step 3. Create your banner design

On the left, you will see a panel with all kinds of tools. Choose a background for your creative, add a picture, text, icon, or button. To do this, you can use images and colors from the library or upload your own pictures.

A panel with all kinds of tools

An example of creating an animated banner in BannerBoo 

BannerBoo cares about its users, so we have prepared 7000 advertising templates that will speed up the banner production process! You can also edit them as you like!

Step 4. Add your ad copy and call-to-action

To write text on the banner, use the appropriate "Text" tool, click on the desired style (title, subtitle, common text), and it will appear on the stage. Then double-click on it and enter your advertising message. Font, color, letter spacing, line height etc. can be edited in the drop-down menu.

Use the appropriate "Text" tool, click on the desired style (title, subtitle, common text)

BannerBoo is designed with customers’ needs in mind and is reminiscent of other popular editors. Thus, our developers have achieved simplicity and an intuitive interface. Everything is elementary, even for a beginner!

Step 5. It's time for animated banners!

It is easy to apply simple animations: at the bottom, you will see a timeline with each element of the banner, distributed by layers. At the beginning and at the end of the layer, there is a button, "Add animation," where you can choose any desired effect. Clicking on the “Preview” button, you can immediately see what your banner will look like. If you don't want to include animation, you can "kill" all the effects and download your creative as a static banner.

 A button, "Add animation,"at the beginning and at the end of the layer

Applying simple animation with the BannerBoo tools

Step 6. Launch your online advertising campaign

Press "Save" and "Publish," select “export to ZIP,” and get HTML5 code in a ZIP file, which you can place on the site or upload to the ad platform. You can also download entire advertising campaigns with one click — use the "gear" icon on your campaign folder.

An example of saving HTML5 banner

You can create responsive banner ads using responsive layout settings by checking the box next to "Responsive banner."

Try our simple and easy-to-use online HTML5 banner maker now for free!

Related posts:

Oh noes!
We are sorry, it seems like your web browser is using some kind of Ad blocker. Since BannerBoo is all about creating and managing banners, an ad blocker would heavily impair your experience and the whole application in general.

Please add *.bannerboo.com* as an exception or disable the ad blocker to continue.