Setting up a Design Elements and Site Styling page on your Squarespace website

Coming in HOT with a blog post / video tutorial that might not be highly requested, HOWEVER I know that many of my beloved SEO’s will find it surprisingly helpful.

I’m stepping a bit outside of my regular Squarespace SEO content today, but we aren’t straying far…. instead, I’m going to share a tip that might be very useful if you’re interested in web design and building/creating your Squarespace website!

In this post, I’m going to show you how to set up a design elements or site stylings page on your Squarespace website. We’re also going to talk about what that page will look like, where it lives on the back end of your Squarespace website, AND any implications this page has for SEO (because, duh hahah my favorite topic)

This might not be something that you currently have set up on your Squarespace website, and if that’s the case - that’s A-OK! No worries at all, it’s not like the world will end without it hahah but once it’s on your radar, you might decide to spend a few minutes setting one up - the more you know, the better things can be, you know?!

This is the kind of insider info that I give to my Squarespace SEO consulting clients and students in my signature online course, Top Squarespace SEO. But since I’m not one for secrets and truly want the best for anyone with a website, I’m giving you the goods here totally for free - no gatekeeping here!

Oh, and I’ve even recorded a video tutorial for you to watch in case that’s more your vibe.

Alright, let’s get right into it!

SQUARESPACE SEO SERIES

I have so many tips to share on the subject that it would have been crazy to put it all in one article! There are many misconceptions about Squarespace SEO which is why I've dedicate so many posts & videos to this topic. Enjoy!

Work with Charlotte - explore my Squarespace SEO services & programs

set up a Design elements and site styling page for your squarespace website

Click play to watch the video!

Note: At the time of recording, this video shows a demo website set up on Squarespace version 7.1

Why should you create a design elements or site styling page on your Squarespace website?

Personally, I think that having a site styling or design elements page is one of the most underrated tips & hacks you can do when designing your Squarespace website .

These pages are helpful whether:

you’ve taken the DIY route,
if someone else designed your Squarespace website
or even if you’re using a Squarespace template kit that doesn’t include this page/feature

Basically this page is helpful if you want to see all your design elements set up VISUALLY in one place, or if you want greater control over how they look/feel all together.

In this video/blog post, we are going to start off by making sure you know what the heck a site styling or design elements page is!

Next up, I’ll show you how you can use it to edit the different design elements on your site (text, headers, buttons, colors, etc.).

And last but not least, we’re going to talk about what implications this page has for Squarespace SEO.

So let’s take a look, shall we?

Step 1: Create a new page

First up, you’re going to create a new page in the “Not Linked Pages” section of your Squarespace website. This page is intended only for your own personal reference - you do NOT want it to appear in the main navigation of your Squarespace website - it’s not meant to be a public page for random website visitors to see/find!

Don’t overthink it- call the page something straightforward like “Design & Styling Elements”.

Once you’ve got that page created, now it’s time to set it up and do some basic styling. Refer to the video tutorial to see an example of what this is going to look like.

The whole point of this page is that you want to see alllllll the different design elements or options to style your site, all in one place visually.

In the example page that I show in the video, I keep the page design and layout super simple.

On one side, I put a column of text and then format the headers with the following:

Header 1
Header 2
Header 3
Header 4

Below that, I list out the different text styling options:

paragraph 1
Paragraph 2
Paragraph 3
Monospace

On the right side of the page, I then put another column and stack 3 buttons on top of each other:

Primary button
Secondary button
Tertiary button

I also make a basic text note for myself that reminds me that the primary button affects:

add to cart button
auto layout button
button blocks set to Primary
checkout buttons
donation block buttons
form block submit buttons
member sign up block button
newsletter block button

As you can see, you’ll be using the Primary button for…. most things on your Squarespace website haha but depending on how much you want to get creative and customize the design of your website, you might also be using the secondary and tertiary buttons as well, so it’s great to see the difference between the three and how they might be set up to look very different, depending on where/how they are used.

Now you know what to put on the page, so let’s take a look at how you can play around with the different design elements once this page is up and running!

Playing around with the design elements and site stylings

From the back end of your Squarespace website, you can then go to the main dashboard and click Design > Site Styles.

This is where you can start playing around with many things, such as the different fonts, colors, animations, spacing, buttons, image blocks, etc.

If, for example, you click through to the Buttons tab, you’ll the see your options of how you can style the different buttons - size, colour, font, all that jazz!

