In Webflow, you can easily turn an image into a clickable link that directs users to another page, section, or external URL. This guide will show you how to achieve that in a few simple steps.

Step 1: Add an Image to the Canvas

  1. Open your Webflow project and navigate to the Designer panel.
  2. From the left-hand toolbar, click on the Image element and drag it onto your canvas.
  3. Select your image by uploading a file from your computer or selecting one from your Asset Manager.

Step 2: Wrap the Image Inside a Link Block

To turn the image into a clickable link, you need to place it inside a Link Block:

  1. From the Add Elements panel on the left, drag a Link Block onto the canvas.
  2. Drag your image into the Link Block. Your image is now nested inside the clickable link block area.

Step 3: Set the Link Destination

  1. Select the Link Block that now contains your image.
  2. On the right side of the screen, navigate to the Settings panel.
  3. Under the Link Settings, you will have options to define where the link leads:some text
    • URL: Direct users to an external website.
    • Page: Navigate to another page within your Webflow project.
    • Section: Jump to a specific section on the current page.
    • Email: Make the image clickable to open a default email client.
    • Phone: Create a link that dials a number on mobile devices.
team slide image
5/5
stars icon

Rating

man portraitwoman portraitman portrait
8250+

Happy Customers

People love us

"I stumbled upon 128 Club while searching for premium templates, and I can confidently say it's been a game-changer for my design projects. The quality of their templates is unparalleled."

Jason Mitchell

stars icon
team slide third image
5/5
stars icon

Rating

man portraitwoman portraitman portrait
18,000+

Happy Customers

People love us

"Being a freelance designer, finding templates that strike the right balance between style and functionality is crucial. 128 Club has become my go-to marketplace."

Jane Thomson

stars icon
team slide fourth image
5/5
stars icon

Rating

man portraitwoman portraitman portrait
18,000+

Happy Customers

People love us

"What sets 128 Club apart is their commitment to responsiveness. In an era where user experience is paramount, the seamless adaptability of their templates across devices is a standout feature."

Emily Chang

stars icon
team slide second image
5/5
stars icon

Rating

man portraitwoman portraitman portrait
18,000+

Happy Customers

People love us

"I've tried various template marketplaces, but none match the modern aesthetics and innovative features of 128 Club. It's refreshing to work with templates that not only meet current design."

Sophie Anders

stars icon
arrow
arrow

Step 4: Customize the Link Block (Optional)

If you want, you can further style the Link Block that contains your image:

  1. Select the Link Block and adjust the size, margin, and padding.
  2. You can also add hover effects to make it clear that the image is clickable.

Example: Creating a Linked Image to an External Website

Let’s say you have an image of a product and want to link it to the product page on another site:

  1. Drag your product image into the Link Block.
  2. Under Link Settings, choose URL and enter the URL of the product page (e.g., https://example.com/product).
  3. Now, when users click the image, they will be directed to that external product page.

Conclusion

Making an image a link in Webflow is straightforward. Wrapping an image inside a Link Block allows you to create interactive, clickable visuals that can lead users to other pages, websites, or files, enhancing the user experience on your website.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

single property template cover
fintech template cover
Gain Access to 20+ Webflow Templates for the Price of 3 Webflow Templates

Unlock our exclusive templates collection for just $299/year, get access to 20 templates each worth $99! Choose the perfect fit for every need, whether you're refreshing your site monthly, managing multiple businesses, or just love having a variety of options at your fingertips!

0

+

Templates

In Webflow, you can easily turn an image into a clickable link that directs users to another page, section, or external URL. This guide will show you how to achieve that in a few simple steps.

Step 1: Add an Image to the Canvas

  1. Open your Webflow project and navigate to the Designer panel.
  2. From the left-hand toolbar, click on the Image element and drag it onto your canvas.
  3. Select your image by uploading a file from your computer or selecting one from your Asset Manager.

Step 2: Wrap the Image Inside a Link Block

To turn the image into a clickable link, you need to place it inside a Link Block:

  1. From the Add Elements panel on the left, drag a Link Block onto the canvas.
  2. Drag your image into the Link Block. Your image is now nested inside the clickable link block area.

Step 3: Set the Link Destination

  1. Select the Link Block that now contains your image.
  2. On the right side of the screen, navigate to the Settings panel.
  3. Under the Link Settings, you will have options to define where the link leads:some text
    • URL: Direct users to an external website.
    • Page: Navigate to another page within your Webflow project.
    • Section: Jump to a specific section on the current page.
    • Email: Make the image clickable to open a default email client.
    • Phone: Create a link that dials a number on mobile devices.
team slide image
5/5
stars icon

Rating

man portraitwoman portraitman portrait
8250+

Happy Customers

People love us

"I stumbled upon 128 Club while searching for premium templates, and I can confidently say it's been a game-changer for my design projects. The quality of their templates is unparalleled."

Jason Mitchell

stars icon
team slide third image
5/5
stars icon

Rating

man portraitwoman portraitman portrait
18,000+

Happy Customers

People love us

"Being a freelance designer, finding templates that strike the right balance between style and functionality is crucial. 128 Club has become my go-to marketplace."

Jane Thomson

stars icon
team slide fourth image
5/5
stars icon

Rating

man portraitwoman portraitman portrait
18,000+

Happy Customers

People love us

"What sets 128 Club apart is their commitment to responsiveness. In an era where user experience is paramount, the seamless adaptability of their templates across devices is a standout feature."

Emily Chang

stars icon
team slide second image
5/5
stars icon

Rating

man portraitwoman portraitman portrait
18,000+

Happy Customers

People love us

"I've tried various template marketplaces, but none match the modern aesthetics and innovative features of 128 Club. It's refreshing to work with templates that not only meet current design."

Sophie Anders

stars icon
arrow
arrow

Step 4: Customize the Link Block (Optional)

If you want, you can further style the Link Block that contains your image:

  1. Select the Link Block and adjust the size, margin, and padding.
  2. You can also add hover effects to make it clear that the image is clickable.

Example: Creating a Linked Image to an External Website

Let’s say you have an image of a product and want to link it to the product page on another site:

  1. Drag your product image into the Link Block.
  2. Under Link Settings, choose URL and enter the URL of the product page (e.g., https://example.com/product).
  3. Now, when users click the image, they will be directed to that external product page.

Conclusion

Making an image a link in Webflow is straightforward. Wrapping an image inside a Link Block allows you to create interactive, clickable visuals that can lead users to other pages, websites, or files, enhancing the user experience on your website.