Link block

Learn how to use Link blocks to turn any element, like an image, or any layout, like a banner, into a link.

This video features an old UI. Updated version coming soon!

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.

A diagram displays a Div Block and a Link Block side by side. They both contain an image, heading and paragraph text.

In this lesson:

  1. Add a Link block
  2. Add other elements inside the Link block
  3. Set the link type
  4. Style the Link block
  5. Convert a Div block into a Link block and vice versa

Add a link block

Link Block icon thumbnail

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.

The five elements that are included in the Basic section are Div Block, List, List item, Link Block (highlighted) and Button.

Add elements into the Link block

Any element, except for other links, can be dragged into the Link block, either from the Add panel or from the canvas.

A link block containing an image of pink flowers, a sub-headline "Photography" and a H1 "Flowers".
PRO TIP: 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 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.

The Link settings panel displays six icons for link types, a URL text field, a check box for "Open in new tab", a drop down menu for Preload and a show all settings button.
For a Link block, you can also access the link settings by selecting the element and pressing enter.

Style Link blocks

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.

Style the hover state of Link blocks

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:

  1. Select the Link block
  2. Click states and choose hover
  3. Add a box shadow or any other style property
  4. Go to the none/default state
  5. Create a transition for the box shadow property or any other style property you styled in the hover state
The states drop down menu in the class selector section displays five different states, none, hover, pressed, focused and visited.
Step one on the left, select the box shadows effect. Step two on the right, the box shadows settings panel displays type, angle, distance, blur, size and color customizations.

Try changing the background image on hover:

  1. Add a background image to the Link block
  2. Go to States > Hover
  3. Change the background image
  4. Go to the none/default state
  5. Create a transition for the background image property

Override the blue text

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:

  1. Select the Link block
  2. Go to the Style Panel
  3. Change text decoration to none
  4. Change the font color to black
The typography section of the style panel displays a highlighted area displaying black text and the none style selected in the decoration..
Setting the text decoration on the text element itself to "none" will not remove the underline from the text. To remove the underline you’ll need to style the Link block directly.

Convert a Div block into a Link block and vice versa

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.

On the left the Convert to Link block button is highlighted in the Div block settings panel. On the right, the Convert to Div block is highlighted in the Link block settings panel.

Convert a Link block to a Div block

To change a Link block to a Div block, right-click the Link block and convert it to a Div block.

Convert a Div block to a Link 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.