[95] Saved Sections: The Squarespace Shortcut I Use on Every Site
-
This transcript was generated by Descript AI and may contain errors.
Saved Sections: Squarespace Efficiency Episode
===
[00:00: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.
[00:00:18] 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.
[00:00:41]
[00:00:44]
[00:00:44] I'm Becca from Inside the Square and welcome to my podcast, Think Inside the Square, where I share tips and tricks to help you make a website that's uniquely yours. Before we dive in, I do wanna mention the term Squarespace is a trademark of Squarespace Incorporated. This content is not affiliated with Squarespace [00:01:00] Incorporated.
[00:01:00] For a transcript of this episode, along with a link to any resources I might mention, visit the show notes at insidethesquare.co/podcast. Now let's dive in and talk about saved sections
[00:01:12] 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.
[00:01:37] 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.
[00:01:59] [00:02:00] 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.
[00:02:18] 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.
[00:02:38] 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.
[00:02:59] Those [00:03:00] 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 I 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.
[00:03:16] It's a different way to manage your content," or 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 wanna display it.
[00:03:32] 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 wanna showcase dishes or a photographer who has an amazing collection to share. There are so many reasons to use a gallery section.
[00:03:51] 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 [00:04:00] time can kinda 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.
[00:04:10] 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.
[00:04:31] I have saved a blank list section to my site. Now, list sections used to be called list sections, but if you wanna 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.
[00:04:49] 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 [00:05:00] section, a button for the section, and then items, individual items of list content. These items can have titles, descriptions where we can have bold text or italicized text or active links.
[00:05:11] 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.
[00:05:35] 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 in just deleting demo content to even get started. Now, the other type of section that I have saved to my account, that again has saved me a ton of time, is an element section.
[00:05:56] This is an old school technique that I've kept around. It's from back in my WordPress [00:06:00] 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.
[00:06:15] 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.
[00:06:38] 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 wanna 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 [00:07:00] 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 saved sections, add that element section, and get to work changing the design so that it looks unique for their own website.
[00:07:13] 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 element section that has all the core elements of a website, so I can really see how the design cohesively looks together in case I wanna make changes in the site styles panel or with custom code.
[00:07:35] 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 not linked 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 [00:08:00] specific product, they probably don't want the footer for their entire website full of links and newsletter blocks.
[00:08:06] They 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 wanna make sure that we're going to still display the terms and conditions, the privacy policy, the contact information.
[00:08:27] 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.
[00:08:45] So again, not legal advice, but one of the saved sections I create on every website I build is the mini footer
[00:08:51] 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 [00:09:00] either the logo or the title text that links back to their homepage, and then I'll include a space for them to add links to additional spots on the page.
[00:09:09] 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.
[00:09:35] 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.[00:10:00]
[00:10:00] 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 client sites is the hero section.
[00:10:16] Very often, we're going to have a hero section repeated on multiple pages, and I wanna 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.
[00:10:33] 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 wanna make, use that section over and over again on different pages.
[00:10:52] 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 [00:11:00] 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 element section that has most of the major elements that I would ever put onto a website so I can see
[00:11:19] 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 wanna check them out and a lot more to teach in the future.
[00:11:39] So be sure to subscribe wherever you happen to be listening. But most importantly, have fun with your Squarespace website. Bye for now
[00:11:46]
[00:11:54] Hey there, Squarespacer. While I have you here, I wanted to make sure you knew about an upcoming event known as Square [00:12:00] 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.
[00:12:11] 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.
[00:12:28] Head on over to insidethesquare.co/summit.
[00:12:32]
Every time you add a new page section in Squarespace, you're starting from demo content. A stock photo gallery. Placeholder list items. A hero section built for nobody in particular. Multiply that cleanup across every site you build, and it adds up to hours you never get back.
Saved sections fix this. Squarespace lets you save the design of a page section and reuse it, either on that one site or, if you're on a Circle account, across every website you'll ever build.
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.
I keep three sections saved to my account level, ready to drop into any project. A blank gallery section and a blank list section, both stripped of demo content, so I never have to delete a stock photo grid again. And an element section: one page holding every heading style, button type, and text format I might use, built as a habit I carried over from my WordPress days. Before I touch a client's actual pages, I duplicate this section and swap in their color theme, so I can see immediately whether the fonts and buttons are working together, or whether something needs adjusting before I go any further.
Beyond the account level, I build three more sections into a template page on every client site. A mini footer, stripped down to the legal essentials (terms, privacy, contact info) for landing pages that don't need your full site footer competing for attention. A mini header, with the logo and anchor links, plus an accordion block styled to act as a fake mobile menu: dividers off, icon showing, links tucked inside the description. And a hero section, kept consistent so the brand feels the same no matter which page someone lands on.
Make sure you check the section on mobile before you save it. I've made that mistake a few times.
That's the one habit I'd tell you to steal even if you skip everything else here. A section that looks flawless on desktop can fall apart the moment you switch to mobile preview, and once it's saved, that flaw follows you into every future project. Check it first, every time, then save it. Between the three sections on my account and the three built into every client site, I'm no longer starting from a blank page. I'm starting from a system.
Resources mentioned:
List section tutorials: insidethesquare.co/squarespace-tutorials/list
Squarespace saved sections (support article): https://support.squarespace.com/hc/en-us/articles/46489432825613-Save-and-reuse-page-sections
Squarespace Circle: circle.squarespace.com
Square Summit affiliate link: insidethesquare.co/summit
