19 Squarespace Design Tips (that feel like ASMR for the eyes)

A cutout of a girl looking at her phone looking surprised and big text reading "design your site".

I was talking with my brother recently and we stumbled onto this idea:

The best website designs feel like ASMR for the eyes.

Maybe we’re just a couple of nerds for digital aesthetics, but you have to agree, a good-looking site just feels good. So that’s my core goal when customizing a Squarespace site — to evoke a feeling. A vibe.

The Squarespace design tips in this list are my favorite ways to create that visual feeling. This is how I make my templates look and feel as good as they possibly can.

Now let’s do this!

1. Mix Up Your Fonts

I geek out on fonts. I especially love mixing different ones together (like script with block font). If you look at my blog thumbnails, you can see I do this a lot. It just looks good!

Also, all of my header fonts use Minion Pro Condensed Display while my paragraph fonts are Neue Haas Grotesk Display. Notice how the font style is slightly different between these words and the header just above or the title.

This difference in fonts creates an interesting juxtaposition. It helps information stand out more and breaks up the monotony of a 1000+ words using the same text style.

It’s also more aesthetically pleasing.

Here’s how to customize your fonts in Squarespace:

  • Click on the paintbrush icon in the upper right corner

  • Click Fonts

    • Click the big Font button to choose a premade font pack

    • Click the > icon to edit your current font pack

  • Edit your headings and paragraph options

You can also upload a custom font, but you’ll need to do some light CSS work for this. So play around and geek out on fonts!

Tip: Play with the scale text option (the ⌞A⌝ symbol in your text editor bar) to stretch your words to fill the text box. This gives you even more control over font sizes.

2. Give Your Links a Pop of Color

It’s smart to stick with your brand colors. But that doesn’t mean we can’t have a little fun too — like splashes of color from a throw pillow.

Hyperlinks deserve a little extra design sauce — aka, a splash of color.

For example, let’s say I want link to my page on the best Squarespace tools and resources, you’ll see it shows up as a cool aqua blue color. I love this look and it’s part of my core visual branding.

But my Squarespace color palette doesn’t have it. So I changed my template settings so all links get this extra boost. It stands out. And it looks goooood.

Here’s how to change your text link colors in Squarespace:

  • Click on the paintbrush icon in the upper right corner

  • Click the > icon of Colors

  • Click the ✎ icon for the *background color you want to edit

    • *Open a blog post, click the sides and ✎ Edit Section, click on Colors tab — the color with the pencil icon is the background color of your blog

  • Scroll down to Links section

  • Edit Text Links to any custom color you want

Tip: Don’t like the underlined part of your text links? Learn how to get rid of them here.

3. Customize Your Blog’s Look

Your personal blog is more than text and images. There are lots of ways to customize it with Squarespace. For example:

  • Adjust the width

  • Add a sidebar column

  • Add a table of contents

  • Create custom images with Canva

  • Make your H3s pop with a different color

  • Use simple quote blocks to break up your text

  • Add a summary block to recommend next reads

  • Explore and test all available elements (under the blue + button)

Explore more:
Squarespace for Blogging (full guide)

4. Customize Your Elements

Squarespace gives you a lot of native elements to add in your blog posts and pages. For example, spacers, audio, video, forms, accordion blocks, quotes, custom code blocks, maps, charts — and lots more.

While you can use these assets straight out “the box”, most elements also have options to customize their look. For example:

 

Change your background color by adding a new text block, hovering over the edges, clicking on the hand icon and then the Style Background button (which looks like a crooked square dumping paint).

*Note: on blog posts, you may need to add a spacer element above and below the text you want customized. I always run into issues like changes being applied to the whole text section and previous box color changes disappearing.

 

Add a border (access this feature the same way you added a background color above).

 

Add some animation flare to your text like this drawing design.

You can find this feature by highlighting the text you want to animate, clicking on the ⌞A⌝ symbol, toggling on animation and then making a selection.

If you’re looking to add elements, click on +ADD BLOCK for pages or hover and click the blue + button for blog posts.

Explore more:
Squarespace Customization 101

5. Infuse Your Custom Branding

Templates are most excellent. But they’re really just meant to be a springboard. You should definitely add your own flavor.

Custom branding your site means adding your brand colors, tone of voice, guidelines and other design or aesthetic elements. Together, these make up your brand toolkit.

A great Squarespace design is one that’s customized and reflects your brand, values and visual identity.

