10 Amazing Squarespace Tutorials That Will Transform Your Website
Squarespace is a great website platform but it’s not quite as flexible as other platforms like Wordpress or Webflow out of the box.
Don’t let that put you off Squarespace though. Just because you use Squarespace doesn’t mean you have to settle for less customization.
These Squarespace tutorials and mini-courses use CSS (and sometimes Javascript) to add mad functionality and style to your website.
Disclosure: This post contains affiliate links. When you click on an affiliate link and make a purchase, I receive a small commission (at no additional cost to you). Affiliate links are marked with an asterisk (*).
How to Create a Flexible Mega Menu and Pop-Out Nav*
This amazing mini-course shows you how to create rich menus that will wow your website visitors. You can add any Squarespace block to your menu, so it’s ultra-flexible. At $167, the price tag is hefty but the results are so worth it.
You can see demos of two styles of menus you can create with this tutorial here and here. This tutorial works with 7.0 Brine family templates and all 7.1 templates.
Splitting text into columns is one of the easiest ways to break up large blocks of text and use the whole width of the page without affecting readability.
You can do this by adding two text blocks side-by-side but this will result in two issues.
You’ll have to eyeball the text to make sure each side looks right and manually copy/paste to correct if it looks unbalanced. This makes editing a pain.
There will be a gap between the first and second block on mobile. You can correct this using negative margins but this tutorial provides a better solution—using CSS to create one unified multi-column block.
This Squarespace tutorial works on both 7.0 and 7.1.
How to Switch the Order of Blocks on Mobile*
If you’ve used the ever-popular two column image/text, text/image layout on your website, you know that on mobile, the blocks stack left to right. That means you’ll have two blocks of text or two image blocks sitting on top of each other. Not cool.
This tutorial shows how you can control the stacking order of blocks on mobile. It costs $25 and it’s worth every penny. It works with both 7.0 and 7.1 templates.
This tutorial shows you how to animate text on your website when it loads. Text animation is a great way to add movement to your website.
This Squarespace tutorial works with 7.0 templates that have index pages.
This mini-course from Meg Summerfield shows you five different ways to add a full-width split text/image layout to your website. I personally prefer option D, which you can see in action on this page of my website.
This Squarespace tutorial costs $65 and works with 7.0 Brine family templates.
How to Setup Multi-Language Content on Any Squarespace Template
The method that Squarespace recommends for setting up a multi-language site is clunky to say the least. No one wants to have a cover page with language options as their homepage!
Brad Good has an amazing tutorial that shows you how to setup multi-language content in a way that’s non-intrusive and looks great. Plus, this tutorial was recently updated, so it supports 7.0 and 7.1 templates!
How to Remove the Header and Footer from One Page
Want to create a custom landing or Instagram links page? This tutorial shows you how to remove the header and footer on one page of your website so you can do that.
This tutorial works with 7.0 Brine and Bedford family templates.
How to Add an Accordion Dropdown to Your Website*
You can buy an accordion dropdown Squarespace plugin but it’s more expensive than this mini-course, which is only $25. It works with 7.0 and 7.1 templates and you can add any block to an accordion dropdown section!
How to Add Additional Headings Without Using Code Blocks
Frustrated by the lack of headers in Squarespace 7.0? I hear you. This tutorial shows you how to add extra header styles without having to insert a code block whenever you want to use them. It’s a huge time-saver and will give you a lot of flexibility.
This Squarespace tutorial works with 7.0 and 7.1.
How to Customize Your Mobile Navigation Menu*
This free mini-course teaches you how to customize your mobile navigation menu. Center your nav links, add a background image, and learn how to use CSS to achieve any look you want.
This tutorial works with Squarespace 7.0 Brine family templates.
Which Squarespace tutorial is your favorite? Let me know in the comments below!
Like this post? Pin it on Pinterest!
