Squarespace Web Design Tips

S

Squarespace is a website builder for personal and professional websites. This post highlights a selection of my tips and steps to help you accomplish common website functionality and design tasks on the Squarespace platform.

Please note: these tips are for Squarespace 7.1 and above.



Help Selecting Text

I’m used to selecting text in Adobe applications with a single, double, or triple mouse click. This doesn’t work in Squarespace, which can be pretty frustrating.

Here’s the tip

Use Command + A to select all your text in a text box; it’s the equivalent of a triple click in Adobe products.


Choosing WWW or Non-WWW is Easy

No need to configure an htaccess file to choose if your website uses www or is naked, instead simply toggle the chose for Use ‘www’ prefix in Domains and Emails > Other Settings.

Use or do not use www for squarespace website

Create In-Page Anchors

There are many times when you may want to link to content on the same page. You do this in web design with anchors. Links with anchors are links that include the hashtag or number sign. The hashtag in the link corresponds to an ID in your content. For instance:

For the link: example.com/#anchorname

any of these ID elements would work:
<div id="anchorname"></div>
<h2 id="anchorname"></div>
<section id="anchorname"></section>

In Squarespace, you must use the Code block to create anchors or content IDs in your pages. You can use blank <divs> or add code to customize headings or other content types with IDs.

Then you’ll use the “Link” option in your navigation and type #anchorname for the link URL.

Video for how to create internal links on a page in Squarespace (using anchors)

Hello, so today we’re in Squarespace and

I wanted to show you how you could create links on a single

page website and how you can make anchor links on

your page. So first in your pages on main navigation.

The types of additions you’re going to add when

you click the plus sign is, it’s going to be a link.

Right, so you can see each of these services, sample work, reviews and contact.

If I am to click them, they move down on the same page.

Alright so how that works is if I come in and edit my

link, you can see I pick the title and that’s what’s shown in my

navigation. But for the URL I have it open in the same page not

in a new tab. I have the anchor where the tag

and it says, “Services.” Alright, so how does it know where to

go? I’m going to use this anchor and that’s what I’m going to ID

that area of the page. So if you come down

to Services and if I come to edit, you’re

going to see that there’s actually this code block hidden.

You don’t see anything in it. If I say edit it says <div id=

“services”></div>. So the format is div id and then whatever term

makes sense for that area of the page and then that’s going to be

what happens in your link. Alright so for

this one, we’re actually going to change it and so

you can just see this in work.

I now have commercial and residential so I’m going to change

this term to residential.

Okay. And if I go back to home.

Okay, now we’re going to edit our page. And

let’s see.

It might be taking a moment to update.

But we’re going to add an additional one.

And it’s going to be called commercial.

And it’s going to have an anchor commercial.

I’m going to say save. Okay,

it’s now updated. So we have commercial, residential.

I’m going to change the order here so I can drag and drop.

Commercial comes after it. Now when I go in to edit.

I can copy.

Command C. Come in to commercial.

Select that section so Command C. It’s now pasted that piece

of code. Um,

it’s okay that it’s overlapped. I need to come in and say edit and

this time it’s going to be an ID div that’s empty and it’s going

to say commercial. Okay,

so if I say save and then I exit I

should be able to go commercial. It takes me to that area.

I come back up, residential, it goes there.

If I look at it in mobile view I’ve added it to my

menu. When I click to commercial it will open

in that area.

Another tip that you’ll want to pay attention to is that when you align

your code the way that it looks on desktop is likely different

than mobile. So in my desktop view my code is above

my title. When I click to mobile you

can see that my code is below my title.

So we really want it to be that like my code is the top

because we want it to show all of the words,

right? Umm, so just don’t forget to

take a look at what your site looks like in both

mobile and the desktop

view. So that

your umm anchors work the way you are expecting.

So let’s just make sure here.

Okay, so we have commercial and let’s see if we test

commercial. Okay,

we’ve got sample work. What do I have here?

