How to Add Shapes in Squarespace

 
 

Gone are the days of creating Canva graphics to add shapes to your Squarespace website. Cue the violins! Since the upgrade to the Fluid Engine system last year, Squarespace has continued to roll out new and improved features that make your life easier AND elevate your website design. One recent update is the addition of custom shapes directly into your site. It could not be easier to add shapes now, but there are a few things to know before you get shape happy.

About Shapes

The shapes block is now included as part of the standard Squarespace editing tool. Simply add a block to your design and select the Shapes block. Once you add the block, you’ll see a square pop up automatically. If you click on the edit pencil, you can then customize the shape to your heart’s desire. There are over thirty shapes to choose from, but that’s not all. You can also customize the color and opacity, as well as add a drop shadow, which is also customizable. Once you have selected the shape, color, and opacity you want for your shape, you can move it anywhere you’d like to within the section with the Fluid Engine drag-and-drop platform.

 

Shapes Tips

Be Strategic

Just because you CAN add shapes to your design doesn’t necessarily mean that you should. Of course, you want to make sure that the addition of a shape makes sense with the overall design so it feels cohesive and not haphazard. But a well thought-out shape can really add a level of uniqueness to a design. Keep in mind you can also move shapes in front of another element or behind another element, such as a picture or text. 

Shapes can also offer a strategic way to emphasize certain information. Use a square with your brand accent color to bring attention to header text or client testimonials. 

Utilize Layers

Shapes provide a great opportunity to utilize layers in your designs, bringing a modern, fresh look. Bonus points if you can add a customized rotating brand element or icon to add a dynamic aspect to the page. Shapes also look great behind photos to provide a frame or  to highlight a particular image.

Be Consistent

Although it can be tempting to use all thirty-two shape options over the course of a design, it’s best to keep it to one or two shapes per design. This is connected to being strategic in how you use shapes, but you not only want to stay consistent on the shapes you use, but also the colors and opacity levels. Using the same shapes across pages helps to tie the site together and helps make your brand more recognizable through implementing that consistency.

Give the shapes block a try, and let me know how it goes!

Previous
Previous

How to Add a Custom Font to Your Buttons with Custom CSS

Next
Next

What to Look for in a paid Squarespace template