Webprogramo / Google Web Designer / Basic / How to use components and add events to your HTML5 banner

How to use components and add events to your HTML5 banner

Jorge Ramírez

23 agosto, 2017

Webprogramo / Google Web Designer / Basic / How to use components and add events to your HTML5 banner
SHARE! and the author will get a Yummy Cookie :
Share on FacebookTweet about this on Twitter

Components are pre-built modules that let you add specific functionality to your ads or HTML banners.

They are organized under folders, which you can expand or collapse by clicking the folder name.

 

 

As you can see the basic types of components are:

  • Galleries
  • Interaction
  • Maps
  • Media
  • Miscellaneous
  • Custom Elements

 

Add a component

To add a component to your project, open the components panel and drag the component to the stage, where it can be positioned like any other element. Each component has component-specific properties, and it can be controlled using events in the Events dialog.

 

 

The gesture component lets you capture user interactions with your ad or HTML banner.

 

To add the Interaction component to your project:

Let’s say that we have an image button in our banner, and we want to add the clickable image and take us to a link

  1. Open the Components panel, then the Interaction folder.
  2. Drag the Image button component to the stage.
  3. In the component properties section of the properties panel, and name the component.
  4. The image have 4 diferentes instances: up, over and down. You can select each different images from your assets folder.

 

 

Now go to preview in your browser, and you can get something like this:

 

 

Now is time to set a event to our image button. To do this, just lick in the event panel and then in the plus “+”,

  • Mouse – Click – Generic Ad – Exit ad – GWD ad – And enter your custom URL… And now we are done.

 

That’s it, now you have the basic components and events knowledge. Please use that power to build an awesome and interactive content to your HTML5 banner.