The Codebase

Browse all Resources!

Look up that Squarespace tutorial, plugin, snippet or course that’s gonna help you customize your current personal or client project.

Mobile design, All CSS tricks, Customization tips, 7.0, Spacing Beatriz Caraballo Mobile design, All CSS tricks, Customization tips, 7.0, Spacing Beatriz Caraballo

Make your hero banner and text look good on any device (Brine 7.0)

You’re using a gorgeous background image for your banner, and you have the perfect catchy headline to go on top of it. You start by using spacers, trying to find the perfect placement for your lovely headline on top of the image, in a way that looks 100% readable…

Read More

Custom testimonial carousel arrows with Summary Block (7.0, 7.1 CE & 7.1 FE)

So you’re using a Summary Block in your Squarespace site as a testimonial carousel, but you want a way to make it look less like… you’re using the Summary Block in Squarespace as a testimonial carousel, lol.

Read More
#22daysofcustomization, All CSS tricks, 7.0, Background Beatriz Caraballo #22daysofcustomization, All CSS tricks, 7.0, Background Beatriz Caraballo

Creating half, angled and floating effect backgrounds in Brine (7.0)

If you’re using one of Brine templates, or pretty much any other template in Squarespace, you’re most likely wanting to make the best out of their banner sections. These can be used in many creative ways to add an extra touch of “huh… I wonder how they did that?“

Read More

Turning the Gallery Block title into a colorful label (7.0, 7.1 CE & 7.1 FE)

If you’re using a Gallery Block as category thumbnails for your blog, to redirect to your different service packages, or anything else that works best with an identifying label, you’re gonna love today’s customization! We’ll be turning the Gallery Block slide titles…

Read More

Creating a simple overlay for your Summary Blocks (7.0, 7.1 CE & 7.1 FE)

Want to see and learn how to do a reaaaaaally cool Squarespace customization? Then you’re in the right place my friend because today we’ll be going through how you can create or add a nice overlay to your summary block thumbnails!

Read More

Creating a boxed-in footer in Squarespace (Brine 7.0)

Let’s face it, the footer is the part of our Squarespace design we think about last when it comes to adding customizations. However, that doesn’t mean we can’t show it some love and have it help our site look more custom by giving it a non-default style!

Read More

“Podcastifying” Squarespace’s Summary Block (7.0, 7.1 CE & 7.1 FE)

Podcasts are pretty much THE THING right now. So, if you or your client has a podcast that wants to promote on their site, what better way to do that than customizing one of Squarespace’s block to neatly display them?

Read More
#22daysofcustomization, All CSS tricks, Social icons, 7.0 Beatriz Caraballo #22daysofcustomization, All CSS tricks, Social icons, 7.0 Beatriz Caraballo

Add custom social icons to your Squarespace header (Brine 7.0)

If you’re doing a custom design, you may be wanting to go all in with things like colors, fonts, patterns and icons. So, if you want to include those gorgeous social media icons you – or your graphic designer –created, keep reading my friend because we’ll be…

Read More

Creating vertical text in Squarespace (7.0, 7.1 CE & 7.1 FE)

Oh I know you wanna jump in the vertical text wagon. In fact, you probably already did! Right now you may be using images to contain your vertical text because let’s face it… it’s way easier than figuring out how to it with code.

Read More
All CSS tricks, Fonts, Highlight, 7.0, 7.1, 7.1 CE, 7.1 FE, Title/Caption Beatriz Caraballo All CSS tricks, Fonts, Highlight, 7.0, 7.1, 7.1 CE, 7.1 FE, Title/Caption Beatriz Caraballo

How to create a low highlight behind your text (7.0, 7.1 CE & 7.1 FE)

Wondering how to create that cool low highlight that you see behind headings and links all around the interwebs? Then keep reading 'cause I'm gonna show you how to nail it! We're going to be adding the highlight background to one word in a heading…

Read More

How to remove automatic hyphens in Squarespace (7.0 & 7.1)

When I talked about changing the size of mobile fonts in Squarespace at the very end of the post I gave you a quick tip on how to turn off automatic hyphenation. However, I wanted to do a separate post about it since there are some things you should…

Read More

How to remove header and footer from one page (7.0 & 7.1)

So, you want to create a custom landing page in Squarespace for an opt-in, product, tripwire or even for Instagram and you want to eliminate all distractions from the page so all your visitors have no escape, right? (insert evil laugh here). In that case you…

Read More

Find your unique page ID in squarespace (7.0 & 7.1)

Want to add some CSS to just one page on your site, that's NOT an index section? Don't want to add the code to your page's settings? Then you're going to want to find your page's unique ID to make all the changes you like on just one page of your Squarespace…

Read More

Change the size of mobile fonts in Squarespace (7.0, 7.1 CE & 7.1 FE)

Not feeling happy with how Squarespace is resizing your fonts in mobile? Then let's do something about it shall we? In today's quick tutorial I'm going to show you how you can easily change the size of your fonts in mobile view. Let's go!

Read More
All CSS tricks, Fonts, Cool look, 7.0, 7.1 CE, Title/Caption Beatriz Caraballo All CSS tricks, Fonts, Cool look, 7.0, 7.1 CE, Title/Caption Beatriz Caraballo

How to overlap headings in Squarespace (7.0 & 7.1 CE)

I'm a big fan of overlapping text on purpose to create cool-looking headers, I feel this gives a more interesting look to a rather "standard" section of your website without overthinking it. So, if you love mixing fonts and want to add a unique touch to…

Read More