Shape blocks

false

Shape blocks

Last updated February 19, 2026 18:29

Create solid-color figures to enhance your page design.

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, appear behind the following text. Make it stand out. It all begins with an idea.

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 Modedrop-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:

Was this article helpful?

Yes No

11 out of 37 found this helpful

Yes No

Shape blocks