Commercial. Okay, let’s see.

Let’s look at our code again.

Okay. Okay.

There we go. So we can see that it aligns where we want and

mobile. And also if we test in,

desktop, it’s still acting up a little bit as far as refreshing,

but it does actually work in all of them.

Alright, so that is how in Squarespace you add anchors

using IDs to add navigation on a

single page website. So hopefully that’s helpful and the script

is in the comments below this YouTube video.

Alright, good luck designing.


Add SVG images to your Squarespace Site

If you try to upload an SVG image via the Image Block, you will receive an error in Squarespace; however, there’s still a way to include crisp, vector SVGs into your Squarespace websites.

To include SVG images, instead of using the Image Block, use the Code Block and copy and paste the SVG code into the code block. Here’s a video walk through of how to add a SVG to Squarespace.


Duplicating your site – and extending the expiration date

If you’re working on a new Squarespace website, it might take you longer to create your website than the Free trial provides. When your trial expires, then your Edit mode becomes locked and you’re shown an Announcement Bar that reads, “Your trial has expired. Subscribe to continue editing your site.”

edit mode is locked in squarespace when your subscription expires

If you need more time to be ready to Subscribe, a free work-around restarts your Trial time. From your dashboard, click the horizontal ellipse in the top right. Then select, Duplicate Website. This will create a copy of your website that is fully editable and has a renewed Free Trial countdown.

Duplicate your expired Squarespace website to reset the free trial.

Once the duplication process is complete, you can safely delete the expired site from your dashboard. To note, I’ve found that duplicated sites are at the bottom of your dashboard list, so you may need to scroll to see your new site. Also, the naming convention is the same as your original and appends (Copy) to the end. Also, don’t be alarmed if your new copy prompts you to Name your site and go through start-up modules. Your prior data is safe and available once you make it through the setup screens.

Extend Your Trial by 7 Days Automatic Email

When you first trial ends, you will likely be sent an automatic email that has a link to extend your Free Trial by 7 days.

Automated email to extend your Free SquareSpace trial by seven days.

Add a Current Copyright Year that Automatically Updates on Squarespace

To include a programmatic copyright year, I input inline Javascript into a Code block. The video below explains how I did it.

Hey Squarespace Designers!

Today I’m going to show you a way that you can use inline

JavaScript to go ahead and create a copyright with a year

that changes automatically. So this is something you’re probably used to seeing in

lots of website’s but I’m going to go ahead and show you how

I did it. Now I’m sure there’s lots of different ways to do it

so here’s just one you can evaluate. So in this

case, I have used a code block.

So in the code block when you click on it you can use the

pencil to edit and you can see I have a

class and I

found the class of what other small text is and I

will show you how to do that. But so I use that same

class and I use this snippet of code which has the copyright, the

copyright symbol, and then here’s the script that’s going to pull

the current year, then the company name and

I’ve included some links. So you can preview

in safe mode and you’ll notice that when you preview it, doesn’t actually pull

in your CSS styling but I can see what it looks like when I

click exit and I’m now previewing this work-in-progress

site and you can see I have my copyright there so your

snippet of code which I will also put in the first comment of this

video is something along these lines. Alright so

that will be there and let me just show you if you were looking

for what class you could use and- use snippet of code you can use

google inspect, come in and use your select element. Grab text that’s

similar and you can see it is the class s-q-s-r-t-e

dash small so that’s what I also copied and then used

in my scripting code. So again, this is the way you can use inline

JavaScript and your Squarespace footer to show a copyright and update it

automatically.

Here’s the code I used for the Footer Copyright in the video.

<p class="sqsrte-small">Copyright &copy; <script>now=new Date(); year=now.getFullYear(); document.write(year);</script> Pro Flush by <a href="https://morgantownseptic.com" target="_blank">Morgantown Septic Tank Service</a>. <a href="https://kellybarkhurst.com/" target="_blank">Web design</a> by Barkhurst Creative.</p> 

