Hotspots are clickable areas on your creatives. When clicked, a defined action from the Events & Actions tab such as opening an URL will take place. Earlier, images were used as hotspots by making the images transparent and assigning actions to them. It was a tedious task and an unnecessary burden on the designer. To resolve this issue, Canvas comes with an inbuilt Hotspot element. Just drag and drop it on the workspace and the clickable area is ready.

Using the Properties tab on the right panel, you can change the properties of the Hotspot element.

Hotspot Name: Displays the name of the hotspot element. You can change the name of the hotspot element by selecting it and entering the desired name.

Position: You can define the positioning of the element on the workspace. The positioning of the element is relative to the workspace.

In the following screenshot, the hotspot element is placed at Zero pixels from the left edge and the top edge. It implies that the element is placed at the top left corner of the workspace.

While manually entering the values for positioning, you cannot enter decimal values.

Height and Width: You can resize an element by dragging the corner handles of the element. Alternatively, you can enter the size of the element on the size fields.

While manually entering the values for resizing, you cannot enter decimal values.

Select Lock icon to keep the aspect ratio locked when resizing the button element.

Rotation: You can rotate the hotspot element by using the rotate lever or entering the value in the angle field.

The angle field displays values from 0 to 360 when the icon is rotated. While using the rotation feature to animate the button element, values must be entered in multiples of 360 to signify how many times the rotation must happen.

Keep initial state as hidden: Upon page load, keeps the hotspot element hidden until a configured action is not performed. You can configure the action on the Events tab. For example, even if an animation is created to fade the hotspot element, it will not show till the show action is triggered.

Position: Position refers to the position of the hotspot element on the workspace. Pinning an element to an edge instructs that element to move as the edge itself moves. When an element is pinned to non-opposing edges on the workspace, the distance of the element from those edges of workspace remains fixed or proportional.

You can define the position of the element as Float or Fixed.

Dimension refers to the fluidity or the fixity of the element container. You can control the resizing aspect of any element by using the two arrows in the Dimension section. When the size of the document changes, the width and height of the element container also changes. If you enable either or both the arrows, the container of the element changes accordingly in height and width. By default, both the arrows are enabled.

To change the dimension of the element in the rendered creative, perform the following: