[95] Saved Sections: The Squarespace Shortcut I Use on Every Site

In this episode I walk through the three sections saved to my Squarespace account, so they're one click away on any site I work on, and the three sections I build into every client site's template page, ready to duplicate and restyle.

You'll learn the difference between fluid engine, list, and gallery sections, including where Squarespace moved list and gallery after retiring the old menu name, why a blank gallery section saves you from deleting demo content every single time, and the mini footer and mini header setup I build to keep landing pages compliant and consistent without dragging in a full site nav.

Timestamps
00:00 Why saved sections save so much time
01:12 What a page section is in 7.1
01:37 The three sections I save to my account
02:59 Gallery sections and the demo content fix
04:00 List sections, my favorite for organizing content
05:56 Element sections, my old WordPress habit
07:35 The three sections I build into every client site
08:00 Mini footer and mini header (with my fav accordion trick)
10:16 Hero section & recap

Show notes & resource links:
insidethesquare.co/podcast/95

Transcript

SPEAKER_00 0:00

Squarespace has a really cool feature known as saved sections, where you can save the design of a page section to your website to reuse it over and over again wherever you need to. If you're a Squarespace Circle member, you can also save a section to your account and use it on any website you create within Squarespace. This feature has saved me probably about 2.3 gazillion hours of design time. It's not an exact number, but I'm pretty sure it's close. And in this episode of Think Inside the Square, I'm going to be sharing with you the three sections that I create and save on every Squarespace website that I build, and the three sections that I've created and have saved to my account so I can use them time and time again. Before we dive in, I do want to mention the term Squarespace is a trademark of Squarespace Incorporated. This content is not affiliated with Squarespace Incorporated. For a transcript of this episode, along with a link to any resources I might mention, visit the show notes at inside the square.co forward slash podcast. Now let's dive in and talk about saved sections. A page inside a Squarespace 7.1 website is made up of different page sections. These page sections are where you add your content blocks, like text or a newsletter block or a clickable accordion. That's where we add the content of our site. Now inside Squarespace, we can create these sections and we can save them to our account to use them time and time again, or save them to an individual website to use them over and over. There are three types of page sections that I have saved on the account level of my Squarespace website. So I can easily add them to literally any website that I'm working on. Here's what those three are: a list section, a gallery section, and an elements section. Now, for those of you that haven't been using Squarespace for a while, you should know that they change things pretty much all the time. They are constantly updating the program. Sometimes they'll change our menus, and sometimes they change the names of things. Now, inside Squarespace, there are three types of page sections that we can have. The one most of us use, the most versatile, is known as a fluid engine section. That name hasn't changed since it was released. But this fluid engine section has content blocks that we can create layers for. We can design the mobile layout separate from the desktop. We can use the layers feature to hide content depending upon what device we're looking at, change the alignment. We've got a ton of options here. But there are two other types of page sections that we can still create. These two other page sections are list sections and gallery sections. They used to live under a page section type known as list and gallery, but Squarespace got rid of that name a long time ago. So here's how you find them: a gallery section, which displays images and a description, if you want to. You can toggle that off if you feel like it. Those can be found under the images page section. What you need to do is look for a tiny little icon. On the top right hand side of a page section preview, it's a little lowercase eye inside a circle. If you hover over that with your cursor, it gives you a little pop-up that says, hey, this one's not like the others. It's a different way to manage your content. There's something more official than that. But anyway, that's how you can tell that inside your images, you're looking at a gallery section. Gallery sections don't have content blocks. Again, it's an image and an optional description if you want to display it. Galleries have six different ways of displaying content. And when you add them to a website, it can be really helpful for people showcasing a lot of images, maybe for an event planner or a restaurant that want to showcase dishes or a photographer who has an amazing collection to share. There are so many reasons to use a gallery section. But here's the kicker. When you add this section to a Squarespace website, you gotta go through and delete all the demo content over and over. And that time can kind of add up. So what I've done is I created a gallery section on a site, I deleted the demo content, and then I saved it to my account. So I've got one ready to rock. I did the exact same thing with a list section. Now a list section is one of my favorite types of sections on Squarespace. I'll probably do an entire episode about them if I haven't already. I absolutely love them. A list section is a great way to organize content, super fun for hover effects, but that's not what this episode is about. So let me get back to the topic at hand here. I have saved a blank list section to my site. Now, list sections used to be called list sections, but if you want to find them now, hop into add page section and click on the team option. This is one of the easiest ways to find them. Look for that little icon on the top right hand side of the website preview. Lowercase I inside a circle. Hover over that and it'll tell you, like, oh, this is automatic content or whatever. Click on that one because it's a list section. List sections can have a title for the section, a button for the section, and then items, individual items of list content. These items can have titles, descriptions, or we can have bold text or italicized text or active links. We can also have a button for an individual item. All of this content is organized and structured inside this list layout. And again, I'll definitely cover that in a future episode. But the point of it for here, this saved section episode, is that I've created a blank one. I added a list section to my site. I deleted all of the demo content on there, and I told Squarespace to save it to my account. Now, anytime I need to create a list section or a gallery section, I can just hop into my saved sections account-wide and add them to a website. It has saved me so much time and just deleting demo content to even get started. Now, the other type of section that I have saved my account, that again has saved me a ton of time, is an element section. This is an old school technique that I've kept around. It's from back in my WordPress days, where I would create a page on a website that had all of the elements I could possibly want to have on that website. What I mean by elements is I'd have heading one text that also contained a bold word, an italicized word, an underlined word, and a link. Same with heading two and heading three and paragraph. And then I'd have all of the button types on there: primary, secondary, tertiary. I'd have a blank form, I'd have whatever I could potentially want to create on that website existing on one page. Inside Squarespace, I build this in the not linked section of a site for every client site I create, so I can see what the styles look like together. Do those fonts really blend well together? Is there a chance that I need to adjust this button or change this format or maybe make the newsletter form look a little bit different? It's also helpful if you want to test custom code to again make sure that everything looks great together. And inside Squarespace, once I put all of this into a section, I can duplicate that section and change the color theme to make sure that I've got a cohesive look across the board for this website. Now, when I'm creating a brand new site for a client, I'll just hop into my save sections, add that elements section, and get to work changing the design so that it looks unique for their own website. All right, a quick recap. The three sections that I've saved to my account that I use time and time again: a blank gallery section, a blank list section, and an elements section that has all the core elements of a website so I can really see how the design cohesively looks together in case I want to make changes in the site styles panel or with custom code. Now those are the ones I save on my account, but in every site I build for a client, I also create a template page in the knot link section of their site where I generate at least three sections so they can save them to the site and use them over and over again. When I'm building out a website for a client and they might want an event page, a landing page of some kind, maybe something where they're offering a freebie, or maybe it's a sales page for one specific product, they probably don't want the footer for their entire website full of links and newsletter blocks. We want the focus of that page to be the one action they want people to take. Sign up, buy the thing, whatever that action may be. In those situations, I like to have what I call the mini footer. Now, this is not legal advice, but in this mini footer, I want to make sure that we're going to still display the terms and conditions, the privacy policy, the contact information. Some of my clients need to make sure they have their physical address on there or a support email or even a phone number. Whatever information that we need to make sure is on every single page. So when we're using Squarespace and we turn off the footer on these landing pages, we still have a mini footer that keeps them protected. So again, not legal advice, but one of the saved sections I create on every website I build is the mini footer. The second page section I create on every client website is similar to the mini footer. It's the mini header. This is where I'll create a section that has either the logo or the title text that links back to their home page. And then I'll include a space for them to add links to additional spots on the page. These are usually generated with anchor links, but here's one of the tricky parts, okay? So I'll create those links to the desktop version, but I also create an accordion block. Here's why. The accordion block serves as a fake mobile menu. I'll put the accordion block, maybe using the plus sign feature or something along those lines, turn off those dividers so all we see is the logo and the plus sign or whatever the accordion icon happens to be. So then when it's clicked, what people are going to see are all of the potential anchor links that we have there on the website. The title of the accordion is blank, and all the links live as text links inside the description of the accordion. So that's definitely a fun one to create. I call it the mini header, but it brings me to a very important point for this episode, and that is make sure you check the section on mobile before you save it. I've made that mistake a few times. Make sure you check the section on mobile, make sure it looks perfect there, the layout is just right, and then save the section to your site or your account. So the third and final section that I love to create on all of my clients' sites is the hero section. Very often we're going to have a hero section repeated on multiple pages, and I want to make sure we have a cohesive look for the brand. But whatever page section you think is going to come up time and time again, I recommend building out kind of a mini template, if you will, in the not linked section of your site. When I'm building a site, I'll usually put the elements section there, and then the hero section that I'm going to save over and over again, and then the mini nav, and then the mini footer. So it all lives on this beautiful not linked invisible page on my client's website. That way they can make any customizations they want to make, use that section over and over again on different pages. They've got a lot of flexibility there. But to recap, the three sections that I love to create for my clients are a well-designed hero section that fits the aesthetic or the design of their brand so they can replicate that easily across pages. I also create the mini nav and the mini footer. On my own account, I love to save a blank list section, a blank gallery section, and an elements section that has most of the major elements that I would ever put onto a website so I can see how they look cohesively in one area. So that's it for this episode. My favorite saved sections for Squarespace. I hope you found this helpful. I'm Becca from Inside the Square. I love to teach people how to create and customize Squarespace websites. This is episode 95 of my podcast. So I've got a lot of old episodes if you want to check them out, and a lot more to teach in the future. So be sure to subscribe wherever you happen to be listening. But most importantly, have fun with your Squarespace website. Bye for now. Hey there, Squarespacer. While I have you here, I wanted to make sure you knew about an upcoming event known as Square Summit. Hosted by Kate Scott, Square Summit is a three-day virtual event where over 30 Squarespacers come together and share information that can help you create a wonderful design business. Now, Kate reached out and asked me personally to talk about podcasting. So I'll be there on day three talking about how you can use a podcast to help support your business. There are tons of other topics that are covered by some amazing creators inside our Squarespace community. So get your free access pass using my affiliate link. Head on over to insidehesquare.co forward slash summit.