Components are building blocks created for you in order to simplify the process of creating beautiful and functional ad's.
1) Components section in new builder
This component is the most basic and the most used when building any type of ad.
Usually, one that is creating an ad already has a *.PSD file or image assets which will be used to create the actual banner. Having HTML5 as a technology and this studio's as a helper enables bringing images to life and making parts of an ad interactive, i.e. clickable and animated.
To use image component, simply:
- Insert a new Image component;
- Upload an image from your local computer;
- Click the Save button.
Image component automatically detects dimensions of the uploaded image. If image of a very large resolution is uploaded, it is possible to resize it using the Size & Position section.
1) An image component applied on Stage
1) Adding image component workflow
Shape is a simple component. Mostly used when you need to apply a background for particular element of your ad or for the whole ad. You can easily change the color, opacity and size for shape.
1) Shape component with changed color
2) Adding a shape component workflow
Text component gives a possibility of making slogans and "call to action" messages without using images.
1) Text component applied on Stage
2) Adding a text component workflow
Container is dedicated for grouping other components and working with them as with one (grouped) element. It allows grouping of different components where afterwards you can move around your grouped components or apply animation to all of them at once. Nesting multiple containers allows having more animations applied to the same components.
Use Components Tree (that is accessible from the left panel) to move components/layers into a container or you can apply more components inside of it by double clicking on the Container.
1) Container component applied on Stage
2) Using Container component workflow
Button components in builder:
1) Selecting button components workflowBasic
With our simple button component you can easily create as much as you like call-to-action buttons. Component is easily editable. Change texts, fonts, font sizes, colors without any hassle. You can also change how the button should look like when the user hover's or click's on the button by simply switching between different states in our settings UI (visible in the screenshot).
1. Basic button component applied on Stage
2. Basic button component usage workflowClose
Close button component is a simple manifestation of a basic button. With this you can simply add a close button functionality to any of the ad's you are building (mostly used within floating and expanding ad's).
1) Close button applied on Stage
2) Using close button component workflow
Navigation button component is a simple manifestation of a basic button. With this you can simply add a navigation button functionality to any of the ad's you are building. Mostly used together with Product DCO, Panel Slide, Cube or other similar components.
1) Navigation button applied on Stage
2) Using navigation button component
Product DCO component is a simple ability for you to create a DCO ad with Studio. This component is highly configurable via settings (visible on the left in the screenshot).
1) Product DCO component on top of Stage
2) Adding Product DCO component workflow
Please note that you can simply drag and drop your video on top of the builder. It is the simpliest way of applying a video to your builder ad. You can select a video component from the components selection menu or simply upload it via settings user interface menu (visible in the screenshot on the left). 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) or indicate ClickTags, and modify video settings under the Advanced Settings tab. Video can work as call-to-action button and perform certain actions. Additionally, you are also able to apply a number of animations.
The Advanced Settings section is highly configurable and allows you to manage your Video controls as well change the Video controls theme.
The Video Control settings can be found under General Tab -> Advanced Settings -> Video controls. This feature allows you to to either show all controls, show play and audio control, show only audio control, or hide all controls.
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.
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.
Video component applied on stage
Drag and drop video