Learn how to build your Squarespace website with Fluid Engine
If you’re already using Squarespace, you’ll know that it could sometimes be quite fiddly to arrange the various blocks as you want them. Sometimes it seems that the blue line, which marks out the location where your block will end up, can be pretty unpredictable!
Well… drum roll… these are exciting times. Squarespace has introduced its first proper drag-and-drop functionality to edit and build out the pages and sections on your website. It’s called Fluid Engine.
Note that if you’re using version 7.0 you won’t have access to the new editor, but if you’re on 7.1 you have the option to upgrade each page to Fluid Engine, and when you create a new page the default editor is now Fluid Engine. If you have existing code on your site, it’s worth reading this blog to find out how this might be affected if you upgrade.
We’ve been experimenting with the new drag and drop method and here are our top 6 tips for using it creatively and effectively.
Set up a test page
If you have a live site, make sure that you disable the page so that nobody randomly comes across it. You can then teach yourself to use Fluid Engine to your heart’s content without worrying about ruining the layout of an existing page.
Get to know your blocks
The introduction of Fluid Engine has meant that the spacer block is now redundant, and a new one called the shape block has been introduced to allow you to add a selection of shapes to your page, in any colour that you choose. Check out this help page for a full list of all the blocks available, and what each one does. Remember that many of the blocks have various settings when you’re in edit mode, for example, you can change the corner radius and shape of image blocks. Make sure that you research what each one can do.
Check the section settings to customise your page layout
If you click ‘Edit’ on the page, then click ‘Edit Section’ in the top-right corner of the section, you’ll see three tabs - Format, Background and Colors. Get to know each one to make sure that you’re optimising all your options, and once you’re finished, remember to save what you’ve done.
Format allows you to adjust the spacing, padding and alignment of the section.
Background gives you the chance to add background images/videos, and background art for the whole section.
Colors decides on the colour scheme for the section that you’re working on, which you can then tweak in ‘Site Styles’ in the main website settings.
Remember it’s drag and drop
Don’t be put off if your blocks don’t look ideal when you first add them. If you’re not happy with the size of a block, all you need to do is drag its corners to make it bigger. If its position isn’t right, simply drag it into the ideal location for your layout. When you’re moving blocks around or resizing them, you’ll see a grid across the section that allows you to be very precise with each position.
Fluid Engine also allows you to overlap the blocks, but make sure that you don’t interfere with user experience as text should always be easy to read on all devices, and you won’t want heads or other important details to be cropped out of images. We’ll cover responsive layouts in a minute.
Take inspiration from other websites
They might not even have been built with Squarespace, but if you like the way images, text or buttons overlap, bold-coloured shapes are included, or the use of space is maximised or minimised, it’s a great way to play with Fluid Editor to try and achieve the same effects. It’s now a lot easier to be as creative as you want to be.
Don’t forget to preview the mobile view
All Squarespace websites are responsive across devices, however, with Fluid Engine you always need to check the mobile layout and adjust it to work as you need it to.
There’s an odd glitch, as you’ll see that the blocks that have been added last will always end up at the bottom of the page, even if you placed them nearer the top. You might also find that there are big spaces on the page that aren’t on the desktop view.
If you click on the mobile icon on the top right of your screen, you’ll see that the order and position of the blocks can be dragged into different places. Whatever you do here with the blocks will not affect the desktop view.
Unfortunately, there isn’t currently a tablet preview, so if you want to check that too you’ll need to check the layout on an actual tablet or iPad to make sure that there are no glaring issues, and if there are you’ll need to do some guesswork when you’re editing the page to make sure that your changes don’t affect desktop and mobile.
We hope that you found this article useful. If you’d like specific training or would like us to build your website for you, don’t hesitate to get in touch. You might also find our training videos useful.