Good to know
HTML5 Studio has got some additional features that every user might find convenient for use and time-saving while working on your ads.
Component alignment snapping feature allows you to position your component in accordance with the grid so the arrangement of your ads is precise. To do so, hold your left mouse button on your component while dragging it across the dashboard. If component alignment snapping prevents you from positioning your component from the required place, you can just disregard the snapping.
Using component alignment snapping
Drag and Drop on Top of Builder Mode
The most convenient and time-saving method of uploading an image or a video to the Builder 3.0 is by dragging the asset on top of the builder and dropping it as per the video below.
Dragging and dropping an image on top of new builder workflow
Dragging and dropping video file on top of new builder workflow
You can open the contextual menu by pressing the right mouse button anywhere in the builder.Align
You can align components by leveraging the Align option. To do so, press the right mouse button on the component that you want to align and select Align from the given contextual menu and choose whether you want to position your component in the Centre, to the Left or to the Right, at the Top, in the Middle, or at the Bottom of the dashboard.
Using Align within contextual menu workflowQuick clickTag
You can quickly add a clickTag on top of almost any component inside the builder. To begin with, you have to make sure that you have at least one clickTag added to your Banner Settings. Afterward, click the right mouse button on the component, to which you want to add a clickTag, and select "Add"->"ClickTag"->(clickTag name) from the contextual menu.
Quickly adding a clickTag via contextual menu
Initially Hidden Components
Component visibility option allows you to hide or display the selected component. The hidden component is not visible until it is triggered by a specific action (for example, a click, a press, a mouse in). You may want to have a component hidden if, for example, it has animation 'fade from 0% to 100%', and the trigger is needed before the animation starts.
The components are visible by default. To hide a component, follow these steps:
1. Select a component from the components menu. For example, if you want to hide an image until it is uncovered by clicking a button, select Image.
2. In the image settings tab, click Size & Position (1), uncheck the Visible feature (2), and click Save on the top menu panel.
3. Select the component on which the action is going to be performed. For example, if you want your image to become visible upon an action on a button, select Button component.
4. In the settings tab, click Actions -> New Action and select which user action will trigger the further action. For example, select Click if you want to see an action upon clicking a button.
5. From the drop-down menu, select an action, for example, Change Visibility.
6. If you selected Change Visibility, you will be asked to specify the Action (1), for example, Show, and then select the Target (2), which in this case is the image (Adform banner). You have now instructed to change visibility (show Adform banner) upon clicking on a button. Click Save on the top menu panel.
7. You can now click Preview to see how your image becomes visible upon clicking a button.
Initially Hidden Component applied on stage