Create Stylish Quote Blocks with CSS

We are living in the age of social proof - people want to read reviews and testimonials on everything these days.

There are thousands of reviews for toothbrushes.

Featured testimonials about paperclips.

Everyone wants to know everyone else’s opinion, and on your Squarespace site, you can use a really stylish quote block to make that happen.

In this tutorial, I unpack the three main elements to a quote block: 

  • The block itself, where you can change things like background colors, borders, padding, and margins.

  • The quote text, where you can change the quote color, style, and alignment of the text

  • And the quote source itself, where you can also change the color, style, and alignment of the text.

I had a lot of fun putting this together and created a freebie to go with it! It’s a PDF that includes the code names and a few creative pre-made quote blocks for you to get started with. You can copy and paste them right into your site, or add your own flare to make them even more unique! So check out the video below, and be sure to download the freebie too.

After you get a chance to dig in, I would love to see your own creative spin on quote styles! Did you work with padding and margins? Or did you make the most colorful quote block in the universe? Let me know in the comments below! Showing off your work is highly encouraged here InsideTheSquare :)