Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
ysdm

ss7.1 How to create Clickthrough URL for Background Images?

Recommended Posts

Site URL: https://blueberry-moose-azns.squarespace.com

hello—

I am working with squarespace 7.1 and am looking to create a clickthrough url for the background (full bleed image) on the landing page of the site, in the same way that you would be able for an image block. 

Seems like the only way possible is to add text (and create a link) or to add a button. I do not want to have text or buttons on the image, but want the image itself to function as the link. 

Any help on this would be appreciated.

thanks.

 

1105141450_ScreenShot2020-03-23at8_57_53PM.thumb.png.721aa39fe72e23d6970877bd0145f76a.png

 

Share this post


Link to post

You can use JavaScript to do this (need Business Plan or higher).

Can you setup password & share url again? Your site is private, I can't access to check JavaScript.


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

@tuanphan 

thanks for your response!
Client has Business Plan set up for the site
& site is live now: 

https://www.lindseytaylordesign.com

screen shot below is landing page— still have to click on text logo (in the middle of the image) to navigate through to the first page link...
would like to be able to click anywhere on image and navigate through to "Gardens". thanks!
 

570187020_ScreenShot2020-04-13at8_56_47AM.thumb.png.c1658e655fce7fa811bedda96e8dcd0a.png

Share this post


Link to post
On 4/13/2020 at 7:58 PM, ysdm said:

@tuanphan 

thanks for your response!
Client has Business Plan set up for the site
& site is live now: 

https://www.lindseytaylordesign.com

screen shot below is landing page— still have to click on text logo (in the middle of the image) to navigate through to the first page link...
would like to be able to click anywhere on image and navigate through to "Gardens". thanks!
 

 

Add this code to Page Settings > Advanced > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $('.section-background img').click(function() {
    window.location = "https://beaverhero.com";
});
</script>

if it doesn't work try this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $('[data-section-id="5e75263ccd5ed9671ecccce9"] .section-background').click(function() {
    window.location = "https://beaverhero.com";
});
</script>
<style>
  [data-section-id="5e75263ccd5ed9671ecccce9"] .content-wrapper {
    cursor: pointer;
}
</style>

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

Hi again @tuanphan

I think I solved this through brute force. Lots of Googling and repeated attempts until I finally got it to work.

Ended up with this below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('[data-section-id="5e99b284f866cd1282d8ed12"].page-section').click(function(event){
      event.preventDefault();
      window.location = "https://lizard-crow-ml73.squarespace.com/blurry-block";
    });
  });
</script>

I also modified the CSS and placed it in the CSS editor so the entire background image would show the pointer. 

[data-section-id="5e99b284f866cd1282d8ed12"].page-section, {
  cursor: pointer;
}

 

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...