Overview on how to use Squarespace Fluid Engine in 8 minutes
No doubt you will have seen some buzz about Squarespace's new Fluid Engine design experience. We are so excited about this update but understand it can be a little daunting when something so central to our businesses changes so dramatically so we have put together some short guides for understanding Fluid Engine to help you and your clients quickly get up to speed on this awesome update.
TRANSCRIPTS
-
Hi I’m Nick from SquareKicker: a Design & Animation extension for Squarespace websites. I’m excited to share with you one of Squarespace's biggest updates.
Introducing Fluid Engine, the new content editing experience for Squarespace 7.1 sites.
In this video I’ll give a detailed overview of the most important things you need to know about Fluid Engine and some tips and tricks so you can get up to speed and start building incredible sites right away.
What is Fluid Engine?
Fluid Engine is a drag and drop editing system for Squarespace Page Sections and Blocks.
Unlike Squarespace's earlier version called the Classic Editor which uses Columns and Rows to position content in a section, Fluid Engine is built using the latest CSS Grid Technology. Combined with Squarespace’s easy to use platform, Fluid Engine makes Squarespace one of the most advanced and intuitive drag & drop website editors.
With this new editor you will have more flexibility for block, placement, overlapping and resizing. If that wasn’t exciting enough, Fluid also gives you the flexibility to position and resize your blocks for mobile sites which is arguably the most important screen size to design for.
It’s important to note that even if your site supports Fluid Engine, some areas of your 7.1 site will still use the Classic Editor for the time being, such as: existing sections that were created with the Classic Editor, Blogs Posts, Event Descriptions and Additional Information for Products.
Adding Fluid Engine Sections
To add a new Fluid Engine Section, click Edit and Add Section. You can add a Blank section or Select from the list of Pre-Built Page Layouts. Every new section is Fluid Engine unless the section has an i icon in the top-right corner of the page layout. This means that this is an auto layout or Gallery section that doesn't use Fluid Engine.
You can also create a New Blank Page or Select a Pre Built Page from the list of Page Layouts. These Page Layouts which will contain Fluid Engine Sections.
If you have an existing Classic Section that you want to use Fluid Engine on, you can upgrade this to a Fluid Section. We will go over this process in more detail in the next video on Converting your Squarespace website to Fluid Engine.
Adding Blocks
To add a block to a Fluid Engine Section click Edit and then click the Add Block button in the top-left corner of your section. When you select a block it will appear on the left side of your screen. There is no limit to the number of blocks you can add to a section, but it’s recommended not to add more than 60 to prevent your site from loading slowly, particularly on mobile browsers.
Arranging Blocks
Arranging Blocks is by far one of the most exciting features of Fluid Engine. Hover over the block you want to move. You will see the block highlight with a blue outline. Click & Drag the block to the desired position.
When you drag the block you will see a Grid Guideline appear in the background of the section. As you move your block around the section, you will see the block outline snap to the section grid. You can also select multiple blocks and move them as a group.
When you release, it will snap to the closest grid. If you release a block beyond the grid width, the block will snap to the edge of your section. You cannot drag the block up or down to overlap another section, but don’t worry you can use SquareKicker for this.
If you drag a block down past the defined section grid area, this will add more rows to your grid increasing the height of your section. When you release a block the grid guidelines will disappear. To make this grid stay visible at all times press the “G” on your keyboard to toggle the grid on and off. I’ll share more details about the grid later in this video.
Another useful feature is the ability to move blocks using your arrow Up and Down keys. Select a block and use the arrow keys to move a block around the grid on your section.
Overlapping Blocks
If a block overlaps another block, you will see block layer icons in the block toolbar. To change which block is lying on top, select the block and click on these icons to bring the block in front or behind the other blocks. Or hold shift and use the up and down arrow keys.
Resizing Blocks
You can make a block bigger or smaller by clicking on a block and then dragging one of the squares on your block’s outline. This will increase or decrease the height or width of a block. Some blocks will have different behaviours when resizing because each block has a specific minimum height or width such as a form block or an accordion block.
Add Block Background Color
With the Fluid engine, some blocks have the ability to add a background color. To set a background color, open the block’s design tab by first clicking on the pencil icon in the block toolbar and toggle on the background switch on. This will immediately add a background color to your block. This color is defined by your section’s theme color settings. When the background toggle is enabled you will be provided with a corner radius and padding options.
Fit, Fill and Align Block Content
In an image or button block you have the option within the block’s design tab to set a block to fit or fill.
To align the content in a block, click on the alignment icons in the block’s toolbar and set the horizontal or vertical alignment of the block’s content. These options are only available if an image or button block has been set fit.
Fluid Engine Mobile Layout
Did you know that over half of the traffic on websites is from a mobile device? With this in mind, you should spend just as much time designing how your site will look on smaller size screens. Thanks to Fluid Engine you have the control to arrange and resize blocks specifically for mobile screens.
Click on the Mobile Icon in the top-right corner of your site. In this view, you can rearrange and resize blocks on your section for mobile screens. This will not change the size or position of your blocks on your desktop layout. However, other styles and designs like font size and color will be applied to both desktop and mobile layouts.
By default, blocks are automatically stacked in mobile in the order they were created but can be repositioned for mobile by clicking and dragging these blocks around the section grid. To quickly rearrange blocks you can click on a block and then click on the Move Down or Up Button which will swap a blocks position with the block above or below. Alternatively you can click the Option + Up or Option + Down keys to rearrange blocks.
Styling Fluid Engine Sections
To change the Fluid Engine Section Settings click on Edit Section in the top-right corner of the section you want to style. If you’ve selected a block you may not be able to see this section toolbar until you click off the block. As normal you can change the section’s Colors Theme, Add a Background Image, Video or Background Art.
In the Format Tab you will also be presented with the options to adjust the grid and height of your section.
Row Count sets the number of rows in the grid. This is the only section setting that can be defined differently on desktop and mobile and the minimum number of rows is relevant to arrangement of blocks in a section.
Gap sets the spacing between the grid so you can space blocks away from each other on the grid or position blocks without a gap. You can select no gap, a preset defined gap, or click the three dots to set a specific vertical and horizontal gap.
When the Fill Screen toggle is enabled, extra padding will be applied to set a minimum viewport height to the section. S is 25%, M is 50% and L is 100%. You can also select the 3 dots to select custom minimum height. The alignment settings sets the vertical alignment of the Grid Area within the viewport height.
Closing
Fluid Engine is one of the most intuitive, modern and flexible way to build any website. Not only does it give you control to create some really impressive sites, but for the first time on Squarespace you have the ability to craft a unique experience just for your mobile website.
If you already have a Squarespace website with Classic Sections and you want to understand the difference between the two and how this affects your site, watch our next video on Converting your Squarespace website to Fluid Engine.
-
Hi, I’m Hannah from SquareKicker: a Design & Animation extension for Squarespace websites. In this video we’ll go over how to convert your Squarespace 7.1 Website to Fluid Engine and go over the main differences between Squarespace’s Classic Editor and Fluid Engine Sections.
Squarespace 7.1 has multiple section types which you can use to build your websites. Most are the Fluid Engine Sections, except for a few such as a List or a Gallery.
If you have an existing website on 7.1 you may have some sections using the Classic Editor even with Fluid Engine enabled on your site.
Identifying Fluid Engine Sections
An easy way to tell the difference between the Classic Editor and Fluid Engine is the “Add Block” Button in the top left corner when edit mode is enabled. If you see this button, this section is using Fluid Engine. If you see an “Upgrade” button instead this means this section is using the Classic Editor.
Converting a Classic Section to Fluid
You can upgrade any Section that is using the Classic Editor to a Fluid Engine Section. To convert a section from Classic to Fluid, click the Upgrade Button. This section will immediately be converted to Fluid. If you are using SquareKicker or any other custom code, your section may look different on Fluid as your custom code was written for a section using Classic Editor.
If you had SquareKicker custom changes, these will be removed and you will see a message from SquareKicker. You’ll also get access to an upgraded list of new and improved SquareKicker tools that are only available on Fluid Engine.
If you convert your section and decide that you want to change back to the Classic Editor, this upgrade can be reverted by clicking the Squarespace “undo” button or clicking “Disregard Changes.” Any SquareKicker or custom changes you had will return as they were before.
If you click Save this will permanently commit this section upgrade. It’s important to note that there is no way to revert this upgrade once a section has been saved.
Duplication Sections & Pages
If you duplicate a Classic editor section, this will not convert the section to Fluid and a duplicate Classic Editor section will appear. Likewise if you duplicate a Fluid Engine section a new duplicate Fluid Section will appear. If you duplicate a page with Classic editor Sections these sections on this duplicate page will stay as Classic Editor sections even if there are Fluid Engine Sections on the page.
Fluid Engine VS Classic Editor
There are a few main differences to highlight between Fluid Engine and Classic Editor sections.
The Fluid Engine Grid
Blocks in a Classic Editor are stacked within 12 defined Columns whereas Fluid Engine blocks are freely placed within the grid. The grid is 24 boxes wide and The height of a grid in a Fluid Engine section is defined by the number of rows or section Fill Height. The grid gap is the area between the grid rows and columns defining how close blocks are placed from each other.
Adding Blocks
Adding a block is different on Fluid and Classic. Blocks on Classic are added using insert points found throughout the section. When a block is added it can cause an unexpected change to the size of other blocks around the new block on the same row. However, a Block on Fluid can be added by clicking the Add Block button which places a new block to the left side of the section and will not affect the position or size of other blocks on the section.
Moving Blocks
When moving blocks in a Classic Editor, blocks can be dragged to other areas of a section and placed above, below or to the side of another block within the section’s columns and rows. On Fluid Engine, moving blocks is much more intuitive as blocks can be dragged around a section and placed anywhere on the grid. A block can also be brought right to the edge of a section or even placed overlapping other blocks.
Resize Blocks
Resizing a block on a Classic Section can be done by changing the size of a column which can sometimes unexpectedly change the size of other blocks at the same time. To resize a block on Fluid, simply drag the edges of a block to your desired size. You can see blocks around are unaffected by changing the size of this block.
Block Changes
There are a few changes to available blocks in Fluid Engine that are not the same in Classic. First, because you can resize blocks without resizing columns there are no longer Spacer Blocks. Image Blocks are also simplified with only a single Image. There are no longer Image Block Subtypes such as a Card, Poster or an Overlap design containing text and buttons.
Image and Button blocks now show a design option to fit or fill. When these blocks are set to fit an alignment option is also presented. Text Blocks also have a vertical alignment option.
Fluid on Mobile
Mobile screen sizes on Classic and Fluid have very different approaches to responsive design. Blocks in a classic section are automatically stacked in the order they are positioned in the section’s columns and rows. There is no way to change these blocks for mobile screens on a classic editor without the use of custom Code or SquareKicker.
Unique to Fluid is the ability to resize and position blocks specifically for mobile leaving you with control to reorder your blocks on mobile which is often a website’s most commonly viewed screen size. By default, blocks are automatically stacked in the order they were created and can be resized or repositioned by clicking and dragging these blocks around the grid. To quickly rearrange blocks, click on a block and then click the Move Down or Up Buttons which will swap a blocks position with the block above or below.
For a detailed look at Fluid Engine check out our video on A Complete Overview of Squarespace’s Fluid Engine.
We look forward to the control Fluid Engine gives designers and if you want to take your site even further head to SquareKicker.com to check out the power of Fluid Engine combined with SquareKicker.
What Does This Mean for SquareKicker?
Fluid Engine and SK Scrolling Effects
We have been so excited for the release of Fluid Engine, it is not an overstatement to say Fluid Engine + SquareKicker is going to knock your socks off. The freedom of Fluid enables you to control blocks like never before taking SK tools like Scrolling Effects to new heights. The Image on the right has been created using Fluid Engine and SK Scroll Effects.
In rebuilding the SK Tool set for Fluid we have also taken the opportunity to update existing SK Tools. Text Blocks now have the ability to style individual words with outline, highlight and styling options. Image blocks have had a huge makeover including the addition of hover on Image. All things that were not possible without Fluid.
It's a lot to take in so we will be sending tutorials out explaining these updates over the coming weeks and for quick tips keep an eye on our social feeds.
Are Classic SK and Fluid SK Tools the Same?
The first important note is your SquareKicker changes made on Classic sections will not be affected. If you upgrade a Classic Squarespace section to Fluid you will lose the existing SquareKicker changes. If this happens by accident you can click 'Undo' or 'Discard Changes' in Squarespace. Once a converted section has been changed you will not be able to revert these changes.
SquareKicker Classic tools have received some updates as the new Fluid tools have been developed. Some of the new features such as the Image with hover and Text tools are only available in Fluid Engine.
Some tools are still missing from the SK Fluid Tool set. Don't worry though we are working on it and all your favourites will be back shortly. Keep an eye on our release page for details or feel free to contact support.
