As your design skills grow, Squarespace can feel limiting
Learn to break through those limitations and create complex layouts like this one!
Site created by student Michael Seidl
Being a Squarespace web designer can be a tricky thing...
You get so excited when someone reaches out for your services looking to switch from WordPress to Squarespace, but then your heart drops when they show you the complex designs they are looking to emulate.
You make it clear to the client upfront that the ease of updating content on the platform comes with trade offs, and that many aspects of the design will need to be altered to work on Squarespace.
The client is disappointed, but understanding, and so the project begins... on a compromise.
In my early days as a Squarespace designer, I lived this story, and it led me to consider switching platforms many times. But I was always drawn back by how easy it is to hand off sites to clients, and so I was motivated to figure out ways to make those complex designs that clients wanted in Squarespace.
I have good news!
You no longer have to think about switching platforms either. And yes, those complex designs can be achieved in Squarespace.
If you are a Squarespace web designer, this training will teach you how to create layouts for your clients that you didn't even know where possible in Squarespace, as well as tips and tricks to design faster. Ultimately providing you with the opportunity to further set yourself apart and charge more for your services.
What's in the Custom Layouts in Squarespace Course?
Custom Layouts in Squarespace is a step by step program where I teach you the knowledge and thinking behind how to achieve very custom, grid-style layouts in Squarespace, while also providing copy-and-paste templates so you you can start creating custom layouts on day 1. The course includes:
- 5 Video Modules covering how to create advanced split layout designs, custom headers, and full-width footer layouts - including bonus modules on solving common Squarespace design problems with flexbox.
- Comprehensive, clear design trainings and video instructions
- Copy and Paste CSS for implementing the custom layouts easily and immediately.
- Lifetime access to updates including exclusive tutorials on how to create popular layouts in Squarespace
What Exactly Will I Learn in This Course?
You will learn how to create beautiful grid style layouts like the ones in the images below.
You will learn how to create responsive split-layout designs.
You will learn how to create equal height boxed content designs.
You will learn how to create custom multi row headers, and fixed headers that animate on scroll.
You will learn how to create custom footer layouts including adding a pre-footer to the Brine template and creating full width Instagram feeds.
You will learn how to solve common Squarespace design problems like centering content next to an image.
And more!
"I’m super happy with Custom Layouts with Flexbox. It is easy to use and was the missing link for doing something outside the Box of Squarespace without using dev mode. I use this method for every new site I am working on."
- Michael Seidl, Studio Michael Seidl
michael-seidl.com
"Chris is one of the most brilliant and useful custom coders in the Squarespace universe. His flexbox training is the coolest thing you can do with Squarespace index pages out there."
- Mark Kuzmack, Marksmen Studio
marksmen.studio
”As a Squarespace designer and developer myself, I work with custom CSS every day but was recently stumped on what to do on a project for a client that I knew wanted something more high-end and unique looking. I always love learning new things and the videos Chris puts out are always a great resource to help me approach problems from a different angle. I learned some new techniques in the Custom Layouts with Flexbox training that I will most likely use in some variation on every project I work on in the future; not because I will create the same layouts but because the skills that are taught are so versatile that they will help you learn to create cleaner code all around.”
- Kristine Neil, Markon Brands
markonbrands.com
“I only just added Squarespace web design as a service in my business - and one of the reasons for doing so was finding training and tutorials like the ones Chris offers. His training made many of the things I was dreaming up for my client websites possible and as such I felt confident in finally launching this new service. He knows what he’s talking about, that’s for sure!”
- Rachel, Moka Brand Studio
mokabrandstudio.com
“I’ve already worked up one of my website pages with this flex box layout, and I’m super happy with it. Prior to formatting the layout this way, I had Image Cards extending full-width. That worked great for a portion of the page... but obviously they can't contain more complex information like contact forms or an Instagram block, which is when this flex box magic saved the page!”
- Nicole Piep
Course curriculum
-
1
Welcome/Thank You!
- Thank You! + How to Navigate the Course
-
2
Put Two Index Sections Next to Each Other (7.0)
- Introduction to Grid Style Layouts
- Implementing Flexbox on Squarespace
- Making the Layouts Repeatable
- Centering Content in Index Pages
- Creating a 50/50 Split Layout
- Creating an Even Thirds Layout
- Using Media Queries to Make the Layouts Mobile Responsive
- Making Flexbox Compatible on all Browsers
- Reordering Grid Layout Sections on Mobile
- Download the CSS
-
3
Put Two Page Sections Next to Each Other (7.1)
- Putting two page sections next to each other in 7.1
-
4
Image and Content Split Layout (7.0)
- Split Layout Part 1
- Part 2: Finalizing the Split Layout
-
5
Image and Content Split Layout (7.1)
- Split Layouts in 7.1
-
6
Boxed Content in Squarespace (Both)
- Boxed Content Design
- Live implementation of boxed content on client site (Brine 7.0)
-
7
Custom Headers (7.0)
- Create a Simple Fixed Header in Squarespace
- Shrink Your Fixed Header on Scroll
- Shrink Header Logo on Scroll
- Fixed Header with Announcement Bar
- Create a Multi Row Header in Squarespace
- Fixed Multi Row Header with Scroll Animation
-
8
Custom Footers (7.0)
- Adding a Pre-footer to the Brine Template
- Full Width Instagram block
-
9
Custom Footers (7.1)
- Full Width Instagram Block
-
10
Bonus Video! (Both)
- Centering Items with Flexbox
-
11
Leave a Review!
- Please leave an honest review, it would be much appreciated!
-
12
Get 20% off plugins in my shop!
- View the discount code inside this lesson
Additional Reviews
-
Ultimate but EASY secrets to AMAZING Squarespace Design
Carl Andrews
THIS!!! I have struggled off/on for the last several years - I've purchased plugin's to take apart and learn - THIS is the best money I've spent on any Squarespace training, add-on... I learned more in an EASY 30 minutes - this is such a game chan...
Read MoreTHIS!!! I have struggled off/on for the last several years - I've purchased plugin's to take apart and learn - THIS is the best money I've spent on any Squarespace training, add-on... I learned more in an EASY 30 minutes - this is such a game changer for me!
Read Less -
Great course and real value for money
Emma George
Chris is hands-down one of the best online teachers I've come across. The course is excellent - clear, concise and really useful. So many possibilities and variations. Can't recommend it highly enough.
Chris is hands-down one of the best online teachers I've come across. The course is excellent - clear, concise and really useful. So many possibilities and variations. Can't recommend it highly enough.
Read Less -
Great Toolbox
Michael Seidl
I´ve got the honour to get inside this technique since a while. It is a great way to customize the Brine templates in a way you want to. Chris is a very good teacher who give you insights, to understand the structure of Squarespace and the knowled...
Read MoreI´ve got the honour to get inside this technique since a while. It is a great way to customize the Brine templates in a way you want to. Chris is a very good teacher who give you insights, to understand the structure of Squarespace and the knowledge of what you are doing to get the best result.
Read Less