How to Add a Button on Squarespace

Every website consists of internal and external links that help users navigate the site and find whatever they need. You can embed these links in regular text, images, and buttons! 

The cool thing about buttons is that you can style and place them strategically on your Squarespace website. This guide will run you through the process, and at the end, you should be able to add buttons to your website with ease. Let’s go! 

How to Add a Button on Squarespace

Discussed below are the various ways you can add a Button on Squarespace.

How to Add Buttons to a Squarespace Banner Image

There are several ways to add a button over a banner image, and this process depends on the template you use. 

After adding a button to a banner image, you can style it as you see fit. To add a button on Squarespace, follow the steps below.

  • Log onto your Squarespace website and select the page you want to work with. 
  • Go to “Page Settings” and select the text in the description you wish to turn into a button by highlighting the text.
  • You can add a link either to an external website, file, or website content. 
  • Click “Save” to save your work and apply the changes.

To add a second button to a banner image, follow all the steps above, except that you have to highlight the second section of text to turn it into a button. 

Styling a Button on a Banner Image

Follow the steps below to style a button on a banner image. 

  • Select the page with the button on the header or banner image you want to style. 
  • Go to “Design” then “Style Editor.” 
  • Click the button on the right to see the styling options for that particular button element. 
  • From the styling options listed, select your button styling preferences and click “Save” to apply changes. 

How to Add Buttons to a Header 

Adding buttons to a header works differently depending on what version of Squarespace you use. Follow the steps below to add buttons to a header on Squarespace Version 7.1.

  • Select a page on your site and click on “Edit”
  • Click on “Edit site header”
  • Next, click on “Elements”
  • Look for the “Button” toggle and switch it on
  • Edit the link and the title you want for the button. When adding buttons to headers, it is also possible to display social links and a shopping cart. This is enabled by switching on those toggles.
  • Hover over “Done” and click on “Save” to apply changes.

On Squarespace Version 7.0, you can add buttons to your site header via template families. These template families include:

  • Bedford: This template lets you display the last link in your navigation as a button.
  • Brine: This template family allows you to style either the primary or secondary navigation or both as buttons.
  • Montauk: This template works with custom subtitles by making it possible to add a button block to custom subtitles in the header. 
  • Skye: With this template, you can add a button block to the site navigation overlay.
  • Wells: This template enables you to add a button block to the navigation sidebar’s content area.

How to Add Form Block Buttons

You can use form block buttons for different reasons. You can use them to collect information from visitors to your site or create contact forms, surveys, polls, and applications. 

To add a form block button, follow the steps below:

  • While editing a page, select and click on an insert point and then click “Form” from the menu. 
  • Under the “Content” tab of the block editor, you can set up your form and add a post-submit message or redirect.
  • To customize the layout of your form, click on “Design.”
  • Click on “Storage” and add a storage option as form blocks will not function without a storage option set up. 
  • You could also add Google reCAPTCHA if you wish. 

How to Add Image Block Buttons

To add image block buttons, follow the steps below.

  • While editing a page or post, select and click on an insert point and click on “Image.”
  • Under the “Content” tab of the block editor, you can add an image, captions, alt text, or an image link. 
  • Click on “Design” to alter the layout and animate the block. 
  • Clicking outside the block editor automatically saves and applies your changes. 

How to Add Promotional Pop-up Buttons

Promotional pop-up buttons appear when visitors land on your site. You can use them to advertise a sale, announce the latest blog posts, make age verifications, let visitors choose between two different language versions of your site, and much more.

Before creating a promotional pop-up button, know that you can enable only one pop-up at a time. If you want to display another message on your site, you need to add an announcement bar.

Another essential point to note is that pop-ups do not support custom code. Promotional pop-ups can only appear when visitors arrive on your site. It is impossible to create a pop-up that appears when visitors are about to exit your site. 

Using promotional pop-ups (arguably) may negatively impact your site’s ranking on search engines when it comes to SEO and ads. Choosing a pop-up layout covering only a part of a computer screen is preferable.

When creating pop-up buttons, you should ensure that they do not restrict access to your web content on mobile. This is because your preferred ad provider may frown on it. To prevent this, you can either set promotional pop-ups to fill half the page on mobile or disable pop-ups. 

To add a promotional pop-up button, follow the steps below

  • In the “Home” menu, click “Marketing” and then click on “Promotional pop-up.”
  • Click on the “Change Layout” panel to choose a layout
  • Use the “Action” panel to add a newsletter sign-up or a button
  • Select the “Content” panel to add text.
  • Click on the “Display and Timing” panel to set how the pop-up appears
  • You can use the “Image” panel to add a background image. This is provided that the layout you choose supports images
  • Click on the “Style” panel to style the pop-up
  • To enable your promotional pop-up, switch the “Display pop-up” toggle to black at the top of the panel.
  • Click on “Save” to save and apply your changes.

Final Thoughts

Buttons, like fonts, images, and other website elements, add to the overall beauty and functionality. It is a great choice to add buttons to your Squarespace website. Use this guide to add buttons without any hassle. 

Leave a Comment