Pricing Learn What's new About
Picture
31 March 2021

HTML5 Ad Templates. HTML5 Banner Creation Online

Paid advertising has always had a lot of ways to promote itself, and this includes online advertising, too. Online ads have been doing extremely well for more than a decade and show no signs of stopping anytime soon. However, you have to know the differences and nuances of various ad types to use them in the most effective way.

That being said, image-based ads are still the most popular ones, both still and animated. These types of ads come in several different formats, including JPG, PNG, GIF, and HTML5. The last example is going to be our topic for today.

Banner ads in HTML can serve all of the different purposes that a normal image or animation can work with, such as promoting, marketing, SEO, marketplace, and more. Simpler HTML banners could be done using the usual method of working with a code and maybe a separate image file as your background, and there are also several tools that can help with creating more complex banners in the HTML5 format. Now we’ll attempt to explain how to make a banner in HTML as a code.

HTML banner creation via code

The most basic HTML banner/header can be designed using the following example:

<section class="header">
    <h1>Text 1</h1>
    <p>Text 2</p>
    <a class="btn-bgstroke">Text 3</a>
</section>

This code results in three lines of text, the first one being the header, the second one containing the general information on the topic, and the last one being your call to action (CTA):

Additionally, you can use CSS to customize the banner in question, so that it’s not just a text with a blank background. Here is our example:

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,100,700,900);

h1,
p,
a{
  margin: 0;
  padding: 0;
  font-family: 'Lato';
}

h1 {
  font-size: 2.8em;
  padding: 10px 0;
  font-weight: 800;
}

p {
  font-size: 1.1em;
  font-weight: 100;
  letter-spacing: 5px;
}

.header {
  width: 100%;
  padding:60px 0;
  text-align: center;
  background: #4c5270;
  color: white;
}


.btn-bgstroke {
  font-size: 20px;
  display: inline-block;
  border: 1px solid white;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 300;
  margin-top: 30px; 
}

.btn-bgstroke:hover {
  background-color: red;
  color: #4c5270;
}

And there’s also the visual result of the CSS customization:

