ELEVATE

YOUR WEBSITE

Trending blog posts



Freebies

Squarespace basics

ALL POSTS


Save 10% on your Squarespace subscription with code STYLEDSQUARE10

HOW TO, PLUG-AND-PLAY CSS The Styled Square HOW TO, PLUG-AND-PLAY CSS The Styled Square

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.

Read More
HOW TO, PLUG-AND-PLAY CSS The Styled Square HOW TO, PLUG-AND-PLAY CSS The Styled Square

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.

Read More
HOW TO, PLUG-AND-PLAY CSS The Styled Square HOW TO, PLUG-AND-PLAY CSS The Styled Square

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.

Read More
HOW TO, PLUG-AND-PLAY CSS The Styled Square HOW TO, PLUG-AND-PLAY CSS The Styled Square

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.

Read More
HOW TO, PLUG-AND-PLAY CSS The Styled Square HOW TO, PLUG-AND-PLAY CSS The Styled Square

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.

Read More
HOW TO, PLUG-AND-PLAY CSS The Styled Square HOW TO, PLUG-AND-PLAY CSS The Styled Square

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!

Read More
HOW TO, PLUG-AND-PLAY CSS The Styled Square HOW TO, PLUG-AND-PLAY CSS The Styled Square

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.

Read More
HOW TO, PLUG-AND-PLAY CSS The Styled Square HOW TO, PLUG-AND-PLAY CSS The Styled Square

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.

Read More
HOW TO, PLUG-AND-PLAY CSS The Styled Square HOW TO, PLUG-AND-PLAY CSS The Styled Square

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.

Read More
HOW TO, PLUG-AND-PLAY CSS The Styled Square HOW TO, PLUG-AND-PLAY CSS The Styled Square

How to customize Squarespace 7.1 shop categories design with CSS

In this Squarespace tutorial, we guide you through 4 options to customize your shop page categories with CSS:

Update shop category font size

Remove vertical line separator between shop category options

Transform your shop categories into buttons

Stack shop categories on mobile devices

Whether you're looking to add a personal touch of design or add functionality to your Squarespace shop — this post is your step-by-step tutorial to tweaking your template to perfection. Perfect for beginners and seasoned designers alike, this guide is all about empowering you to make your Squarespace shop truly your own.

Read More
HOW TO, PLUG-AND-PLAY CSS The Styled Square HOW TO, PLUG-AND-PLAY CSS The Styled Square

How to add rotating text to your Squarespace 7.0 & 7.1 website

Looking to boost your Squarespace website's visual appeal and engagement? This tutorial will teach you how to easily incorporate rotating text with HTML and CSS, perfect for highlighting key messages, showcasing testimonials, or adding a creative twist to your content. Follow our step-by-step guide to add rotating text to your Squarespace website and elevate your online presence. Get ready to captivate your audience with dynamic design elements!

Read More
HOW TO, PLUG-AND-PLAY CSS The Styled Square HOW TO, PLUG-AND-PLAY CSS The Styled Square

How to add a gradient background to a section with CSS (Squarespace 7.1)

Adding a gradient to your website can create a visually appealing focal point, making your content more engaging and memorable. In this Squarespace tutorial, we'll show you how to add a gradient background to any section of your site. Gradients are a versatile and eye-catching design element that can elevate the visual appeal of your web pages.

Read More
HOW TO, PLUG-AND-PLAY CSS The Styled Square HOW TO, PLUG-AND-PLAY CSS The Styled Square

How to create smooth scroll anchor links in Squarespace 7.0 & 7.1

Anchor links are a hyperlink that allow visitors to jump from one location of a website page to another with just a single click. Anchor links are a user-friendly way of navigating your visitors through text-heavy pages or to showcase your most important content. In this tutorial, we’ll walk through the quick and easy steps to add anchor links to a Squarespace 7.0 or 7.1 website using HTML and CSS,

Read More

Watch & Learn

Customize

Shop Squarespace
plugins

Commission

Join our affiliate
program

Websites

Shop Squarespace templates