03: Squarespace 7.1 Section Types 📑
-
00:01 The term Squarespace is a trademark of Squarespace, Incorporated. This content is not affiliated with Squarespace, Incorporated.
00:12 Welcome to Think Inside The Square, a podcast full of quick tips and tricks that will help you create a Squarespace website that you're proud of.
00:19 I'm your host, Becca Harpain, creator of Insidethesquare.co, and in this episode, you'll learn about the different types of page sections available in Squarespace 7.1
00:29 For a transcript of this episode, along with any links to resources mentioned, visit Insidethesquare.co/podcast
00:36 Page sections are a brand new feature for Squarespace 7.1, and you'll find them on Standard pages, Collection List Pages, and Project pages inside a portfolio.
00:49 Now, there are four different types of page sections in Squarespace, and in this episode, I'll talk about the differences so you can make sure you're working with the right one for the content you're trying to display.
01:00 All page sections have a background image or a background video, and they can be assigned a color theme, but that's pretty much where the similarities stop.
01:09 Now, each one of these four types has some very unique settings and unique ways that they display content.
01:15 First up, let's talk about classic editor sections.
01:18 Now, Fluid Engine was released in July 2022, but some 7.1 sites still have access to what's known as the Classic Editor.
01:27 If you see an option in Edit mode over that page section, it says Upgrade in the top left-hand corner.
01:32 They're trying to get you to upgrade the classic editor section because it's an older version of Squarespace.
01:38 Now, these classic editor sections have blocks of content, but they stick to a twelve-column grid.
01:45 They can only be resized horizontally or vertically.
01:48 With the help of spacer blocks and the content inside of them, you can't edit the layout of a classic section separately.
01:56 For mobile devices, it's going to be automatically reorganized and resized for smaller screens.
02:03 Classic editor sections are made up of these content blocks, and unlike a Fluid Engine section, they also can't overlap each other.
02:10 You need to use things like custom code to create layers in these classic editor sections.
02:16 While the flexibility of Fluid Engine isn't there, sometimes the rigidity of working with that twelve-column grid that Squarespace was based on can actually be beneficial.
02:27 If you don't really have a lot of time to dig into details about the mobile version of your site, and you're really comfortable with a limited amount of flexibility for the design, you want it to stick to that twelve column grid, go with a Classic Editor section.
02:40 No need to hit upgrade. Now, the next type of page section I want to talk about is the one that most of us are familiar with. called Fluid engine page section.
02:49 This is the most versatile page section available in Squarespace, but I got to be honest, it's not my favorite.
02:56 You'll learn what my favorite one is next, but here, let's talk about these Fluid Engine page sections, because while it's not my favorite, I still really like them.
03:03 You can add content blocks to these sections, resizing them, and layering them using the Fluid Engine editor.
03:10 You can also adjust the layout of these sections on mobile, rearranging, resizing and realigning until it looks perfect for smaller devices.
03:20 Now, Fluid Engine sections actually have a 24 column grid with an adjustable grid gap. You'll find that inside the settings option for that page section.
03:31 Content in a Fluid Engine section can stretch all the way to the edge of the screen horizontally and to the edge of the section vertically.
03:39 Again, you'll just need to adjust some of the settings available in the Settings menu for that individual Fluid Engine page section. So they are super duper customizable.
03:49 I love the layering features, I love the alignment options, and I love the fact that we can edit mobile separately, but they're still not my favorite.
03:57 You're ready to know what my favorite is? It's a list section.
04:02 List sections are a collection of list items that are displayed in a specific automatic layout.
04:09 You cannot add blocks of content to a list section. Here's an example.
04:14 In a classic editor section or a Fluid Engine section, I can add an image block, a text block, a button block, and a scrolling marquee of text.
04:24 I cannot add those content blocks to list sections. List sections can have a title and a button for the entire section and then the items inside that section.
04:35 Each item can have an image, title, description, and a button. Now, all four of those are editable separately, and you can turn them on or off.
04:44 And at this time, only the individual button for a list item can have a link, the image and the text cannot.
04:51 Now, these list items can be displayed in one of three ways. We have simple, banner or carousel.
04:58 In a simple list, these list images can be cropped into a specific size, even a perfect circle if you want to, and all of the list item images will have the same crop ratio regardless of the image itself.
05:09 Now, banner and carousel use a much different way of presenting the list item content. Banner is a great example.
05:17 It'll have the image in the background and then the title, description and button on top of that image.
05:22 Thanks to CSS, we can customize the heck out of them.
05:25 But something that's really important to know about list sections and why they are my favorite is that the layout changes for smaller devices automatically.
05:34 There's a lot less tweaking and adjusting that needs to happen for the content inside a list section for it to look amazing on a mobile device.
05:43 Now, you can alter the layout using custom CSS; I have plenty of tutorials about it on my website.
05:49 Because of this slight lack of flexibility, I love how easy list sections make it for me to have content that looks great on every screen size.
05:59 So while you might think Fluid Engine is my favorite, it's actually a list section.
06:03 So at this point, especially if you've been using Squarespace for a little while, you might be wondering, where the heck are these list sections?
06:10 You click on the Add section option and you don't see the word list anywhere.
06:14 That's because Squarespace got a little sneaky when they first created this auto layout section.
06:19 They did call it a list section, and then they hid it!
06:23 So to create a List section, either select People or select Testimonials, and there will be a section inside those previews that has a little I symbol on the top right-hand corner of that preview.
06:36 Hover over that, and it will tell you, "hey, this layout is an auto layout, a list section." So if you see that little I on the top right-hand corner of a People section or a testimonial section, congratulations.
06:49 You found my favorite type of page section in Squarespace - a List section. Click on that and you can edit all of the cool things about it.
06:57 Now, there's one other type of auto section available in Squarespace 71 called the Gallery section.
07:03 And a Gallery section is fairly limited, but is a really great way to add a ton of visual content to a site in a layout that's going to look fantastic on every screen size.
07:13 Just like a List section, it will automatically arrange the content and change the images to display differently based on the screen size.
07:21 So it's really usable and user friendly, I should say. Now, these Gallery sections display collection of images, and they can have descriptions or captions.
07:30 Now, there are six different options for displaying these images in a Gallery, and there's some differences here. We have grids.
07:36 There's grid simple grid strip and Grid masonry. And then we have slideshows, slideshow simple slideshow full and slideshow real. But there is one very important difference between the two of these.
07:48 Grid layouts will display all of the images in that section. Slideshow layouts have a featured image, and some allow for a thumbnail display, and some allow for multiple images to the left and the right.
08:02 But you're not going to see all the images in that Gallery section. That only happens with the grid layout.
08:08 Now, these Gallery sections, they were also renamed after they were created.
08:12 So when you select Add section, what I want you to do is look at images and look for that little I symbol on the top right-hand corner of the section preview.
08:21 That means it's going to be an auto layout, a Gallery section.
08:25 All right, let's do a quick recap here.
08:27 The four different types of page sections available in Squarespace, and where you can find them, we have a classic page section.
08:34 This is made up of content blocks that you can rearrange but you cannot layer.
08:39 And they will adjust their own unique way for mobile devices, you cannot edit mobile separately at a classic section.
08:46 We have fluid engine sections. One of the newest releases from Squarespace. Tons of flexibility.
08:52 Here you can add blocks of content, but arrange them any way you want them to be on this 24 column grid. No need for spacer blocks anymore. Create layers, adjust the height, the width and the alignment, and change mobile separately.
09:06 Then you have List Sections, an auto layout that displays items inside that list.
09:11 A List section can have a title and a button. And then these individual list items can have an image, a title, a description, and a button, all of the above, or justone of the above; super customizable.
09:24 But these List sections will automatically change the layout of the content based on the screen size. So not a lot of flexibility for adjusting things separately on mobile unless you use custom CSS.
09:36 The other auto layout section that we have is a Gallery section that displays images.
09:42 Each one of these images can have their own unique link, and they can also have a description or a caption.
09:48 There are six different options for displaying these, but the two main types are grid or slideshow.
09:54 A Grid layout displays all of the images on the page, and a slideshow only shows a featured image, sometimes thumbnails or an image to the left or the right.
10:03 But you're not going to see the entire collection of images in that Gallery section if you select one of the slideshow designs.
10:11 And the last thing I want to mention before we call this a wrap is that Fluid Engine sections are not my favorite type of page section in Squarespace.
10:19 While I do love them, I love a List section because of the way that Squarespace automatically restructures the content.
10:26 For smaller devices, it takes a lot of the work out of having to manually move things around and make sure that they look great on every screen size.
10:34 Squarespace does the work for you.
10:36 Again, to find those, click on People or Testimonials and look for that little I icon on the top right-hand side.
10:42 Thank you so much for listening to this episode of Think Inside the Square.
10:46 I have a lot more tips and tricks to share with you about making an amazing Squarespace website that is uniquely yours,
10:52 so be sure to subscribe to my brand new podcast wherever you happen to be listening to this one.
10:58 Thanks again for listening, and most importantly, have fun with your Squarespace website.
11:02 Bye for now.
