charlieturchetta Posted March 26, 2022 Share Posted March 26, 2022 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) Link to comment
Beyondspace Posted March 27, 2022 Share Posted March 27, 2022 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? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Sabu Posted November 5, 2022 Share Posted November 5, 2022 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 Link to comment
tuanphan Posted November 9, 2022 Share Posted November 9, 2022 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
Sabu Posted November 9, 2022 Share Posted November 9, 2022 (edited) 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 Edited November 9, 2022 by Sabu Link to comment
tuanphan Posted November 12, 2022 Share Posted November 12, 2022 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
Sabu Posted November 13, 2022 Share Posted November 13, 2022 Hi Tuan, Links have been added to the text blocks. Thanks 🙂 Sam Link to comment
HeatherCodes Posted November 16, 2022 Share Posted November 16, 2022 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
tuanphan Posted November 21, 2022 Share Posted November 21, 2022 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
tuanphan Posted November 21, 2022 Share Posted November 21, 2022 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
thedowntowncreative Posted May 26 Share Posted May 26 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 Link to comment
tuanphan Posted May 28 Share Posted May 28 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
thedowntowncreative Posted May 30 Share Posted May 30 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 Link to comment
tuanphan Posted June 1 Share Posted June 1 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
thedowntowncreative Posted June 1 Share Posted June 1 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. Link to comment
thedowntowncreative Posted June 1 Share Posted June 1 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 Link to comment
tuanphan Posted June 3 Share Posted June 3 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
thedowntowncreative Posted June 5 Share Posted June 5 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 Link to comment
tuanphan Posted June 8 Share Posted June 8 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> 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
thedowntowncreative Posted June 8 Share Posted June 8 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 Link to comment
tuanphan Posted June 11 Share Posted June 11 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 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
kmeiser Posted July 19 Share Posted July 19 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! Link to comment
tuanphan Posted July 22 Share Posted July 22 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? 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
kdeemer Posted September 4 Share Posted September 4 I'm also looking for a solution to this. Has anyone succeeded in making an entire text block clickable? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment