You are a few clicks away from having cooler looking quotes on your Squarespace website! This tutorial will show you how to customize your quote blocks so look as unique as you want them to be.
—
This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: https://insidethesquare.co/learn
—
This tutorial will show you how to customize your quote content block in Squarespace. There are three main code names (aka selectors) you can use to give custom background colors, borders, and even apply a custom font. To grab the PDF with the premade quotes from the end of the video, visit https://insidethesquare.co/quote
Important moments from this Squarespace tutorial:
00:50 What is the difference between a block quote and a quote block in Squarespace
02:05 How to customize a quote text type
03:41 How to customize a quote content block
05:11 How to hide the quotation marks on a quote block in Squarespace
05:22 how to hide the quote source dash that shows up automatically
—
Here is the code from this tutorial; be sure to adjust any colors and values to suit your sites unique style!
/* Change the background color */
.sqs-block-quote {background: pink}
/* Give the quote a border and curved edges */
.sqs-block-quote{border-radius: 15px; border: 1px solid #000}
/* Change the font family of the quote block */
.sqs-block-quote blockquote {font-family: serif}
/* Change the font family of the quote source */
.sqs-block-quote .source {font-family: serif}
/* Hide the dash before the quote source */
.sqs-block-quote .source:first-letter {font-size:0}
/* Hide the quotation marks */
.sqs-block-quote blockquote span{display:none!important}
—
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 – You’ll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → https://insidethesquare.co/partner10
—
🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css
—
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
—
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare
👍 FACEBOOK → https://business.facebook.com/insidethesquare
📌 PINTEREST → https://www.pinterest.com/insidethesquare
—
The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