Same thing if you click over to the Headings tab, you can adjust each heading option and get it started playing around with that (size, weight, font etc.)

And then because you can the Design Elements & Site Styling page open and displaying, you’ll be able to see how any changes you can through the Design tab affect the button, really seeing it visually…. on it’s own, but also how it compares to everything else.

Again the reason why this page is so helpful is that you can see it all together, in one place… but also you it gives you easy access to editing all the elements that you want, and you can simply & quickly toggle between them while seeing any changes in real time.

The whole point is to make you comfortable with the design elements and give you the space to try new things without messing it all up visually LOL!

SEO considerations

Now that you know what this page is and how to create & set one up, let’s take a look at it from an SEO point of view! Because obviously you know this is my favorite topic hehehehe

I want you to understand what implications (if any) this page has for SEO!

First off, like I said above, you want to make sure this page is set up in the Not Linked Pages section, because we do not want it in the main navigation of your Squarespace website.

The second thing I recommend doing is to open up the page settings and make sure that you’ve toggled OFF the “Enable Page” option. In other words, you want this page to be disabled. This is a way to ensure that this page is not accessed by site visitors (because duh, this page is just for you - you do not want traffic to this page and you don’t want anyone accessing it accidentally).

Next up, still in the page settings I want you to click over to the SEO tab. You do NOT want to fill out the SEO title or SEO description fields (again, because we do not want traffic to this page and we don’t want anyone accessing this page - it’s just for us!) because we don’t want this page to be crawled and indexed by Google.

Still on the SEO tab, another thing you can do for additional precaution is to slide over the “Hide Page from Search Results” option - which again, ensures that Google won’t crawl and index this page and therefore include the page in a search result against our intentions.

Click Save when you’re done.

Headings & SEO

When you’re going through and playing around with the different stylings of headers (Heading 1, H2, H3, etc.) one of the biggest things I want you to keep in mind is how headings function both from a design point of view AND SEO.

Whether you are the one DIY’ing the design of your Squarespace website, or you’ve hired a designer OR are using a template kit, this is something you definitely want to consider!!!

For example, let’s look at the Heading 1 / H1.

Each page on your website should really only have one (1) Heading 1, because it’s something that indicated hierarchy and a thing that Google looks at when crawling and indexing your page. Usually we have one (1) Heading 1 at the top of the page, as the page title.

Let me repeat that: you should only use the Heading 1 ONCE on a page, if you care about SEO!

On the flip side, you can use H2, H3 and H4 wayyyy more times throughout the page - there isn’t really a limit here, so go wild without issue!

So again, if you’re thinking about things from a design element, you absolutely want to keep in mind how you would use 1 H1 on the page but might use multiple H2, H3 & H4 and let that guide how you set it all up - especially aesthetically.

Other than that, you’re good to go!

Final Thoughts

I hope you found this post helpful and I’d love for you to try adding one to your own Squarespace website, if you don’t have one up and running already!

It’s a fantastic way to see all your different design elements visually, and get a sense for what things look like once you start playing around with the site stylings… while remaining cohesive as a whole!

As you can see, it’s very simple to set up and you can keep it private and play around as much as you want until you get it all looking just right :)

Alright that’s it for now - see you again soon in the next post!

xoxo

Charlotte

Exciting news : my signature online course, Top Squarespace SEO, is now open for enrollment and I’d love to have you join us inside the program! Learn all about it here.

If 1-on-1 is more your style, then I encourage you to sign up for my Squarespace SEO Audit & Consulting Sessions! We’ll hop on Zoom, make changes to your Squarespace website in real time, and you’ll get a totally personalized Squarespace SEO strategy to follow moving forward.

You can also sign up for my newsletter (right here or below), where I often share Squarespace SEO tips, tricks and high-quality exclusive content. I send out emails to my list a few days a week, mostly focused on Squarespace SEO, business and online marketing tips, and a behind the scenes look at what’s going on in my corner of the internet, and I can guarantee that you’ll find the newsletter topics interesting, entertaining and worth your time. #humblebrag

Finally, shameless plug: hit me up with any specific questions you have about Squarespace SEO and your website because I’m your girl. You can reach out to me directly if you’re interested in working together on your website and we can talk about whether or not you would be a good fit for my consulting and ongoing services. I can’t take on every request to do Squarespace SEO consulting but I do pick a few websites and businesses to work with every month and I’d love for you to be one of them.