Customize accordion block font in Squarespace

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content


About this tutorial

This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

The Accordion block is a fantastic feature that lets you organize and display content in a neat, collapsible format. Each accordion typically consists of a title that users click to expand or collapse the content beneath it. Unfortunately, we can’t customize much about the text in the Squarespace editor. But we can use CSS to make it uniquely yours.

In this tutorial, you'll learn how to change the font style and color of these accordion titles to match your website's unique look and feel.

You can adjust the font family to something that resonates with your brand, choose a color that complements your overall design scheme, and really make those accordion sections uniquely yours.


Video tutorial


Code Example

Here is the code from this tutorial. = If you want to change the font, remember that you can only use one you've already installed on your website.

Here are the codes from this tutorial:

/* change the font color for the entire accordion block *

.accordion-item {color: red}

/* change the title font family */

.accordion-item__title {font-family: Serif}

/* Change the font family & color of the description */

.accordion-item__description {font-family: Serif; color: red}

insidethesquare

Squarespace Circle Leader & Creator of InsideTheSquare.co

https://insidethesquare.co
Previous
Previous

How to feature an image on your announcement bar

Next
Next

Multiple Font Styles In One Line of Text