Link and Click Action
Both properties have the same functionality, but for the text and button element it’s named Link but for the rest of the elements it calls Click Action
Click Action (Link) could be applied to the following elements:
- Text
- Rectangle
- Image
- Icon
- Button
Press on the square with a plus icon for Link or toggle on for Click Action and just below will appear the default Click Action (Link) property called No URL/Element
External URL
Click on No URL/Element and fill it with the desired site link or just paste copied link, to open in a new tab make sure that the toggle button is on (blue color)
Press on the arrow that indicates the down direction, this will open a dropdown with a bunch of properties, choose any property from the list:
- Page
- External URL (default)
- Scroll to Element
- Phone
- Open overlay
- Close overlays
Page
Choose any page from all the active created pages, selected page name will change its color to blue, don’t forget to toggle open in a new tab switcher if the page needs to be open in a new browser tab.
Scroll to Element
Choose any element from the page, it could be on the top of the page or on the bottom, in fact, at any position on the page, select desired element, and once clicked page viewport will land just exactly on the position of the selected element.
After selecting, in the selection box will appear a unique code that is individually assigned to each element.
Fill in the desired email address or just paste it and once the layer will be clicked it will redirect to the default email client with the possibility to send an email to the indicated email address.
Optional fill in with custom text message Subject and Body.
Don’t forget to toggle open in a new tab switcher if the following action needs to be open in a new browser tab.
Phone
Click on the Phone number and fill it with the desired number or just paste the copied number. This action will redirect the user to call immediately after clicking the layer, usually through Skype.
Open overlay
Overlay means covering the content of the page with a coating. In other words, it is used to set one thing on top of another.
Choose any element outside the page, just right as on the sample below.
Check the result on the preview mode, if the result is not perfect, play around with Position and/or Overlay background make it darker or brighter, change the color or turn off the Close when clicking outside option.
Note: If Close when clicking outside option is turned off and there is no Close overlays property applied there will be no chance for the user to close appeared overlay.
An overlay could be a group of elements not just only one element, for this, all the desired elements from the canvas need to be grouped.
Click on one layer and after hold shift and choose more.
Choose all the layers and press on the right mouse click and a bunch of options will appear, choose Group Layers and click on it or use the shortcut command + G for Windows use CTRL + G
Close overlays
This property is usually used when Close when clicking outside option from Open overlay is turned off or when an additional option for the Close overlays is required.
Let’s use this Group Layers sample, for this case individually imagine that the Open overlay property was turned off Close when clicking outside option.
So, when the image will be clicked it will appear that Group Layers but without having the option to close it and return back.
Apply the Close overlays option just for the Close text layer, this will close the overlay only when the Close text will be clicked.
