After setting up your first HTML5 ad set, you are automatically redirected to an interface that we define as the “scene”. This is basically the entire framework of our drag-and-drop editor. Within the frame, you will see a (blank) canvas. This “canvas” is the frame in which you can build your HTML5 ad. It, therefore, represents the dimensions of the ad you are creating.

You can view the canvas in two modes: the “single view” and the “all view”. The “single view” is the main editor to build or edit a single ad. When you are redirected from the hub, you will always end up in the “single view”.

Adding a background and border
To start creating your design, click anywhere on the canvas. You can now set a background color or border for your ad.

Adding elements to your ads
When you have set the background color, it’s time to actually create the layout of your HTML5 ads. In this section, we’ll walk through all the available elements you can add - and their specifications. 

When you view the canvas in the “single view”, you’ll notice a big blue button located at the top left of your screen. This is what we call the “add element” button. This button is the main tool to add any type of element to your ads, such as an image, a logo, a text box, or a video.
​
We will begin by adding a logo. In order to add this element, follow these basic steps:

In order to upload a logo, the image file has to adhere to the following specifications:

After adding your logo, it will immediately appear on the canvas. Click on the logo to reposition it, or use the “transform tools” to adjust the size. 

Basically, these steps can be used in order to add any type of element, whether it is a logo, a video, or an image. But they do differ slightly, so we will explain each element to make sure you learn all there is to know.  

Images
As mentioned above, images have a slightly different use case than logos. When it comes to HTML5 ads, images are mostly used as backgrounds and artwork. 

In order to upload an image, the image file has to adhere to the following specifications:

Adding an image is roughly the same as adding a logo. Simply click the “add element” button and select “image”. Then, resize or reposition it to your liking. 

Text
To add text, click the “add element” button and select “text”. You can now choose a font, this can be either a Google Font or a Custom Font. When you’ve selected a font, click “Add”.
​
A text box will appear on the canvas. Here, you can edit the text you want to display, by simply double-clicking the text box and starting to type.
​
As mentioned above, we support two different kinds of fonts: Google Fonts and Custom Fonts. To see which font families are supported by Google Fonts, please check out this link. 

In order to upload a Custom Font, click “Upload font”. Please note that the font file has to adhere to the following specifications:

Buttons
Adding a button roughly follows the same principles as adding text or logos. However, the button library already contains a set of 8 prefixed button styles. You can select these buttons to use in your ads. Once you have added them, you can also customize the styles, but we will get back to that later on in this Beginner’s Guide. 

Shapes
Similar to the two fonts, there are also two kinds of shapes you can use: Public Shapes and Custom Shapes. In this case, the Public Shapes exist out of preselection of frequently used shapes that you can use in your ads. Custom Shapes are shapes that are created outside of Bannerwise. They can be uploaded, as long as they adhere to the following  specifications:

Videos
The video library works exactly the same as the image library, the only difference is that this library contains videos. Adding a video is, therefore, quite simple. Simply click the “add element” button and select “video”. The video library will pop up, allowing you to upload or select a video.
​
To use video files in your HTML5 ads, the files have to adhere to the following specifications:

When you have uploaded a video, it will appear on the canvas. Now, you can adjust the video settings and add a thumbnail. To learn more about this, please check out another section of the Beginner’s Guide: Adding a video element to your ad.

Click areas
In general, your entire ad is clickable. You can easily change the URL by going to “Settings” in the top right of the scene. Then, click “Export” and set a landing page URL for all ad sizes. 

But if you want to lead specific parts of your ad to different landing pages, you need to add click areas. This is the only type of element we don’t have a library for. The reason for that is simple: there is no shape for click areas. They basically function as invisible layers on top of other elements.
​
Click on the blue “add element” button on the top left of the scene, and select “click area”. Now, you can specify the dimensions of the area you want to be clickable. Then, look at the right corner of the scene. Here, you need to add the URL that you want to lead your traffic to. The URL must begin with "http(s)://".

Please note that, if you want to use click areas in your ads, you have to make sure that the selected network supports “multiple clicks”. This is, for example, not supported by Google Ads. 

That's it!
Now you know how to add a background and elements to your HTML5 ad, it’s time to learn how to adjust these components later on. For this, we refer you to the next part of our Beginner’s Guide: Adjusting and replacing elements in your HTML5 ads.
​