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.

All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Cool look Beatriz Caraballo All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Cool look Beatriz Caraballo

Minimal poster style (7.0, 7.1 CE & 7.1 FE) - Summary Block

Looking to create an Auto Layout-y style for your Grid Summary Blocks in Squarespace? Then get your hands on this poster-inspired code snippet to achieve a clean and minimal look for those blocks on your site. You’ll be able to tweak the title of the summary items to match your brand, adjust the background color of the slides and make the hover mode shadow and shift as subtle or bold as you like!

Read More
All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Cool look Beatriz Caraballo All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Cool look Beatriz Caraballo

Minimal rounded fields style (7.0, 7.1 CE & 7.1 FE) - Newsletter Block

Get a sleek one-line look for your Newsletter Block, with rounded fields, with this code snippet! You’ll be able to copy/paste your way into this minimal look in just a few minutes, and tweak the spacing, roundness and shadow of the fields with a couple of clicks.

Read More
All CSS tricks, 7.1, Mobile design Beatriz Caraballo All CSS tricks, 7.1, Mobile design Beatriz Caraballo

Mobile nav on demand - Header nav (7.1)

Wishing you could bring up the burger button and mobile menu on tablets in your 7.1 site? Wish no more with this handy little snippet! Copy/paste this code into your Squarespace site and you’ll be able to have the mobile nav instantly show up at the breakpoint of your choice, to either avoid frustrating issues with excess nav links on tablet-ish devices or simply create a minimal look on desktop!

Read More
All CSS tricks, 7.1, Cool look Beatriz Caraballo All CSS tricks, 7.1, Cool look Beatriz Caraballo

Side-by-side thumbnail and content - Auto Layout Simple List (7.1)

If you’re looking for a quick way to display your Auto Layout Simple List items in a horizontal fashion, this is the snippet for you! You’ll get to decide whether the image sits to the right or left side of the text, choose the thumbnail size, adjust the spacing between elements, and even pick at which mobile breakpoint you’d like the slides to go back to their vertical look.

Read More

Bordered items with hover overlay for Related Products - Shop pages (7.1)

Create a stylish line-look for the related items in your 7.1 Shop Pages with this short code. You’ll have the ability to style the border, overlay color and icon, and even set up a floating title label however you want to make it as prominent or subtle as you wish!

Read More

Bordered items with hover overlay - Auto Layout Carousel (7.1)

Give your Auto Layout Carousels a super custom look with this code snippet! It’ll instantly add a border to your list items, create an overlay on hover with the icon of your choice, and you’ll even be able to set up a floating label with whichever text you want to highlight on each slide!

Read More
All CSS tricks, 7.1, Center-align, Customization tips Beatriz Caraballo All CSS tricks, 7.1, Center-align, Customization tips Beatriz Caraballo

How to center-align the last two items of a Portfolio page in Squarespace (7.1)

For this week’s CSS trick, we’ll be using the same grid-altering method from a previous tutorial but with a small modification to the way we target those last two slides so that, if you or your client have a ton of items, you don’t have to count them all.

Read More