Link Block Element
An overview of the LinkBlock component.
In this tutorial you will learn how to turn any component e.g. a button, image, text component etc. into a link. Specifically, you will learn how to:
- 1.Add a link block
- 2.Nest components inside of a link block
- 3.Set the link type (internal / external web page etc.)
- 4.Style a link block
To add a link block, head on over to the components panel on the left hand side of the screen & search for LinkBlock.
It is possible to add the link block either through (1) by selecting the link block component & dragging & dropping it onto the canvas or (2) using the arrow buttons at the top of the components panel.
Expanding the navigator you can see that the link block is built out of a link block that contains a div block.
When you nest components inside of a link block they automatically become links themselves. For example, adding an image with some text to your link block will turn both the image & the text into links.
To nest components inside of a link block you can select the link block & use either the drag & drop or the arrow keys.
Since the link block is built out of a link block & a nested div block, it can be difficult to select the link block. To ensure that you're selecting the correct component, you can select a component & use the breadcrumb trail at the bottom of the page builder to check you've selected the correct component.
The link block component gives you the option to link to set a URL that you can link to. There a different types of URL that you can set & these options are made available in two locations.
The types of URL that are available include links to external webpage, internal navigation, page section, email & phone.
Styling a link block works the same way as for other components with a few small differences.
When you add text to a link block it comes with a blue link text by default.
To remove the default blue color this can be done by selecting the heading & changing the color.
As you can see however, it is not possible to remove the link underline by selecting the heading. To remove the underline, you need to do this by selecting the link block. For this reason it can be better to also control the color of the link text from the link block level.
When removing the underline & changing the text color, we used the "Typography" section in our styles panel. From under "Typography" use Styles > Decoration to remove the underline & use the color picker to change the text color.
To style a link color on hover, you first need to create a class for your link block. To do this select your link block & type the name for your class e.g. "link-class", as shown below.
After you've added your class, you'll see a dropdown become available. From here you can pick the Class & the
Once you're in the hovered state, you can then set the "Typograph" within the link block to a color. This will update the link block text to that color on hover event. Lastly, you can remove the hovered state by clicking on the "X" & test.
The final result is shown below, notice that the text inside the link block turns to red when it is hovered over.
Last modified 16d ago