49: An Audio Overview of Editing Squarespace 7.1
-
[00:00:00] (music) 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.
[00:00:36] 1 website. 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.
[00:01:01] For a transcript of this episode, along with the links to the many resources I'm sure I'm going to mention, visit insidethesquare.co/podcast
[00:01:09] 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.
[00:01:28] 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. 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.
[00:01:45] 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 square space feature. Generally, these 12 columns are reserved for larger screens like desktops and laptops. And then they're scaled down to display 6 columns and 4 columns for tablets and phones.
[00:02:07] Think of a row of 4 things across 12 columns. That can easily be resized to 2x2 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. Squarespace was built on this 12 column grid and pretty much everything we edit is still there on those 12 columns.
[00:02:29] 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.
[00:02:48] We're stuck to rows and columns, and you can't change mobile 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.
[00:03:10] 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. 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.
[00:03:27] 3 columns, 4 columns, 6 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.
[00:03:48] 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.
[00:04:10] 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.
[00:04: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.
[00:04:51] 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 Squarespace website and rearrange the content blocks.
[00:05:12] Thanks. 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, 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 in a collection list, like a list of blog posts or a store with products.
[00:05:41] 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.
[00:06:01] If you want to do something super custom, like maybe move an image 2 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 tool, The ability to edit mobile separately.
[00:06:18] 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.
[00:06:39] 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. 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.
[00:06:59] 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.
[00:07:16] In a gallery section you can 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. 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.
[00:07:35] 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. 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.
[00:07:59] 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 layouts. 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.
[00:08:19] 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 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.
[00:08:44] And that, my friend, is a video collection. 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 your domain.
[00:09:04] com 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, nada, nothin 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.
[00:09:41] 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.
[00:10:04] 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.
[00:10:25] 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.
[00:10:42] 1 website. 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.
[00:11:01] 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.
[00:11:20] Those collection lists, they have their own display settings, but you won't be able to drag and drop things into 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.
[00:11:37] And when you want to add content to them, you need to use the internal menu of those individual page sections. 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.
[00:11:56] Now for a visual of all of this fun stuff, which you probably want at this point, check out the show notes for this episode at insidethesquare.co/podcast
[00:12:05] This is the 49th episode of Think Inside the Square, so that'll be insidethesquare.co/podcast/49 Now this episode itself was inspired by the update of my course, Squarespace Made Simple.
[00:12:19] 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.
[00:12:36] 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 insidethesquare.co/start.
[00:12:45] 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 the to video tutorials if you want to dig into any of these concepts.
[00:12:55] 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.
-
Squarespace Made Simple: insidethesquare.co/start
List section overview: insidethesquare.co/list
Beginner's Guide to Video collections: insidethesquare.co/video
Beginner's Guide to Squarespace Event Collections: insidethesquare.co/squarespace-tutorials/event-collection
EPISODE SUMMARY
A Beginner's Guide to Editing Squarespace 7.1
Squarespace is a popular website builder known for its user-friendly interface. But even the most user-friendly platform can have its complexities, especially when it comes to editing. In this episode of ThinkInsideTheSquare, I’m sharing an audio overview of the different ways you can edit your Squarespace 7.1 website to help you understanding all of your options.
Understanding the Grid System
Imagine your Squarespace website as a canvas divided into sections. Squarespace uses a grid system to arrange content on these sections. In older page sections and blog posts, you'll find a classic editor with a 12-column grid. This editor allows you to drag and drop content blocks like text, images, and buttons, arranging them side-by-side or stacking them on top of each other, all within the 12-column limit.
Fluid Engine: A New Era of Editing
Squarespace 7.1 introduced a powerful editing tool called Fluid Engine. Here, the grid system expands to 24 columns, offering more flexibility for content arrangement. You can not only stack and layer content blocks but also edit them for mobile view separately. This means you can design a layout that looks perfect on both desktops and smartphones! Fluid Engine sections can be added to standard pages, project portfolios, course lessons, and even above or below collection lists like product stores or blog posts.
Collection Lists & Auto Layouts
Collection lists showcase groups of similar content, like blog posts or products in a store. While you can't drag and drop content blocks here, Squarespace provides pre-designed layouts you can customize. Each collection list has its own design menu that allows you to control how the content is displayed, like the order or the information shown.
Squarespace offers auto layout sections like galleries and lists. These sections don't use content blocks but dedicated menus to manage your content. For example, in a gallery section, you can upload photos and arrange them in a specific order. While you can't add elements like buttons or audio blocks, auto layouts are great for displaying collections of similar content in a visually appealing way.
Individual Video Pages: Limited Editing Options
Squarespace allows you to create video collections with individual pages for each video. However, these pages offer the least editing flexibility. You can edit the text content and format it, but adding interactive elements like buttons or images isn't possible. For video content, it's recommended to use a blog post with a video block. This allows you to leverage the classic editor for a more engaging experience.
Ready to Dive Deeper?
This whistle-stop tour of Squarespace editing hopefully gave you a clearer picture of the options available. To explore these concepts visually, check out the resources mentioned in the podcast episode linked above. If you'd like to learn more about Squarespace and its functionalities, it’d love to have you as my latest student inside Squarespace Made Simple! Get access right now at insidethesquare.co/start