Here are some ways to infuse your brand into your template:

  • Add your logo

  • Test and play around

  • Write with your brand’s personality

  • Add custom images (but more on this later)

  • Create custom assets, freebies and resources

  • Choose the right color palette (or create a custom one)

Tip: Practice thinking more creatively with your site design — it’s not the tool that matters, but the artist behind it. Try looking for outside inspiration (sites like Dribble are great for ideas).

6. Invest in Custom Integrations

Nothing says awesome design like an intentional custom tweak.

Custom integrations are third-party tools, plugins and resources to tweak your Squarespace template beyond the default options.

Often, this requires some light CSS and coding work. But there are so many simple tutorials and each plugin or code pack you buy comes with clear instructions.

But don’t worry, it’s not hard at all!

Here are a few examples of things you can do with a custom Squarespace integration:

  • Blog sidebar menu

  • Table of Contents

  • Background color gradients

  • Custom menus

  • Scroll-to-top button

Most plugins are custom CSS or code snippets you add into your back office — both SQSP Themes and Adlytic Marketing have great plugins available for purchase.

Alternatively, check out Spark Plugin, which comes with hundreds of one-click (no-code) design customizations — all in one place.

7. Create a Cool Logo

Your logo is like your brand mascot. It’s always visible (if you have a sticky menu) and an immediate brand-recognition point for people.

A good logo is an important part of your Squarespace design.

You can easily upload one by clicking into your editor window (on any page), hovering over the menu to Edit Site Header, hover and edit Site Title & Logo, and then uploading your image.

Here are some quick tips for making a solid logo:

  • Keep it simple — less is more

  • Make the background transparent

  • I create all my logos in Canva (900 x 200 px)

  • Add your logo in the footer menu (as an image)

8. Add a Favicon

A favicon is the mini logo in the corner of a website tab and it’s what shows up in the Google search results — mine says hi。

I also create my favicons using Canva (200 x 200 px). A good favicon should recognizable, clear and on-brand.

And here’s how to add a favicon to your Squarespace site:

  • From your site homepage, click on the ⚙️ icon

  • Click on Favicon from the options under Website

  • Upload your favicon design

    • I use Canva (200 x 200 px works well for me)

9. Customize Your Menu

Squarespace gives you a lot of options for customizing your Squarespace menu. Here’s what you can do:

  • Add a CTA button

  • Add social media links

  • Change the height / width

  • Add a dropdown menu folder

  • Create a border or drop shadow

  • Change link and element spacing

  • Make your menu sticky (fixed position)

  • Change the order of your links and elements

  • Change how the menu displays (Edit Design —> Color)

If you want even more menu customization options (like creating a big menu or a floating menu), you can buy custom codes and plugins or use a tool like Spark Plugin.

10. Use Different Image Styles

A simple square image works fine — I use them all the time — but there are so many more options in Squarespace!

You can also change its shape or make your image as a poster, card, overlap, collage or stack design. Just add an image, click in to edit it and choose Design to explore all these style options.

Or, you can also add a gallery block for slideshows or sharing multiple images together, like this:

11. Use Custom Images

Custom images and graphics are way better for design (and branding) than stock photos. Luckily, they’re pretty simple to make these days.

I usually use Canva to make simple edits. For example, I use their built-in background remover tool (requires pro plan) to customize stock photos into cutout images with text overlays.

Even phone photos elevate the authenticity of your design. So you don’t need a fancy camera, skills or design software.

Of course, there’s always AI too.

Put another way, the options for awesome custom images are endless!

Tip: Always check mobile to see how your design changes look. You’ll often need to make adjustments (especially for pages).

12. Integrate Other Platforms

You can sync outside accounts (such as Instagram, Amazon, SoundCloud and more) with your Squarespace site.

For example, if you integrate your Instagram feed, your new posts will automatically show up in Squarespace wherever you add the Instagram element.

You can easily set up these integrations in the elements menu and scrolling down to Integrations. From there, simply follow the instructions to sync your account.

13. Make a Kick-Ass Author Bio

Author bios build trust, humanize your content and boost your SEO. They’re also a key part of making a great Squarespace (blog) design.

I have two main author bios — one for this site and my travel blog and another for my music blog.

You can easily add and edit your author bio(s) within your main Squarespace dashboard (before clicking into a website):

  • Click on your profile picture in the upper right

  • Click on Profile

  • Scroll down to Bio to edit

  • To add an author bio (such as a guest or alternate bio):

    • Click into your site

    • Click on the ⚙️ icon

    • Click on Permission & Ownership

    • Click on Add Basic Author

