How to Add a Link to an Image in Webflow

You’ve got a Webflow site. You’ve got an image. You want that image to be clickable.

Sounds simple. But if you’ve spent 20 minutes digging through the Webflow designer without finding the right option, you’re not alone.

This guide covers everything — from the fastest way to wrap any image in a link, to advanced setups that turn your visuals into conversion machines. Whether you’re linking to an internal page, an external URL, or a booking calendar, this is exactly how you do it.

Why Clickable Images Matter More Than You Think

Before the how-to, here’s why you should care.

58% of visitors scan a webpage visually before reading a single word. Images are the first thing people process. If your image doesn’t do anything when clicked, you’re wasting one of the most powerful attention hooks on your page.

Marketers who optimize image CTAs report up to 47% higher click-through rates compared to text-only links. That’s not a rounding error — that’s nearly double the clicks from the same amount of traffic.

And with Webflow powering over 3.5 million websites globally as of 2024, knowing how to use its linking features correctly is a genuine competitive edge.

<!–=== RIGHT SIDE STICKY BANNER === PLACEMENT: Float right on desktop, below hero section — visible throughout scroll [BANNER] H1: 🎯 Turn Web Traffic Into Qualified Meetings H2: We build complete outbound systems that convert website visitors into booked pipeline. CTA: Book Strategy Meeting → salesso.com BEFORE (content before the banner appears): “…Marketers who optimize image CTAs report up to 47% higher click-through rates compared to text-only links. That’s not a rounding error — that’s nearly double the clicks from the same amount of traffic.” AFTER (content continues after banner placement): “And with Webflow powering over 3.5 million websites globally as of 2024, knowing how to use its linking features correctly is a genuine competitive edge.” ===–>

The Fastest Way: Wrap an Image in a Link Block

This is the method 90% of Webflow users need. It takes under two minutes.

Step 1 — Open the Webflow Designer

Log into your Webflow project and open the page where your image lives. Navigate to the canvas or use the Navigator panel on the left to find your image element.

Step 2 — Add a Link Block Around the Image

In the Add Elements panel (the “+” icon), search for Link Block. Drag it onto the canvas directly above or around your existing image element.

Alternatively, right-click the image in the Navigator and select Wrap in Link Block.

Step 3 — Set the Link Destination

With the Link Block selected, open the Element Settings panel (the gear icon on the right). You’ll see the link field at the top. Choose from:

• URL — paste any external link (your booking page, a product page, etc.)
• Page — link to any page within your Webflow project
• Section — anchor link to a specific section on the same or a different page
• Email — opens the user’s email client
• Phone — triggers a call on mobile devices

Step 4 — Move the Image Inside the Link Block

If your image isn’t already nested inside the Link Block, drag it in via the Navigator. The hierarchy should be: Link Block → Image.

Step 5 — Test It

Click the preview button (top right) and click your image. It should navigate to the destination you set.

That’s it.

How to Make a Button or Banner Image Clickable

Some images aren’t standalone — they’re part of a CTA banner, a promotional strip, or a visual button. Here’s how to handle those.

Use a Div Block + Link Block combo

For banner-style images with overlaid text:

1. Add a Link Block to the canvas
2. Inside it, add a Div Block (this will hold both your image and any text)
3. Set the Div Block to position: relative
4. Add your image as the background of the Div Block (via Background Image in the Styles panel) or place the Image element inside
5. Add a Text element inside the Div for any overlay copy
6. Style and link the outer Link Block as described above

This method keeps everything clickable — the image, the text, and any whitespace in between.

Linking Images in the Webflow CMS

If you’re using the CMS (Collection Lists, Blog Posts, etc.), image linking works slightly differently.

For Collection List images:

1. Inside your Collection List Item, add a Link Block
2. In the Link Block settings, set the link type to Collection Page and bind it to the current collection item
3. Inside the Link Block, add your CMS image field

Now every image in your collection automatically links to its respective CMS item page. No manual work required as you add new entries.

