If you're trying to make an image clickable in Webflow, the easiest and most reliable method is by wrapping the image inside a Link Block, but it must be done correctly to work. Here's how to ensure it's set up properly.
1. Use a Link Block Correctly
- Drag a Link Block from the Add panel onto the canvas.
- Do NOT place your image directly on the page first – always insert it inside a Link Block.
- Once you've added the Link Block, drag your image into it so the image becomes a child of the link.
- Click the Link Block and set the target URL via the Settings panel (external link, page, section, etc.).
2. Confirm Proper Structure
- In the Navigator, make sure your structure looks like:
- Link Block
- If the image is not visually appearing as clickable, check if the Link Block has dimensions. By default, if it's empty or the image doesn’t inherit dimensions, the link may appear broken.
- Set the Link Block's Display to Block or Inline-Block, and let it size to the image naturally.
3. Check for Interaction Conflicts or Styles
- If the link still doesn’t work:
- Ensure there are no overlapping elements that may block clicks (hidden layers, fixed headers, etc.).
- Look in the Style panel and verify that the Link Block and Image are visible and don’t have pointer events disabled (check under Style → Advanced → Pointer Events).
- Test the interaction in Preview Mode or in Published Site, not just Designer.
4. Alternative Option (If Needed)
- You can also directly use the Image Link element from the Add panel:
- This is a shortcut that combines an image inside a link block automatically.
- Just drag Image Link to your canvas, choose your image, then assign the desired URL.
Summary
To insert a link into an image in Webflow, wrap the image inside a Link Block, ensure the structure and styling are correct, or use the Image Link element for simplicity. Check in Preview or published mode to confirm it's working as expected.