With Link Block you can turn any element or block (for example, an image, or a banner) into a link.
Link Blocks are similar to Div Blocks in that they can be used for structure and layout, but the area inside of the Link Block becomes a link. They are often used to create lists of goods or services that link to other pages.
Adding elements into a Link Block
Any element, except for other links (text link, button), can be dragged into a Link Block, either from the Elements panel or from the Canvas.
Other links are not allowed to be nested inside a Link Block, but what you can do is drop in a text block element and style it to look like a button.
Styling of Link Blocks is as flexible as Div Blocks.
Link Block has already some default style properties:
- Display mode - Inline-flex
- Font - 16px, blue
- Border color - blue
- Cursor - Pointer (shows whether a button is clickable or not when hovered)
You can change these styles and add new ones in the Styles settings in the right panel.
Hover state styles for a Link Block
Link Block is a clickable element, so it is recommended to set different styles for the hover state of a Link Block to show users that it is clickable. For example, you can add a shadow or other effects.
To smoothly move from one style to another, use the Transitions effect for the styles of all link block states.
For Link Blocks, click-triggered actions are usually used. However, it is also possible to set hover-triggered actions.
By default, click-triggered actions are set to Link Blocks. You can change or customize the action on the Logic tab in the right panel.
To do this, click on the icon to the left of the action name.
You can find the following options in the action settings:
- Action trigger – condition for an action to take place: upon clicking or hovering.
- Action – an action that will take place upon clicking or hovering.
The following actions are available when clicking on a Link Block:
- Go to link – add a link in the Link field that will be used to move to another page when clicking a Link Block. You can set to open the link in a new tab.
- Go to page – select a project page from the drop-down list, which you will be redirected to when clicking on a link block. You can set to open the page in a new tab.
- Go to anchor – use Select element button to set an anchor on a page (for example, a section), which you will be redirected to when clicking on a Link Block.
- Send mail – add an email address in the Email field, which a user letter will be sent to. When clicking on a Link Block with the Send mail setting, a user application will be opened for sending a message.
- Phone – add a phone number in the Phone field that will be dialed when clicking on a Link Block. This action is available on mobile devices.
- Show element – use Select element to set an element that will be shown when clicking on a text link. You can also select the Display setting from the list for this element.
- Hide element – use Select element to set an element that will be hidden when clicking on a Link Block.
- Toggle element – use Select element to set an element that will switch its current display state to the Display value from the list and vice versa.
The following actions are available when hovering a block link:
- Show element
- Hide element
- Toggle element