Adding Links and Buttons in Squarespace 7.1
In this tutorial, we'll cover how to add links and buttons in Squarespace 7.1, specifically using the Fluid Engine in 2024. Let's jump in!
Adding Links
Links can be added to almost any element in your Squarespace site, including images, text, and buttons. Here's how:
Adding a Link to an Image:
Select the image you want to link.
Click on the chain icon that appears.
A pop-up list of all the pages in your site will appear. You can also link to PDF documents, email addresses, or third-party websites.
Choose the page you want to link to. You can also edit or remove the link later if needed.
To make the link open in a new tab, select the option to open the link in a new tab. This is useful for external links or PDF documents.
Adding a Text Link:
Highlight the text you want to turn into a link.
Click the chain icon in the text toolbar.
Select or enter the URL of the page, document, or email address you want to link to.
The linked text will have a subtle underline effect to indicate it's a link.
Adding Buttons
Buttons are a great way to create clear calls to action on your site. Here's how to add and style buttons:
Adding a Button:
Click on the "+" button to add a new block.
Select "Button" from the list.
Drag the button to the desired location on your page.
You can edit the button's text by clicking on it and typing your desired text.
Button Styles:
Squarespace offers three button styles: Primary, Secondary, and Tertiary.
Primary buttons are bold and eye-catching.
Secondary buttons use an underline for a more subtle effect.
Tertiary buttons are the most subtle, with minimal styling.
Customizing Button Styles:
Click on the pencil icon to edit the button.
You can choose whether the button fits its content or fills the container in the design settings.
Adjust the alignment, text style, and outline thickness to match your site's design.
Avoid mixing and matching button styles to maintain a consistent look throughout your site.
Mobile Optimization
Always check how your design looks on mobile devices:
Adjusting for Mobile:
Switch to the mobile view in Squarespace.
Ensure buttons and links are well-positioned and easy to tap.
If necessary, adjust the spacing and alignment for a better mobile experience.
That's it! You've successfully added and customized links and buttons in Squarespace 7.1.
NEW COMMUNITY!
I am launching my premium community to help you solve your biggest headaches when building your website or starting a web design business. If you would like to find out more, you can join the waitlist here: https://community.pixelhaze.academy/interest
We also have a free Skool community dedicated to website builders, including Squarespace, Wix (from Autumn 2024), and Hostinger here: https://www.skool.com/website-builders/about
Check Out Square Forge, our Squarespace Template Builder: https://squareforge.net
