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

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

 

Link to comment

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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 3 weeks later...
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 2 weeks later...

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;
}

 

Link to comment
  • 1 year later...
On 6/27/2021 at 2:10 PM, rjamespierce said:

I found a really easy, non-code based solution to this problem. Just set your background video/image as you normally would, and then insert an "image" of a blank PNG over the top. You can then link the empty PNG image space to whatever page you want!

This sounds great , is there any source / link of how this is done? Much appreciated. (the other solutions above seem not to have helped the garden site)

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...