This way, we’ll have a solid color of the background (the line is background: #4c5270 under the .header group), a dedicated font called Lato, and a responsive CTA button (that changes color to red when you hover over it). 

This code can then be embedded right into your website’s source code and should work as intended.

Another way of creating a simplified HTML banner is via <div> tag. The code sequence is going to be slightly different, though. Let’s look at our example first.

<div style="width:300px; height:250px; padding:15px; background-color:blue; color: white">Test 1</div>

This code results in a 300×250 banner with a blue background and a line of text written over it, as follows:

That being said, there are several different tools that work like your regular image/ad designer but can also save the results in a HTML5 format. One such example is Google Web Designer. 

Designing HTML5 ads with Google Web Designer

Google Web Designer is a rather comprehensive application that allows for the creation of many different web advertisements in the HTML5 format. There are a lot of features that are included in the package, from the regular image design and animation to the ability to create rules, events, links for your CTAs, and more.

The main goal of this HTML banner creator is to reduce or eliminate the manual coding segment of the process when it comes to designing your ads, since coding often requires a specific set of skills to be able to work quickly and efficiently.

Now we’ll go over some of the general steps that are used when designing your HTML5 ad with Google Web Designer:

  1. The first step you have to do is to create a new file to work with. That way you’ll get to the creation window, which allows you to specify some things, such as the storage location, the name of the file, the intended environment, the dimensions of your ad (either choose one from the list, input dimensions manually or make the ad responsive for it to automatically fit and adapt to the content that you’ll be placing inside), and more. Click “Ok” after you’re done with that.
  2. Adding images to your file is as easy as the regular drag-and-drop routine (it is worth mentioning that the first image you’ll drop onto your file would be considered the background image and fit accordingly). Other images might also be included with no problems whatsoever.
  3. Textboxes for general information and CTAs can also be made using the T button on the app’s control panel.
  4. You may have noticed that you also have a timeline-esque bar under your file. This one is there to help you with managing animations, if you want to have them in your banner. The process itself is similar to most of the competitors on the market, with keyframe management, animation speed customization, transition effects, and so on.
  5. Previewing your future HTML5 ad is always possible using the “Preview” tab in the upper right corner of the app. It can be used to assess the way the ad is going to look in its final form, and visualisation is also great for spotting the problems before you’ve saved the ad in question.
  6. The process of saving your results is also somewhat different, since it’s called “Publish” here. You can “publish” your ad as an archive into your computer (the .zip format is offered by default), or you can place it in Google Drive for later usage.

HTML5 advertisement supports many different code types and file formats, but there are also some limitations included, such as:

  • All of the images within an HTML5 ad should be stored locally and are kept together with the file inside the archive;
  • No support for either maps or videos;
  • You only have a list of Google web fonts to choose from, there’s no support for any other font;
  • No support for expandable ads;
  • Multiple timers and exits are not supported for environment target actions.

Despite its limitations, HTML5 is still a relatively popular format with lots of possibilities. However, some might find methods above to be too difficult to work with. There are other options that exist for these cases, and those are template storages and online ad builders.

Template distributors and online ad builders

For people that do not really want to design their own ads, there’s always an option to work with a designer, for a price. This is why template distributors like Codecanyon, Themeforest or 5banners exist, offering a marketplace full of adjustable HTML5 templates, or even sometimes offering the ability to adjust those templates.

However, these templates are often sold in bundles, and the price of those is higher than your expected ad template fee. Additionally, since this is a marketplace, you’re still choosing between a set of templates, with no option to make something completely unique in the first place.

With that in mind, you may want to consider using one of the online ad builders for your HTML5 advertisement plans. There’s quite a number of different platforms that can work with banners as a whole and offer an option to save in the HTML5 format, so now we’ll look over 5 of the most popular examples.

  1. Canva
Canva landing page
Canva landing page

Canva is one of the known competitors on the market of HTML banner creators, offering a rich collection of features in the field of image editing and animation. The addition of a user-friendly interface and the existence of their own template library for different types of banners makes it even better. The amount of formats for different social media sites is also extremely impressive, from YouTube and Twitter to Facebook and LinkedIn. All in all, it is a good choice when it comes to an online ad builder with little to no drawbacks.

  1. Creatopy (previously Bannersnack)
Creatopy landing page
Creatopy landing page

Promoted mainly as an “online visual production platform”, Creatopy is the successor of Bannersnack, with both of them being an online ad builder with many useful features. Creatopy also boasts millions of stock images, a number of different HTML5 animation presets, the ability to use your own assets in tandem with the built-in ones, general animation capabilities with a timeline, a plethora of HTML5 ad templates and more. All of that is also encompassed with an easy-to-use interface that’s easy to figure out.

  1. Bannerboo
Bannerboo landing page
Bannerboo landing page

General interface friendliness and the addition of several complicated editing features is what makes Bannerboo stand out from the other competitors. There’s also your usual package of image editing and animating capabilities, built-in HTML5 banner templates, various objects to use, adaptable designs, and so on. Animation is one of Bannerboo’s strongest suits, too, and its timeline is designed to be understandable and simple enough for anyone to operate with no issues whatsoever.

  1. OnlyMega
OnlyMega landing page
OnlyMega landing page

While the previous example was mostly about animation, OnlyMega focuses more on its impressive library of templates, including HTML5 ad templates. Created directly for people who are not sure about their future ad design, OnlyMega offers thousands of HTML5 banner templates that you can fully customize however you like. The customization process is performed within their ad builder, which in itself is packed full of various image editing features, suitable for your ad building efforts.

  1. Viewst
Viewst landing page
Viewst landing page

Another way to create your own HTML5 advertisement campaign is to use Viewst. It is a comprehensive online ad builder that offers multiple different features tied around creating the most attractive advertisements. Some of the features included are image resizing, color changing, object adding, image cropping, animation customization, transition effects, a variety of HTML5 banner templates, and more.

While the main purpose of this ad builder, as with most of the list, is to work with banners as a whole, they also offer the ability to download the results of your efforts in the form of a HTML5 archive filled with code and necessary files.

Conclusion

HTML5 as a format offers a lot of flexibility when it comes to the banner creation methods, and its ability to support most of the popular ad formats is a nice addition, as well. There are several ways of creating HTML5 banners on your own, and they tend to differ quite a lot. On the other hand, the amount of choices is there to help you choose the one solution that works the best for your specific case.

Can’t find your answer?

Contact us and we’ll get back to you as soon as we can.
Contact us
Viewst - Create professionally‑designed ads from scratch in minutes | Product Hunt