Free Squarespace Course:

WEB DESIGN WITH The New Squarespace Fluid Engine

In July 2022, the new Fluid Engine was released by Squarespace, and proved to be a game-changer for users. Imagine your website being responsive, no matter how big or small your screen is. Imagine not needing to think about what device your visitor is on but just uploading the content you want them to see. With the new Fluid Engine, this is all possible. Gone are spacer blocks and the rigid (scaffolding) approach to web design found in previous iterations of Squarespace 7.1.

This free Squarespace course will give you an in-depth look at how the new Fluid Engine works and how you can get up to speed with creating professional websites using the popular website builder.

Learn everything from old vs new templates to examples of sites using modern web design techniques now so you can apply their strategy to your Squarespace Fluid Engine website.


WHAT IS THE SQUARESPACE FLUID ENGINE? - CHECK OUT OUR FLUID ENGINE FAQ POST HERE…


 

Introduction: The Squarespace Fluid Engine - What it is and Why you need it


In response to some considerable steps forward by Wix and Editor X, Squarespace has introduced its own new flexible design tool, the Fluid Engine.

It is July 2022, and Squarespace have launched a considerable, potentially game-changing update in the form of their new fluid engine, but it might not all be good news.
Today, more than ever before, creative professionals are looking for ways to make the website-building process faster and more enjoyable. With so many different tools available β€” each with its own learning curve β€” most designers and developers find themselves spending more time on setup and maintenance than they would like, and the results can vary wildly. In response to some considerable steps forward by Wix and Editor X, Squarespace has introduced its own new flexible design tool, the Fluid Engine.

The fluid engine is a brand new way of building websites with Squarespace that streamlines the production process while making it even more fun (depending on your particular viewpoint on what 'fun' is!). Squarespace claims that by building the fluid engine from the ground up with a focus on performance and user experience, Fluid Engine is their latest innovation designed to empower creators at every level. We shall see.

 

Learn Squarespace Fluid Engine - Part 1:
Squarespace Fluid Engine: Why is this new? Free Squarespace Course


My job today is to show you how this new Squarespace Fluid Engine is different to the original (classic) editor in Squarespace 7.1

Elwyn introduces us to the Squarespace fluid engine, a humongous website builder update.

PART ONE: WHAT IS THE SQUARESPACE FLUID ENGINE?

Let's kick off this course by taking a look at this considerable Squarespace upgrade in the form of the new Squarespace Fluid Engine. If you head over to Squarespace blog: newsroom.squarespace.com, you can see that they've created an advertisement for the future that will just show you a glimpse of what it can do.

My job today is to show you how this new system is different to the original (classic) editor in Squarespace 7.1, where you might find it more frustrating, and alternatively, where you might find that it really unlocks your creativity. It is certainly a lot more 'fluid'. There's a lot more freedom in how we can set up the website, but as I will go on to explain, it is also a double-edged sword.

 

Learn Squarespace Fluid Engine - Part 2:
Squarespace Summary Blocks in the Fluid Engine - Free Squarespace Course


We are going to have a look at how the Squarespace fluid engine has changed how we approach using summary blocks.

FREE SQUARESPACE COURSE - PART 2 OF 4

This time up, we're going to have a look at how this new Squarespace fluid engine has changed how we approach using summary blocks on the Squarespace website builder.

And if you've seen our Pixelhaze Academy videos before, you'll know that's one of my favourite features!

 

Learn Squarespace Fluid Engine - Part 3:
A new, 'fluid' approach to Squarespace web design! Free Squarespace Course


In response to some considerable steps forward by Wix and Editor X, Squarespace has introduced its own new flexible design tool, the Fluid Engine.

Welcome back to chapter 3 of 4 in our FREE Squarespace Fluid Engine course.

In the last chapter, I promised that we would have a look at overlapping images and some more advanced style effects using the new Squarespace Fluid Engine.

That's what we are going to be doing this time. After this, we will probably have one more chapter to complete our Squarespace mini-course.

And that will be the process of wireframing and building a page from start to finish with our newfound tools and systems with the Squarespace Fluid Editor.

 

Learn Squarespace Fluid Engine - Part 4:
Squarespace fluid engine design challenge! Free Squarespace Course


Let’s test our skills with the Squarespace fluid engine with this quick challenge…

Welcome back!

To wrap up this free Squarespace Fluid Engine Mini Course, we are going to set ourselves a little design challenge, and hopefully have a little bit of fun along the way.

Our mission is to create a one-page website, hopefully in under 12 minutes. Feel free to have a go at the challenge and post your results on our YouTube comments section!

Please note: As 12 minutes was a ridiculous timeframe (even for a Squarespace veteran like myself), give yourself a more reasonable 30 minutes for this challenge.

Good Luck... :)

Squarespace Box of Tricks

 

 

Our box of tricks series is less formal than some of our other series with a focus on design tips, development techniques and essential shortcuts.

It has taken Squarespace Authorised Trainer, Elwyn Davies, decades to collate and refine some of these concepts. Still, you can now cut a few corners without any reduction in the quality of your final Squarespace website.

We shall go way beyond the Starting templates, exploring bespoke aspects like custom code, professional design practice and third-party plug-ins from some of the very best Squarespace developers around the globe. All of these videos are one-take sessions, intending to mirror the informality and flexibility of our PixelHaze one-to-one workshops.

