How to make an entire text box a clickable link, not just the text.

Hello,

I am having trouble making an entire text box a clickable link. I was able to target the block id to change color when hovering over it but now I want the ability to click the box to take you to a new page. A work around would be to make all the text a hyperlink and remove the underline but I would like the whole thing clickable. Anyone have any ideas?

(See reference photo below, I want to make the light blue rectangle, which is a text box, clickable)

6 hours ago, charlieturchetta said:

Hello,

I am having trouble making an entire text box a clickable link. I was able to target the block id to change color when hovering over it but now I want the ability to click the box to take you to a new page. A work around would be to make all the text a hyperlink and remove the underline but I would like the whole thing clickable. Anyone have any ideas?

(See reference photo below, I want to make the light blue rectangle, which is a text box, clickable)

Can you share your site with the protected password so we can take a look?

Hello,

I am also needing assistance with this.

I have text blocks overlaying the images blocks, I have custom css so the text appears on hover, I am hoping to make the whole text block a clickable link. I am unable to have the image block as a clickable link as the text block is overlaying it.

https://www.sabustudio.com/lightingnew

Thanks in advance 🙂

Regards,

Sam

On 11/5/2022 at 9:09 AM, Sabu said:

Hello,

I am also needing assistance with this.

I have text blocks overlaying the images blocks, I have custom css so the text appears on hover, I am hoping to make the whole text block a clickable link. I am unable to have the image block as a clickable link as the text block is overlaying it.

https://www.sabustudio.com/lightingnew

Thanks in advance 🙂

 

Regards,

Sam

If you use Classic Editor Image Block, this will be easier to achieve.

Do you use Business Plan? We can use script code to make click

Hi Tuan,

Yes I have a business plan. I already have the pages setup, so I would rather try and use code to make them clickable if possible?

Thanks,

Sam

On 11/10/2022 at 4:14 AM, Sabu said:

Hi Tuan,

Yes I have a business plan. I already have the pages setup, so I would rather try and use code to make them clickable if possible?

Thanks,

Sam

 

Can you add link for text block first? I will try CSS first to change text link to image link, if it doesn't work, we will use script code to add click event.

Hi Tuan, 

Links have been added to the text blocks.

Thanks 🙂

Sam

Hi,

I am also looking for an answer to this question.

I've added text boxes over staff images and custom code for a hover effect that displays name and role. Currently, I have added links to the the text so that a user can click on the person and go to their individual bio page. However, I'm looking to make the entire box "clickable" rather than just the text. Hopefully the solution is the same to the site above, but in case it's not, I'll provide my site below.

Here is my site: https://cg-realtyllc.com/about-new

On 11/13/2022 at 9:17 AM, Sabu said:

Hi Tuan, 

Links have been added to the text blocks.

Thanks 🙂

Sam

 

Add this to Design > Custom CSS then try clicking on image block

.fe-block-yui_3_17_2_1_1667609594184_339627 {
    pointer-events: none;
}

On 11/17/2022 at 3:44 AM, HeatherCodes said:

Hi,

I am also looking for an answer to this question.

I've added text boxes over staff images and custom code for a hover effect that displays name and role. Currently, I have added links to the the text so that a user can click on the person and go to their individual bio page. However, I'm looking to make the entire box "clickable" rather than just the text. Hopefully the solution is the same to the site above, but in case it's not, I'll provide my site below.

Here is my site: https://cg-realtyllc.com/about-new

If you use Gallery Section, or Classic Editor Image Blocks, or Summary, it will be easier.

On 11/21/2022 at 7:27 AM, tuanphan said:

If you use Gallery Section, or Classic Editor Image Blocks, or Summary, it will be easier.

 

I'm also looking to make an entire text block be a link, NOT JUST the text. I am utilizing a standard text block, not a Gallery or anything like that.

Page is, https://timberlake-smith.squarespace.com/config/design/custom-css

password is: timberlakesmithtdc

On 5/27/2023 at 4:12 AM, thedowntowncreative said:

I'm also looking to make an entire text block be a link, NOT JUST the text. I am utilizing a standard text block, not a Gallery or anything like that.

Page is, https://timberlake-smith.squarespace.com/config/design/custom-css

password is: timberlakesmithtdc

/config is url for site owner, you can click arrow on top left or top right > Then real url will appear on browser address bar

On 5/28/2023 at 5:30 AM, tuanphan said:

/config is url for site owner, you can click arrow on top left or top right > Then real url will appear on browser address bar

https://timberlake-smith.squarespace.com/

thanks

On 5/27/2023 at 4:12 AM, thedowntowncreative said:

I'm also looking to make an entire text block be a link, NOT JUST the text. I am utilizing a standard text block, not a Gallery or anything like that.

Page is, https://timberlake-smith.squarespace.com/config/design/custom-css

password is: timberlakesmithtdc

Which text box are you referring to on homepage?

2 minutes ago, tuanphan said:

Which text box are you referring to on homepage?

multiple. I can grab the IDs I need myself, I just don't know how to make them do the thing. 

4 hours ago, tuanphan said:

Which text box are you referring to on homepage?

The actual page I want to do it on is all the text blocks for the profiles on https://timberlake-smith.squarespace.com/professionals

On 6/2/2023 at 1:35 AM, thedowntowncreative said:

The actual page I want to do it on is all the text blocks for the profiles on https://timberlake-smith.squarespace.com/professionals

I see the text already clickable, you want to make whole text (both text + white area) clickable? Is that right?

On 6/3/2023 at 6:32 PM, tuanphan said:

I see the text already clickable, you want to make whole text (both text + white area) clickable? Is that right?

Yes. Thank you

On 6/5/2023 at 10:05 PM, thedowntowncreative said:

Yes. Thank you

Add this to Last Line in Code Injection > Footer

<script>
$("body#collection-642714f6a1aff6735528e8e4 .fe-block").click(function(){
		window.location=$(this).find("a").attr("href"); 
		return false;
	});
</script>
<style>
 body#collection-642714f6a1aff6735528e8e4 .html-block {
  	cursor: pointer;
  }
</style>

8 hours ago, tuanphan said:

Add this to Last Line in Code Injection > Footer

<script>
$("body#collection-642714f6a1aff6735528e8e4 .fe-block").click(function(){
		window.location=$(this).find("a").attr("href"); 
		return false;
	});
</script>
<style>
 body#collection-642714f6a1aff6735528e8e4 .html-block {
  	cursor: pointer;
  }
</style>

 

Thanks tuanphan! This did not make the entire block clickable, but it did make the entire block cursor pointer look like it was a link, but would not actually take you to the text link

On 6/9/2023 at 12:25 AM, thedowntowncreative said:

Thanks tuanphan! This did not make the entire block clickable, but it did make the entire block cursor pointer look like it was a link, but would not actually take you to the text link

Can you add & keep the code? We can check it again easier

I am also trying to make my text boxes clickable. I currently have a hover code applied. There is an image block and then a text box appears on hover. Currently only the text is clickable but I would love for the entire box to be clickable. I've tried the above options and it did not work. Website is cohocreative.com and it's the images on the homepage I'm referring to. Thanks!

On 7/20/2023 at 3:30 AM, kmeiser said:

I am also trying to make my text boxes clickable. I currently have a hover code applied. There is an image block and then a text box appears on hover. Currently only the text is clickable but I would love for the entire box to be clickable. I've tried the above options and it did not work. Website is cohocreative.com and it's the images on the homepage I'm referring to. Thanks!

How did you add dark overlay?

Just sent you a PM!

I'm also looking for a solution to this. Has anyone succeeded in making an entire text block clickable?