Tutorial: Duplicating Blocks in Squarespace's Fluid Engine
I have some great news to share...
Squarespace has finally released the ability to duplicate blocks in Fluid Engine (which is available in all 7.1 sites) ! So yes... there's now a fun shortcut feature we can now utilize.
Watch this quick video where I show you how to save loooooads of time, by creating a beautiful layered photo block and using it over and over again.
Transcript below!
-
0:01 Hey, Hey, so Squarespace recently released finally for fluid engine, the ability to duplicate blocks. And so I wanna show you a little bit about that.
0:12 So it gives you some really interesting options. So obviously with fluid engine, we have to build things more manually and I'll show you that in a second, but I had to build, you know, had to this layer on top of, so I have a of options.
0:31 I can duplicate the whole section and maybe move the over and the, and over and do things like this that are similar, but mirrored across the site.
0:51 But I also have the option now to duplicate everything. So someone's gonna delete this and I'm gonna show you really quick just from the basics of how I have to start this.
1:02 So if I were to do this again, first thing I did was add an image and then I made it nice and big.
1:13 I edited the section just a little bit, so that it's grid count was together and it tight was short and I'm gonna make this image a little bit bigger.
1:26 And then I go, went into my library, picked time, and then I had to, and I'm just the reason I'm doing this is because I want you to see How much work it can be and how much this is gonna, like how much time this is actually gonna save you.
1:56 Then I added a textbook and I moved it kind of here, and I'm gonna copy and paste this section here, like just the words so far, and I'm do that.
2:09 And I made nice and wide added background. And if I have this, where I have the, the background is burgundy, I would probably go ahead and take the time to make.
2:25 Then I elongated this background enough to add a, and I'm probably gonna, you can, how to scroll here, maybe just a little more so we can see everything when nicely, but, and then drag this.
2:50 So it's pretty much centered. I do that again, and I might make this a little wider and then I'm gonna go ahead.
2:59 Add that button on top. So add a block, add a button it's burgundy on burgundy. So I would probably need to edit some other things.
3:11 So maybe make it another color. So add a button styles and I could edit the button colors across my site, but I would need to have a think about obviously this button and how that works, because this is a burgundy background, but in any case for now, go ahead and make it a nice big secondary button and hit this pencil because I don't really like the fitted buttons, weird me out and I'm make sure that's nice and a nice place.
3:41 The other one, I have it centered on the block pretty much, or as close to it as I can get.
3:45 And that's something else to be mindful about with engine. You can't always get things perfectly centered. I would need to maybe change that to get it all perfectly centered.
3:57 Okay, there we go. So that's how much long it took me to create this block. And Squarespace obviously has some section templates that would save you some time on some of these things.
4:09 But if you're designing from scratching or not using their templates, there is a lot to be considered there. So now you could go ahead and select multiple things so you can see there's a duplicate button.
4:22 So I go ahead and all the things that've got going on, I can go ahead and duplicate, and that has duplicated, literally everything I just created.
4:33 So I'm gonna hit shift. I'm able to drag all of that content down and there its once, twice, look at that and that is brand new.
4:46 So this duplicate section block is a brand new feature and you can duplicate just the block, maybe the block and the button as long you hit shift, you can duplicate whichever parts that your heart desires.
4:58 I hope you found that helpful.
