Learn how to use Link blocks to turn any element, like an image, or any layout, like 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. Link blocks can turn any element, like an image, or any layout, like a banner, into a link.
In this lesson:
To add a Link block to your project, open the Elements Panel (shortcut: A) in the left sidebar, and drag a Link block element onto your page.
Any element, except for other links, can be dragged into the Link block, either from the Add panel or from the canvas.
Link blocks are as flexible as Div blocks when creating layout and structure. They're often used to create layouts, like a list of blog posts, that link to other pages.
Link blocks are interactive, so it’s best practice to set a different hover state on the Link block to show users that it’s clickable. Follow these steps to style the hover state:
Try changing the background image on hover:
By default when any text is placed inside of a Link block, it displays blue and underlined because that’s the default text styling on the All links tag.
You can change the default link styling on a specific Link block by overriding the text decoration and font color:
Changing Link blocks to Div blocks and vice versa is helpful when you realize that you used a div block instead of a link block to group elements. It's also useful to quickly swap one for the other if you need to change the way the block functions.
To change a Link block to a Div block, right-click the Link block and convert it to a Div block.
To change a Div block to a Link block, right-click the Div block and convert it to a Link block.
Note that if your Div block contains any link element, you’ll see an error and you won't be able to convert the Div block to a Link block. That's because, it's not possible to nest links. You need to start by removing all link elements nested in the Div block, or converting Link blocks to Div blocks.