Sticky Call to Action Button in Squarespace

One of the most important aspects of a functional website is to have clear, easily accessible calls to action. Clear calls to action ensure that once a visitor arrives on your site, they follow through with the action you want them to take. Although you likely will have multiple calls to action on your website, you should have one main call to action that aligns with the overarching goal of your website. 

Let’s pause here because if you haven’t thought about the main goal of your website, do that first before reading further. For example, if you are a service provider, your main call to action might be for the visitor to book a call with you. Your main call to action would therefore lead the visitor to your call scheduler. If your first step is for a potential client to fill out an interest form or application, the main call to action would link to the form. Product-based businesses want website visitors to make a purchase. The key is to think about the first, ideal step you want a potential client to take when they visit your site.

Once you have a clear overall call to action, the next step is to make it clear and easily accessible. What does that mean exactly? Well, it depends on the design and the specific call to action, but typically, I put the main call to action in the far right of the navigation. Why? Because English-speakers read left to right, so the eye automatically is pulled to the right side of the page. At the very least the main call to action should appear “above the fold,” that is the section of your website you see before you scroll. 

But what happens once a visitor does scroll? They no longer see the main call to action above the fold. Squarespace does offer what’s called a “sticky navigation” option, meaning the full navigation menu is fixed in place as users scroll down the screen. But, that might be a bit much or it could interfere with the design, so I’m offering up another solution that brings your call to action front and center.

With some simple code, you can implement a Sticky CTA Button, so your main call to action button will stay on the screen as the website user scrolls down. Here is the code you will want to add to the Custom CSS section of your site. Find it by going to Design > Custom CSS and then copy and paste the code below.

Add the Code

Here is where the magic happens. It’s time to add the code. Copy the following code, go to Design > Custom CSS, and then paste the code below into the custom CSS section.

.header-actions .header-actions-action--cta{
  position: fixed;
  z-index: 999;
}

Now when an ideal client makes their way to your homepage, they know exactly what to do next. With the sticky CTA button, You are eliminating distractions and making the next step clear and easy. Give it a try and let me know how it goes!

---

If adding code to your site feels a bit overwhelming, don’t fret. Book a call! I’m here to help.