Latest / ThinkInsideTheSquare / 29: Secret Design Menus Hidden In Squarespace 7.1

Transcript

29: Secret Design Menus Hidden In Squarespace 7.1 · ThinkInsideTheSquare

• 0:01
  Speaker 1: Squarespace has a site styles menu that you can use to change the fonts, the colors, the button styles and all kinds of different things about the design of your Squarespace website.
• 0:11
  Speaker 1: But what if I told you that that design menu was one of many?
• 0:15
  Speaker 1: 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.
• 0:24
  Speaker 1: 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.
• 0:34
  Speaker 1: I'm your host, becca Harpane, squarespace expert and creator of InsideTheSquareco.
• 0:39
  Speaker 1: 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.
• 0:49
  Speaker 1: For a transcript of this episode, along with the links to any resources mentioned, visit InsideTheSquareco forward slash podcast.
• 0:56
  Speaker 1: The term Squarespace is a trademark of Squarespace Incorporated.
• 0:59
  Speaker 1: This content is not affiliated with Squarespace Incorporated.
• 1:02
  Speaker 1: When you click on the pay brush icon on the top right hand side of your website preview, you'll open up your site styles menu.
• 1:11
  Speaker 1: This is where you can change fonts and colors and your button styles and so many different things about the design of your Squarespace website.
• 1:18
  Speaker 1: Now there's actually one menu here that you might not be aware of.
• 1:22
  Speaker 1: You can get pretty deep into font customization using the menu inside site styles.
• 1:27
  Speaker 1: When you click on fonts, scroll down to the bottom and you'll see assigned styles.
• 1:32
  Speaker 1: 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.
• 1:46
  Speaker 1: We're talking about individual things like a site title or a title for a list carousel section.
• 1:52
  Speaker 1: You can get really specific here.
• 1:54
  Speaker 1: Again, this menu that not a lot of people are aware of is found under fonts, assigned styles.
• 1:59
  Speaker 1: But that is just the tip of the iceberg, my friend.
• 2:09
  Speaker 1: 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.
• 2:19
  Speaker 1: First up is the text block.
• 2:20
  Speaker 1: When you're editing text, you're going to see the text editor options pop up automatically.
• 2:25
  Speaker 1: This is where you change the font style from heading one to heading two or paragraph, where you can change it to bold or italicized or even change the color.
• 2:33
  Speaker 1: But there are quite a few other options in this text block that you might not know about.
• 2:38
  Speaker 1: The first one will be a letter A with the left and right arrow.
• 2:42
  Speaker 1: Clicking on that option will turn the text into what's known as stretch to fit.
• 2:47
  Speaker 1: It will stretch the text so that it changes in size and fits all the way across the entire text block.
• 2:54
  Speaker 1: That's right.
• 2:54
  Speaker 1: A heading one can end up being super tiny, or a tiny paragraph text can be gigantic.
• 3:00
  Speaker 1: If it stretches to fit, it won't change the ratio of the characters.
• 3:05
  Speaker 1: It just changes the size of the font for that individual character, so it fits the size of the text block itself.
• 3:12
  Speaker 1: That's right.
• 3:17
  Speaker 1: It overwrites the size that you set up in the design menu.
• 3:20
  Speaker 1: It's pretty interesting.
• 3:21
  Speaker 1: Give it a click next time you're working on text to see it in action.
• 3:24
  Speaker 1: Right next to that option you'll see a letter A with a squiggle under it, a sketchy style underline.
• 3:30
  Speaker 1: This is your text highlight.
• 3:32
  Speaker 1: Click on that option and you'll see all kinds of creative ways to highlight any selected text in your text block and a highlight.
• 3:39
  Speaker 1: It's kind of a misnomer.
• 3:40
  Speaker 1: Yeah, you have that option, but you can also have the text circled and underlined and wavy, underlined.
• 3:46
  Speaker 1: And well, there are a ton of options hidden in there.
• 3:49
  Speaker 1: I have a whole tutorial on this and I'll link to it in the show notes at insidethesquareco forward slash podcast.
• 3:55
  Speaker 1: 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.
• 4:01
  Speaker 1: It adds a background to your text block.
• 4:04
  Speaker 1: You can make it any color you want it to be, change its padding and its size.
• 4:08
  Speaker 1: This means you don't have to use shape blocks to get color behind your text.
• 4:12
  Speaker 1: For full blocks they have that same background option.
• 4:15
  Speaker 1: When you add a quote, click on its hidden design menu and you'll see the option to add a background.
• 4:20
  Speaker 1: That's any color you want.
• 4:25
  Speaker 1: The next hidden design menu I want to talk about is the shape block.
• 4:28
  Speaker 1: The shape block seems simple enough until you try blend mode options.
• 4:33
  Speaker 1: Layer a shape block on top of text or an image and see what those blend modes can do.
• 4:38
  Speaker 1: 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.
• 4:47
  Speaker 1: Add a shape block, place it over some text in an image and under the Style menu, click on Blend Mode.
• 4:54
  Speaker 1: You are going to love it.
• 4:55
  Speaker 1: 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.
• 5:04
  Speaker 1: 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.
• 5:13
  Speaker 1: 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.
• 5:24
  Speaker 1: Hover over it and it will tell you that you're looking at an auto layout.
• 5:27
  Speaker 1: This could be a list section or a gallery section.
• 5:30
  Speaker 1: Gallery sections display images and can display captions and list sections of a ton of content.