For just the basics, copy and paste the following inline javascript code and html, and simply change out “Company Name” with your company name.

<p>Copyright &copy; <script>now=new Date(); year=now.getFullYear(); document.write(year);</script> Company Name.</p>

For more programmatic footer copyright scripts, check out our post, “Add A Copyright Year Programmatically To Your Website Footer.”


Button Text Size in Navigation

I was having a bit of trouble finding how to change the font size and weight of the Navigation Button. I kept getting to the Primary button settings, but changing those settings did not change the Header Navigation button look and feel, only the primary button in the form.

The solution: Go to Assign Styles in Fonts. Then select HEADER BUTTON (Custom). This allows you to adjust just the look and feel of your Header Navigation Button.

Change Squarespace header/navigation button text size.

Overlap Navigation/Header with Hero

In one of my designs, I asked, “Is there a way to make my header and navigation overlap my hero image?”

I realize this question is highly specific to each website design, but a possible design option is to use the Gradient background color option in your navigation/header settings. This solution is especially useful when your hero image has the same solid background color as the gradient you choose for your header. This combination allows for a smooth overlapping effect. In the short video below, I demo the SquareSpace header/hero image overlapping effect in action.


How does the Portfolio component work?

The “Portfolio” feature is new to Squarespace 7.1. The Portfolio can be an active page in your navigation or be unlinked and accessed by direct links.

Can my portfolio page be set as my homepage?

Yes, the Squarespace Portfolio can also be designated as your home page. When the portfolio is your homepage, the assigned Portfolio slug will be ignored and redirected to your homepage, such as www.example.com; however, that slug is used as the first directory for all your projects. For instance in the following, the portfolio slug is set as “gallery” or “portfolio” — gallery/maternity-images or portfolio/home-decor.

How can I use the Drop Down menu with the Portfolio option?

You can create a Drop Down in Squarespace and add links for each section of your Portfolio. This way, your portfolio’s projects can be seen and accessed from your navigation.

Notes: when you add links pointing to the projects in your portfolio, make sure that if you are using relative links that you add a forward slash in the beginning of your slug. For example, the link your would save would be: /portfolio/home-decor. This will allow your link to be a relative URL. Otherwise, include your entire url starting with https://www.example.com as the link.

Additional Squarespace Portfolio resources:


Are there gotchas?

Yes, of course. As a web developer, one of the gotcha’s that was quite frustrating is that you can not add custom CSS or Javascript unless the site you’re working on has a Business or higher subscription ($23+ a month); the personal plan does not allow for custom CSS and Javascript.

Custom code is accessed via: Home > Settings > Advanced > Code Injection

Also, I could not find a way to add a Title to an <a href> link tag so that text appears above a link (as shown below).


Don’t miss these branding opportunities

Adding a Social Sharing – OG Image to your SquareSpace Site

The social share image is shown when your website is shared by text or linked to on social media sites such as Facebook, LinkedIn, and Twitter. This is your opportunity to share your brand or important ways to reach you, such as your website URL or phone number.

On SquareSpace, go to Settings > Website > Social Share. Add your image and then click Save. A recommended pixel size for your social share or og:image (open graph image) is 1200px by 630 px.

go to Settings > Website > Social Sharing to upload a social sharing image on Squarespace

Adding a Favicon

Another opportunity to brand your website is adding a Favicon to your Squarespace site. To do so, go to Settings > Website > Favicon. Add your default image and optional dark mode image, then click Save. Learn about Favicons in our article, What is a favicon, and how do I create a favicon?”

Add a favicon to Squarespace. Includes options for regular and dark mode.

Happy Web Designing!

About the author

Kelly Barkhurst

Designer to Fullstack is my place to geek out and share tech solutions from my day-to-day as a graphic designer, programmer, and business owner (portfolio). I also write on Arts and Bricks, a parenting blog and decal shop that embraces my family’s love of Art and LEGO bricks!

Add comment

Recent Posts

Archives

Categories