3 Squarespace blocks to design wordy content.

I think what makes my relationship work with wordy people is that English is not my first language so I automatically arrange and organize your words in my head to make sense of it all which makes me a natural visual organizer when it comes to designing website copy. So, I am writing this to explain a little bit more about how you can use these three (3) Squarespace blocks to your advantage without needing to cut your thoughts short.

Squarespace defines ‘Blocks’ as drag-and-drop features that display content on your site. You'll use them to customize your pages with a variety of content, like text, images, buttons, and forms. In this guide, you'll learn about the three types of blocks available and how to add them to organize your long form content for skimmers and thorough readers.

The three blocks are:

(1) Accordian.
(2) Shapes.
(3) Line

Before explaining how to use the block, it might be helpful to know how to add a block. For Fluid Engine editors, you will see this a button on the top left of your section that says ‘Add Block’. Click on that you will see a list of block options as shown in these images below:

On Fluid Engine, you will see this a button on the top left of your section that says ‘Add Block’

This picture shows a list of block options available for you to add to any section.

For 7.0 and 7.1 editors, you will click on the ‘ + ‘ button as it appears when you hover and click on any block or any page as shown in this image below:

(1) The Accordian Block

Squarespace released the Accordion blocks feature in late 2022 to display text content in collapsible sections. I suggest using accordian blocks for structured, text-heavy pages like FAQs or product/service offerings. In my recent website projects, I used them to explain class descriptions, course descriptions and pricing (especially is you use the sliding scale approach).

Accordion blocks help keep your page short and reduce scrolling for your visitors which makes it great for skimmers and thorough content readers. An added bonus for using this a non-traditional and non-normative wellness brand is that this design also supports people who experience complex trauma, because they want to be able to thoroughly understand what you are offering before making an informed decision.

(2) Shapes

Squarespace released this shape blocks feature to add different shapes to Fluid Engine sections. In their guides, which I highly suggest reading, they wrore that “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.”

In our case of wordy content, I use shapes as the interior design ‘tray approach’ to show a visual distinction between two pieces of similar content. In the example below: I used a Square shape block in a different color, to create a visual distinction of two different types of classes while playing with the ‘pop-up’ box approach in a non-annoying way.

(3) Line

Use line blocks to add a horizontal line between blocks on your site. This is a very simple way to break up text or visually separate content on pages, posts, sidebars, and footers. And I frequently use it on my newsletters as well. In Anjali Rao’s website, we used the lines to divide up the content into chunks that are easier to read visually.

Hopefully this was helpful for you the next time you’re designing your website!