Squarespace 201


Do you want to take your Squarespace skills and website to the next level?

Squarespace 201・Take your Squarespace Skills and Website Up a Level・Kerstin Martin Squarespace Studio

This is an advanced course for designers and DIY business owners.

Get the code and design tips that I have used throughout the years to close the gaps caused by Squarespace template and platform limitations.

I’ve been a Squarespace fan for 10+ years and since becoming a professional designer in 2014 I’ve built more than 80 websites for entrepreneurs and small businesses. Everything I share in this course is based on real-life examples. I am also officially endorsed by Squarespace as an Authorized Trainer.


What to expect


201 is not about teaching the theory of CSS, HTML or Javascript, it’s about making good design happen.

While I have learned a lot about CSS and HTML over the last couple of decades I would never claim to be a developer or coder. I am a designer and a very thorough and happy tinkerer. I find most of my coding solutions by googling them and occasionally with the help of kind developers who are sharing their knowledge.

After all these years I still get excited when I find a coding solution and see it work. And that’s what 201 is also about: growing your coding confidence while cultivating your curiosity and having some fun!


What’s included?

 → 75+ CSS, HTML and Javascript Snippets 
  → Understanding the Basic of CSS and a few Tricks!
  → Lots of Advanced Design Tips 
  → FREE Access to SEO Plus 
  → FREE Private Facebook Support Group 



The course is structured by website and page sections so that it’s easier for you to find code snippets. Linked (turquoise) lessons are completed, the rest I am working on as we speak.


1.1 Welcome and how to use this course
1.2 Course overview


2.1 What is good design?
2.2 General advanced design tips


3.1 CSS Syntax
3.2 Nested and bundled selectors
3.3 How to write CSS
3.4 Using Comments
3.5 Using the !important rule
3.6 Mind your quotation marks
3.7 A little trick to identify the correct target
3.8 How to find selectors in Squarespace
3.9 Know your target
3.10 Finding block IDs
3.11 Where to add CSS in Squarespace
3.12 Organize your code snippets
3.13 Resources


4.1 Header, Banner & Navigation

4.1.1 Style site title
4.1.2 Banner Image Inset
4.1.3 Border under header
4.1.4 Hide logo on homepage
4.1.5 Style navbar folder (Bedford)
4.1.6 Fixed header and navigation (Brine)
4.1.7 Hide Sign In link in nav bar (Bedford)

4.2 Footer

4.2.1 Full-width Instagram block in footer
4.2.2 Auto-update copyright year
4.2.3 Add background image or gradient color
4.2.4 Change font styling in footer (Bedford)
4.2.5 Add a border with a negative margin logo

4.3 Content Blocks

Block Styling

4.3.1 Add background and other styling options
4.3.2 Add background images or color


4.3.3 Make buttons the same size
4.3.4 Apply a border to a button
4.3.5 Customize payment buttons
4.3.6 Convert form lightbox button to text link
4.3.7 Gradient buttons


4.3.8 Border around summary block thumbnails
4.3.9 Custom borders
4.3.10 Circle images, with or without shadow border
4.3.11 Images with rounded corners
4.3.12 Different image on rollover


4.3.13 Horizontal form buttons and checkboxes
4.3.14 Add file upload button to a form
4.3.15 Redirect to new page after form submit

MODULE 4 - Continued


4.3.16 Quote block styling
4.3.17 Special list styling effects
4.3.18 Replace horizontal line with icon
4.3.19 Adjust block spacing with CSS
4.3.20 The Power of the Negative Margin

4.4 Page Elements

4.4.1 Hide header and footer on one page only
4.4.2 Index section background color
4.4.3 Website background image (Bedford)
4.4.4 Increase width of blog sidebar (Bedford)
4.4.5 Add back-to-top button to index page
4.4.6 Fixed folder sidebar (Bedford)
4.4.7 Use spacers to narrow page content blocks
4.4.8 Use anchors to organize & navigate content

4.5 Text Styling

4.5.1 Add custom font
4.5.2 Special headings (h4, h5, h6)
4.5.3 Turn off the annoying auto-hyphenation!
4.5.4 Change content of fixed text elements
4.5.5 Remove link underline (Brine)
4.5.6 Style individual words within a paragraph

4.6 Mobile Tweaks

4.6.1 About the @media rule
4.6.2 Change hamburger/mobile menu icon to text 
4.6.3 Align gallery images on mobile
4.6.4 Different banner image on mobile
4.6.5 Center left/right aligned buttons on mobile
4.6.6 Center footer text blocks on mobile
4.6.7 Hide blog sidebar on mobile (Bedford)

4.7 Custom Classes

4.7.1 Custom Icons using Graphic Files
4.7.2 Make a Custom Icon Clickable
4.7.3 Create a Vertical Line using CSS Only
4.7.4 Create a Down Arrow using CSS Only

4.8 Blogging

4.8.1 Nicer share buttons for older templates
4.8.2 Sidebar plugin for templates without sidebar
4.8.3 Remove meta data (date, author, category, etc)
4.8.4 Increase sidebar (Bedford)
4.8.5 Add a blog post footer
4.8.6 Add blog subscription option


5.1 Acuity
5.2 Moonclerk
5.3 Noughts & Ones Plugins
5.4 Ghost Plugins


6.1 Online resources & links
6.2 Get professional coding and development help


Payment Options

Due to illness I wasn't able to complete all the lessons before the launch. Get started with what I have and enjoy a 30% discount while I finish the course!

Only $277.90 Until Further Notice

The regular price is $397 and the discount is automatically applied at check-out. REFUND POLICY: Due to the nature of digital products I am unable to offer refunds.

Add To Cart

Save money with Bundles

Squarespace Genie

The perfect bundle for those who enjoy designing their own website and want to learn the ins and outs from a pro.

Includes: Squarespace 101, 201 and SEO Plus

(save $144)

Add To Cart
Designer Pro

Perfect for Squarespace designers who want to improve and level up their design and business skills.

Includes: Squarespace 201, BizBox and SEO Plus

(save $341)

Add To Cart
Professional Plus

Learn to be a pro from a pro! This is the perfect all-in-one package for new designers who want to get a head-start.

Includes: Squarespace 101, 201, BizBox & SEO Plus

(save $438)

Add To Cart