For conditional image links:

Use Webflow’s conditional visibility feature to show different Link Blocks based on a CMS field. For example, if a product has an external link field, only show a linked image when that field is filled in.

Adding a Lightbox to Images (Click to Expand)

Some images don’t need to navigate anywhere — they just need to get bigger. Webflow has a native lightbox element for this.

1. In the Add Elements panel, search for Lightbox
2. Drag it onto your canvas
3. Inside the Lightbox, place your image
4. In the Lightbox settings, you can set a separate thumbnail image versus the full-size image that appears when clicked

Lightbox stats worth knowing: Pages with image lightboxes see 22% longer average session durations compared to pages with static images only. When people can zoom in and explore, they stay engaged.

Common Mistakes That Break Clickable Images in Webflow

Placing the link on the image instead of a Link Block

Webflow does let you add a link directly to an image element via its settings. But this approach loses flexibility — you can’t wrap text, icons, or other elements into the same clickable zone. Always default to Link Block for full control.

Forgetting to set cursor: pointer

By default, Link Blocks inherit cursor styling. But if you’re using a custom Div or background image as a clickable element, add cursor: pointer manually in the Interactions or Styles panel so users know it’s clickable.

Missing alt text on linked images

Over 96% of the top one million websites have detectable accessibility failures, and missing alt text is one of the most common. If your image is a link, your alt text should describe the destination, not just the image. Example: “Book a strategy meeting with SalesSo” instead of “two people shaking hands.”

Not setting rel=”noopener noreferrer” on external links

When you set a link to open in a new tab, always check the “noopener” option in Webflow’s link settings. This prevents potential security vulnerabilities from external pages accessing your window context.

Optimizing Linked Images for Conversions

A clickable image is only as valuable as where it leads and how clearly it signals that it’s clickable.

Visual cues that increase clicks

Research by the Nielsen Norman Group found that users click images 30% more often when there’s a subtle hover effect — a slight scale-up, shadow, or color overlay — compared to static images with no visual feedback. Add a simple hover interaction in Webflow’s Interactions panel:

1. Select your Link Block
2. Open the Interactions panel
3. Add a Hover trigger
4. Set the action to slightly scale the image (1.03x works well) or add a soft drop-shadow

Placement matters

Images in the upper third of a page receive 84% more visual attention than images placed further down, according to eye-tracking studies. If you have a primary CTA image, it belongs above the fold.

Mobile behavior

60% of web traffic now comes from mobile devices. On mobile, hover effects don’t exist — make sure your CTA intent is clear from the image design alone. Use arrows, button-style overlays, or text within the image that makes the action obvious.

How to Link Images to an External Booking Page

If your goal is lead generation — booking calls, demos, or strategy meetings — linking images directly to a calendar or booking page is one of the highest-leverage moves on your website.

Here’s the setup:

1. Create a visually compelling banner or CTA image (Canva, Figma, or even a Webflow-styled Div with background color and text)
2. Wrap it in a Link Block
3. Set the URL to your booking page (Calendly, HubSpot Meetings, or your own scheduler)
4. Open the link in a new tab so visitors don’t lose their place on your site
5. Add a hover interaction (scale or color overlay) to make it feel interactive

Pages with image-linked CTAs that open directly to a scheduling tool see 2–3x higher booking rates than pages that route visitors through multiple steps before reaching the calendar.

The fewer clicks between “interested visitor” and “booked meeting,” the better.

Webflow Image Linking: Quick Reference

Conclusion

Adding a link to an image in Webflow is straightforward once you know the right approach. Use a Link Block for full control, bind to CMS fields for scalable collections, and use hover interactions to signal that something is clickable.

The bigger opportunity? Every linked image is a conversion asset. The pages and tools you link to — especially booking pages and lead capture forms — are where traffic turns into real pipeline.

92% of first-time website visitors aren’t ready to buy on the spot. But a well-placed, well-linked image CTA moves them one step closer. Optimizing that step is where the compounding begins.