Open main menu
HomeSquarespaceWeb DesignAcademyStudioSquare Forge
Free Membership

Using Shape Blocks in Squarespace Fluid Engine

Add creative geometric elements to your Squarespace 7.1 site with shape blocks

Table of Contents
Using Shape Blocks in Squarespace Fluid Engine
Last Edited Time
Jun 25, 2025 09:35 PM
Do not index
Do not index
Suggested Tag
Squarespace guide
Fluid Engine
web design tips
Tags Synced
Tags Synced
AI summary
Use shape blocks in Squarespace 7.1 to create dynamic layouts by customizing colors, sizes, and styles. They allow for geometric designs, layering, and adding visual interest without needing design experience.
Last edited by
Platform
Squarespace
Category
Topic

Using Shape Blocks in Squarespace Fluid Engine

Tags: Squarespace guide, website design, Fluid Engine, shape blocks, web design tips, Squarespace 7.1

TL;DR: Key Points

  • Use Shape blocks in Fluid Engine to create dynamic layouts on Squarespace 7.1
  • Customise shapes with colours, transparency, strokes, and drop shadows
  • Choose whether shapes stretch to fill blocks or keep their original proportions
  • Pick from your site's colour palette or create custom colours

What Are Shape Blocks?

Shape blocks are a handy feature in Squarespace's Fluid Engine (version 7.1 only). They let you add geometric shapes to your pages, which is perfect for creating visual interest or building layered designs.
You can use them as decorative elements, background shapes behind text, or to add depth by overlapping different blocks.

Adding Your First Shape Block

Here's how to get started:
  1. Open a page for editing and click 'Add Block'
  1. Select 'Shape' from the options
  1. Click the pencil icon or double-click the shape block to open the editor
  1. Under 'Shape', pick your shape from the dropdown menu
For squares, you can adjust the corner radius to make them more rounded.

Controlling Shape Size

The 'Stretch' toggle is important to understand:
  • Stretch enabled: The shape expands to fill the entire block, changing its proportions to fit
  • Stretch disabled: The shape keeps its original proportions, even when you resize the block
Most of the time, you'll want stretch enabled for full control over your layout.

Styling Your Shapes

Colours and Transparency

Click 'Colour' to choose from your site's palette or pick a custom colour. If you select a palette colour and later change that colour in your site settings, your shape will update automatically. Custom colours stay the same regardless of palette changes.
Use the 'Blend Mode' dropdown to adjust transparency. This is brilliant for layering shapes over images or other content.

Borders and Shadows

Next to 'Stroke', you can add outlines to your shapes. Choose between solid or dotted lines, then customise the colour, thickness, and dash size.
The 'Drop Shadow' toggle adds depth to your shapes. You can adjust:
  • Angle of the shadow
  • Distance from the shape
  • Blur amount
  • Shadow colour
Quick tip: If your shadow looks too subtle, increase the distance or reduce the blur to make it more prominent.

Managing Default Colours

To change the default colours for all shape blocks:
  1. Go to 'Site Styles'
  1. Click 'Colours'
  1. Hover over your theme section and click the pencil icon
  1. Adjust the 'Shape Block' colour settings for background and drop shadow

Positioning and Sizing

Once you've styled your shape:
  • Drag the block edges to resize it
  • Drag the whole block to move it around your page
  • Layer it behind or in front of other content blocks

Common Questions

Can I put images inside shape blocks? No, shape blocks only work with solid colours. Use image blocks for pictures.
Do shape blocks work on older Squarespace sites? Shape blocks only work in Fluid Engine on Squarespace 7.1. They're not available on 7.0 sites.
Can I animate shape blocks? Squarespace doesn't have built-in animation options for shape blocks, but they will respond to any site-wide animation settings you have enabled.

Quick Reference

  • Fluid Engine: Squarespace 7.1's flexible design system
  • Block Editor: Where you adjust settings for individual content blocks
  • Palette Colour: Pre-set colours that update across your whole site
  • Drop Shadow: Visual effect that makes elements appear raised off the page

Wrapping Up

Shape blocks give you an easy way to add visual interest to your Squarespace site without needing any design experience. Start simple with basic shapes and colours, then experiment with shadows and transparency as you get more comfortable.
The key is not to overdo it. A few well-placed shapes can transform a plain page, but too many can make it look cluttered.

Join our Free Membership and access our DIY Community.

Need help with your website

Become a member