A Beginner’s Guide to Squarespace Accordion Blocks
A Squarespace accordion block is a great way to showcase a collection of text and is commonly used for FAQ’s.
An accordion block displays a list of titles, each with an icon to indicate that there is more information available. When the title is clicked on, the description text will be displayed underneath.
Here is an example of an accordion block:
-
Description text goes here
-
Description text goes here
-
Description text goes here
How to add an accordion block to Squarespace
Select edit on the top left-hand side of your website preview.
Click the add block option on a page section, or the plus sign inside classic editor.*
Select the accordion option form the list of content blocks
Double-click on the accordion block to open the editor, or click once and select the pencil icon to open the editor.
In the content tab, click on any accordion item to open the content and customize it with your own text.
Pro tip: you can use basic text formatting in the description, including bold, italic, and underlined text, active links, and bullet points. Accordion titles do not have this feature; text formatting is only available for description text.To create new content, click on add item. To remove old content, click on the trash can icon for that item while in the content tab of the editor.
To rearrange accordion item content, drag and drop items until they are in the order you want them to be in.
*Classic editor is used by blog posts, additional product details, individual events, and sites built on version 7.0 Learn more inside Squarespace Made Simple*
What you can customize about the accordion block design using Squarespace
You can change the text; both title and description
You can make the title any font style; heading or paragraph
You can make the description any paragraph font style
You can rearrange the content by dragging and dropping them in the content editor (double-click on the accordion block to edit)
You can change the icon to be a plus sign or an arrow
You can change the thickness of the divider lines, or turn them off completely
You can change the color of the divider line using the color options in your site-style menu
You can add a border (stroke) to the accordion block
You can curve the corners of the accordion block
You can add a solid color background to the accordion block
What you can customize about the accordion block design using CSS
CSS stands for Cascading Style Sheet and it’s a special type of code that you can use to customize Squarespace.
Squarespace designers use custom CSS when the design menu has limited options. These Squarespace CSS tutorials will help you customize your accordion block.
Each one of these has step-by-step instructions and custom codes you can copy and paste into your own website to make it uniquely yours.
Where you can learn more about the Squarespace accordion block
Squarespace Made Simple
This mini course for beginners will teach you how to create your first Squarespace website. Lesson seven includes information about accordion blocks.
Squarespace Support Article
Learn more from the official Squarespace support blog
Squarespace
made simple
Get all the info you need to confidently
launch your Squarespace website ASAP.
In this tutorial, I'll show you how to add custom excerpts to your chapter titles using a bit of CSS magic.