49: An Audio Overview of Editing Squarespace 7.1

This episode of Think Inside the Square is an audio overview of the different editing options we have in the latest version of Squarespace, version 7.1

You'll learn about the 12-column grid system, why we consider fluid to be so flexible, and what my least favorite Squarespace feature is.

Chapters:
01:28 Understanding the Grid System
04:10 Fluid Engine: A New Era of Editing
03:48 Collection Lists: Preset Layouts with Customization
06:39 Auto Layouts for Effortless Content Display
08:44 Individual Video Pages: Limited Editing Options

Important Links
📝Full show notes: https://insidethesquare.co/podcast/49
🎧  Past episodes→ https://insidethesquare.co/podcast
⭐️ Squarespace Made Simple: https://insidethesquare.co/start
💻 Figma: https://figma.com
💌 Join my email list: https://insidethesquare.co/email 

Transcript

Speaker 1: 0:10

How to edit a Squarespace website Sounds like an easy topic, right? Unfortunately, it's really not. Now, squarespace is still one of the best programs out there for creating a website, even if you have zero experience. But building a website is going to be complicated no matter what program you use. So in this episode of Think Inside the Square, I'm going to share a high-level overview of the different ways that you can edit a Squarespace 7.1 website.

Speaker 1: 0:37

Welcome to Think Inside the Square, a podcast full of tips and tricks to help you create a website that you're proud of. I'm your host, becca Harpain, squarespace expert and educator, and in this episode I want to talk about editing the content of your site. If you're new to Squarespace, hopefully this will help shorten the learning curve, and if you've been using it for a while, I hope that this information will help you understand why things are the way they are. For a transcript of this episode, along with the links to the many resources I'm sure I'm going to mention visit insidethesquareco forward slash podcast. The term Squarespace is a trademark of Squarespace Incorporated. This content is not affiliated with Squarespace Incorporated. An overview of editing is a tricky subject for audio-based education like this podcast, but I'm confident that you'll be able to get some value from this concept overview without the visuals Classic editor, fluid engine, editor, collection, list, video pages. We've got a lot to cover today. My friend, I'll have some links in the show notes for more video tutorials that you can dig into.

Speaker 1: 1:38

But let's start at the core concept that Squarespace was built on, one that you'll see on every page of your site today the 12-column grid. This 12-column grid layout was used by a lot of website building platforms in the early days of responsive design. It's not just a Squarespace feature. Generally, these 12 columns are reserved for larger screens like desktops and laptops, and then they're scaled down to display six columns and four columns for tablets and phones. Think of a row of four things across 12 columns that can easily be resized to two by two on a smaller screen. Hopefully you're following so far, because that was the most visual part of this podcast episode. I'm glad you're still with me.

Speaker 1: 2:22

Squarespace was built on this 12-column grid and pretty much everything we edit is still there on those 12 columns. When you're editing a blog post or an individual event or additional product details, you have content blocks that you can drag around and resize on this 12-column grid, creating stacks and rows on this 12-column grid is using what we Squarespace nerds like to call classic editor. You can't create layers here. We're stuck to rows and columns, and you can't change mobiles separately for this classic editor, because Squarespace is designed to do that for you. It'll turn a row of four content blocks into a stack of two by two on smaller screens. This classic editor is found in older page sections and in blog posts additional product details and individual events. Here you'll be able to move these content blocks around on the 12 columns. If you've ever used version 7, you've used classic editor.

Speaker 1: 3:17

So before we move on, let's just recap this concept. Squarespace is built on a 12-column grid and Classic Editor lets you stack content blocks on that grid and decide how they're displayed Three columns, four columns, six columns and more. This helps Squarespace change the layout for different screen sizes. You'll find this Classic Editor in blog posts additional product details and individual events. Now there's another way of editing content to your Squarespace website that technically uses Classic Editor, but you won't be able to add content blocks to it. This type of page is known as a collection list, like a list of blog posts or a store with your products in it. These lists are stuck in pre-made layouts that are on that 12-column grid. Each one of these collection lists has its own design menu that you can use to change up what to display and how, but we can't drag and drop things in whatever order we want them to be in. Again, they have their own unique design menus that change the display, but we can't drag and drop things like we can in a classic section. Okay, let's move on to the most modern and up-to-date way we have to edit a Squarespace website. This is a big change that they released within the last year, and it's known as Fluid Engine.

Speaker 1: 4:29

Fluid Engine sections give us a lot more flexibility than we've ever had before in terms of the way that we display content. Now here's the interesting part Fluid Engine sections are still built on a grid, but it's a 24-column grid instead of 12., and instead of stacking content blocks on top of each other and next to each other, we can overlap them. We can create layers of content. In a fluid engine section, we also have the flexibility to edit mobile separately. Unlike Classic Editor, which automatically restructures our content based on the number of columns it displays on the screen, fluid Engine sections can be modified separately, so you can look at the mobile view of your Squarespace website and rearrange the content blocks. Now you can't say, show this on desktop and not on mobile or vice versa, but you can resize the content blocks, change their location and change the layers. At the time of recording this, we're in summer 2024,.

Speaker 1: 5:26

Fluid Engine is a page section type. That means you can add it to a standard page, a project inside a portfolio, a lesson inside a course or, above and below, any collection list like a list of blog posts or a store with products. We don't have this Fluid Engine magic inside a blog post or inside additional product details. Those are still in classic editor along with individual events. Now, to be super duper clear, although fluid engine gives us a ton of flexibility when it comes to layers and structure of the site, we're still stuck in these 24 columns. If you want to do something super custom, like maybe move an image two pixels to the right, you're going to need to write your own custom code to make that magic happen, because we're stuck in 24 columns. But when it comes to the flexibility of this responsive layout, the ability to edit mobile separately, and when it comes to the flexibility of creating layers of content. Fluid Engine gives us a lot more flexibility than the classic editor that we Squarespace-ers were used to, so it's definitely considered the most flexible way to edit content of a Squarespace website. But again, these Fluid Engine sections are page sections, not individual pages. When it comes to these page sections, we've got Fluid 24 columns of custom layered content and we've got classic 12 columns of stackable content blocks.

