A Beginner’s Guide to Squarespace Quote Blocks
You can display noteworthy content in a unique way using a Squarespace quote block.
A wall of text can be overwhelming to any reader, especially online.
Using a Squarespace quote block can help highlight important information in a creative way that’s visually appealing.
Quote blocks display two distinctive pieces of text content: a quote and a quote source.
How to add a quote block to Squarespace
Here is an example of a quote block with a background:
“Have fun with your Squarespace website.”
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 quote option form the list of content blocks.
Double click on the quote block, or click once and select the pencil icon to open the content block.
The content tab is where you will add your quote text and quote source. Both of these are basic input areas which means the characters are all the same and can’t be bold, italic, or active links.
Use the design tab, you can assign a custom loading animation, add a background color, border (stroke), adjust the corner radius, padding, and you have options for both blur and blend mode.
*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*
Squarespace quote block design settings
There are a lot of great options for customizing the quote block inside the Squarespace site style menu.
You can customize the font of the quote and the quote source separately.
Clicking on the paintbrush icon located in the top right hand corner of the screen, you can open your site style menu.
Click on the font option and scroll down to select assign style. Here you’ll find the quote block section.
Click on the quote and/or quote source and you can customize the font style.
You can edit the colors in your site style menu too!
To change the color of your quote block, click on the color section of your site style menu, and select the color theme for your quote block.
Here you’ll find the quote block section where you can pick a color for the quote text, quote source text, background, and border (stroke).
How to customize a Squarespace quote block with code
When the options in a Squarespace design menu seem limiting, you can use simple CSS to make your website unique. This tutorial will teach you how to customize a quote block colors and fonts using code, step by super simple step:
Where you can learn more about Squarespace content blocks
Squarespace Made Simple
This mini course for beginners will teach you how to create your first Squarespace website. Lesson seven includes information about content blocks.
Squarespace Support Article
Learn more from the official Squarespace support blog