Upgrading Classic Editor Sections
The problem or issue:
What does upgrading a Classic Editor section to Fluid Engine look like? Why should I do this?
This post may contain affiliate links, which means I may receive a commission if you make a purchase using these links.
I only recommend products and services that I use myself and genuinely believe in!
TL;DR
If you have had your Squarespace 7.0 website migrated to 7.1, this post will help you learn how and why you should upgrade your Classic Editor Sections into Fluid Engine. The tutorial video will demonstrate how to break up a really long section into smaller, more manageable sections — a must for mobile view adjustments.
Whether you recently migrated your website from Squarespace 7.0 to 7.1 or have pages and sections still using the Classic Editor in 7.1, this post will help you navigate how to upgrade sections to Fluid Engine and why you should break up content into smaller sections.
Important: Any page migrated from Squarespace 7.0 to 7.1 will default to the Classic Editor section type!
Tips on Converting Sections to Fluid Engine
If you have one long section, we recommend taking these steps to make your content more manageable for your visitors and for making adjustments in mobile view.
Step 1: Duplicate the section (optional)
Why duplicate the section?
You can preserve the original content and formatting (mostly) and use the “original” section as a reference point for copying and pasting
You will be able to convert one of the sections to Fluid Engine and unlock the ability to select multiple blocks and copy/paste
Duplicate the original Classic Editor section first. The duplicated section will appear below the section you just duplicated. Consider the “bottom” to be the original, and treat the “top” as your work in progress.
Next, convert the top section to Fluid Engine by clicking on Upgrade. Save changes.
Next, add a blank section between the original Classic Editor section (bottom) and the new Fluid Engine section (top) with text that says “Original Classic Editor section above or below this section” if that helps you to keep the areas straight. This will make differentiating between your original Classic section and your newly duplicated Fluid Engine section easier.
See the video below for details.
Step 2: Create Smaller Sections
Next, add a new blank section below your Fluid Engine section.
Working from the bottom of the “top” section, you can copy multiple Fluid Engine blocks that belong together in one section by dragging your mouse and selecting multiple blocks at the same time, copying them (CTRL+C or Command + C), then pasting them (CTRL+V OR Command+V) into the new blank section.
Keep repeating this process until all the blocks are separated into smaller sections. Content that belongs together essentially should live in one section.
Creating smaller sections is essential because of the Mobile View. Handling mobile view tweaks for one smaller section at a time is much easier than handling this process in one long section.
Once you have completed breaking up content into smaller sections, you can delete the original Classic Editor section and the blank section “divider” you created when you began!
TIP: Hit “G” on your keyboard to display the grid.
Tutorial Video
Video Transcript
[00:00:00] Before I dive in, I wanted to show you what this demo page looks like in the original 7.0 site. So this is the 7.1 site where I have migrated this page, from my old website about website design into 7.1. And this is what this page looked like. In the 7.0 site, as you can see, the image formatting is there.
[00:00:28] These pricing tables, these are actually code blocks. And when you look at this in 7.1, All of that formatting goes away. That's because this was a plugin built for 7.0.
[00:00:42] Those are little things that are gonna happen after a migration. Not a big deal. There's lots of alternatives — other Elf site plugins, for example, if you check out my blog, you should find a great link for that.
[00:00:55] Some things do change a good bit, but the most important part is that your content is there. Most of your images are still there, and that's really gonna save you a ton of time. So if you're happy with your 7.0 site migration is definitely the way to go.
[00:01:16] So everything you see here is using. Classic editor sections, and I can tell that because it's giving me this button, this option to upgrade. So that's, that's the biggest clue that you're gonna have about whether or not you're in a classic editor section.
[00:01:39] So basically, this video's gonna show you how to break this content up, because right now it's all. One very long section and this video's gonna show you how to break this content up and convert everything over to fluid engine instead, so that this process is made a lot easier.
[00:02:02] So while in edit mode, I'm gonna click this button to duplicate this section. As you can see, I'm dealing with the section menu because right here it says edit section. This is going to duplicate this entirely super-long section. This may take a second.
[00:02:23] Okay, I paused that really quick because it was taking a while to duplicate. Same thing may happen to you. Just be patient. Sometimes you may have to hit exit and come back and try again. Not a big deal. So now I've got the original section, which I'm now going to consider the work in progress, and I'm gonna keep what I just duplicated here at the bottom.
[00:02:48] And just so that I have a very clear visual in between these two sections, I'm going to create or add a blank section here. And I'm gonna change the color scheme to be very obvious. So, hey, that's a black background. That is plenty for me. You may choose to add text that says original, classic editor section below, if that helps you.
[00:03:14] Totally up to you. Completely optional.
[00:03:18] So we are ready to convert this section over to Fluid Engine. So all you have to do is click this button to upgrade. This is permanent. Can't undo this. Unless you were to exit without saving any of your changes, that's pretty much the only way to do that. And so first thing I'm noticing is here's the divider.
[00:03:46] And when I converted this, some areas automatically get thrown into their own sections, which is fine. This is exactly what I want. So I'm gonna hit the letter G. And I can see the grid, and I'm gonna scroll up and I can say this should go with the form block. So I'm gonna move this down a little bit, and I'm gonna select that and hit control C on my keyboard.
[00:04:17] And I'm gonna hit Control P to paste that block into this section, and now I'm gonna delete it from above. And now I'm gonna create another blank section
[00:04:37] And I'm gonna say that these belong together, so I'm gonna adjust this really quickly
[00:04:52] and you can take your mouse and drag to select multiple blocks at the same time. Hit control C to copy and hit control V to paste those blocks into this new section. And now I'm gonna delete them from above. Hit G to always show your grid so you can take up space as you go. I don't need this line anymore. I'm gonna add another section.
[00:05:31] Select these blocks, control C, control V and then remove. Basically those are the steps. You just sort of rinse and repeat this process to create smaller sections, and the biggest reason why we're trying to create smaller sections really has to do with the mobile view. So as you can see, when you're in mobile view, when you have things that are in one long section, it can get a little bit challenging to make adjustments when, and also lose your place with how elements work together.
[00:06:16] So consider sections as a viewing area. And while a mobile device has a much smaller viewing area, and sometimes yes, scrolling is involved to see multiple bits of information or blocks together, you're still wanting to keep content that relates to each other in its own section.
[00:06:41] And when you're dealing with mobile view in a long section, tweaks get a little bit more difficult when you're just trying to move things around on mobile view. So that whole process of adjusting your website for mobile becomes much easier when you are dealing with smaller sections that have been separated out. And once you do have your own section, if you needed a way to divide information, you have that option. Um, whether you're using the divider option, which you know now this is separated, whatever the case may be. So yeah, basically just. Doing this process. Rinse and repeat.
[00:07:33] I like to work from the bottom up, and that's pretty much it. Thanks for watching!