Speaker 1: 6:49

But then we also have auto layout page sections, galleries and lists. Both of those have a unique way of editing content that we need to talk about in this episode. These auto layout page sections are not made up of content blocks. You have a unique way of adding your own content to these sections. Now. You can drag and drop the content itself around into a specific order, like decide which image is first in the gallery and which image is last, but that's about it. In a gallery section you could add captions, but you can't add an audio block. You can't add a button. You don't have the flexibility of Fluid Engine or Classic.

Speaker 1: 7:25

Now for list sections, we have a little bit more flexibility in the content we can display. Each list item in a list section can have a title, an image, a description and a button, but that's it. Again, there's no audio block to add. There's no content block. You can't have four buttons underneath the list item.

Speaker 1: 7:42

List sections and gallery sections are considered auto layouts and they'll automatically organize a lot of content for you, which can be really helpful. But you're not going to find the flexibility that you'll find in a classic editor and definitely not the flexibility that you'll find in a fluid engine section. Okay, so far in this episode we've talked about classic editor, that 12-column grid, we talked about fluid engine, the 24-column grid and we talked about auto. Now those can be the list sections and gallery sections, and you'll also find auto layouts when it comes to a list of blog posts or a storefront that lists individual products. You won't find content blocks here, but Squarespace will automatically organize the content of that collection for you. The editing features here just have to do with how it's displayed, but you can't drag and drop things into a specific place. But you can't drag and drop things into a specific place. But there's one more thing that I have to mention when we're talking about editing the content of a Squarespace website and I'll be honest, it's my least favorite way of editing content and one that I don't even use and that, my friend, is a video collection.

Speaker 1: 8:47

Video collections are a collection of you guessed it videos. Now these can have their own paywall so people can pay to access your video collection, or they can be free. Each individual video inside a video collection has its own page. So, for example, you can have a video at yourdomaincom forward slash videos forward slash tutorial. It'll have its own URL, its own SEO metadata, but video pages have their own way of editing content and I don't like them. There are no content blocks for a video page inside a video collection. It's the video and some text. You can change the text format, like make something in H1 or add an active link, but there are no buttons, there are no forms, there are no audio blocks, no image blocks, zip knot and nothing.

Speaker 1: 9:33

Individual videos are the most basic of basic content that you'll find when editing a Squarespace website, and that's why I just don't use them. If I need to feature a video collection, I'll use a blog with a video block so I can use Classic Editor to add more content, like buttons, divider lines, forms, all kinds of things. Using a blog gives me the ability to add categories and tags and even create a paywall if I need it. But I'll get so much more flexibility with Classic Editor than I will on an individual video page. Now, hopefully this will change someday, but at the time of recording this, individual video pages are the most basic of pages in a Squarespace site and I personally do not use them on my own site and I do not use them on client sites. Again, I prefer to use a blog post, so I can use classic editor while still having categories, tags and even a paywall if I need it. But I had to mention it in this episode where we're talking about how to edit a Squarespace website. If you've ever tried to add a button to a video page but couldn't figure it out, that's why it's because you can't. So there you have it, my friend the wild, wonderful and weird ways of editing a Squarespace 7.1 website.

Speaker 1: 10:43

Classic Editor lets you arrange content blocks on a 12-column grid, stacking them and placing them next to each other in a variety of combinations that add up to 12 columns. You'll find them in classic page sections, blog posts, individual events and additional product details. Fluid engine sections are the most flexible of page sections. We can stack and layer content blocks across 24 columns and edit mobile separately. You'll find these page sections on standard pages, projects inside a portfolio and inside the lesson of a course, and you can add these fluid engine sections above or below a list of collection items, like a storefront, or a list of blog posts or events. Those collection lists they have their own display settings but you won't be able to drag and drop things in any order you want them to be in. Then we have auto layout sections like list sections and gallery sections. These sections don't have content blocks but they display a mini collection of similar items and when you want to add content to them you need to use the internal menu of those individual page sections.

Speaker 1: 11:43

And the last thing we covered in this episode, which is my least favorite, are individual video pages. These are text-based pages where you can make things bold or add an active link, but you can't add any additional type of content block here. Now for a visual of all of this fun stuff which you probably want at this point, check out the show notes with this episode at insidethesquareco forward slash podcast. This is the 49th episode of Think Inside the Square, so that'll be insidethesquareco forward slash podcast forward slash 49.

Speaker 1: 12:15

Now, this episode itself was inspired by the update of my course Squarespace Made Simple. It's a nine video training series that I created to help people get started with Squarespace 7.1. There you'll get an overview of important things to know, like how to edit Squarespace, but also deep dives into things like updating content using design menus and important site settings that you might not know about. I packed so much into this course and I'm really proud of it, so if you want some help learning how to use Squarespace, check it out at insidethesquareco forward slash start. Thank you so much for listening to this episode of Think Inside the Square. I hope you found it helpful. Again, check out the show notes for links to video tutorials if you want to dig into any of these concepts, and if you enjoyed this episode, be sure to subscribe to this podcast wherever you happen to be listening. Thank you so much for tuning in and, most importantly, have fun with your Squarespace website. Bye for now. Thank you.