Webflow sync, pageviews & more.
NEW

Can images be linked in Webflow?

TL;DR
  • Drag a Link Block, insert the image inside it, and set the link destination in the Settings panel.
  • For CMS images, place a Link Block inside a Collection List item, then bind the image and link to relevant CMS fields.

Yes, you can link images in Webflow so that clicking the image navigates to another page or URL.

  • Drag a Link Block from the Add panel (Press A or open the left sidebar).
  • Place the image inside the Link Block.
  • Set the image content using a static image, or bind it dynamically if you're using a Collection.
  • With the Link Block selected, go to the Settings panel (gear icon) and choose the link destination:
  • Page within your project
  • External URL
  • Section ID
  • Email or Phone

2. Linking CMS Images Inside Collection Lists

  • If you're using a Collection List, first drag a Link Block inside the collection item.
  • Drag the Image element inside the Link Block.
  • Bind the image and the link to the relevant fields in your CMS:
  • For example, bind the image to a "Thumbnail Image" field, and the link to a "Link URL" or Slug.
  • A Link Block can be styled just like any div using classes.
  • You can add hover states or animations for interactivity.

Summary

To link an image in Webflow, use a Link Block and place your image inside it. You can then configure the link to go to a page, external site, anchor section, or even a CMS URL.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I make the navbar div wider in Webflow when changing the width using vw or percentage values is not working?
How can I control the smoothness of gradients in Webflow? Is there a workaround that involves adding custom code?
How can I use jQuery filtering plugins with Webflow?
How can I fix the issue with my grid layout sticking out on the right side of the page on tablet breakpoint in Webflow?
How can I fix the issue with the section link scroll on my Webflow site when using Tablet to Mobile breakpoint where the page scrolls past the intended section? I have already tried changing the image load settings to Eager but it didn't work. Thank you!
How can I use Webflow to replace the image in my button with an icon that is part of the button and still be able to add a link block?
How can I fix the issue with the bootstrap tooltip not working properly on my Webflow site?
How can I embed a custom Snazzy Maps map into my Webflow website if the map is not appearing and I am receiving a "Oops! Something went wrong" error message?
How can I make a Webflow page automatically scroll 600px down upon load without affecting any elements on the page?
How can I center the button positioning in Webflow for the media page on my site?
Is it possible to have a load animation only display for the user's first visit to the home page in Webflow, without being shown on subsequent visits?
How to fix empty website preview when sharing on social media platforms like Facebook and LinkedIn?
How can I downgrade my Ecommerce basic site to the CMS plan on Webflow if I keep getting a "Conflict" error message when I try to do so despite trying multiple credit cards?
How can I place a text with a link on top of each image in my Webflow layout that was created using a grid?
How to embed Google Drive videos into a Webflow CMS Collection element using unique URLs from the product database?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?