Using the Squarespace Accordion Block
If you are sharing a lot of text on the page of your website, it can be beneficial to use tools that will break this text up and make it easier to digest for your readers. The typical web browser has a very short attention span so we need to make sure out websites are skimmable and the information we are sharing can be taken in within a short space of time.
One way you can to this is by using headings. Use descriptive language in your headings and make sure they are set to be a heading 2-4, so Google knows it’s important. Check out my Understanding SEO for your small business website post for some great tips on this topic!
We can expand (pardon the pun!) on these headings those with the use of a nifty design feature called an accordion, or a dropdown.
Ready to add an accordion block to your site?
Click here to skip straight to the video tutorial!
What are accordion or dropdown sections for websites?
An accordion is a block that allows you to add a heading, which can be a question of an important statement, which can be clicked to reveal more information.
Check out the example below.
-
Answer or extra info
-
Answer or extra info
This is great because it allows you to hide really long bit of text from the main view of your page but with a simple click it will reveal this extra information to your reader. It makes your content dynamic and encourages the user of your website to interact with your content, in turn becoming more engaged with it.
Squarespace collapsible blocks
These blocks were possible previously by using some code to add the formatting and styling. Now though, Squarespace has added an accordion block to their block library. Now, with a few click we can add a beautiful dropdown text section to our website.
These accordion blocks have loads of different uses on your website.
Create frequently asked questions collapsible text
You can add one to your frequently asked questions page, where you will have lots of text which can be a little overwhelming to someone when they first arrive. By just giving them a list of questions, then the option to click through to the answer they want, it will be a much more streamlined experience for the user.
Create dropdown product listings
You could also add a dropdown text area to your product listings page. If you have lots of details about what your product can do and how it can help someone, there may be too much for the eye and brain to take in at a glance. By adding eye-catching headings, and then the ability to click for a more in-depth explanation, you’ll not only be giving the user the extra detail that they want but also encouraging them to spend more time on the page and interact with the content.
How to add an accordion block to your website
So now you know why an accordion is awesome and you know what you can do with it, let’s take a look at how you can actually add one to your website.
Step 1
First, we will open the page editor and navigate to the spot on the page where you want to add the accordion. Click the blue cross to open the block library, then start typing accordion to bring up the block.
Step 2
Now your block is added, you will be taken to the block editor. The first step will be to add in the content for your accordion. Click on Accordion Item 1 and replace the title with your question or heading and replace the description with your answer or more information.
Repeat this process with items 2 and 3, clicking Add Item if you want more.
Step 3
Click the Design tab to open up all of your styling options.
Under Text, you will be able to select a Heading or Paragraph style for your title and description.
Under Design, you will be able to control the appearance of your accordion. The best way to explore the design options is to just try everything and see what looks best on your own website. You can tweak and the sizing and spacing options, where you see S, M L, by clicking the three dots. This will allow you to make smaller and more precise changes to the design.
Step 4
When you are happy with how your accordion looks, remember to save your work by heading to the top left corner and selecting save changes.
For more tutorials like this, check out the Website Support Club, where members receive access to a full resource librbary of Squarespace tips and tricks, along with access to a members only Facebook group where you can ask me your Squarespace questions directly and I will give you the fix!
Interested in a website but don’t want to DIY? Check out my services and I would love to hear from you about working on a project together.
