Creating HTML5 Ads With Creatopy For Lead Generation

Today we have a handy tutorial from my Graphic & Web Design Manager Alan Cotter.

Alan will be demonstrating how to create HTML5 ads using the site Creatopy.

HTML5 ads allow you to display animations and create interactivity in your ad design.

These ads work great across all devices as well!

I hope you enjoy today’s tutorial video.

Want to take your agency to the next level? Please get in touch with [email protected] if you would like to know more.

Video transcript

Hi everyone, this is Alan from Flexxable and today I'm going to show you how you can create a set of HTML5 ads for your GDN campaigns.

So, first off, what are HTML5 ads?

HTML5 ads allow you to display animations and create interactivity in your ad designs.

So these are not flash-based and these ads are going to look good across all of your browsers and devices and they're going to function well, too.

So, how can we design these HTML5 ads? There's a number of different platforms that you can use to design these ads, but today we're going to look at Creatopy.

So Creatopy used to be called Bannersnack, but recently they've gone through a bit of a rebranding and they've added a bunch of new features, too.

So I'm going to jump into the dashboard and show you around.

So here is the dashboard. We can see a lot of different templates that you can use in your designs, but we're only interested in looking at display design set templates, which are here. Click see all.

Now, these sets conveniently contain a set of ad sizes that are compatible with the Google Display Network which is what we're looking to create a campaign in today.

I'll hit one of these and show you what the inside for the builder looks like.

Okay, so we have all of these different sizes displayed in front of us, roughly what they're going to look like seeing them in a browser experience.

Here we have a layers panel and we can see the title that is going to be applied to every single ad.

And if I edit this, you'll see that the ads will respond in real time, which saves a whole lot of time when you're going to be editing these.

Same with description, you can change that and update the fonts and they will all edit.

They will all change at the same time.

You can also go in and edit things by themselves. And we have a panel that contains a timeline up to seven seconds here which will display animations that we've set or they will load at just after a second or right as the advert loads. And they have different animations that you can change how they display.

So these kind of behaviors will allow you to grab more attention when your adverts load on pages.

Now, let's go over to one of my previous designs. Okay, let's make a duplicate of this one here.

Okay. Let's pull this one free.

So I'm going to show you what I would do to edit one of these ads so I can import it into my GDN account.

So here I've already got my copy pre-written.

It's going to update the headline. And then find the button copy.

Okay, so everything as it was pre designed by me, it's kind of in an okay place, but I still need to go in, as you will, and move some things around to make sure things fit. And it could be as simple as just changing the size of the text box or you may need to move quite a lot around.

Just gonna focus on a couple of things first. I'll just focus on one or two ad sizes just so you get the gist.

So let's just go for a square one first.

So pull them to make sure everything is spaced out nicely. And let's look at this.

Let's look at how everything loads.

Okay, I don't like that the body copy doesn't have any kind of animation.

So let's do that. I might move this back with the headline.

Okay. You can see that when the button loads it has this sort of pulsating animation that continues for the entire 30 seconds. And it's important to remember 30 seconds because GDN will only allow up to 30 seconds of play time on these animations.

So, don't go beyond 30 seconds and if possible animate up to 30 seconds.

So how can you add these animations? So let's say I want to change this body one, often when you have these layers, Creatopy will just apply some default animations, just so it displays something for you off the bat and it just speeds up your process but you may want to change things.

So, currently the body just swipes it.

I think that's the default. Sorry, on the body, the headline.

Slide right, okay. So let's say we want to change this. Give it a bounce. And I do this to the body, as well.

Okay, so now those two elements are going to bounce them together.

Kind of like that they're a little bit out of sync.

Yeah, they'll go together. Okay, and then the button is going to continue to animate for 30 seconds which I think will definitely grab more attention.

Okay. Now, for some thinner ads, we've got a main banner here or we've got a skyscraper banner.

There's a bit more moving around and you also might have to lose some parts of your design.

There's a couple of instances where I've taken away the image of Dan and I've taken away the image of the book, as well, on this one, just because with an ad this size it's going to be difficult to cram everything in.

So we don't want to be doing that.

So I'm going to quickly just brush up everything, make sure nothing's overlaying and then we'll look at exporting.

Okay, so now that I'm happy with my designs, I'm going to grab a button link that I want on the button.

After some here, slightly different to the last one, we have to go over to download.

We're going to make sure to click HTML.

It has the little five logo there.

Let's keep the image quality high and give that link there, as well.

Open a new tab. Download. Okay, so that's all downloaded now.

Gonna open this up. Extracting. Okay. And that leaves us with these zip folders of every part of the zone.

We're going to go over to our GDN campaign or, sorry this is our, ads in a certain adset.

So we're going to go here. Upload display ads.

Okay, just waiting for this to load. Okay, here we can click and drag these in. And we're going to want to add our URL.

Okay, save and create next ad.

Okay, take a look at the wrong button there, so we're not doing that. Okay, so now when we go back and look in there.

Take the lead three and then perfect.

So that's how you create a set of HTML5 ads using Creatopy and uploading them to the GDN.

I hope this was helpful, guys. Thanks for watching and I'll see you in the next one.

Creating HTML5 Ads With Creatopy For Lead Generation

Video transcript

Recent posts

How to Charge Clients for AI Services: Pricing Models for AI Automation Agencies

Database Reactivation for Abandoned Carts With AI

N8N vs Zapier: A Comprehensive Guide to Workflow Automation

The Do’s & Don’ts of SMS Marketing: A Guide To SMS Compliance

how to run $100k+ campaigns for businesses & take $30k-$50k+ for yourself… with AI doing all the work

Can't Find What You're Looking For? Search Our Posts!

HOLD UP!

ARE YOU HELD HOSTAGE BY DEMANDING LEAD GEN CLIENTS?

I Wrote A Book...