Jump to content

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

Recommended Posts

Posted

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

 

  • 3 weeks later...
Posted

@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

Posted
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 2 weeks later...
Posted

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

 

  • 1 year later...
Posted
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)

  • 2 years later...
Posted

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 

Melody | Squarespace Nerd
When I have time, I like to help on the Forum, but if you need my full attention, please send your request here.

Tools I use (affiliate links😞
📅Blog Date Format plugin (Free by BeyondSpace)
Lazy Load Summary Block plugin (by Squareswebsites
)
📜Privacy Policy & Cookie Consent plugin (10% off by Termageddon
)
📈SEO plugin for Squarespace (by SEOSpace
)

 Did I help? I like coffee (Thank you)

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.