4 Ways For Authors To Use The Accordion Block
New to Squarespace and wanna try it out? You can sign up for a free trial here << Yes, that’s an affiliate link - thanks for supporting my book obsession, my kindle and I thank you ;)
What is an accordion block?
An accordion block is a newer block from Squarespace.
It's a way to display information on your website in collapsible rows. You can insert the accordion block anywhere you'd like on a page. Then add your content to the block and it will only show if someone clicks on the box to open it.
This way the content is on your website for anyone who needs it but it doesn't take up too much space on your website.
You can see an example of this from my Squarespace templates FAQ page below:
How do you add one to your Squarespace website?
Open the page you want to place the accordion block on.
Click 'edit' in the top left hand corner (Squarespace 7.1) | Click 'edit' on the page (Squarespace 7.0)
Find the area where you want to place the block and click the grey teardrop insertion point
Choose 'Accordion' from the block menu and it's placed where you've indicated
What are the styling options?
Once you've added the accordion block to your website, you can add all of your text via the ‘Content’ tab in the pop up window.
Then click the Design tab. There you'll see a list of all the different elements you can style.
Choose the Title font (choose between your preset heading and paragraph fonts), plus alignment (left, center or right)
Choose the Description font. Plus choose the width, padding and alignment of the font.
Expand the first item (leaving it open always)
Allow multiple open items (at the one time)
Show Dividers (the lines between each accordion item). If you choose to have the dividers on then you can access more options to - Show the first or last divider, adjust the thickness of the line & adjust the opacity of the divider.
Icon - you can choose between an arrow and a plus icon
Icon size
Icon thickness
Icon placement (left or right)
Row padding
Accordion icon padding: top, bottom, left and right
Limitations of the accordion block
You can't add other blocks into the accordion block. That means you can't add images or buttons into the block.
You have to restyle the accordion block to your preferences every time you add a new accordion block to a page. It doesn't inherit the styling options once you've added one.
As Authors: How You Can Use the Accordion Block
1 | Buy Links
You can use this on your book pages to showcase some of your buy links. If you have a long list of retailers, or want to list all of the amazon stores: USA, UK, Australia etc you can use an accordion block.
Instead of having multiple buttons making your page look untidy, you can instead list them in a drop down menu that can be accessed easily. That way your buy links are easily accessible but also don't clutter the page.
I would suggest this only if you have a really long list of retailers. If you only have a few then using buttons or text links will make this easier for your website visitors and be less 'clicks' for them to access the relevant information.
2 | Excerpts
The accordion block is the perfect block to use on book pages to showcase excerpts from that book.
As excerpts are generally large walls of text, an accordion block is a great way to show them. Since they are hidden behind a collapsible menu, website visitors won't be overwhelmed with the wall of text and instead can choose to open the excerpt to read it only if they want to.
You can add them to the page underneath the other content: book cover, title, series name and number, synopsis and buy links.
3 | Bonuses
If you often have bonus content for your books that you like to share with your readers then an accordion block could be a good way to show them.
You can add or link to bonus scenes, special playlists you've made, competitions, Q&As about the book etc.
This also makes it super simple to remove if the content is no longer relevant as you can simply delete the whole accordion block or just the dropdown for the particular piece of content.
4 | FAQ
This post wouldn't be complete if I didn't mention the most obvious use for the accordion block - an FAQ (frequently asked questions) section.
You can utilise this on your About page with you answering your most frequently asked questions from readers.
Or on your contact page to answer some of the most common questions people ask when they contact you. This would help alleviate some of the emails you get while still providing answers to your fan base.
Or perhaps you have a popular series/book/character that everyone asks you about - you could use this accordion block on a specific FAQ page on your website to display the answers. This way you could house them all on the same page and simply direct your readers to that page when they ask you something that you've already answered there.
As you can see the accordion block is a great, versatile block within Squarespace that you utilise in many different ways. How will you use it?
LIKE THIS POST - THEN YOU’LL ALSO LOVE…
Have I made you curious? You can sign up for a free Squarespace trial here << Yes, that’s an affiliate link - thanks for supporting my book obsession, my kindle and I thank you ;)