Keep in mind that a good blog bio should establish credibility, be short and sweet, explain what you do, be customized and have some personality to it.

14. Customize Your 404 Page

A 404 page is where visitors land if they load a page with the incorrect address or you have a URL that no longer exists (for example, if you delete a blog post or page).

It’s best to avoid 404s since they’re bad for UX and SEO. So always be sure to do a 301 redirect whenever you delete a page or change its URL.

But just in case, it’s smart to customize your 404 page so visitors are greeted with something more than just “sorry, this page does not exist!”

For example, adding a Summary block with links to your most recent blog posts or having some type of CTA for readers to follow (so their journey doesn’t just end abruptly).

Here’s how to find your 404 page for editing in Squarespace:

  • Click into your website

  • Click on Pages under Website

  • Scroll down to System Pages

  • Click on 404 Page

To create a custom 404 page, make a new web page under Not Linked. Then, go back to the 404 Page (under Systems Pages) and choose this new page from the dropdown list of options.

15. Use Custom Tables

Tables are an awesome to easily share important information. They’re super visual and great for design. Unfortunately, Squarespace doesn’t have a built-in table option.

But don’t worry! There’s a (relatively) simple workaround.

Just head over to HTML Tables to create a basic table template. Then, add a Code block (</>) element to your page/blog and copy over the template code. Finally, customize it with some basic HTML tweaking and tag adds.

Here’s a simple example table I made comparing good and bad site design tips.

Good Website Design Bad Website Design
✅ Intentional with colors
🚫 No color consistency
✅ A quality logo
🚫 A blurry logo made quickly
✅ Small text that's hard to read
🚫 Scannable text and good UX
✅ Customized template
🚫 No changes from template
✅ Uses engaging elements
🚫 Boring; no interactive assets
✅ Original, high-quality images
🚫 Boring stock photos
✅ Simple navigation
🚫 Confusing design; hard to use

16. Create Custom Infographics

Infographics summarize key information into an easy-to-scan image. They make your posts more sharable and boost your blog quality, SEO and UX.

Once again, Canva is a great tool to use for making simple graphics. But if you’re looking for a shortcut using AI, then check out Infography.

Infography is a software that automagically turn any blog post into a sleek infographic. Honestly, so much time saved!

This is especially perfect if you have a Pinterest strategy for your blog (i.e., using your infographics as Pins).

Explore more:
Best Blogging Tools for Beginners

17. Prioritize Your UX

UX (user experience) is how a visitor interacts with and experiences your website. It’s a key metric for SEO and makes your design look way better.

Here are a few ways to optimize for UX using Squarespace’s built-in tools:

  • Add clear CTA buttons

  • Make simple URLs using good keywords

  • Add a search bar — especially if you have a blog

  • Be mobile first and edit your mobile site design separately

  • Style your text using bold, italics, lists, numbers, colors and headings

Explore more:
Essential Squarespace SEO Tips

18. Don’t Forget About Your Footer

Your footer is the area at the bottom of your website. And it’s an important part of a website’s design.

A core purpose of a footer is to make it easier for your visitors to quickly find key links (if they’re close to the bottom of a page). But it’s also a great place to post legal pages (like a privacy policy and your disclosures page).

I usually keep my footers pretty simple by including my main page links, site logo (as an image) and important disclosures.

Just remember to double check how your footer design looks on mobile! You’ll likely need to tweak things in the mobile version.

Explore other websites and brands you admire for inspiration.

19. Don’t Stop at Design

I have a mantra for this site: what good is an epic website design if no one freaking sees it?

So, don’t stop at design. Take the next step and get actual traffic to your website.

Why you ask?

Besides the obvious benefits of having more eyeballs on your stuff, traffic also gives you awesome data for how to further optimize your Squarespace design.

Metrics like user engagement, session times and conversions are key insights about how you can further improve your UX and overall design.

And that’s the goal, isn’t it? To constantly improve and optimize your site.


quin

Hey. My name is Quin.

I’m an artist, musician, blogger and digital creator who loves to travel. And I’m on a mission to inspire more creativity, adventure and carefreeness.

I also spend a lot of time in Japan and drink too much coffee.

Through my websites and passions, I’m building a personal multi-brand. It’s all a creative project and I’m loving every minute of it — everything is art…

So welcome, I’m stoked you’re here! Drop me an email to say what’s up :]

Previous
Previous

10 Best Squarespace Benefits (why I keep using them)

Next
Next

7 Kick-Ass Squarespace SEO Tips (how I rank all my blogs)