29: Secret Design Menus Hidden Inside Squarespace 🤫
Squarespace has a site styles menu that you can use to change fonts, colors, buttons, and more. But what if I told you that design menu was one of many?
In this episode of ThinkInsideTheSquare, you’ll learn about the secret design menus hidden inside Squarespace that you might not even know about.
-
Squarespace has a site styles menu that you can use to change the fonts, the colors, the buttons, styles, and all kinds of different things about the design of your Squarespace website. But what if I told you that that design menu was one of many in this week's episode of Think Inside the Square. You'll learn about the secret design menus hidden inside Squarespace that you might not even know about.
Welcome to Think Inside the Square, a podcast full of tips and tricks to help you create a Squarespace website that you're proud of. I'm your host, Becca Paine, Squarespace expert and creator of Inside the Square doco. In this episode, we're going behind the scenes to access hidden design menus that can help you customize the look of your Squarespace website, making it uniquely yours. For a transcript of this episode, along with the links to any resources mentioned, visit inside the Square Eco Forward Slash Podcast. The term Squarespace is a trademark of Squarespace Inc. This content is not affiliated with Squarespace Inc..
When you click on the paintbrush icon on the top right hand side of your website preview, you'll open up your site styles menu. This is where you can change fonts and colors in your button styles and so many different things about the design of your Squarespace website. Now there's actually one menu here that you might not be aware of. You can get pretty deep into font customization using the menu inside site styles. When you click on fonts, scroll down to the bottom and you'll see a sign styles. Clicking on that will open up a list of all kinds of things that you can have on your Squarespace website. And in each one of those items, you can change it to a different font family, a different font style change the weight of the font to the letter spacing. We're talking about individual things like a site title or a title for a list carousel section. You can get really specific here. Again, this menu that not a lot of people are aware of is found under fonts. Assign styles. But that is just the tip of the iceberg, my friend. When you're actually editing content on your Squarespace website, many different content blocks have unique design menus, and I'm going to talk about some of my favorites. First up is the text block. When you're editing text, you're going to see the text editor options pop up automatically. This is where you change the font style from heading one to heading to or a paragraph where you can change it to bold or italicize or even change the color. But there are quite a few other options in this text block that you might not know about. The first one will be a letter F with the left and right arrow. Clicking on that option will turn the text into what's known as stretched to fit. It will stretch the text so that it changes in size and fits all the way across the entire text block. That's right. A heading one can end up being super tiny or a tiny paragraph text can be gigantic if it stretches to fit. It won't change the ratio of the characters. It just changes the size of the font for that individual character. So it fits the size of the text block itself. That's right. It overwrites the size that you set up in the design menu. It's pretty interesting. Give it a click next time you're working on text to see it in action. Right next to that option, you'll see a letter A with a squiggle under it. A sketchy style. Underline this is your text highlight. Click on that option and you'll see all kinds of creative ways to highlight any selected text in your text block and highlight. It's kind of a misnomer. Yeah, you have that option, but you can also have the text circled and underlined in a way be underlined. And while there are a ton of options hidden in there. I have a whole tutorial on this and I'll link to it in the show notes at Inside the Square Eco Forward Slash Podcast. There's one more text design option you might not know about, and that's the paint bucket icon that's in that text editor bar. It adds a background to your text block. You can make it any color you want it to be. Change its padding and its size. This means you don't have to use shaped blocks to get color behind your text blocks. They have that same background option. When you add a quote, click on its hidden design menu and you'll see the option to add a background that's any color you want. The next head and design menu I wanted to talk about is the shape block. The Shape block seems simple enough until you try blend mode options layer a shape block on top of texture and image and see what those blend modes can do. There are way too many details and options to list in an audio based format like this podcast. But trust me on this, it can be really cool. Add a shape block, place it over some text in an image and under the style menu. Click on blend mode. You are going to love it all. The content blocks inside Squarespace have some unique design feature to them, but those are the ones that I get really creative with, so I wanted to make sure you knew about them. There are a few other secret design menus that we need to talk about, but before we do, I want to mention two not so secret design menus for auto layout sections. When you're adding a page section to a Squarespace page and you're looking at all the preview images, you'll see a little icon of a letter I in a circle on the top right hand corner of a preview, hover over it and it will tell you that you're looking at an auto layout. This could be a list section or a gallery section, gallery sections, display images and can display captions and list sections of a ton of content options for both of these layouts, pay close attention to the design menu. Depending upon the layout that you pick, you are going to have a ton of different options for how to display that content, everything from size and spacing to what's actually being displayed. I consider those not so hidden but really underused design menus, so I wanted to mention them in this episode. Now, if you spend enough time in Squarespace, you probably already seen and use these so called secret design menus that I've talked about. But I'm here to tell you, friend, there are a lot more. This next one really shocks people because it doesn't seem like it should be so tricky to find in Squarespace. When you click on your website menu and then system pages, you'll find a list of three pages for a for checkout and lockscreen, the forum for page It's not a hidden design menu. It just lets you pick any page on your site to be a four or four page. I do recommend having a custom one, but that is an entirely different topic for an entirely different episode. Let's talk about the next one, the secret design menu for your checkout page. I have gotten so many requests from square spacers for codes to change simple colors on a checkout page, but that's something we can do right here in Squarespace beyond colors, we don't have a lot of options, but the secret design menu is where you can change the color of the header, the page, the border between the two, add your logo and change your button colors for the checkout process. Again, you'll find that under website system pages, then select checkout page. Another secret design menu in your system pages your lockscreen. If you have any password protected pages on your site, you'll want to click on lockscreen to open the secret design menu that you can use to customize it. Here you'll find layout options, branding and text options, the ability to add images and video, and an entirely separate site style menu for fonts and colors. Yup. These fonts and colors, they're not in your main site style menu where you edit the rest of your site. They're hiding in the secret menu. For those of you who used to use Squarespace version seven, these are a lot like cover pages. Now to find this again, look under website system pages, lockscreen and for the checkout one, that's websites, system pages. Check out page.
And for the other one, that's website system pages checkout. Now when working with collection pages and collection items like blog posts or products in your store, you're going to see other design options there too. Hop into edit mode for any of those page types and you'll see an option on the right hand side of the screen. It'll say edit page or edit section or edit layout. Here you can find different layouts and spacing options. Now a blog page that lists all of your posts. That is a fun one to check out. You have a lot of layout alternatives here. What you select when you create the blog is not what you're stuck with. You can change that layout at literally any time by using its hidden design menu. Again, hop into edit mode and on the right hand side of the page you're going to see the option to edit section or edit page and that's where you can get really creative. Same for product pages. Each product page in a store needs to be the same layout, but you have unique design options and a custom design menu for each store. I've got another tutorial about those and a link to it in the show notes. Inside the Square Scope Forward Slash Podcast if you want to check that out. Moral of the story here is that there are little design menus hidden around Squarespace. You just need to look for them for every content block, page, section and page layout. You're going to find some really interesting options that you can use to make Squarespace uniquely yours. And when it comes to shape blocks and text blocks, there's even more to explore.
I want to end this episode with a specific piece of advice that I want you to take to heart.
I talk about customer success a lot, and I love to teach people how to use custom code to make their Squarespace websites unique. As much as I love it, you don't need to use CCS to change something. You can change with the design menu. I'm going to say that one more time for the people in the back. Don't use CC or any custom code to change something that you can change with a design menu in Squarespace. Your font menu. You've got tons of options there. Your color menu has ten different color themes to work with your text editor. You can add background colors and the shape lock lets you create interesting effects without code. Don't use custom cost to change things that you can change with the design menu, but you should use it to make your website unique. I'll share a lot more about that in upcoming episodes. But now that you know about your hidden design menus, I want you to see the five codes that I use on every single Squarespace website. I create five specific codes to change parts of Squarespace that you can't change using the design menus, hidden or otherwise head on over to inside the square deco forward slash five spelled out that's inside the square deco forward slash f i v e to grab the codes that I use on every website. Because even knowing about these secret menus, you'll still want to use a little bit of custom CC to make Squarespace uniquely yours. Thank you so much for listening to this episode of Think Inside the Square. I hope you feel inspired and excited to make Squarespace uniquely yours with those hidden design menus you just learned about. For it links to all the things that I talked about. Check out the show notes at Inside the Squared Eco Forward Slash Podcast. Thanks again for listening and most importantly, have fun with your Squarespace website. Bye for now.
-
5 codes I use on every site: insidethesquare.co/five
Text highlight tutorial: youtube.com/watch?v=R5kTKhmvfDA
