Jump to content

Adding an extra button at the top of my cover page

Recommended Posts

Site URL: http://www.mattlaurencemusic.com/

Hey guys, I'm using the cover page as a landing page and I wanted to know if there's anyway to add another "book now" button right at the top, under the title, or at the very least, to bring the existing button up to the top? The person I use for marketing said that it would really help conversions to have a button at the top and bottom.

Maybe there's another kind of page that would work better. I tried looking through some other site templates and I didn't really find anything that was able to include a product directly.

 

Is there any quick work around that would prevent me from rebuilding everything?

Link to comment
  • Replies 17
  • Created
  • Last Reply

Add to Cover Page Settings > Advanced > Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('<div class="sqs-slice yui3-widget sqs-slice-buttons sqs-slice-buttons-content sqs-slice-buttons-focused" data-slice-type="buttons"><a href="https://beaverhero.com">Top Button</a></div>').insertAfter("h1#sqs-slash-page-header");
});
</script>
  

replace beaverhero with your page url

replace top button with new text

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
58 minutes ago, tuanphan said:

Add to Cover Page Settings > Advanced > Header


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('<div class="sqs-slice yui3-widget sqs-slice-buttons sqs-slice-buttons-content sqs-slice-buttons-focused" data-slice-type="buttons"><a href="https://beaverhero.com">Top Button</a></div>').insertAfter("h1#sqs-slash-page-header");
});
</script>
  

replace beaverhero with your page url

replace top button with new text

Awesome. thank you!! I got the buttons but it seems I ended up with 2 of them and I need to delete the tope one and move the bottom one under the title. Thanks for you help!!

Screen Shot 2020-07-18 at 3.35.54 AM.png

Link to comment

remove above & use this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('<div class="sqs-slice yui3-widget sqs-slice-buttons sqs-slice-buttons-content sqs-slice-buttons-focused" data-slice-type="buttons"><a href="https://beaverhero.com">Top Button</a></div>').insertAfter(".sqs-slice-group.group-copy.stacked h1#sqs-slash-page-header");
});
</script>

 

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
4 minutes ago, tuanphan said:

remove above & use this


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('<div class="sqs-slice yui3-widget sqs-slice-buttons sqs-slice-buttons-content sqs-slice-buttons-focused" data-slice-type="buttons"><a href="https://beaverhero.com">Top Button</a></div>').insertAfter(".sqs-slice-group.group-copy.stacked h1#sqs-slash-page-header");
});
</script>

 

That lost them both that time 😕

Screen Shot 2020-07-18 at 3.42.48 AM.png

Link to comment

try again with this code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('<div class="sqs-slice yui3-widget sqs-slice-buttons sqs-slice-buttons-content sqs-slice-buttons-focused" data-slice-type="buttons"><a href="https://beaverhero.com">Top Button</a></div>').insertAfter(".sqs-slice-group.group-copy h1#sqs-slash-page-header");
});
</script>

 

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
17 minutes ago, tuanphan said:

try again with this code


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('<div class="sqs-slice yui3-widget sqs-slice-buttons sqs-slice-buttons-content sqs-slice-buttons-focused" data-slice-type="buttons"><a href="https://beaverhero.com">Top Button</a></div>').insertAfter(".sqs-slice-group.group-copy h1#sqs-slash-page-header");
});
</script>

 

Got the single button, just has to come down juuust a little bit - if possible!!! Thank you!

 

Screen Shot 2020-07-18 at 4.06.20 AM.png

Link to comment

remove above & use this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('<div class="sqs-slice yui3-widget sqs-slice-buttons sqs-slice-buttons-content sqs-slice-buttons-focused tuan" data-slice-type="buttons"><a href="https://beaverhero.com">Top Button</a></div>').insertAfter(".sqs-slice-group.group-copy h1#sqs-slash-page-header");
});
</script>
<style>
  .tuan {
    margin-top: 50px;
}
</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
11 minutes ago, tuanphan said:

remove above & use this


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('<div class="sqs-slice yui3-widget sqs-slice-buttons sqs-slice-buttons-content sqs-slice-buttons-focused tuan" data-slice-type="buttons"><a href="https://beaverhero.com">Top Button</a></div>').insertAfter(".sqs-slice-group.group-copy h1#sqs-slash-page-header");
});
</script>
<style>
  .tuan {
    margin-top: 50px;
}
</style>

 

Perfect!! That looks great. I appreciate you!!

Screen Shot 2020-07-18 at 4.51.59 AM.png

Link to comment
On 7/18/2020 at 4:40 AM, tuanphan said:

remove above & use this


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('<div class="sqs-slice yui3-widget sqs-slice-buttons sqs-slice-buttons-content sqs-slice-buttons-focused tuan" data-slice-type="buttons"><a href="https://beaverhero.com">Top Button</a></div>').insertAfter(".sqs-slice-group.group-copy h1#sqs-slash-page-header");
});
</script>
<style>
  .tuan {
    margin-top: 50px;
}
</style>

 

Hey Tuanphan! What code would I need in order to put a video right underneath this new button? I uploaded the video to Wistia. Thanks for your help!!

Edit: I know you can upload a video in the template but it's just a background image and doesn't play audio

Link to comment
15 hours ago, mattlaurence said:

Hey Tuanphan! What code would I need in order to put a video right underneath this new button? I uploaded the video to Wistia. Thanks for your help!!

Edit: I know you can upload a video in the template but it's just a background image and doesn't play audio

I don't see video? 

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
10 hours ago, tuanphan said:

I don't see video? 

Yeah the original template for a cover page doesn't have a spot for a video, just a background image, is it possible to put one on the page?

I'm running ads for lessons and am noticing that a lot of people are clicking and not signing up so I thought a video might help with signups

 

This is the video

 

Link to comment
  • 3 months later...
11 hours ago, mattlaurence said:

@tuanphanHi Tuanphan! I'm so thankful for all of your help! By default, clicking the site title send you back to the homepage - I wanted to know if there was a way/code to turn this off? I don't want give viewers any links to get off of the page because I want to use it as a funnel. Thank you!

I have the commerce plan. 

Screen Shot 2020-11-21 at 1.13.49 PM.png

Yes. Possible. Can you share link to cover page? We can help easier

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

Archived

This topic is now archived and is closed to further replies.

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