4 Code Snippets to Spice up Your Squarespace Website (Developer Platform Not Required)

I have designed three Squarespace websites this year, and although I love the minimalistic templates, I desired a few additional styles to spice up my blog. With my minimal CSS knowledge, I found and modified four snippets of code to create a custom drop cap intro, block quote, pull quote, and comment prompt. My source code is below, which you can use and modify for your own Squarespace website.

4 Custom Code Snippets to Spice up Your Squarespace Website | www.byhananiah.com

Even if you just have minimal CSS and coding knowledge (such as myself), you can incorporate custom CSS coding into your Squarespace website to make it more unique. If you are not sure how to add custom CSS to your website, check out this tutorial.

Once you add the custom CSS, here is another tutorial on how to use the new CSS when creating your website's pages and blog posts.

Please Note:

  • The new CSS styles below are not meant to replace or override your existing website styling, but to add more design options.
  • Make sure to create unique names for the new CSS styles, such as "newblockquote," so that you don't accidentally override existing template styles.
  • These styles will look different on other Squarespace templates and will likely require tweaking to work with your website.
  • I am not an expert coder and used other people's code as a base before coming up with the final code blocks below.


Drop Cap Intro

I wanted a consistent, classy, attention-grabbing blog post intro that invited you to continue reading the entire post. I chose drop caps as the way to do this, since it combines my love of medieval manuscripts and typography.

Here is how the intro turned out:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Source Code (What goes in the code block):

<p class="intro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>

Custom CSS (What to put in the custom CSS section):

.intro {
font-family: Volkhov, Georgia, Serif;
font-size: 22px;
font-style: italic;
font-weight: bold;
color: black;
line-height:28px;
}


.intro:first-child:first-letter {
font-style: normal;
float: left;
font-size: 70px;
line-height: 50px;
padding-top: 6px;
padding-right: 8px;
padding-left: 0px;
padding-bottom: 0px;
color: #00B8C2;
}



Block Quote

The standard quote font is rather boring for the template I'm using, so I created a new version that implements my blog's primary color and bold quotation marks.

What the new block quote looks like:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Source Code:

<p class="newblockquote">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>

Custom CSS:

.newblockquote {
background: #f9f9f9;
border-left: 10px solid #30C4CC;
margin: 1.5em 0px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019";
color: #30C4CC;
font-size: 20px;
padding-top: 30px;
padding-left: 50px;
padding-right: 50px;
}

.newblockquote:before {
color: #30C4CC;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.1em;
vertical-align: -0.4em;
font-family: Volkhov, Georgia, Serif;
}

.newblockquote:after {
color: #30C4CC;
content: close-quote;
font-size: 4em;
line-height: 0.1em;
margin-left: 0.1em;
vertical-align: -0.6em;
font-family: Volkhov, Georgia, Serif;
}

.newblockquote p {
display: inline;
}



Pull Quote

The default Squarespace template doesn't include a pull quote, so I created new one. I use this to highlight main ideas in my blog posts.

What the pull quote design looks like:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Source Code:

<p class="pullquote">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>

Custom CSS:

.pullquote {
border-top: 2px solid #30C4CC;
border-bottom: 2px solid #30C4CC;
color: #30C4CC;
margin: 30px;
padding: 30px;
text-align: center;
font-size: 20px;
}



Comment Prompt

I wanted to highlight a question to ask the readers at the bottom of every post, so I created this comment prompt styling. This code is the most disjointed, but if you copy and paste it consistently every time, it's not hard.

What the comment prompt looks like:

COMMENT BELOW
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Source Code:

<div class="commentbelow"> <span style="font-size: 15px; font-weight: bold; color: #007980;">COMMENT BELOW</span></br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

Custom CSS:

.commentbelow {
background: #30C4CC;
padding: 30px;
color: white;
font-size: 28px;
}

Note: If you title the CSS class "comment," you will be editing the styling for the comments at the bottom of your post. Unless you want to do that, title your new CSS class "commentbelow" or "commentprompt" so that you don't override the existing CSS styling.


There are the 4 custom code blocks I'm using for my Squarespace blog! Feel free to use and modify them for your own Squarespace website.


Save this post to your Pinterest board so you can reference it later!


If you have a Squarespace website, here's another post you may be interested in:

Increase Squarespace Post Liking with an Exploding Heart GIF (Free Tutorial and Download)


LEAVE A COMMENT
Are you using custom code blocks on your Squarespace website?
Give this post some <3
 

Did you like this post? Share it with your friends who would benefit from these code snippets below.

: )