Components

Toma
Toma
  • Updated

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

Some components have an option to enable Dynamic Items.

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, for example, clickable and animated.

To use image component:

  1. Choose a new image component via Component list.   

  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 Save.

In the Advanced Settings option in the General section, you can customize Opacity and detect dimensions automatically.

The image component automatically detects the dimensions of the uploaded image. If an image of a very large resolution is uploaded, you can resize it using the Size and Position section.

In the Actions section, you can add an action that'll be performed on click, or on hover.

components_1.png

Shape

With the Shape component you can 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. The background of an ad can also act as a cal-to-action button as it can provoke certain actions like opening a clickTAG or other available actions. Additionally, you're also able to apply animations.

components_2.png

Text

Text component allows you to compose interactive (or basic) slogans. You can present your text in bold, italics, or underlined font styles, 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 and Position allows you to configure visibility, rotation, arrangement, alignment, size, and position of the component. You can set an action that a click or a hover would trigger, for example, opening a landing page if a viewer clicks on the banner. Additionally, you can apply animations to the text component.

components_3.png

Container

A Container groups 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.

In the Size and Position section you can set visibility, rotation, arrangement, alignment, size, and position of the component. You can set an action that a click or a hover would trigger, for example, opening a landing page if a viewer clicks on the banner. 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 Adform Studio) to move components/layers into a container or, alternatively,  you can include more components by double-clicking on the Container.

components_4.png

Buttons

There are three different button component options to choose from:

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 on it.

In the Size and Position section, you can configure visibility, rotation, arrangement, alignment, size, and position of the component. Additionally, you can apply animations.

components_5.png

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 of the button but you can 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.

In the Size and Position you can 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 dimensions automatically. Additionally, you can apply animations.

components_6.png

Navigation

The 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. 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. The Advanced Settings option allows you to apply Opacity level and detect dimensions automatically.

In the Size and Position section you can configure visibility, rotation, arrangement, alignment, size, and position of the component. Additionally, you can apply animations.

components_7.png

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 and you can choose from different templates, schemes of colors (although you can also 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. In the Price section, you can specify how to display the price: decimals, the currency symbol, and the symbol's position. In the Product Feed section, you can indicate Client ID as well as Template ID and choose the Targeting Engine from the given options. In the Font section, you can configure the display of the wording used in the ad.

In the Size and Position section you can configure visibility, rotation, arrangement, alignment, size, and position of the component. Additionally, you can apply animations.

components_8.png

Video

To upload a video, you can drag 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 add several videos, apply posters that'll be shown before the video (by uploading images 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. You can set an action that a click or a hover would trigger, for example, opening a landing page if a viewer clicks on the banner. Additionally, you can apply animations.

Advanced Settings

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

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.

components_9.png

Video controls themeindicates 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.

video_controls.png

Actions

The Actions tab allows you to add a new action that's 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.

components_10.png

Cube

With the 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 which can be found in 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'll no longer be able to use the Simple ones and vice versa.

Simple Settings Menu

In the Simple settings tab you can:

  • Select either horizontal or vertical direction toward which your ad will be rotating.

  • Enable Auto-rotating.

  • .Add Default Buttons.

components_11.png

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.

components_12.png

In the Size and Position section you can configure visibility, rotation (°), arrangement, alignment, size, and position of the component. You can set an action that a click or a hover would trigger, for example, opening a landing page if a viewer clicks on the banner. Furthermore, you can apply animations. 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 Side

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 you can find in the Presentation section.

You can either choose to customize your ad via the Simple or the Advanced settings from the General tab. 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.

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.

components_13.png

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).

  • Define 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 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.

components_14.png

In the Size and Position section you can configure visibility, rotation (°), arrangement, alignment, size, and position of the component. You can set an action that a click or a hover would trigger, for example, opening a landing page if a viewer clicks on the banner. Additionally, you can apply. 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

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's under the Effects and Interactions section. You'll be presented with the 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 can select the the initialization method of a countdown as well as the countdown graphics in the General section.

The Size and Position allows you to configure visibility, rotation (°), arrangement, alignment, size, and position of the component. You can set an action that a click or a hover would trigger, for example, opening a landing page if a viewer clicks on the banner. Certain actions can be triggered when the countdown has started or timed out. Additionally, you can also apply 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 moves along with the scrolling. To get you started, navigate to the list of Components and choose Parallax that's under the Effects and Interactions section. You'll be presented with the 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 and Position allows you to configure visibility, rotation (°), arrangement, alignment, size, and position of the component. You can set an action that a click or a hover would trigger, for example, opening a landing page if a viewer clicks on the banner. Additionally, you are also able to apply a number of animations.

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. You will be presented with the settings window 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.

In the Size and Position section, you can configure visibility, rotation (°), arrangement, alignment, size, and position of the component. You can set an action that a click or a hover would trigger, for example, opening a landing page if a viewer clicks on the banner. Additionally, you can apply 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, navigate to the Component Tree.

components_15.png

Carousel

With the 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, 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.

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.

components_16.png

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.

components_17.png

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.

In the Size and Position section, you can configure visibility, rotation (°), arrangement, alignment, size, and position of the component. You can set an action that a click or a hover would trigger, for example, opening a landing page if a viewer clicks on the banner. Furthermore, you can apply 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.

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 and Interactions.

components_18.png

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.

components_19.png

In the Advanced Settings section, you can 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. In the Size and Position section, you can configure visibility, rotation (°), arrangement, alignment, size, and position of the component. You can also set an action that a click or a hover would trigger, for example, opening a landing page if a viewer clicks on the banner, and apply animations.

Was this article helpful?

/
How we can make it better?

Thank you for your feedback!