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!

Components

 

Components are building blocks created for you in order to simplify the process of creating appealing and functional ads.

A number of components have an option to enable Dynamic Items. Information regarding this feature can be found here

 

 Components section in the new builder

 

  • Image

     

    This component is the most basic and the most used when building any type of ad.

    Usually, when creating an ad, one should already have a *.PSD file or image assets which will be used to create the actual banner. Having HTML5 as a technology and this studio as a helper, enables you to bring images to life and make parts of an ad interactive, i.e. clickable and animated.

    To use image component:

    1. Choose a new image component via Component list as it is shown here.   
    2. Upload an image from your local computer by either dragging the image to the builder workflow or choosing Select another source option and uploading the image from your asset images, additional files or by indicating an external URL link of the image. 
    3. Click the Save button.

    The Advanced Settings option in the General section allows you to customize Opacity and detect dimensions automatically. 

    Image component automatically detects dimensions of the uploaded image. If an image of a very large resolution is uploaded, it is possible to resize it using the Size & Position section.

    Images can work as call-to-action buttons and perform certain actions. Additionally, you are also able to apply a number of animations.

     

    An image component applied on stage 

    zbs

     

     Workflow of adding an image component  

     

  • Shape

     

    The Shape component allows you to customize the background of your ad or of a particular element of your ad. You can change the color, opacity, and size of the shape. It is important to point out that the background of an ad can also be interactive and act as a CTA button as it can provoke certain actions like opening a Clicktag or other available actions. Additionally, you are also able to apply a number of animations.

    Shape component with changed color

    Shape _comp

     

    Adding a shape component

     

  • Text

     

    Text component allows you to compose interactive (or basic) slogans. You are able to present your text in bold, italics or underlined font style, customize font, size, color, and the position of your text. The Advanced Settings option allows you to customize your text and its visual representation even further. 

    The Size & Position allows you to configure visibility, rotation, arrangement, alignment, size, and position of the component. Text can work as a call-to-action button and perform certain actions. Additionally, you are also able to apply a number of animations.

    Text component applied on stage

    Text component

     

     Adding a text component

     

  • Container

     

    A Container is dedicated to grouping other components into one and working with them as if they were a single element. It allows you to group different components where, afterward, you can move around or apply animation to all of them at once. Having multiple containers allows you to have more animations applied to the same components.

    The Size & Position allows you to configure visibility, rotation, arrangement, alignment, size, and position of the component. The Container of components can work as a call-to-action button and perform certain actions. The Animations section is highly configurable and important information about the section can be found here

    Use Components Tree (that can be accessed from the left side of the studio) to move components/layers into a container or, alternatively,  you can include more components by double-clicking on the Container.

     

    Container component applied on stage

    container

     

    Using Container component 

     

  • Buttons

     

    There are three different button component options to choose from:

    • Basic
    • Close
    • Navigation

     Selecting button components

     

    Basic

     

    With our Basic button component, you can create as many call-to-action (CTA) buttons as you need. The actions that can be triggered by CTA are described here. The component is highly configurable and allows you to change text, font styles, font sizes, colors conveniently. By simply switching between different states in our settings UI (visible in the screenshot), you can adjust the look of the button when a user hovers or clicks on it. 

    The Size & Position allows you to configure visibility, rotation, arrangement, alignment, size, and position of the component. Additionally, you are also able to apply a number of animations.

     

    Basic button component applied on stage

    button general

     

    Basic button component usage

     

    Close

     

    Close button component allows you to add close button functionality to any of the ads you are building (mostly used within floating and expanding ads). The Studio provides five different styles of the button but you are also able to import ones of your own by choosing Select another source option and uploading an image from your asset images, additional files or by indicating an external URL link of the image.

    The Size & Position allows you to configure visibility, rotation, arrangement, alignment, size, and position of the component. To enable the option of the most basic way of closing the ad, navigate to Actions -> New Action -> Click -> Change Visibility -> Hide and choose the component that has to be closed. The Advanced Settings option allows you to apply Opacity level and detect dimension automatically. Additionally, you are also able to apply a number of animations.

     

    Close button applied on stage

    close button

     

    Using close button component workflow

     

     

    Navigation button component allows you to add a button that contains navigation functionality to any of the ads you are building. The mentioned feature is mostly used together with Product DCP, Panel Slide, Cube, or other components of similar nature. The Studio provides multiple different styles of the button but you are also able to import ones of your own by choosing Select another source option and uploading an image from your asset images, additional files, or by indicating an external URL link of the image. The Advanced Settings option allows you to apply Opacity level and detect dimension automatically. 

    The Size & Position allows you to configure visibility, rotation, arrangement, alignment, size, and position of the component. Additionally, you are also able to apply a number of animations.

     

    Navigation button applied on stage

    navigation button

     

    Using navigation button component

     

  • Product Retargeting

     

    Product Retargeting component allows you to create a DCO (Dynamic Creative Optimization) ad with Studio Builder. The component is highly configurable and you are able to choose from different templates, schemes of colors (although you are able to create a custom scheme by yourself), the number of items you want your ad to show, and scroll direction. The CTA section allows you to either enable or disable the display of CTA button and choose its label too. The Price section allows you to enable or disable the price to be shown in decimals, choose the currency symbol and its position as well. The Product Feed allows you to indicate Client ID as well as Template ID and choose the Targeting Engine from the given options. Font section allows you to configure the display of wording used in the ad. 

    The Size & Position allows you to configure visibility, rotation, arrangement, alignment, size, and position of the component. Additionally, you are also able to apply a number of animations.

     

    Product DCO component on top of stage

    DCO

     

    Adding Product DCO component  

     

  • Video

     

    Please note that in order to upload your video, you can do so by either dragging and dropping the video on top of the builder (first video) or you can select the video component from the components menu and upload the video manually by double-clicking to upload  it as per the second video below. Be aware that only the following formats are supported: MP4, WEBM, OGV

    This component is highly configurable. You can apply several videos, apply posters that will be shown prior to the video (by uploading image from your asset images, additional files or by indicating an external URL link of the image), add ClickTags, and modify video settings under the Advanced Settings tab. Video component works as a call-to-action button and performs certain actions. Additionally, you are also able to apply a number of animations.

     

    Drag and drop video  

     

    Advanced Settings

    The Advanced Settings section is highly configurable and allows you to manage your Video controls and change the Video controls theme. 

    Video controls

    The Video Control settings can be found under General Tab -> Advanced Settings -> Video controls. This feature allows you to either show all controls, show play and audio control, show only audio control, or hide all controls. 

     settings zaliai

    Video controls theme

    Video controls theme, which indicates the color of all controls (that are described in Video controls section), allows you to switch from white (Theme 1) color to gray (Theme 2) or vise versa. 

    themes

     

     

    Actions

    The Actions tab allows you to add a new action that is prompt by one of the options, which are shown in the image below. Any of the chosen options allow you to either trigger a certain action, change visibility or control animations. Read more about actions here.

    new aqctions

  • Cube

     

    With Cube builder component you can create compelling 3D Cube ads in a convenient manner. To get you started, navigate to the list of Components and choose Cube that can be found under the Presentation section.

    You can either choose to customize your ad via the Simple or the Advanced settings from the General tab. However, it is important to note that if you start customizing your ad with, for example, the Advanced set of settings, you will no longer be able to use the Simple ones and vice versa. 

    Simple settings menu

    The Simple settings tab allows you to:

    • Select either horizontal or vertical Direction toward which your ad will be rotating.
    • Enable Auto-rotating.
    • Add Default Buttons.

    cube simple

    Advanced settings menu

    Apart from the options that Simple settings have, the Advanced settings tab presents you with more options to choose from:

    • Indicate the Number of Sides you want your ad to have.
    • Adjust the Width and Height of your Panel (in % or px).
    • Choose whether you want to have Buttons on each Panel or should they be shown on the initial panel only and whether they should be displayed horizontally or vertically.
    • Set Total Animation Time, adjust Perspective (in px).
    • Allow Parent Swipe,  which allows you to maintain the functionality of rotation/animation of another component within 3D Cube.
    • Upload Swipe Icon image of your own instead of the default one.

    Bear in mind that if you disable Auto-rotate, you will not be able to set Total Animation Time and alternatively, if you disable Default Buttons, the options for Buttons on each Panel and Buttons position won't be accessible. 

    cube advanced

     

    The Size & Position allows you to configure visibility, rotation (°), arrangement, alignment, size, and position of the component. Cube works as a call-to-action button and performs certain actions. Furthermore, you are also able to apply a number of animationsAfter you are done with the primary settings, double-click on  Cube 1 and select Add New PanelFrom here you will be able to add different components or import files by dragging them on the Cube and modifying them in the same manner as the components

     

  • Panel Slide

     

    With Panel Slide builder component you can create compelling Slider ads in a convenient manner. To get you started, navigate to the list of Components and choose Panel Slide that can be found under the Presentation section.

    You can either choose to customize your ad via the Simple or the Advanced settings from the General tab. However, it is important to note that if you start customizing your ad with, for example, the Advanced set of settings, you will no longer be able to use the Simple ones and vice versa. 

    Simple settings menu

    The Simple settings tab allows you to:

    • Select either horizontal or vertical Direction toward which your ad will be rotating.
    • Enable Auto-animation.
    • Add Default Buttons.

    slide panel simple

    Advanced settings menu

    Apart from the options that Simple settings have, the Advanced settings tab presents you with more options to choose from:

    • Adjust the Width and Height of your Panel (in % or px).
    • Choose whether you want to have Buttons on each Panel or should they be shown on the initial panel only and whether they should be displayed horizontally or vertically
    • Add Navigation Bullets.
    • Set Transition Time as well as Total Animation Time.
    • Enable Parent Swipe, which allows you to maintain the functionality of rotation/animation of another component within Panel Slide.
    • Upload Swipe Icon image of your own instead of the default one. 

    Bear in mind that if you disable Auto-animate, you will not be able to set Total Animation Time as well as Total Transition Time and alternatively, if you disable Default Buttons, the options for Buttons on each Panel and Buttons position won't be accessible.

    Slide panel advanced

    The Size & Position allows you to configure visibility, rotation (°), arrangement, alignment, size, and position of the component. Panel Slide works as a call-to-action button and performs certain actions. Additionally, you are also able to apply a number of animations. After you are done with the primary settings, double-click on  Panel Slide 1 and select Add New Panel. From here you will be able to add different components or import files by simply dragging them on the Panel Slide and modifying them in the same manner as the components

  • Countdown

     

    With Countdown builder component you can create compelling ads with Countdown functionality. To get you started, navigate to the list of Components and choose Countdown that can be found under the Effects & Interactions section and you will be presented with settings of the Countdown component.

    The value entered in the Duration option also indicates the amount of changing numbers one will see while waiting for the countdown as the numbers change every second. You are able to choose the initialization method of a countdown as well as the countdown graphics in the General section.

     The Size & Position allows you to configure visibility, rotation (°), arrangement, alignment, size, and position of the component. Countdown component works as a call-to-action button and performs certain actions. Although it is important to note that with the introduction of this component, a new set of actions was introduced as well. Certain actions can be triggered when the countdown has  started or timed out. Additionally, you are also able to apply a number of animations

     

    Countdown component applied on stage

     

     

     Using Countdown component in synchronization with other components

     

  • Parallax

     

    Parallax component lets you create compelling ads by leveraging parallax effect that serves as an inline ad where image content is moved simultaneously with scrolling speed. To get you started, navigate to the list of Components and choose Parallax that can be found under the Effects & Interactions section and you will be presented with settings of the Parallax.

    The Automatic option in General section allows you to intensify either horizontal or vertical movement of the content inside the ad. The Manual option is supplemented with a possibility to enable or disable Easing and control the Distance moved of each component. The Advanced option allows you to configure the intensity of horizontal/vertical movement of each component separately.

    The Size & Position allows you to configure visibility, rotation (°), arrangement, alignment, size, and position of the component. Parallax component works as a call-to-action button and performs certain actions. Additionally, you are also able to apply a number of animations.

    Parallax component applied on stage

     

  • Slice

     

    With Slice builder component you can create compelling 3D Slice ads in a convenient manner. To get you started, navigate to the list of Components and choose Slice that can be found under the Presentation section and you will be presented with settings of the Slice component.

    The General tab allows you to set the rotation direction, input number of slices (number of parts that the image will be divided to while rotating) as well as the number of slice sides. The Advanced Settings tab provides even more options to configure the visual representation of your ad and set the tempo of rotation. 

    The Size & Position allows you to configure visibility, rotation (°), arrangement, alignment, size, and position of the component. Slice component works as a call-to-action button and performs certain actions. Additionally, you are also able to apply a number of animations

    After you are done with the primary settings, double-click on Slice 1 and select Add New Panel. This will allow you to input different Slice Panels and configure them individually. If you want to change the order of the components inside the Slice, the Component Tree will allow you to do so. 

     slice

  •  

    With Carousel builder component you can create compelling Carousel ads in a convenient manner. To get you started, navigate to the list of Components and choose Carousel that can be found under the Presentation section.

    You can either choose to customize your ad via the Simple or the Advanced settings from the General tab. However, it is important to note that if you start customizing your ad with, for example, the Advanced set of settings, you will no longer be able to use the Simple ones and vice versa. 

    Simple settings menu

    The Simple settings tab allows you to:

    • Select either horizontal or vertical Direction towards which your ad will be rotating.
    • Enable Auto-rotation.
    • Add Default Buttons.

    carousel simple

    Advanced settings menu

    Apart from the options that Simple settings have, the Advanced settings tab presents you with more options to choose from:

    • Adjust the Width and Height of your Panel (in % or px).
    • Indicate Panels Spacing
    • Choose whether you want to have Buttons positioned horizontally or vertically.
    • Set Transition time and Total Animation Time.
    • Adjust Perspective
    • Allow Parent Swipe,  which lets you to maintain the functionality of rotation/animation of another component within 3D Cube.
    • Upload Swipe Icon image of your own instead of the default one.

    Carousel advanced

    Bear in mind that if you disable Auto-rotate, you will not be able to set Total Animation Time and you won't be able to use custom Swipe Icon. Alternatively, if you disable Default Buttons, the options for Buttons Position won't be accessible as well.

    The Size & Position allows you to configure visibility, rotation (°), arrangement, alignment, size, and position of the component. Carousel works as a call-to-action button and performs certain actions. Furthermore, you are also able to apply a number of animations. After you are done with the primary settings, double-click on Carousel Panel 4 and select Add New Panel. From here you will be able to add different components or import files by simply dragging them on the Carousel and modifying them in the same manner as the components

    Carousel component applied on stage

     

  • Particles

     

    With Particles builder component you can create compelling ads with an addition of particles in a convenient manner. To get you started, navigate to the list of Components and choose Particles that can be found under the Effects & Interactions.

    Particles general

    You can either choose a particle from the given Presets or upload an image of your own. The General tab has the options to modify the Quantity of particles, the Speed of them moving inside the ad, the Turbulence showing changes in the movement of particles, and Direction complemented by Degrees to specify the angle of the movement. 

     Particles advanced

    The Advanced Settings tab allows you to put such criteria as Speed, Scale, Opacity, and Rotation at a random level. Additionally, you are able to set the rotation to Automatic and choose whether the movement of particles should start from Empty Stage or start On ActionThe Size & Position allows you to configure visibility, rotation (°), arrangement, alignment, size, and position of the component. Particles component works as a call-to-action button and performs certain actions. Furthermore, you are also able to apply a number of animations