Jump to content

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

Recommended Posts

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)403258168_ScreenShot2022-03-26at12_05_32PM.thumb.png.4368b2b9385148178119b8e41c0da6c7.png

Link to comment
  • Replies 16
  • Created
  • Last Reply

Top Posters In This Topic

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)403258168_ScreenShot2022-03-26at12_05_32PM.thumb.png.4368b2b9385148178119b8e41c0da6c7.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 7 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 6 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.