Work With Adform Studio

Greta
Greta
  • Updated

Adform Studio has additional features that allow you to take shortcuts and save time when working on your HTML5 banners.

Component Alignment Snapping

Component alignment snapping feature allows you to position your components in accordance with the grid and makes sure that your banner arrangement is precise.

To use component alignment snapping, drag your component across the banner. You can see the alignment snapping lines showing up in red:

Note

Component alignment snapping is helpful, but not required. If it prevents you from positioning your component in the desired place, you can just disregard this feature.

Drag to Builder

Builder allows you to upload images or videos by dragging them from your device to Builder workspace. It's a time saving feature that skips several steps in the component adding process.

You can see an example of the dragging feature in use:

Contextual Menu

Contextual menu allows you to quickly add any component to your banner and position the banner in the center of the workspace.

To open contextual menu, click the right mouse button on or around the banner in the Builder workspace.

Alignment Options

Alignment options allow you to vertically and horizontally align the components in your banner.

Available alignment options:

  • Horizontal: Left, Center, Right

  • Vertical: Top, Middle, Bottom

To use alignment options:

  1. In the workspace, click the right mouse button on the component in your banner that you want to align.

  2. In the dropdown list, click Align.

  3. Select an alignment option.

  4. In the toolbar at the top of the page, click Save.

You can see an example of alignment options in use:

Quick clickTAG

Builder allows you to quickly add a clickTAG to almost any component inside your banner.

Note

Before you can add a clickTAG to your component, make sure that you have added at least one clickTAG in your Banner Settings.

To add a clickTAG to your component:

  1. In the workspace, click the right mouse button on the component in your banner to which you want to add a clickTAG.

  2. In the dropdown list, click Add > ClickTag > clickTAG.

  3. If you have more than one clickTAG, in the component settings panel, select the clickTAG to use.

  4. In the toolbar at the top of the page, click Save.

You can see an example of how to add a clickTAG:

Initially Hidden Components

Component visibility option allows you to hide or display a selected component. The hidden component isn't visible until it's triggered by a specific user action, such as a click, a press, or other. Keeping a component hidden can be useful if, for example, it has a "fade from 0% to 100%" animation and you need a trigger to start it.

All components are visible by default. To hide a component:

  1. Click the component that you want to hide.

  2. In the component settings panel, click Size & Position.

  3. Unselect the Visible checkbox.

  4. In the toolbar at the top of the page, click Save.

To create the action that reveals the hidden component:

  1. Click the component that you want to trigger the action.

  2. In the component settings panel, click Actions.

  3. Click New Action.

  4. In the dropdown list, select the user action that reveals the hidden component.

  5. In Do Action dropdown list, select Change Visibility.

  6. In Action options, click Show.

  7. In Target dropdown list, select the hidden component.

  8. In the toolbar at the top of the page, click Save.

To preview and test your banner, in the toolbar at the top of the page, click Studio_mode_preview.png.

You can see an example of hidden components in use:

Was this article helpful?

/
How we can make it better?

Thank you for your feedback!