Components are building blocks designed to simplify the process of creating appealing and functional ads.
To select a component:
-
Log in to Adform Studio.
-
In the left sidebar, click NEW > Banner.
-
To open a blank Builder workspace, in the list, click Builder Mode: Standard Blank.
-
At the top of the page, in the toolbar, click
.
-
Select a component you want to add.
Component Settings
When you select a component, a settings panel opens with a list of customizable component properties. Some properties are specific to different components. (See the description of each component below.)
The following properties are standard for all components:
-
General > Advanced Settings: Customize the opacity of the image and detect dimensions automatically.
-
Size & Position: Configure visibility, rotation, arrangement, alignment, size, and position of the component.
-
Actions: Add an action that will be performed on click, or on hover. For example, opening a landing page if a viewer clicks on the banner.
-
Animations: Add animation to the component. You can apply multiple animations to the same component.
Image
The most basic and the most popular component when building any type of banner is an image. Usually, when creating a banner, one should already have a .psd file or image assets that are used to create the actual banner.
To upload the image:
-
In the General section, upload the image from your local computer by dragging the image to the builder workflow.
-
Alternatively, choose Select another source option and upload the image from your asset images, additional files or by indicating an external URL link of the image.
Shape
With the Shape component you can customize the background or a particular element of your ad. You can change the color, opacity, and size of the shape. The background of an ad can also act as a call-to-action button as it can provoke certain actions like opening a click tag or other available actions.
Text
Text component allows you to compose interactive (or basic) slogans.
You can customize the following settings:
-
General: Present your text in bold, italics, or underlined font styles. Also, customize font, size, color, and the position of your text.
-
Advanced Settings: Allows you to customize your text and its visual representation even further.
Container
A container groups different components into one and lets you work with them as if they were a single element. With the help of a container, you can apply animation to all of the components at once. Having multiple containers allows you to have more animations applied to the same components.
To move components or layers into a container:
-
In the left side bar, in the components tree, select a specific component in the list and drag it up or down.
-
Double-click on the container and add needed components.
Buttons
There are three different button component options to choose from: Button (basic), Close, and Navigation.
Button (basic)
With our basic button component, you can create as many CTA buttons as you need. The component is highly configurable and allows you to change text, font styles, font sizes, and colors conveniently. By clicking on different button states — Normal, Hover, and Active — you can adjust the look of the button when a user hovers or clicks.
Close
The 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). Adform Studio provides five different styles for the button. Additionally, youcan import your own by clicking Select another source option and uploading an image from your asset images, additional files, or by indicating an external URL link of the image.
To enable the most basic way of closing the ad:
-
Go to Actions > New Action > Click.
-
In Do Action dropdown list, select Change Visibility.
-
Turn on Hide.
-
In Target dropdown list, select the component that you want to close.
Navigation
The navigation button component lets you add a button that contains navigation functionality to any of the ads you are building. It is mostly used together with Product DCP, Panel Slide, Cube, or other components of similar nature.
Adform Studio provides multiple different styles of buttons, but you can import your own buttons by clicking Select another source option and uploading an image from your asset images, additional files, or by indicating an external URL link of the image.
Product Retargeting
The Product Retargeting component allows you to create a DCO (Dynamic Creative Optimization) ad with Adform Studio Builder. The component is highly configurable - you can choose from different templates, schemes of color, the number of items you want your ad to show, and scroll direction.
You can customize the following settings:
-
Custom Color: Create a custom color scheme.
-
CTA: Either enable or disable the display of CTA button and choose its label.
-
Price: Specify how to display the price - decimals, the currency symbol, and the symbol's position.
-
Product Feed: Indicate Client ID as well as Template ID and choose the Targeting Engine from the given options.
-
Font: Configure the display of the wording used in the ad.
Video
To upload a video:
-
Drag the video to the Builder workspace.
-
In the components list, select Video, and upload the video manually by double-clicking to upload it.
Note
.mp4, .webm, .ogv video formats are supported.
You can add several videos to the component. Also, you can upload posters that will be shown before the video, add clickTAGs, and modify video settings in the Advanced Settings tab.
Advanced Settings
In the Advanced Settings section, manage the following settings:
-
Video Control: This feature allows you to either show all controls, show play and audio control, show only audio control, or hide all controls.
-
Video controls theme: 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 vice versa.
Actions
In the Actions section, you can add a new action that is prompt by one of the options provided in the dropdown list. Any of the chosen options allows you to either trigger a certain action, change visibility, or control animations.
Cube
A Cube presentation component creates a banner, where the new image rotates in-view as in 3D Cube.
To set up a Cube component, you can either choose to customize the component via the Simple or the Advanced settings. However, if you start customizing your ad with, for example, the Advanced set of settings, you'll no longer be able to use the Simple ones, and vice versa.
Customize the following settings in the Simple tab:
-
Select either the horizontal or vertical direction toward which your ad will be rotating.
-
Specify whether you want to enable auto-rotation.
-
Specify whether you want to add default buttons.
Customize the following settings in Advanced tab:
-
Indicate the number of sides you want your ad to have.
-
Adjust the width and height of your panel in % or pixels.
-
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 the total animation time.
-
Adjust the perspective in pixels.
-
Specify if you want to allow parent swipe which allows you to maintain the functionality of rotation or animation of another component within the Cube component.
-
If needed, upload a custom Swipe Icon.
Note
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 will not be accessible.
After you are done with the primary settings, double-click on Cube 1, and select Add New Panel. From here you can add different components or import files by dragging them on the Cube and modifying them in the same manner as the components.
Panel Slide
A Panel Slide presentation component creates a banner where the new image slides into view one after another.
To set up a Panel Slide component, you can either choose to customize the component via the Simple or the Advanced settings. However, if you start customizing your ad with, for example, the Advanced set of settings, you'll no longer be able to use the Simple ones, and vice versa.
Customize the following settings in the Simple tab:
-
Select either horizontal or vertical direction toward which your ad will be rotating.
-
Specify whether you want to enable auto-rotation.
-
Specify whether you want to add default buttons.
Customize the following settings in the Advanced tab:
-
Adjust the width and height of your panel in % or pixels.
-
Define whether you want to have buttons on each panel or should they be shown on the initial panel only. Also, whether they should be displayed horizontally or vertically.
-
Add navigation bullets.
-
Set transition time as well as total animation time.
-
Specify if you want to allow parent swipe which allows you to maintain the functionality of rotation or animation of another component within the Panel Slide component.
-
If needed, upload a custom Swipe Icon.
Note
If you disable Auto-animate, you won't 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.
After you are done with the primary settings, double-click on Panel Slide 1, and select Add New Panel. From here you can 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
Use Countdown component to create banners with countdown functionality.
In the General settings, in Duration option, specify how many numbers a viewer sees while waiting for the countdown.
Example of countdown component applied on stage:
Example of Countdown component used in synchronization with other components:
Parallax
A Parallax presentation component creates banners where parallax effect serves as an inline ad where image content moves along with the scrolling.
-
Automatic option intensifies either horizontal or vertical movement of the content inside the ad.
-
Manual option enables or disables easing and controls the distance moved of each component.
-
Advanced option allows you to configure the intensity of horizontal or vertical movement of each component separately.
Slice
A Slice presentation component creates a banner where the new image is revealed in slices which slide into view one after another.
Customize the following settings:
-
General: Set the rotation direction, specify the number of slices (how many parts an image is divided to when rotating) as well as the number of slice sides.
-
Advanced Settings: Set the tempo of rotation.
When 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, navigate to the Component Tree.
Carousel
A Carousel presentation component creates a carousel-style gallery banner.
To set up a Carousel component, you can either choose to customize the component via the Simple or the Advanced settings. However, if you start customizing your ad with, for example, the Advanced set of settings, you'll no longer be able to use the Simple ones, and vice versa.
Customize the following settings in the Simple tab:
-
Select horizontal or vertical direction towards which your banner will be rotating.
-
Specify whether you want to enable auto-rotation.
-
Specify whether you want to add default buttons.
Customize the following settings in the Advanced tab:
-
Adjust the width and height of your panel in % or pixels.
-
Define the panels spacing.
-
Choose whether you want to have buttons positioned horizontally or vertically.
-
Set transition and total animation times.
-
Adjust perspective.
-
Specify if you want to Allow Parent Swipe, which lets you maintain the functionality of rotation or animation of another component within 3D Cube.
-
If needed, upload a custom Swipe Icon.
Note
If you disable Auto-rotate, you won't be able to set Total Animation Time and you won't be able to use a custom Swipe Icon. Alternatively, if you disable Default Buttons, the options for Buttons Position won't be accessible as well.
When 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.
Particles
The Particles effect component lets you add animation effects based on particle systems.
In the General section, select an effect from the Presets dropdown list, or select Custom option to upload an image of your own.
You can customize the following settings:
-
General: 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.
-
Advanced Settings: set Speed, Scale, Opacity, and Rotation to Random. Additionally, you can set the rotation to Automatic, and choose whether the movement of particles should start from Empty Stage or start On Action.