• 5:36
  Speaker 1: Options For both of these layouts pay close attention to the Design menu.
• 5:41
  Speaker 1: 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.
• 5:52
  Speaker 1: I consider those not-so-hidden but really underused design menus, so I wanted to mention them in this episode Now.
• 6:00
  Speaker 1: If you spend enough time in Squarespace, you've probably already seen and used these so-called secret design menus that I've talked about, but I'm here to tell you, friend, there are a lot more.
• 6:10
  Speaker 1: This next one really shocks people because it doesn't seem like it should be so tricky to find In Squarespace.
• 6:16
  Speaker 1: When you click on your website menu and then System Pages, you'll find a list of three pages 404, checkout and Logscreen.
• 6:24
  Speaker 1: The 404 page it's not a hidden design menu, it just lets you pick any page on your site to be a 404 page.
• 6:30
  Speaker 1: I do recommend having a custom one, but that is an entirely different topic for an entirely different episode.
• 6:36
  Speaker 1: Let's talk about the next one, the secret design menu for your checkout page.
• 6:41
  Speaker 1: I have gotten so many requests from Squarespaceers for codes to change simple colors on a checkout page, but that's something we can do right here in Squarespace.
• 6:50
  Speaker 1: 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.
• 7:02
  Speaker 1: Again, you'll find that under Website System Pages.
• 7:06
  Speaker 1: Then select Checkout Page.
• 7:09
  Speaker 1: Another secret design menu in your system pages you're Lock Screen.
• 7:13
  Speaker 1: If you have any password protected pages on your site, you'll want to click on Lock Screen to open the secret design menu that you can use to customize it.
• 7:22
  Speaker 1: 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.
• 7:32
  Speaker 1: Yup, these fonts and colors.
• 7:34
  Speaker 1: They're not in your main site style menu where you edit the rest of your site.
• 7:38
  Speaker 1: They're hiding in the secret menu.
• 7:40
  Speaker 1: For those of you who use to use Squarespace version 7, these are a lot like cover pages.
• 7:45
  Speaker 1: Now, to find this again, look under Website System Pages Lock Screen.
• 7:50
  Speaker 1: And for the checkout one, that's Website System Pages Checkout Page, and for the other one that's Website System Pages Checkout.
• 8:03
  Speaker 1: 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.
• 8:10
  Speaker 1: Hop into Edit Mode for any of those page types and you'll see an option on the right hand side of the screen.
• 8:16
  Speaker 1: It'll say Edit Page or Edit Section or Edit Layout.
• 8:19
  Speaker 1: Here you can find different layouts and spacing options.
• 8:22
  Speaker 1: Now, a blog page that lists all of your posts.
• 8:26
  Speaker 1: That is a fun one to check out.
• 8:27
  Speaker 1: You have a lot of layout alternatives here.
• 8:30
  Speaker 1: What you select when you create the blog is not what you're stuck with.
• 8:34
  Speaker 1: You can change that layout at literally any time by using its hidden design menu.
• 8:39
  Speaker 1: 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.
• 8:48
  Speaker 1: Same for product pages.
• 8:49
  Speaker 1: 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.
• 8:57
  Speaker 1: I've got another tutorial about those and I'll link to it in the show notes inside the squareco forward slash podcast if you want to check that out.
• 9:05
  Speaker 1: Moral of the story here is that there are little design menus hidden around Squarespace.
• 9:10
  Speaker 1: You just need to look for them.
• 9:11
  Speaker 1: 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.
• 9:19
  Speaker 1: And when it comes to shape blocks and text blocks, there's even more to explore.
• 9:24
  Speaker 1: I want to end this episode with a specific piece of advice that I want you to take to heart.
• 9:34
  Speaker 1: I talk about custom CSS a lot and I love to teach people how to use custom code to make their Squarespace websites unique.
• 9:40
  Speaker 1: As much as I love it, you don't need to use CSS to change something you can change with a design menu.
• 9:47
  Speaker 1: I'm going to say that one more time for the people in the back Don't use CSS or any custom code to change something that you can change with a design menu in Squarespace.
• 9:57
  Speaker 1: For your font menu, you've got tons of options there.
• 10:00
  Speaker 1: Your color menu has 10 different color themes to work with your text editor.
• 10:05
  Speaker 1: You can add background colors and the shape block lets you create interesting effects without code.
• 10:10
  Speaker 1: Don't use custom CSS to change things that you can change with a design menu, but you should use it to make your website unique.
• 10:17
  Speaker 1: 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.
• 10:28
  Speaker 1: I create Five specific codes to change parts of Squarespace that you can't change using the design menus, hidden or otherwise.
• 10:35
  Speaker 1: Head on over to insidethesquareco forward.
• 10:38
  Speaker 1: Slash five.
• 10:39
  Speaker 1: Spell it out that's insidethesquareco forward.
• 10:42
  Speaker 1: 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 CSS to make Squarespace uniquely yours.
• 10:55
  Speaker 1: Thank you so much for listening to this episode of Think Inside the Square.
• 10:59
  Speaker 1: I hope you feel inspired and excited to make Squarespace uniquely yours with those hidden design menus you just learned about.
• 11:05
  Speaker 1: For links to all the things that I talked about, check out the show notes at insidethesquareco forward slash podcast.
• 11:11
  Speaker 1: Thanks again for listening and, most importantly, have fun with your Squarespace website.
• 11:16
  Speaker 1: Bye for now.