Six Powerful Features in the HTML5 Studio That You Might Not Know About
Donatas Stirbys
Donatas Stirbys
September 14, 2016

Six Powerful Features in the HTML5 Studio That You Might Not Know About

  • clicktag
  • html5 studio
  • Builder
  • components
  • Drag & Drop

The Builder Mode is part of the HTML5 Studio's UI and enables users to build and create content seamlessly without the need to write an actual code. Most of the Builder Mode’s features are pretty straightforward, and you will quickly see the value they might bring you. Some of those features might be not that obvious but nonetheless might give you some benefits in the entire creative process of creating beautiful and functional ads. We are going to list a few of those features below.

Drag and drop images and videos

In our humble opinion, this is by far the easiest way to upload your banner assets to the ad you are working on, inside the HTML5 Studio. Simply grab your ready-banner assets from your computer, and drag them on top of the Builder Mode. You can do this by dragging every file separately or by selecting all assets and uploading everything at once.

1 Uploading An Image By Dragging And Dropping
Uploading an image by dragging and dropping

2 Uploading A Video By Dragging And Dropping
Uploading a video by dragging and dropping


Sometimes, aligning a component in a particular place or snapping two similar components at a precise distance from each other can be a burden, especially if you are not aware of the components-snapping feature in the HTML5 Studio‘s Builder Mode. Simply press CTRL (if you are on Windows) or CMD (if you are on MAC), and drag the component you want in order to snap/align.

3 Builders Components Snapping In Action
Builder’s components snapping in action

Arrange components in the components tree

In our HTML5 Studio, there are a few features that will provide you with the same result when you use them, but this result might be reached in several different ways. Arranging the components is one of the features you can implement in three different ways:

  1. Press the right mouse button anywhere in the Builder Mode, and select Arrange from the drop-down menu list;
  2. Select a particular component, and in the settings panel, find the Size & Position section. Afterward, click on one of the icons in the Arrange section; or
  3. Simply arrange components in the components tree by dragging and dropping them where you want them.

4 Arranging Components In The Components Tree
Arranging components in the components tree

Quickly add clicktag through the contextual menu

As with the Arrange functionality mentioned in the previous tip, adding a clicktag to your banner can also be achieved in various ways. In our opinion, the most exciting way to apply a clicktag is via the contextual menu.

First, you have to make sure that you have at least one clicktag added in the banner settings. Next, select the component on which you want to apply a clicktag, and then press the right mouse button. From the contextual menu, select Add->Clicktag->Name of your clicktag, and you will have a component with a clicktag on top of it.

5 Adding A Click Tag Through Contextual Menu In Action
Adding a clicktag through the contextual menu in action

Add a global clicktag

There are situations where you can end up with a lot of ads that are not compatible with Adform’s specifications, which might mean that the clicktag was applied incorrectly or that it was not implemented at all. For the latter reason, we have a feature in place: an auto suggestion for applying a global clicktag when you upload your banner. When the clicktag is applied incorrectly, however, this might not work. For this reason, you need to manually apply the global clicktag.

6 Adding A Clicktag Through Contextual Menu In Action
Adding a global clicktag workflow

Share a copy of your ad

There are situations when you need to share the progress of your ad. Typically, you do not want other people to mess with the banner, you carefully assembled. The solution for this is to create a copy of your ad. Simply press on the three dots icon in the top right corner, and select Share from the drop-down menu.

7 Sharing A Copy Of The Ad Showcase
Sharing a copy of the ad showcase

Want to use all of these powerful features?

These and more powerful features are available in the HTML5 Studio by clicking here. And it‘s totally free.