The Codebase

Filter through all the code

Find the Squarespace tutorial, plugin or snippet that’s going to help you fix or customize your client’s site in a heartbeat.

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

Stacked masonry slides on mobile (7.1) - Gallery Section Grid Masonry

Loving the look of your 7.1 Masonry Gallery Section on desktop, but wish you could stack the slides on mobile? Well, it’s your lucky day! This snippet will help you tweak that aspect of your galleries in one quick copy/paste action. You’ll have the ability to decide at which breakpoint the stacking happens, and adjust the space between slides as well. Everything else will be taken care of automatically.

Read More
All CSS tricks, 7.1, Pagination Beatriz Caraballo All CSS tricks, 7.1, Pagination Beatriz Caraballo

Related videos aspect ratio and title adjustments - Video page (7.1)

Not a fan of the native aspect ratio for Related Videos thumbnails in Squarespace 7.1? Kinda wish you could quickly adjust the titles under them too? Well, guess what? You’ll be able to have full control over both parts of that element with this one code snippet! Modify the font family, size, weight, alignment, color, etc of those related titles in a single swoop, and give the thumbnails whichever aspect ratio you prefer with a simple value change!

Read More
All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo

Ripple icon card style - Auto Layout Carousel (7.1)

Give your project’s Auto Layout Carousel cards a subtle but dynamic hover effect with this snippet! In under 5 minutes, you’ll achieve a cool ripple effect behind the icons when hovering over the corresponding expanded button. Through the code, you’ll get to control the border styles, rounded corners, icon background and ripple color, icon size, title styles and button styles with ease, while still having the ability to use the section’s native options to adjust the spacing and font sizes to match your design.

Read More
All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo

Ripple icon card style - Auto Layout simple list (7.1)

Give your project’s Auto Layout Simple List cards a subtle but dynamic hover effect with this snippet! In under 5 minutes, you’ll achieve a cool ripple effect behind the icons when hovering over the corresponding expanded button. Through the code, you’ll get to control the border styles, rounded corners, icon background and ripple color, icon size, title styles and button styles with ease, while still having the ability to use the section’s native options to adjust the spacing and font sizes to match your design.

Read More
All CSS tricks, 7.1, Hover/overlay Beatriz Caraballo All CSS tricks, 7.1, Hover/overlay Beatriz Caraballo

Staggered blog post highlight - Blog page (7.1)

Spruce up your client project’s blog pages with this quick layout restructuring and styling snippet. It will automatically expand certain slides on your 3 or 4-column grid to make them more prominent, as well as give all the cards a clean yet versatile look that you can adjust to match your design. You’ll be able to tweak the colors of the cards, and the bubble-looking categories on the left-top corner of the thumbnails.

Read More
All CSS tricks, 7.1, Animation Beatriz Caraballo All CSS tricks, 7.1, Animation Beatriz Caraballo

Header display on scroll under first section - Header nav (7.1)

Sometimes you want to create a big impact on a client website by setting up somewhat of a splash screen at the top of the Homepage, without actually creating a cover page. This snippet will allow you to build that effect by hiding the navigation when the page loads, and displaying it under the first section only after the user has scrolled by that first banner. All you need is the copy/paste snippets in the corresponding areas and you’re good to go!

Read More
All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo

Dot-style cards - Auto Layout simple list (7.1)

Looking for a cool dynamic effect to add to your Auto Layout Simple List cards? Look no further! With this copy/paste plugin you’ll be able to add a clean static style and eye-catching hover mode in a single swoop. Plus, through the snippet settings you’ll get to control the color of the “dots”, set up two titles with their own styles, and manage how visible the image becomes on hover, to fully match the look of your section to the rest of your project.

Read More
All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo

Dot-style cards - Auto Layout carousel (7.1)

Looking for a cool dynamic effect to add to your Auto Layout Carousel cards? Look no further! With this copy/paste plugin you’ll be able to add a clean static style and eye-catching hover mode in a single swoop. Plus, through the snippet settings you’ll get to control the color of the “dots”, set up two titles with their own styles, and manage how visible the image becomes on hover, to fully match the look of your section to the rest of your project.

Read More
All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Customization tips Beatriz Caraballo All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Customization tips Beatriz Caraballo

Product item button - Summary block (7.0, 7.1CE & 7.1FE)

If you’re working with a Summary Block linked to a product/shop page and you’re wanting to display something like the native “Read More” button to lead to the item’s details, this is the snippet for you! You’ll have the ability to choose the text that gets displayed, the color of the button and the style of its font, to make sure everything matches the rest of your site.

Read More
All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo

Expansive cards on hover - Auto Layout Simple List (7.1)

Add a little something something to your project’s Auto Layout Simple List with this cool hover mode expansive effect. You’ll be able to set a custom icon for all the cards to mark them with your site’s brand, continue to modify the settings of the text through the native options, control the thumbnails saturation/opacity levels on both the initial and hover mode, and automatically get a sleek and responsive look on tablets and mobile, regardless of how many cards you set up on desktop!

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 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