From September, Flash will no longer be supported by Chrome. Prepare for the shift towards HTML5 by visiting our Flash to HTML5 help page

Check it out!

Expert

  • Tutorials
    Working 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:

    Image1

    Image2

    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. 

    Interstitial1

    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.

    Intersitial2

    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.

     

    Interstitial3

    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.

    Interstitial4

    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>

     

    Interstitial5

     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 Horn in the left bottom corner. Thanks!

    Note that Studio has more templates like this which you can edit easily.