Featured Posts
Website Customization
How to Add a Hamburger Menu to Your Squarespace 7.1 Desktop Site →
Website Customization
How to Create a Split Navigation in Squarespace 7.1 With CSS →
Website Customization
3 Image Hover Effect Styles to Elevate Your Squarespace 7.1 Website →
Website Customization
Featured Posts
Website Customization
How to Add a Hamburger Menu to Your Squarespace 7.1 Desktop Site →
Website Customization
How to Create a Split Navigation in Squarespace 7.1 With CSS →
Website Customization
3 Image Hover Effect Styles to Elevate Your Squarespace 7.1 Website →
Website Customization
Subscribe:
New Tutorials
Every Month
Expect only the good stuff: occasional updates with our latest resources, exciting news, and upcoming products.
Free Resources
Flodesk Welcome Sequence Email Templates
Squarespace Basics
Most Read
How to Add Custom Fonts to Squarespace With CSS (7.0 & 7.1)
How to Hide Elements in Mobile View in Squarespace 7.1
How to Create a Rotating Hero Banner With Squarespace Auto Layout (No Code Needed!)
4 Navigation Link Hover Effects for Your Squarespace 7.1 Website
How to Add a Gradient Background to a Section With CSS (Squarespace 7.1)
Search
What do you want to learn today?
By Category:
SAVE 10% ON YOUR SQUARESPACE SUBSCRIPTION WITH DISCOUNT CODE STYLEDSQUARE10
All Posts
10 Best Free Squarespace 7.1 Templates For e-Commerce And Online Stores in 2026
With 120+ free Squarespace templates available, it can be challenging to figure out which ones are actually optimized for online shopping and which will support your store’s long-term growth.
To help you skip the overwhelm of endless browsing, we’ve curated a list of the best free Squarespace 7.1 templates for eCommerce and online stores. Each one features clean layouts, mobile-friendly design, and built-in functionality tailored for product-based businesses.
How to Create a “Coming Soon” Page in Squarespace 7.1 Using the Lock Screen (Step-by-Step Guide)
This guide will show you how to create a Coming Soon page using the Squarespace Lock Screen feature, and how to set it up step-by-step for a smooth, stress-free redesign.
2025 Squarespace Update: How to Hide a Block on Mobile and Desktop (No CSS required!)
Squarespace 7.1 now allows you to hide blocks on mobile or desktop without CSS. Follow this 2025 guide to optimize your layout and improve your mobile design.
2025 Squarespace Update: How to Upload Custom Fonts for your Brand in Squarespace (No CSS required!)
Learn how to upload and use custom fonts in Squarespace 7.1 with the 2025 update. Follow this step-by-step guide to apply brand fonts to your site without using CSS.
How to Create and Connect a Custom 404 Page in Squarespace 7.1 (Step-by-Step Tutorial)
Learn how to create and connect a custom 404 page in Squarespace 7.1. Follow our step-by-step tutorial to improve your website’s user experience and keep visitors engaged.
Free Resource: 5 Flodesk Email Templates
Struggling to create beautiful, high-converting emails? We’ve got you covered! To help you save time, we’re giving away five professionally designed Flodesk email templates—completely free.
Whether you're launching a new product, nurturing leads, or sending a special offer, these templates will make your emails stand out while keeping things simple and effective. Download them now and start sending emails that look as good as they convert.
How to add a hamburger/text menu to your Squarespace 7.1 desktop site using CSS
In this guide, we'll walk you through two options for adding a mobile-style menu to your Squarespace 7.1 desktop site using CSS: 1) A classic hamburger menu on desktop 2) A text-based menu as an alternative to the hamburger icon
How to center text on mobile devices in Squarespace 7.1 using CSS
In this guide, we’ll show you how to easily center text on mobile devices only, using simple CSS in Squarespace 7.1. This targeted solution helps you maintain a clean, mobile-friendly design without affecting your desktop layout. By the end, you'll have the tools to create a responsive, well-aligned website that adapts seamlessly to different screen sizes.
In this post, we’ll walk you through three options for centering text on mobile: 1) Center a single text block 2) Center text sitewide 3) Center text in the footer
How to center buttons on mobile with CSS (Squarespace 7.1)
Centering buttons on mobile devices is a simple yet powerful way to enhance the visual appeal and user experience of your Squarespace 7.1 website. Well-positioned buttons not only improve accessibility but also make your calls-to-action more prominent, encouraging visitors to take the next step.
How to overlay blog post title & categories on blog thumbnail images with CSS (Squarespace 7.1)
If you’re looking to make your blog stand out, overlaying titles and categories directly on your thumbnail images is a great way to create a polished and modern look.
In this tutorial, we guide you through the process of using custom CSS to seamlessly overlay text on your blog thumbnails. Whether you want to highlight categories for better navigation or make your titles pop, this step-by-step guide will help you achieve a cohesive, professional aesthetic.
How to rotate an image with CSS (Squarespace 7.1)
Adding rotating elements to your Squarespace 7.1 website is a creative way to introduce a dynamic, interactive, and playful vibe to your design.
In this step-by-step tutorial, we’ll show you how to effortlessly rotate images on your site using custom CSS, empowering you to enhance your visuals and captivate your audience with ease.
Update “Read More” blog link to custom text in Squarespace 7.1
Squarespace 7.1 offers a sleek, user-friendly blogging platform, but sometimes the default elements don’t quite match the personalized experience you want for your readers. One common customization is updating the “Read More” link that appears with blog excerpts.
Customizing this text to better reflect your brand voice or fit your site’s style can make your blog feel more cohesive and engaging.
The great news is that you don’t need extensive coding knowledge to make this change. In this post, we’ll show you how to update the “Read More” link to display custom text in your Squarespace 7.1 blog.
4 navigation link hover effects for your Squarespace 7.1 website
When it comes to web design, the little details make a big difference. One of those details is how navigation links respond when a user hovers over them. Thoughtfully designed hover effects can add a touch of interactivity, create a more engaging user experience, and subtly guide visitors through your website.
If you're building or customizing your site in Squarespace 7.1, you might be looking for creative ways to make your navigation stand out. In this post, we’ll show you four eye-catching and easy-to-implement hover effects for your navigation links that will elevate your site’s design and keep your audience engaged.
How to add sticky text in Squarespace 7.1 (no coding required!)
Sticky text is a powerful design tool that can keep important information in view as visitors scroll through your page, enhancing user experience and emphasizing key content.
If you're using Squarespace 7.1, you might be wondering how to achieve this without diving into custom code. The good news is that Squarespace's built-in features allow you to create sticky text effects with ease—no coding skills required!
In this quick and easy tutorial, we’ll walk you through the simple steps to make text elements stick to their position as visitors scroll, ensuring your site’s essential messages remain prominent and impactful.
How to add borders to images with CSS in Squarespace 7.1 (Fluid Engine)
Adding a border to images is a simple yet effective way to enhance your website’s visual appeal and create a polished, cohesive design.
While Squarespace provides many built-in design features, custom CSS can unlock additional styling possibilities that take your site to the next level.
In this post, we’ll guide you step-by-step through the process of adding and customizing borders to single images or site wide images images, and, your blog/shop page thumbnails using CSS in Squarespace 7.1. Whether you're looking to create subtle accents or bold frames, we've got you covered!
How to create a transparent header navigation bar on one page only (Squarespace 7.1)
Squarespace includes many built-in options for your header/navigation bar, however these options are universal — meaning they are applied site wide. Implementing a transparent navigation on a webpage can be a design choice that serves both aesthetic and functional purposes. In this simple yet impactful tutorial we walk you through how to add a transparent navigation to select pages of your website.
How to add a custom font to Squarespace 7.1 newsletter block
In this tutorial, we share a step-by-step guide to add custom fonts to your newsletter block. This tutorial will outline how to update the Newsletter Block heading, paragraph and name/email field and button to a custom font.
How to add a sticky categories sidebar to your Squarespace 7.1 shop page (CSS)
Sticky elements are design elements on a website that remain fixed in their position as the user scrolls down the page. If used correctly, sticky elements can enhance user experience, increase engagement and improve content visibility.
Sticky elements are a great solution for your shop page, as they keep categories visible to the viewer as they scroll your products.
In this tutorial, we walk you through how to add sticky shop page categories to your Squarespace 7.1 website in a few easy steps.
How to remove website overflow/horizontal scroll with CSS (Squarespace 7.0 & 7.1)
Have you noticed a frustrating horizontal scroll bar on your Squarespace website? This is called overflow. Website overflow is often caused by code snippets implemented in your website that extend the page width, and as a result, causes a horizontal scroll. In this tutorial, we share a quick and easy solution to remove overflow on desktop, tablet and mobile.
How to add a cookie banner to your Squarespace website & customize design with CSS
Master the art of adding and customizing a cookie banner on your Squarespace website with our step-by-step CSS tutorial. Enhance user experience and ensure compliance while maintaining your brand's unique style.