TB Web Design

Squarespace, Web Design Tips

Squarespace CSS Cheat Sheet

Posted on
by

Squarespace CSS Cheat Sheet

So you’ve DIY’d your Squarespace site and it looks… well… like a Squarespace site? You’re probably looking at other Squarespace sites thinking it must’ve been complicated. You’d be surprised how much of a difference a little bit of CSS would make. Here are my top 5 favorite CSS cheats in a quick CSS cheat sheet for Squarespace.

1. Install a custom font

How to use custom fonts in Squarespace 7.1

1 - COPY + PASTE

Start by copy + pasting the code below into your Custom CSS – you can find this under Design > Custom CSS
 
Use this code snippet: @font-face @font-face {font-family: “”; src: url(“”) format(‘opentype’);}

2 - UPLOAD FILE

  • At the bottom of the CSS window, you’ll see ‘Manage Custom Files’. Click that and find your font file to upload it.

3 - FILL IN QUOTATIONS

  • Fill in the first set of quotation marks (after “font-family:”) and name your font. 

    Next, Click between the second set of quotation marks in the “url(”)” and then click on the file you uploaded and you should see the file name added in.

4 - Assign your font to text classes

  • Now that your font is uploaded you’ll have to assign it to specific text classes to start using it on your website.

  • Copy + paste a code snippet below where you’d like to use your custom font.

  • Insert the name you assigned to your font between the quotation marks.
  • // Heading 1
    h1 {font-family: ’FONT-NAME’;}

  • // Heading 2
    h2 {font-family: ’FONT-NAME’;}

  • // Heading 3
    h3 {font-family: ’FONT-NAME’;}

  • // Heading 4 
    h4 {font-family: ’FONT-NAME’;}

  • // paragraphs
    p {font-family: ’FONT-NAME’;}

I found this video that does a good job of explaining this process.

2. Use background banners to add dimension.

This doesn’t just happen with Squarespace. I see it happen with any platform. You know those solid bands of color that can get kind of repetitive as your scroll the page? An easy way to add visual interest within Squarespace is to use background banners.

Use half backgrounds.

I like creating these sort of graphics in Canva so my clients have access to edit them easily, and that is my goal to make your website as easy to manage as possible so you can focus on your business.

Here's how it looks

When you stack these two images on top of each other, it’ll create a section that has waves on the top and bottom. You can use this to highlight important sections of your website. You can also do split backgrounds, add in background graphics that align with your brand, or add fun patterns that will make your brand stand out. Check out my personal site for some examples or visit this client site in progress.

3. Create Custom Image Styles

Another way I like to create visual interest is through imagery. I personally like creating collages that align with a client’s brand in Canva so they can easily access and edit them for later use. Here are some other options for image styles built into Squarespace using a Squarespace template I’m designing.

Collage:

Brand and Web Design For Female Entrepreneurs In Service Based Businesses

Inline:

Brand and Web Design For Female Entrepreneurs In Service Based Businesses

Card:

Brand and Web Design For Female Entrepreneurs In Service Based Businesses

Poster:

Brand and Web Design For Female Entrepreneurs In Service Based Businesses

Overlap:

Brand and Web Design For Female Entrepreneurs In Service Based Businesses

Stacked:

Brand and Web Design For Female Entrepreneurs In Service Based Businesses

4. Add a background color to your headlines!

You may have noticed in some of the above photos that I have this bright green background/underline behind some of my headlines. I do this with some CSS to style any headlines I put in bold. Just copy and paste this code, change the hex code to one in your brand palette, and put your headline in bold to see your work.

// underline headlines
h1 strong, h2 strong, h3 strong, h4 strong {
text-transform:none;
font-weight:inherit;
background: linear-gradient(180deg,rgba(251,167,248,0) 50%, #dfde81 50%);} /* change #dfde81 to a hex code of one of your choice */

5. Add a marquee to highlight an important part of your site.

This is a really fun way to change up a basic Squarespace with a little bit of code. 

  • Add a code block to your Squarespace site where you want the marquee displayed.
  • Copy + paste this code into that code block. Edit “Snag a FREE Website Planner” to whatever you’d like displayed here.
 

//add to your code block
<div class=’marquee’>

<div class=’track’> <h3>

Snag a FREE Website Planner *Snag a FREE Website Planner * Snag a FREE Website Planner * Snag a FREE Website Planner * Snag a FREE Website Planner * </h3>

</div>

</div>

  •  Lastly, go into design>custom css, and add in this code:

 

//add to custom css

.marquee {

position: relative;

display: flex;

animation: moveLeft 14s linear infinite !important;

}

.track {

font-size: 36px;

white-space: nowrap;

min-width: 100%;

text-align: center;

padding-top: .5vh;

line-height: .9em;

color: #191c19;
}

.track a{

color: inherit;

text-decoration: none;

animation: text 10s infinite linear;

position:relative;

}

//to change directions change all left to right

@keyframes text{

0%{

left: 0%;

}

25%{

left:-10%;

}

50%{

left:-20%;

}

75%{

left:-30%;

}

100%{

left:-40%;

}

}

@media screen and (max-width: 600px) {
.track {
font-size: 20px !important;
}
}

The End

That’s it for my top 5 customization tips for Squarespace. I made a more thorough Squarespace CSS cheat sheet that details which CSS classes to target in Squarespace. It’s basically a really long list of CSS classes and IDs. I reference it often when I’m doing web design work and hope that it can be helpful for you too. You can download it below.
 
Otherwise, I hope this quick guide helps you in your Squarespace adventures. Thanks for coming to my Ted talk. Until next time!
 
XOXO,
-Tina

Get my free squarespace css cheat sheet

Looking for a quick and easy way to up your Squarespace CSS game? Look no further! Our free CSS cheat sheet has got you covered. With this handy reference, you’ll have access to essential CSS properties and values at your fingertips. 

One Response

Leave a Reply

Your email address will not be published. Required fields are marked *

WEBSITE WIZARDRY:
GET YOUR FREE MAGICAL WORKBOOK

FOR WEBSITE CLARITY IN 30 MINUTES!

This workbook is perfect for anyone who wants to gain clarity on their website goals AND make informed decisions during the website design process. Whether you’re a seasoned website wizard or just starting to dip your toes in the waters of website design, this free workbook will guide you through the process with ease. And the best part? You can achieve this magical clarity in just 30 minutes!

Hey Friend!

I'm Tina

I love creating digital products that create value and save time. After working in the health and beauty industry for over 10 years and realizing my career and personal growth was at a standstill, I decided to pursue my passion in Web Development and Design.

I traded in those early mornings, late nights, and sometimes hours spent in rush hour traffic for work/life balance, endless opportunities for growth, and more time spent at home watching my family grow. That’s exactly why I’m here creating to help you pursue your passions and achieve time freedom with the services and products I offer.

I hope that you found your way here because you value expert insight, love creative thinking, strategic design, and want results.

Ready to level up your business? Let’s connect and explore if we’re the perfect match to achieve your goals.

branding and web design for female entrepreneurs
tb wordpress and squarespace web design for female entrepreneurs near me (4) (1)