Berlin - Components | Map of clicks

"Map of clicks" is a component that allows turning an image into an interactive element, adding clickable areas to open different elements (popups, documents, or websites).

This component is added within the screens by default (See here) and pop-ups (See here), but it can also be added inside other components (for example, a Row).

You will find this component in the group of "Image" components.



Setup process

1. Access "Properties" tab, go to "Resource" and click on "Examine" to browse and select an image from the unit Resources folder (see here). Additionally, you can configure the rest of properties of this component.

2. Access the “Add” tab and add as many “Areas” as you need. By default, areas are created on the left-upper area of the image. Their position can be changed as preferred.

3.  Click on each created "Area" to move and resize the image, if you wish. You can also go to its properties and decide what will happen when clicking on the area: "Link to popup", "Link to resource" or "External link".

4. Finally, select the Map of clicks, go to "Add" tab and insert an "Instruction" or "Caption" (if required).

Map of clicks Properties

PROPERTY

DESCRIPTION

Resource

Image file that will be displayed. We will click on "Examine" to access the unit Resources folder (check here), and select the image we want to show. Supported image formats: jpeg, png, and gif.

Title

Title chosen for the Map of clicks. Optional

Alternative text

Text that describes the launcher. This text will be shown when the user places the cursor over the image. It will appear also when the image does not charge.

Width

This property allows changing the space occupied by a component inside a central column of contents. This component occupies 100% of the space by default. Text size can be reduced to other preset percentages or can be displayed in full-size. For some quote styles, "Full" width makes quotes lay over the central column.

Align

This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%.

Float

It allows inserting a component and "wrap" it with a text.

  1. First, we should select a size percentage under 100% in "Width" property (25%, for instance).
  2. "Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text).
  3. We use arrows to move the component and put it on the text. .



Clickable area Properties

PROPERTY

DESCRIPTION

Link to popup

This field allows selecting the popup we want to open when clicking on each image.

Link to resource

Image file that will be displayed. We will click on "Examine" to access the unit Resources folder (check here), and select the image we want to show. Supported image formats: jpeg, png, and gif.

External link

If we want to link a website, we should include its URL in this field.

Title

Title chosen for the Map of clicks. Optional

X Position (px)

Horizontal position where the clickable area begins. It is measured in pixels.

Y Position (px)

Vertical position where the clickable are