To make an animated HTML5 banner ad, build it in a browser-based builder: choose a size, add image and text layers, animate how each layer enters, holds and exits, set a click-through URL, then export a .zip with index.html, ad.css and an assets folder. The HTML5 Ad Builder does exactly that, entirely on your device, with no code and no upload.
This guide walks through the whole job in order, from picking the right size to checking the exported files before you hand them to a media buyer.
What you need before you start
An HTML5 banner is a small web page, not a video or a GIF. It is built from HTML, CSS and images, and it plays inside the ad slot itself. That has two practical consequences:
- You need the actual artwork as separate pictures, not flattened into one image, if you want text or logos to move independently.
- You need a destination URL, because the ad has to be clickable.
Have your logo, a background image or two, and any product shots ready as PNG or JPG files on the device you are working on. Nothing needs to be prepared in a special way, and there are no file-size caps on what you bring in.
Step-by-step: how to make an animated HTML5 banner ad
1. Open the builder and choose a size
Open the HTML5 Ad Builder. It starts on an empty 300 × 250 ad with one empty slide, a toolbar above it and a settings panel beside it. Nothing has to be dropped in first.
In the toolbar, pick one of the standard sizes — 300×250, 728×90, 320×50, 300×600, 160×600 or 970×250 — or type any width and height you need. The builder makes one size at a time, so if a campaign needs three sizes, you build three ads.
2. Add your image layers
Click 'Image' in the toolbar and choose one or several pictures from the device. Pictures can also be dropped anywhere on the tool, or pasted, and they land on the slide currently being shown.
Drag each layer into place directly on the ad. Position the background first, then the product shot, then anything decorative, so the stacking order matches how you want the ad to read.
3. Add text layers
Click 'Text' to add a headline, a subhead or a call to action. Keep the copy short: a banner has a fraction of a second to land, so three to six words in the headline is usually enough.
4. Build the slides
An ad is made of slides, listed under the ad itself. Add a slide, duplicate one, or delete one. Each slide has two settings:
- 'Holds for' — how many seconds the slide stays put.
- 'Then' — how it gives way to the next slide.
A two- or three-slide structure works for most campaigns: an attention slide, a product or offer slide, and a closing slide with the call to action. Duplicate a finished slide when you want a variant rather than starting from scratch.
5. Animate each layer
Select a layer and open 'Animation'. For that layer you set how it 'Enters', what it does 'While shown', and how it 'Exits'. Stagger the entries so the eye has somewhere to go: background first, then the product, then the headline, then the button text.
Restraint matters more than variety here. Two effects per layer is plenty, and the same effect reused across slides reads as deliberate rather than random.
6. Set the canvas
'Canvas' controls the background, border, corners and 'Weather' — none, snow or rain. Weather is a quick way to give a seasonal campaign some motion without building extra slides, but keep it off ads where it would sit behind small text.
7. Add the click-through URL
In 'Delivery', set the 'Click-through URL (clickTag)'. This is the destination the ad opens when someone clicks it, and it is the one field a media buyer will check first.
8. Preview, replay, arrange
Click 'Preview' to play the real ad. 'Replay' plays it again, and 'Arrange' goes back to editing. Watch the full loop at least twice: once for the first slide, once for the handoff between slides. Check that nothing important sits under the edge of the frame and that the final slide is on screen long enough to be read.
9. Export
'Delivery' holds two exports:
- 'Export HTML5 ad (.zip)' — index.html, ad.css and an assets folder, with a clickTag and an ad.size tag.
- 'Static backup (.png)' — one still picture of the slide on show, useful as a fallback image.
Each export counts as one run of the daily allowance. The ad is kept in this browser while you build it, so finish and export in the same session.
What the export contains
| File | What it is |
|---|---|
| index.html | The ad page, with the clickTag and the ad.size tag |
| ad.css | The styling and animation rules |
| assets folder | Your images, as used in the ad |
| separate .png | A static backup of the slide on show |
The .zip is the unit most ad platforms expect for an HTML5 creative. The static PNG is there for placements that will not take HTML.
The builder assembles and previews everything in the browser, and your pictures never leave the device.
Why building in the browser beats upload-based tools
Most free online banner makers work the same way: you upload your artwork to their server, arrange it in their editor, and download the result. That model has three costs.
Privacy. Uploading means your unreleased product shots, client logos and campaign artwork sit on someone else's machine. Local processing means the ad is assembled and previewed in your browser and the pictures stay on your device. For agency work under NDA, that difference is often the deciding factor.
Speed. There is no upload wait and no download wait. A 4 MB background image is available to the editor the moment you select it, and re-exporting after a copy change takes as long as the export itself.
No file-size caps. Upload-based free tiers usually meter storage or impose a ceiling per file. This builder has no file-size caps, so a large hero image is not a reason to redesign.
One structural note: the ad is kept in this browser while you build it. If you clear site data or switch machines mid-build, the working file does not follow you. Export when the ad is done rather than leaving it open for days.
Common mistakes and pro tips
- Too much motion. If every layer enters with a different effect, the ad looks like a demo reel. Pick one entry style and vary only the timing.
- Text that leaves too fast. A slide that holds for one second is unreadable. Give the call-to-action slide the longest hold of the set.
- Forgetting the clickTag. An ad with no click-through URL is a dead end for whoever traffics it. Set it before you export, not after.
- Building one size and stretching it. A 300×600 and a 728×90 are different compositions, not the same design at two scales. Rebuild the layout for each size rather than scaling.
- No static fallback. Export the PNG backup at the same time as the .zip. Some placements and some review processes ask for it.
- Checking only in the editor. Preview plays the real ad, which is the closest thing to a live placement you get before upload. Use it every time you change timing.
Where this fits in a campaign workflow
The builder makes one size. Once the ad is done, two other jobs usually follow.
If you need the creative shown in context — on a phone, in a browser window, on a laptop — the Mockup Generator drops a screenshot into a device frame so you can present the ad in a deck rather than as a flat rectangle.
If the same campaign needs social versions at every platform size, the Social Pack Exporter takes one design and exports the whole set in a single pack, which saves rebuilding each aspect ratio by hand.
And if the campaign has a podcast component, the Podcast Artwork Pack turns one square of cover art into every size Apple, Spotify and a host ask for.
What this tool does not do
The HTML5 Ad Builder builds animated HTML5 banner ads and exports them. It does not produce a GIF or a video, it does not record video or sound, it does not check the ad against any ad network's limits, and it does not send the ad anywhere. It also builds one size at a time. Treat the export as the finished creative file and handle upload, approval and trafficking in whatever platform you normally use.
That division is deliberate. The tool's job is to turn your artwork and copy into a clean, correctly structured HTML5 package with a clickTag and an ad.size tag, and to do it without your files leaving your machine. Everything after the .zip lands in your downloads folder is a platform question, and the export is built to slot into that step rather than replace it.
For a small team without a developer, that is usually the whole gap between 'we have a banner design' and 'we have a file we can traffic' — and it closes in an afternoon rather than a sprint.