We will also be building this box of tricks course into a massive library over several months to eventually include all aspects of Squarespace, which of course Includes the new 7.1 interface. I will also be giving you an insight into some of the third-party software and design tips that I have picked up over my many years of running a web design agency. If the library is still relatively small when you first enrol, please check back regularly as we will be adding at least 4-5 lectures per month.

Come and join us. It should be fun! let’s crack on... :)

 
 

THIS IS A VIP COURSE!

All VIP CONTENT IS FREE FOR PIXELHAZE ACADEMY MEMBERS.

Learn Squarespace web design, Canva, Adobe Creative Cloud and loads more by joining the Academy.

 

About Squarespace Online Training Courses by PixelHaze Academy:

Learn All You Need to Know about the website builder.

Squarespace is a leading provider of all-in-one website solutions. It's the easiest way to build a professional website, blog or online store without any technical skills or coding required. With the right training, using Squarespace can be as easy as dragging and dropping content onto your live website in just a few minutes.

Here at PixelHaze Academy, we pride ourselves on delivering high-quality training courses to help educate our students on how to squeeze every drop from off the shelf software like Squarespace, Canva and Adobe Creative Cloud. We have got courses for both beginners and experts alike that will provide you with the skills you need to be successful with Squarespace.


What is Squarespace?

Squarespace is a leading provider of all-in-one website solutions that allow businesses to build professional websites without any technical skills or coding required. With the intuitive design studio and drag and drop interface, Squarespace makes it easy for anyone to create beautiful websites with ease.

The company boasts an impressive customer base of over 400,000 customers worldwide and has won numerous awards, including being named among the "Best Places to Work" in 2017 by Glassdoor.

Squarespace’s services include blog hosting, e-commerce, online store hosting all wrapped up in leading-edge web design software.

Why use Squarespace or other website builders?

Creating a website, blog or online store can seem like an overwhelming task. But if you're looking for a quick, easy and reliable way to do so, you've come to the right place.

There are many reasons why Squarespace is a great option for your business. For starters, it's incredibly user-friendly, with no technical skills or coding required. And because Squarespace offers free trials, there’s no commitment to use their services until you’ve had a chance to try it out. You will not need to enter your card details to set up a demo website on Squarespace.

Creating a Website in Squarespace

You can access the site builder by going to Squarespace.com and clicking on the "Start Your Site" button.

As soon as you enter the site builder, you'll see a simple design template that gives you a good idea of what your website will look like before you add any content. To start, though, it's probably best if you just drag and drop some basic content into the layout.

So, choose an appropriate template and begin building your site. To help get you started, we've included some sample content that illustrates how to use Squarespace's easy-to-use interface. Once you're finished creating your website in this way, make sure to save your work so you don't lose any progress!

The benefits of Squarespace Training Courses with PixelHaze

  • The training courses provide tutorials and step by step guides on how to develop Squarespace websites for your small business, charity or even a portfolio.

  • You'll learn about the most popular features of the platform, like blogging, e-commerce, and social media.

  • You'll also learn how to optimize your site for search engines and maximize conversions from visitors coming from organic search.

  • We go beyond the 'how' to also ask the question 'why'. For example, with our box of tricks series, you will learn how to wireframe, scaffold and design professional website pages. You will also learn why we use certain techniques and why great design resonates with your audience.

Learn Squarespace web design, Canva, Adobe Creative Cloud and loads more by joining the Academy.

 

Planning for a web design project

 

 

This web design planning course is crucial to ensure your project sets off on the right footing.Here we will be providing you with the full toolkit for planning your own website using tried and tested techniques.

This course is suitable for web designers, graphic designers, small business owners and marketing professionals who are required to tender and project manage a website re-design. We will be using Squarespace as our chosen platform, however, this approach will be suitable for any platform, including WordPress and Wix.

Watch the Masterclass Demo (2 minutes)

This video demo covers the first 2 minutes of the PixelHaze Masterclass. 1.1 covers the web design brief, looking at website KPI's, target audiences and demographics, key objectives and company background. The full PixelHaze Academy Masterclass course is free to members. Visit the membership pricing page for more information.

 

 
 

THIS IS A VIP COURSE!

All VIP CONTENT IS FREE FOR PIXELHAZE ACADEMY MEMBERS.

Learn Squarespace web design, Canva, Bablic, Adobe Creative Cloud and loads more by joining the Academy.

 

Squarespace Cheat Sheets & Guides


Insidethesquare.co CSS Cheat Sheet

I’m Becca Harpain, Squarespace designer & founder of InsideTheSquare.co

Being a web designer, you have probably spent countless hours tracking down CSS code fixes one by one, scouring YouTube and Pinterest and forums plus a crazy collection of notes saved somewhere. That is exactly what the last 5 years of my career as a web designer has been like. This year I decided to change that process, and put all my pro tips and tested codes into one PDF to reference for any and every Squarespace project I am hired to do. It saved me so much time that in a few short months I have doubled my client workload!

I realized that other designers needed this too. After being featured in the Squarespace Circle designers newsletter, my codes have now been used by hundreds of Squarespace designers around the world β™₯

Now you can get your own copy! Download the CSS Cheat Sheet and turn all those research hours into more time spent building the best website ever.

 

Save more time for actual design.

Download the Cheat Sheet & get all the info you need to build that gorgeous site for only $34.99

+ Brand new to CSS and worried about where to start?

You are in the right place! This PDF is packed with basic instructions and pro tips that you can follow whatever your design skill level happens to be right now.

+ Have a million sites you want to use these codes on?

Go for it! No special licence needed here. I believe knowledge is for sharing and you may use these codes on any and every Squarespace site you create.