How do I add a link to an image?

Very neat !

Is it possible to link image ?

3 Likes

I thought that was what button block was for. Not necessarily anything to do with buttons but essentially provides a div in which to place inner content that is hyperlinked at the parent level, an image for example. i.e. Why not wrap the image in a button block?

1 Like

Yeah @pingram3541 is right. If you want an image to have a link, drop it into an button block, which essentially is an an <a href=""></a> element. We will make this more intuitive by adding a link URL in the image settings which will wrap the image in a button block.

8 Likes

@thesergie I can’t for the life of me get the links to work, I’ve followed all the suggestions and still won’t work in either preview mode, design mode within button block and traditional text link… What am I missing here?

Try this:

A. Drop a Link Block onto the page.

B. Here’s what it will look like.

|200xauto

C. Take an image and drag it.

D. Drop it inside of a Link Block like this.

E. Select the Link Block element by clicking the black button next to the label or clicking the up arrow to select the container of the Image element (in this case is the link block element).

F. With the Link block selected go to the settings for that element.
|240xauto

G. Choose what kind of link you want and enter the URL.

Let me know how it goes! You may have been selecting the image and trying to add a link to it instead of selecting the Link Block and adding a link to it.

8 Likes

@thesergie Thanks for the quick response and taking the time to go over this, I think I wasn’t making myself clear… I’ve been doing exactly as you instructed and I was doing that correct, what I meant is the links are not launching/opening the page that I’m linking to for instance www.instagram.com etc… either with text links or button blocks, though linking to a section in the page works fine… Thanks

1 Like

Oh okay. Just making sure that you didn’t miss a step. You know what it may be? Try adding http:// when you type your url and see if that works. Right now we don’t do that automatically and it sometimes doesn’t work. We’ll fix it asap.

2 Likes

@thesergie yeah I’ve tried it that way and all other options that I know of. It must not like me, I’ll figure something out. Thanks for your help and quick responses.

1 Like

What’s your subdomain and what element on the page are you trying to link? I can go in and see whats going on directly. That will be a lot easier to troubleshoot.

Ok @itsmeblake we fixed it. We didn’t allow outbound links in preview mode because it would take you away from the designer, but we added some helpful tips to explain this. It should work once we push the fix later today. Thanks for helping me find what was up!

3 Likes

Would be a feat little feature that would make it more intuitive - it also had me confused where adding a link block to an image will change the styling - doesn’t inherit style from the image…

Totally @thelle we will have something in the settings of every child that’s inside of an <a> element saying that it’s a link and there will be a link to the parent link element. I think that will make it more clear.

1 Like

I’ve created a full layout and now want to add links to headings, text blocks, divs and containers but the link dialog isn’t appearing in the settings for each of these elements. Do I really need to go replace ALL of those elements with link blocks and redo them? Surely I should just have the link dialog on any element?

You don’t have to replace them, you can just drop them inside of a link block.

Also, there are some concerns with having a link dialog for every element. Some elements need to keep their HTML tag - like Headings which need to be recognized by search engines. For these elements it’s good to wrap them with a link instead of converting them to <a> tags.

Also, links have a default color and underline that needs to be overridden with your specific css styles. So it’s not always straightforward to make anything a link if this new color and underline needs specific attention.

But we’re thinking about ways to make it better!

Hey there, I’ve followed these directions to create a link from an icon (.png image) and it works great. What if I want to change the hover color? Because I am linking from a .png, I assume I would have to have the .png saved in two colors: the normal color and the hover state color. Is there any easier way?

Hello thesergie, I followed all the steps, trying to link a dribble shot, but it doesn’t work.

After you drop an image into your link block be sure to select the link block element and then go to settings where you can add the link. To select the link block you can select the image you just added and either look at the breadcrumbs at the bottom of the page or lookin the navigator to select the link block.

@theshiman to replace an image on hover is quite tricky. At the moment you’ll have to absolute position an image over the other image and use interactions to hide the top image on hover. It’s easier with background images tho.

Thanks. Just what I need =) I was confused there for a while. This help/forum repo helps a lot…

I moved a post to a new topic: How to get image from url instead of upload