emm.farines Posted June 11, 2022 Share Posted June 11, 2022 (edited) Site URL: https://jaguar-grey-rryj.squarespace.com/all-treatments Hello Circle people, In this list section I would like to make each image clickable and link to the relevant page (same links as the buttons, and I want to keep the buttons). https://jaguar-grey-rryj.squarespace.com/all-treatments Would anyone be able to help? Thanks in advance! Emmanuelle. Edited June 11, 2022 by emm.farines Link to comment
Solution paul2009 Posted June 11, 2022 Solution Share Posted June 11, 2022 (edited) On 6/11/2022 at 11:36 AM, emm.farines said: In this list section I would like to make each image clickable and link to the relevant page Take a look at the solution I published here: Make Squarespace list items clickable. This takes the link that you've assigned to each CTA button and applies it to the entire list item. This means that users can click the image or any other aspect of an item to trigger the CTA action. Did this help? Please give feedback by clicking an icon below ⬇️ Edited February 22 by paul2009 cami_leisk, Latrippi and emm.farines 1 2 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
emm.farines Posted June 23, 2022 Author Share Posted June 23, 2022 On 6/11/2022 at 10:00 PM, paul2009 said: Take a look at the solution I published here: Make Squarespace list items clickable. This takes the link that you've assigned to each CTA button and applies it to the entire list item. This means that users can click the image or any other aspect of an item to trigger the CTA action. Has this post helped you? Let everyone know by clicking an icon below ⬇️ Thank you so much Paul, it has worked perfectly!! 🌟😀🙏 Link to comment
kkedwards87 Posted February 22 Share Posted February 22 Hi @paul2009is there a way to make this code work to open a lightbox? Thanks Link to comment
tuanphan Posted February 26 Share Posted February 26 On 2/23/2023 at 5:11 AM, kkedwards87 said: there a way to make this code work to open a lightbox? Thanks You will need to use a plugin to enable lightbox first (Maybe enable on button, then use code to make image clickable, use button link) 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
STC Posted August 8 Share Posted August 8 @paul2009 This works great but there are certain pages I need to disable this on. Any suggestions? Link to comment
tuanphan Posted August 11 Share Posted August 11 On 8/9/2023 at 5:17 AM, STC said: This works great but there are certain pages I need to disable this on. Any suggestions? You try moving the code to Page Settings > Advanced > Code Injection (for pages where you want list section clickable) 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
STC Posted August 11 Share Posted August 11 11 hours ago, tuanphan said: You try moving the code to Page Settings > Advanced > Code Injection (for pages where you want list section clickable) That didn't seem to work. I'm assuming it's because this code usually goes in the footer injection and on pages you can only put this code into the header injection? Link to comment
tuanphan Posted August 12 Share Posted August 12 18 hours ago, STC said: That didn't seem to work. I'm assuming it's because this code usually goes in the footer injection and on pages you can only put this code into the header injection? Can you share link to page where you have problem? 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
STC Posted August 12 Share Posted August 12 6 hours ago, tuanphan said: Can you share link to page where you have problem? I want the list items clickable on this page https://sgftechcouncil.com but not on this page and a couple others https://sgftechcouncil.com/springfield-tech-community The code seems to prevent external links from opening in a new window and it is difficult to copy text from a list item when needed. Link to comment
GemmsyA Posted August 16 Share Posted August 16 @paul2009 Is there a way to hide the button and just have the image and title clickable? Thx Link to comment
paul2009 Posted August 16 Share Posted August 16 4 hours ago, GemmsyA said: Is there a way to hide the button You can hide buttons with CSS, like the example I have provided below. The exact CSS may depend on your site settings and whether you want to hide all buttons. /* Hide all list item buttons */ .list-item-content__button.sqs-button-element--primary.sqs-block-button-element { display: none; } Did this help? Please give feedback by clicking an icon below ⬇️ GemmsyA and tuanphan 1 1 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
GemmsyA Posted August 16 Share Posted August 16 2 hours ago, paul2009 said: You can hide buttons with CSS, like the example I have provided below. The exact CSS may depend on your site settings and whether you want to hide all buttons. /* Hide all list item buttons */ .list-item-content__button.sqs-button-element--primary.sqs-block-button-element { display: none; } Did this help? Please give feedback by clicking an icon below ⬇️ This is perfect, thanks so much. I only have one List section on my site so this is all I need. Really appreciate it. paul2009 1 Link to comment
STC Posted August 22 Share Posted August 22 @paul2009 Any suggestions on the issue I was having with disabling clickable list items on certain pages or sections? Link to comment
leahraine Posted September 29 Share Posted September 29 @paul2009 do you know of a way to make the links open in a new tab? (I set it within the button itself but it still opens in the same tab) Thanks!! 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