Creating a custom hyperlink

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!

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!

Have you tried this setting for the service section?

10 minutes ago, bangank36 said:

Have you tried this setting for the service section?

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.

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

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!