Jump to content

Creating a custom hyperlink

Recommended Posts

Site URL: https://bettertotalk.com/sandbox

Hi all,

I'm working with a section that is taken from the 'services' templates in fluid mode. I'd like to make each of these 3 sections hyperlinks but there isn't any built in option to do so (other than adding a button). I have been able to tweak the text formatting using the section ID, but I can't find an ID to target the individual list elements and I'm not sure what the actual syntax should be for creating a hyperlink.

Any suggestions appreciated!

image.thumb.png.ae19a2b28b7c4fa3d13589a7472af828.png

Link to comment
1 hour ago, Phobic78 said:

Site URL: https://bettertotalk.com/sandbox

Hi all,

I'm working with a section that is taken from the 'services' templates in fluid mode. I'd like to make each of these 3 sections hyperlinks but there isn't any built in option to do so (other than adding a button). I have been able to tweak the text formatting using the section ID, but I can't find an ID to target the individual list elements and I'm not sure what the actual syntax should be for creating a hyperlink.

Any suggestions appreciated!

image.thumb.png.ae19a2b28b7c4fa3d13589a7472af828.png

Have you tried this setting for the service section?

image.thumb.png.cb2b754bf8a3b2ef87738ba70ffcc821.png

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, Keyword Highlighter
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
10 minutes ago, bangank36 said:

Have you tried this setting for the service section?

image.thumb.png.cb2b754bf8a3b2ef87738ba70ffcc821.png

Hi @bangank36, thanks for your suggestion. Yes, I've seen the button option and it's a last resort but I would really like to make the entire section clickable as I think it would improve the usability and save on screen real estate on mobiles.

Link to comment
section[data-section-id="632325195ff8e36ad6da6f2b"] .list-item-content__button {
  top: -100vh;
  left: 0;
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: transparent !important;
  border: none !important;
}
section[data-section-id="632325195ff8e36ad6da6f2b"] .list-item {
  overflow: hidden;
}

1. Show the button for items when you edit this section

2. Use my above code to make the buttons cover over item

Let me know how it works on your site

Edited by bangank36

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, Keyword Highlighter
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
1 hour ago, bangank36 said:
section[data-section-id="632325195ff8e36ad6da6f2b"] .list-item-content__button {
  top: -100vh;
  left: 0;
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: transparent !important;
  border: none !important;
}
section[data-section-id="632325195ff8e36ad6da6f2b"] .list-item {
  overflow: hidden;
}

1. Show the button for items when you edit this section

2. Use my above code to make the buttons cover over item

Let me know how it works on your site

Perfect, thank you so much!

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.