Turn any element or layout, like an image or a banner, into a clickable link.
A Link block works like a Box for structure and layout, except the whole area inside it becomes a link. Use one to turn an image, a card, or a banner into something visitors can click.
Add a Link block
To add a Link block to your project, open the Add panel (shortcut: A) in the left sidebar, go to the Links section, then drag the Link Block element onto your page.
Add elements into a Link block
You can drag any element except another link into a Link block, either from the Add panel or from the canvas.
Pro tip
You can't nest a link inside a Link block. Instead, drop in a text block and style it to look like a button, or use your button class.
Set the link type and value
Like text links and buttons, Link blocks have the same link options — URL, page, Collection page (when applicable), page section, email, phone, and file. Learn more about link settings.
Style Link blocks
Link blocks are as flexible as a Box for layout and structure. They're often used to build layouts, like a list of blog posts, that link to other pages.
Style the hover state of Link blocks
Link blocks are interactive, so it's best practice to set a different hover state to show visitors they're clickable. To style the hover state:
- Select the Link block
- Click States and choose Hover
- Add a box shadow or any other style property
- Go to the None/Default state
- Create a transition for the box shadow property or any other property you styled in the hover state
To change the background image on hover:
- Add a background image to the Link block
- Go to States > Hover
- Change the background image
- Go to the None/Default state
- Create a transition for the background image property
Override the blue text
By default, text inside a Link block is blue and underlined because that's the default styling on the All Links tag. To change the styling on a specific Link block, override the text decoration and font color:
- Select the Link block
- Go to the Style panel
- Change Text decoration to None
- Change the Font color to black
Note
Setting the text decoration on the text element itself to "none" doesn't remove the underline. Style the Link block directly instead.
Convert between a Link block and a Box
Converting between a Link block and a Box helps when you realize you used the wrong one to group elements. It's also a quick way to change how the block works.
Convert a Link block to a Box: Right-click the Link block, hover over Convert to, and choose Box. Learn more about converting elements.
Convert a Box to a Link block: Right-click the Box, hover over Convert to, and choose Link Block. If the Box contains a link element, you'll see an error and can't convert it, because links can't nest. Remove the nested link elements first, or convert the nested Link blocks to Boxes.