Jump to content

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. 
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
  • 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. 
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
  • 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
  • 2 years later...

I found a solution for the original post - click anywhere in a screen. Paste the code in the page -> code injection.  Found in a really old thread. Hope it helps someone!

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

🙋‍♀️Techy SquareSpace Developer for all your customisation needs #CSS #html #javascript

✉️ Email me

💻Soft launch

https://www.melodylee.tech/
A software developer in an artist body that knows how marketing works.
UK based, work globally

#neverstoplearning
 
I like coffee 😊

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.