TutorialsWorking on Mobile Interstitial Ad
In this tutorial you are going to learn how to work with Studio templates in general. Also, how to amend one of the most popular Studio templates - mobile interstitial in the Expert mode by using the Studio File browser and Studio Code editor.
Firstly, you need to have a few images prepared:
You can download them and keep them under your computer files. Let's go to studio.adform.com and find the template on which you are going to work right now.
Press on the Create banner option and from the Category drop down menu select the "Mobile" option. From the Format drop down menu select the "Interstitial" option.
1. Selecting the template
On the left top corner you will see a couple of icons. Select the last one - "File browser". You will be working with the files browser (in the screen on the left cornern) and the code editor (at the bottom) throughout this tutorial.
2. Using file browser and code editor
In the assets folder of the ad find the logo.png. By hovering on it you will see an icon of three dots appearing. By pressing on those dots you will be able to rename, download, reupload, or delete the file. The easiest way is to update the file so we click on the Reupload file button and select the logo from your computer which you have previously downloaded to your PC. You can do the same for the "mike_happy.png" image. Replace it with the other image you have downloaded previously.
3. Replacing the images in the file browser
You can edit any element through the code editor. At this point, you will update the background color of the ad by amending the background-color property of the "body" element. You will use an HTML color of #dddddd which is light grey. You can find many color codes in here: http://html-color-codes.info/. You can do the same with any other element in the banner. Try changing the color of the close button too.
4. Changing banner background color
The last thing you are going to do is changing the text in the banner. Also, in the Studio code editor almost at the bottom find these lines:
<li class="title">Interstitial Ad</li> <li class="text">Ad dimensions depend on the screen size</li>
5. Changing banner text in the html file
and change this text to whatever you like. Here is our ready made banner preview.
Send us feedback about Adform's HTML5 Toolkit by simply clicking the feedback icon in the left bottom corner. Thanks!
Note that Studio has more templates like this which you can edit easily.