Jump to content

Add a link to a shape?

Go to solution Solved by tuanphan,

Recommended Posts

If you're on a business plan or higher, you can do this with javascript.

Are you?

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment

Try adding this code to last line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$(".fe-block-815c2e776f6eb10d1f3a").click(function() {
			var link = $(this).text(),
				href = "https://getvibes.uscreen.io/checkout/new?o=48349&_gl=1*gxqtaz*_ga*MTAxMzg3MTMyMS4xNjk2NDk2NzYy*_ga_5VPH7QX59T*MTY5NzM0Nzc0My41LjAuMTY5NzM0ODk5NS42MC4wLjA.";
			window.location.href=href;
		});
    $(".fe-block-acc86b27d7046e04e6de").click(function() {
			var link = $(this).text(),
				href = "https://getvibes.uscreen.io/checkout/new?o=48350&_gl=1*1w4841b*_ga*MTAxMzg3MTMyMS4xNjk2NDk2NzYy*_ga_5VPH7QX59T*MTY5NzM0Nzc0My41LjAuMTY5NzM0ODk5NS42MC4wLjA.";
			window.location.href=href;
		});
});
</script>
<style>
  .fe-block-815c2e776f6eb10d1f3a, .fe-block-acc86b27d7046e04e6de {
  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!)

Link to comment
  • Solution

Try this new code

<script>
  $(document).ready(function() { 
		$(".fe-block-815c2e776f6eb10d1f3a, .fe-block-99c3b9f51964ebc7edd4").click(function() {
			var link = $(this).text(),
				href = "https://getvibes.uscreen.io/checkout/new?o=48349&_gl=1*gxqtaz*_ga*MTAxMzg3MTMyMS4xNjk2NDk2NzYy*_ga_5VPH7QX59T*MTY5NzM0Nzc0My41LjAuMTY5NzM0ODk5NS42MC4wLjA.";
			window.location.href=href;
		});
    $(".fe-block-acc86b27d7046e04e6de, .fe-block-508666a6347e16f66f9d").click(function() {
			var link = $(this).text(),
				href = "https://getvibes.uscreen.io/checkout/new?o=48350&_gl=1*1w4841b*_ga*MTAxMzg3MTMyMS4xNjk2NDk2NzYy*_ga_5VPH7QX59T*MTY5NzM0Nzc0My41LjAuMTY5NzM0ODk5NS42MC4wLjA.";
			window.location.href=href;
		});
});
</script>
<style>
  .fe-block-815c2e776f6eb10d1f3a, .fe-block-acc86b27d7046e04e6de {
  cursor: pointer;
  }
</style>

I added some IDs to code

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!)

Link to comment

That works! I added the IDs for the button areas too + all the IDs in the string that shows the pointer cursor. Huge thanks!

<script>
  $(document).ready(function() { 
		$(".fe-block-815c2e776f6eb10d1f3a, .fe-block-99c3b9f51964ebc7edd4, .fe-block-85940c20acac2684d5a7").click(function() {
			var link = $(this).text(),
				href = "https://getvibes.uscreen.io/checkout/new?o=48349&_gl=1*gxqtaz*_ga*MTAxMzg3MTMyMS4xNjk2NDk2NzYy*_ga_5VPH7QX59T*MTY5NzM0Nzc0My41LjAuMTY5NzM0ODk5NS42MC4wLjA.";
			window.location.href=href;
		});
    $(".fe-block-acc86b27d7046e04e6de, .fe-block-508666a6347e16f66f9d, .fe-block-e1edb2a253e5fc7ac95a").click(function() {
			var link = $(this).text(),
				href = "https://getvibes.uscreen.io/checkout/new?o=48350&_gl=1*1w4841b*_ga*MTAxMzg3MTMyMS4xNjk2NDk2NzYy*_ga_5VPH7QX59T*MTY5NzM0Nzc0My41LjAuMTY5NzM0ODk5NS42MC4wLjA.";
			window.location.href=href;
		});
});
</script>
<style>
  .fe-block-815c2e776f6eb10d1f3a, .fe-block-acc86b27d7046e04e6de, .fe-block-508666a6347e16f66f9d, .fe-block-e1edb2a253e5fc7ac95a, .fe-block-99c3b9f51964ebc7edd4, .fe-block-85940c20acac2684d5a7 {
  cursor: pointer;
  }
