Shape blocks

Create solid-color figures to enhance your page design.

Last updated September 1, 2023

Use shape blocks to add different shapes to Fluid Engine sections. This is a great way to vary your layouts and add eye-catching motifs, or overlap shape blocks with other blocks to create more visually striking layouts.

Watch a video

Tip

Shape blocks only add a solid color shape to your page design. To add an image within a shape, use image blocks.

Three_shape_blocks_-_a_square__a_star__and_a_flower_-_behind_text.png

Three_shape_blocks_-_a_square__a_star__and_a_flower_-_behind_text.png

Accessing this feature

Shape blocks are supported in Fluid Engine on version 7.1 sites.

Add a shape block

To add a shape block:

  1. Edit a page or post, click Add Block, then click Shape. For help, visit Adding content with blocks.
  2. Open the block editor by clicking the pencil icon on the block, or double-clicking the block.
  3. Under Shape, click the drop-down menu and select the shape you want. If you select the basic square shape, set the corner radiuses.
  4. Switch the Stretch toggle on to make the shape fill the block. The shape's proportions may change when you resize the block. If you leave Stretch disabled, the shape maintains its proportions when you resize the block.
  5. Click the Color tweak to set the block's color.
  6. Click the Blend Mode drop-down menu to choose a transparency setting. These effects are ideal if you're overlaying a shape block in front of an image or other visual content.
  7. Beside Stroke, enable a solid or dotted line outlining the shape. For both solid and dotted lines, set the stroke Color and Thickness. For dotted lines, set the Dash and Gap size and the End Caps shape.
  8. Click the Drop Shadow toggle on to add a drop shadow to the shape. Set the Angle, Distance, Blur, and Color.

Tip

If a drop shadow doesn't appear, increase the distance or blur settings.

Shape block color

In the block editor, you can select a color for your shape from your site's palette or choose a custom color. You can also select a color for the block's drop shadow after enabling it. With these settings, every shape block you add can be a different color with a different colored drop shadow.

Keep in mind, if you select a palette color and change your site's palette later, the color may change to match your new palette. If you select a custom color for the shape block or its drop shadow, that color stays the same even if you change your palette.

If you don't select a color in the block editor, shape blocks and their drop shadows follow the default colors from the section's color theme. To customize these default colors:

  1. Open Site Styles.
  2. Click Colors.
  3. Hover over the section's theme and click the pencil icon. If you're not sure what theme the section uses, check the label in the top-right corner of the section.
  4. Scroll down to Shape Block, then change the Background Color and the Drop Shadow Color.

Next steps

After setting the shape block's design:

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.