The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
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.

Link block
In this lesson
  • Add a link block to your project
  • Add other elements inside the link block
  • Set the link type
  • Style the link block

Adding a link block

Adding a link block to your project is really simple. Just open the Elements Panel (shortcut: A) in the left sidebar, and drag a Link Block onto your page.


Adding 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.

PRO TIP: Other links are not allowed to be nested inside of 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.  

Link Settings

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.

Webflow link settings
For a link block, you can also access the link settings by selecting the element and pressing enter.

Styling link blocks

Link block are as flexible as div blocks for creating layout and structure. They are often used to create layouts, like a list of blog posts, that link to other pages.

Styling hover state

Link blocks are interactive, so it’s the 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
Another example - change 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

Overriding blue text

By default when any text is placed inside of a link block, it becomes blue and has an underline. That’s 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
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.