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!

Navigating Around Builder

 

Adform's HTML5 studio allows you to seamlessly create an engaging ad. To get acquainted with our UI, take a glimpse at the following elements:

  • Component list (1) – provides a list of different components that can be inserted into an ad. 
  • Component settings panel (2) – contains all the properties necessary to customize a specific component.
  • Switch between edit and preview modes (3) – the edit mode allows you to select components, which will be included in the ad, customize their settings as well as the position. The preview mode allows you to see what the ad will look like when implemented. You can check animations, clickTags, etc.
  • Open/close component layer tree (4).
  • Component layer tree (5) – allows reordering component layers to make one component layer above another or move layers into a container.

Navigating around new builder

initial

 

Navigating around builder workflow

 

 

  • Builder Based Templates

    Builder based templates consist of a pre-made set of components that you can easily reassemble or quickly switch with your won content. You can find these templates in the overall list of templates.

     

     Browse templates section in Studio

    Builder based templates

     

    If you know the type of a template that you are looking for, you can use the filter functionality, which will allow you to find a template in a time-saving manner. For instance, if you want to choose from Builder Mode Templates only, press on Filter (1) and tick Builder mode templates (2) as per the image below. Afterward, all of the builder templates will be filtered for you. Select any of these to see the benefits of how you can easily create an ad by using a builder based template. Alternatively, you can also browse from different Categories (3) of templates. This feature displays groups of ads that are of similar nature, for example, expandable or floating. 

     

     Filtering builder based templates

    Builder Based Templates 3

     

     Builder based templates workflow

  • Components Tree

     

    Components (layers) tree gives you an overiew of what components you are using while creating an ad. If you want to rearrange the list of components that you have put into work, you can click on a specific component in the list and drag it up or down. That will result in the order of the components displayed in the ad. 

    It is important to know that if you have one of the components either Locked or hidden via Visibility Toggling (read about them below), you will not be able to change their position in the Components tree.

     

     It also has capabilities like:

    Visibility Toggling

     

    Toggling visibility of specific components allows you to work on your ad more conveniently. If you know that a specific component is in place, you can simply hide it via components tree in order to have more space to work on other components. When you are finished, you can show all of the components again in order to see how your ad looks in general.

     

     Using visibility toggling via components tree workflow

     

    Locking Components

     

    Locking specific components allows you to work on your ad more conveniently. If you know that a specific component is in place you can lock it via components tree in order not to accidentally move it or edit it. When you are finished working on your ad, you can unlock components that were previously locked.

     

    Locking components via components tree workflow

     

  • Glossary of Terms
    Action Description
    Alignment Allows you to position your element in line with the margins. 
    Arrangement 

    Allows you to determine your element's position amongst other assets.

    Rotation Allows you to rotate your element according to the entered sum of degrees.  
    Visibility Allows you to either enable to disable the visibility of your element.

    Opacity Allows you to adjust the transparency of your element.
    Call-to-action (CTA) Allows user to trigger a certain action when clicked on a component.
    Dynamic Creative Optimization (DCO)  Type of an ad that displays content that is based on user's data. 
    Secure Socket Layer (SSL) A cryptographic protocol that ensures encryption between user's browser and the server seeking to createk reliable connection. 
    Sandbox Location in HTML5 Studio that stores all the banners that you have recently worked on. 
    Content Delivery Network (CDN) Geographically distributed group of servers that provide high performance of Internet content delivery.