If you’ve been playing around with Squarespace’s new Fluid Engine editor, you’re probably feeling both excited and terrified at the same time. Perhaps you’ve just got your head around Squarespace 7.1 and now you’re feeling overwhelmed by this new editor. 

*Begins sweating*

Here at Squarebase, we are Squarespace circle members, meaning that we’ve had access to the beta testing for Fluid Engine before it was released to the public, and we must say, we are in love. There are some teething issues, as expected with any large platform rollout, however, all in all, we’re all for it. 

Gone are the days of using CSS to make little edits, and achieving overlaps, you can now do this easily, in minutes, using the Squarespace Fluid Engine editor.

There is one thing that is missing from the Fluid Engine editor, however, and that is the beloved image cards. 

Anyone who uses Squarespace professionally knows how amazing the image card option was (😭), however, we’re going to show you how to recreate the image block styles, and restyling for mobile in our Fluid Engine tutorial.

How to create image cards using Fluid Engine in Squarespace 7.1

In this tutorial, we’re going to take you through how to use Fluid Engine to create the different types of image blocks that we know and loved in Squarespace 7.1, so let’s get started! 

Because of the flexibility of the new Fluid Engine Squarespace editor, we don’t actually need the image blocks anymore!

We can create custom images and text overlaps by simply dragging and dropping the blocks and arranging them. 

The one thing just to be wary of is making sure that you are editing the way it appears on mobile by clicking on the mobile editor icon in the top right corner. Any edits you make to the layout and image size in the mobile view will only affect the mobile view.

So those of us who currently use media queries and CSS to create alternative styles on mobile, we’re on to a winner! 

The only downside to this is that we can no longer use the individual css classes to target certain image blocks in our code, such as .image-poster-layout etc, however, there are other ways to apply universal styles, through using section themes and image link styling. 

Overall, we’re incredibly excited for Fluid Engine to be rolled out and we can’t wait to start designing some new templates using the new Squarespace editor. 

 

Is Fluid Engine supported in Squarespace 7.0?

A question that has popped up a couple of times from our users, is about whether we can use Fluid Engine in Squarespace 7.0. As far as we are aware, it’s currently not supported and there are no plans for Squarespace to release Fluid Engine to 7.0 to date. 

All of our Squarespace template kits are built using 7.1, so you will have the capability to use them within the templates, and we have a couple of Fluid Engine templates in the making as we speak! 

Disclaimer - This post contains affiliate links to Squarespace. That means if you buy through my link, we may receive compensation at no extra cost to you.