What’s New in the HTML5 Studio’s Builder Mode 2.0?
Donatas Stirbys
Donatas Stirbys
September 14, 2016

What’s New in the HTML5 Studio’s Builder Mode 2.0?

  • html5 studio
  • Builder
  • animations
  • actions & events
  • components

The Builder Mode is a part of the HTML5 Studio's UI and enables users to build and create content seamlessly and without any need to write actual code. With the release of the new version of the Builder Mode in our HTML5 Studio, we have introduced quite a handful of new features. As the list of improvements is too long for one blog post, we are going to cover only what we think will give you the greatest benefits in the entire creative process of creating beautiful and functional ads.

Builder-based templates

This is definitely one of those features that makes our product stand out from the competition. Builder-based templates are prebuilt based on the Builder Mode’s components, which you can easily reassemble, quickly add and remove, or switch with your own content. To find these templates in the HTML5 Studio, use the filter functionality. Press "Filter" and tick "Builder mode templates". Afterwards, all of the Builder-based templates will be filtered for you.

  • Builder-based “3D Cube” template in use: Select the template you need (“3D Cube” in our example) and edit it. The only thing you will need to do is to apply more components or delete the ones you don’t need. Implement your own assets and the ad you created will be ready for serving.

1 Builder Based 3D Cube Template
Builder-based “3D Cube” template in use

New components

In the first version of our HTML5 Studio, you could find basic, but nonetheless important components, like “Image,” “Button,” “Shape” and “Text,” which are still a part of the HTML5 Studio’s components family. With the new Builder Mode release, we have introduced a handful of new components, which may help you with the creative process of creating particular ads:

  • Cube: The “Cube” component allows you to create compelling 3D Cube ads or add 3D Cube functionalities to any type of banner.
  • Panel Slide: You can easily create compelling slider banners with the “Panel Slide” component.
  • Countdown: Add a countdown effect to any type of ad.

2 Countdown Component In Use
“Countdown” component in use.

  • Parallax: This technique creates an illusion of depth between several background images. With the “Parallax” component, the use of this effect in your ads is extremely easy. Simply apply several of your own images.

Actions and events

Actions and events in the HTML5 Studio are extremely useful, as they let you easily enhance the functionality of the components you are using, while allowing you to create more interactive ads. All major events like “Click,” “Press,” “Release,” “Mouse in” and “Mouse out” are now available for you in the HTML5 Studio. Actions vary from simple “Open clicktag” to triggering a video on a custom button click.

3 Adding A Clicktag Via Actions And Events
Adding a clicktag via actions and events in the HTML5 Studio

Multiple animations

The initial version of the Builder Mode had simple animations, which were great, but you were restricted to only one animation while creating your ads. This has improved immensely, as now you can add more than one animation on top of any component and you can do this for two different purposes:

  • Animation that starts on banner load: On load means that your animations will start together with the banner load. This is the default option in the HTML5 Studio Builder Mode, as this is the most common behavior for an animated element in an ad.

4 Move Animation On Banner Load Showcase
Move animation on banner load showcase

  • Animation that starts on a specific action: This means that your applied animations will not start on banner load, but they will start only after a specific action has been triggered by the user. You have to apply the animation and afterwards set an action in the "Actions" section on which your animation will be triggered.

5 Move Animation On Action Showcase
Move animation on action showcase

Ready to get started with the HTML5 Studio’s Builder Mode 2.0?

The new features we just covered are the main changes in the new version of the HTML5 Studio Builder Mode, but these are not the only improvements you might find useful. Therefore, we recommend you get a head start with HTML5 Studio by pressing here. It‘s totally free.