</style>

 

Link to comment

A follow-up-question on the same topic: I have added a hover effect to the shapes - how can I make that effect also cover the whole shape?

https://www.getvibes.se/test

This is the hover code I use:

#block-815c2e776f6eb10d1f3a {
  -webkit-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
} 

#block-815c2e776f6eb10d1f3a:hover {
  scale: 1.05;
      -webkit-box-shadow: 10px 10px 10px #ffc8c8;
  box-shadow: 10px 10px 10px #ffc8c8;
    border-radius:10px;
}

#block-acc86b27d7046e04e6de {
  -webkit-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
} 

#block-acc86b27d7046e04e6de:hover {
  scale: 1.05;
      -webkit-box-shadow: 10px 10px 10px #ffc8c8;
  box-shadow: 10px 10px 10px #ffc8c8;
    border-radius:10px;
}

 

Link to comment
  • 2 weeks later...
  • 1 month later...
On 10/30/2023 at 7:54 PM, Uggel said:

@tuanphan Any ideas on this? The hover effect only triggers where there's no button or text, I want the hover effect on the WHOLE shape.

If you still need help, you can let me know, recently I wrote some code on hover

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!)

Link to comment
  • 2 weeks later...
On 1/4/2024 at 5:05 PM, Uggel said:

Yes please!

First, add this code to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.fe-block a:contains("clickable")').addClass('text-click');
});
</script>

Next, add this code to Website Tools > Custom CSS

a.text-click {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: transparent !important;
}

So now, to make a Shape Block clickable, just add a Text Block cover whole Shape

image.png.824cff64dd1254f71716398dd07d2841.png

In Text Block, enter the text: clickable

with your desired URL

image.thumb.png.16120602e3319ed4765a57261c1e18bf.png

The code you added, will make this text transparent & make Shape clickable

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!)

Link to comment
On 1/8/2024 at 4:30 PM, Uggel said:

Thanks Tuanphan. That makes the whole shape clickable, but the hover-effect stops working. I added the text link to the left shape on my test page:

https://www.getvibes.se/test

... you can see the the hover effect on the right shape.

Can I keep the effect in some way?

How hover?

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!)

Link to comment

Change script code to this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.fe-block a:contains("clickable")').addClass('text-click');
  $('.text-click').hover(function(){
     $('.fe-block-d846a9e0132399af1517').addClass('text-shadow');
 }, function(){
    $('.fe-block-d846a9e0132399af1517').removeClass('text-shadow');
 });
});
</script>
<style>
  .text-shadow {
        scale: 1.05;
    -webkit-box-shadow: 10px 10px 10px #ffc8c8;
    box-shadow: 10px 10px 10px #ffc8c8;
    border-radius: 10px;
}
</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!)

Link to comment
On 1/16/2024 at 8:09 PM, Uggel said:

Thanks! How do I separate the effect? Right now the hover effect is activated on both shapes at the same time:

https://www.getvibes.se/test

Can you remove above code? I will test it again

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!)

Link to comment
  • 1 month later...
On 3/14/2024 at 9:15 PM, Uggel said:

Did you look into this any more @tuanphan?

Use this new script code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $('.fe-block-yui_3_17_2_1_1704704793579_22806').hover(function(){
     $('.fe-block-d846a9e0132399af1517').addClass('text-shadow');
      $('div:not(.fe-block-d846a9e0132399af1517)').removeClass('text-shadow');
 }, function(){
    $('.fe-block-d846a9e0132399af1517').removeClass('text-shadow');
 });
      $('.fe-block-49d6336a8f3d39f31bc0').hover(function(){
     $('.fe-block-40d6812ec36a3ed9575e').addClass('text-shadow');
      $('div:not(.fe-block-40d6812ec36a3ed9575e)').removeClass('text-shadow');
 }, function(){
    $('.fe-block-40d6812ec36a3ed9575e').removeClass('text-shadow');
 });
});
</script>
<style>
  .text-shadow {
        scale: 1.05;
    -webkit-box-shadow: 10px 10px 10px #ffc8c8;
    box-shadow: 10px 10px 10px #ffc8c8;
    border-radius: 10px;
}
</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!)

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.