The Little Squarespace Handbook

THE LITTLE

SQUARESPACE HANDBOOK

20%

OFF! GET A 20% DISCOUNT ON YOUR FIRST ANNUAL/MONTHLY SQUARESPACE PLAN! 1. Create a free trial in Squarespace: https://squarespace.syuh.net/pixelhaze 2. When subscribing to your first plan, use our voucher code to get a 20% discount on your first month/year plan: PixelHaze20

Written by Elwyn Davies Designed and published by PixelHaze © PixelHaze 2023, All Rights Reserved.

PixelHaze is an independent company and is not associated in any way with Squarespace.

LET'S DEMYSTIFY TECHNOLOGY...

My journey to the launch of PixelHaze Academy has been a long and winding road. I began building websites at the age of 13, setting me up to co-found one of the UK's fastest-growth digital media agencies in 2004. Fast-forwarding nearly 20 years, the experience I have gained as a small business owner, designer, frontend developer, and project manager has made me a generalist with a wealth of knowledge in this niche.

I have been in the industry long enough to see both sides of the coin.

Leading a digital marketing project draws many parallels with launching your own business. You are instantly required to get up to speed and master an array of new skills, thrown into a new World with its often-frustrating jargon-heavy language. Through my work with over 3,000 businesses in various industry sectors, I have seen first-hand the struggles busy individuals face when adopting and learning new technology. This has led me to create a resource that can provide tailored guidance and support to help others succeed.

In the spring of 2019, I launched PixelHaze Academy, my lifelong dream of passing on my experience in the creative industries to the next wave of emerging designers and entrepreneurs. By offering training courses and a helping hand, PixelHaze Academy aims to help individuals create professional-looking websites and digital products to bridge the gap.

I guess this book has been 20 years in the making. Many of the tips and processes outlined in this handbook have been refined from past mistakes, and I'm excited to share them with you. Hopefully, you can avoid some of those bumps in the road, setting you on the path to a successful Squarespace project.

The insights and strategies shared in this handbook should prove helpful in your journey to creating a website that truly stands out.

So here's to your undoubted success!

Elwyn Davies BUILTH WELLS, MARCH 2023

1

GET INTO THE GROOVE...

As a long-time web designer and Squarespace Authorised Trainer, I understand the importance of maximising efficiency when building websites.

After creating nearly 400 professional designs on the website builder platform, the secret is pretty straightforward.

We find a groove through practice and repetition:

EAT. SLEEP.

SQSP.

REPEAT. MORE THAN HACKS AND SHORTCUTS...

While shortcuts can undoubtedly save time, they are only one piece of the puzzle. That's why I have taken a step further and included a range of our best tips to help you take your Squarespace and web design skills to the next level.

The key to mastering web design is understanding the fundamentals rather than just the software. Although I've trained myself and others on platforms like Wix, Editor X, WordPress, and Shopify, switching to Squarespace from these platforms should be a comfortable adjustment, similar to changing cars or switching between Android and iOS. The components may be in a different format but are essentially the same.

Time and time again, I have bailed-out clients who get carried away with shiny new features of website builders. Our team is then drafted to untangle and repurpose what has become a convoluted mess.

Let's get a grip on Squarespace.

2

SQUARESPACE vs WIX vs WORDPRESS FEATURE

SQUARESPACE

WIX

WORDPRESS

Ease of Use

Squarespace is userfriendly, and it's easy to create and manage a website using its drag-anddrop interface.

Wix is also user-friendly and offers a similar dragand-drop interface to manage websites.

Wordpress has a steeper learning curve, and may be challenging and time consuming for beginners.

Customisation

Squarespace provides several pre-designed templates and customisation options to change the appearance of your website.

Wix offers an extensive range of templates, and you can customise them with a variety of design tools to suit your website's look and feel.

Wordpress is highly customisable with several themes and plugins to choose from to modify the look and functionality of your website.

SEO

Squarespace is SEOfriendly, with built-in features to optimise your website's SEO, such as meta descriptions and page titles.

Wix also provides SEO tools to optimise your website, including meta descriptions, sitemaps, and title tags.

Wordpress is highly optimised for SEO, with several plugins available, such as Yoast and All in One SEO Pack.

E-commerce

Squarespace has built-in ecommerce functionality with a range of features, including product pages, checkout, and shipping options.

Wix also has built-in ecommerce functionality with several payment options and customisable product pages.

Wordpress requires an additional plugin, such as WooCommerce, to enable e-commerce functionality.

Blogging

Squarespace has a built-in blogging platform that allows you to create blog posts, add images and videos, and manage comments. It also offers features such as scheduling, categories, tags, and RSS feeds.

Wix has a blogging platform that enables you to create and publish blog posts. It provides features such as categories, tags, social media integration, and SEO tools.

WordPress started as a blogging platform with a range of features allowing you to create posts, pages, and categories. It also offers features such as tags, custom fields, and commenting system.

Pricing

Squarespace has four pricing plans ranging from $16 to $54 per month. It also offers a free 14-day trial. Each plan includes hosting, domain, SSL certificate, and 24/7 customer support.

Wix has five pricing plans ranging from $14 to $49 per month. It also offers a free plan with limited features and Wix ads. Each plan includes hosting, domain, SSL certificate, and customer support.

WordPress is a free and open-source software, which means you can download and use it for free. However, you need to purchase a domain name and web hosting separately. There's a paid version - WordPress.com.

3

When we master software, we unlock the door to creativity, turning a barrier into a catalyst for innovation.

ELWYN DAVIES, PIXELHAZE ACADEMY

4

WHAT'S IN THIS BOOK This little handbook offers a unique opportunity to gain insights into the world of professional web design and a better understanding of where Squarespace fits within the industry.

You will learn about the latest trends and best practices in Squarespace web design and discover practical tips and shortcuts to help you get the most out of the software.

I. THE WEBSITE BLUEPRINT The Blueprint

7

The Infinite Game

10

II. SQUARESPACE FEATURES Squarespace Always Changes

12

Fluid Engine

14

Blogging

15

E-Commerce

16

Summary Blocks

18

List Blocks

19

III. PRE-FLIGHT CHECKLIST Going live

21

Squarespace & SEO

22

IV. TOP TIPS

24

V. SQUARESPACE SHORTCUTS

27

VI. JARGON BUSTER

31

5

PLANNING

THE WEBSITE BLUEPRINT

"By failing to prepare, you are preparing to fail" BENJAMIN FRANKLIN

6

7

THE WEBSITE BLUEPRINT Before we jump on to Squarespace...

The Website Blueprint provides a proven process for creating successful websites, developed and refined over two decades of experience in the web design industry.

Extracted from our flagship online course with the same name, this process has been delivered, tested and optimised for maximum efficiency and effectiveness. It now forms an essential part of our web design workshops.

One of the key benefits of this process is its scalability. Whether you're working on a small personal project or a large corporate website, the steps can be expanded or condensed, depending on the scale of your project.

We will give you a glimpse of the process in this chapter.

COVER YOUR BASES What is this website for?

What are the key objectives?

Think about market trends and outside factors.

BULLET-POINT BRIEF

MARKET TRENDS Growth or decline in your industry External impacts and events

Even if you are only creating a one-page design, write a short lists of bullet points covering what the website is for, and what it needs to achieve.

YOUR OVERHEADS Development costs Marketing Shipping

BACKGROUND About your business, key milestones

COMPETITOR ANALYSIS Local or National Your position in the market New innovations Do you have an edge (USP)?

AUDIENCE Your target demographic/s EDGE What sets you apart from your competitors DELIVER What does the website sell/provide

8

MEASURE How can we consistently measure the performance of this website?

PRIORITISE CONTENT Break down each key page design into 3 tiers of priority.

TIER 1 Critical information for the page.

Often includes a banner (hero unit), key messages and a representation of the company brand.

SITEMAP Think of this as a family tree for your website content.

When we have a clear idea of where each page sits in relation to the sitemap, our customers are far more likely to have a positive user experience on our website.

TIER 2 Important, but not crucial information. Often includes signposting to key content.

TIER 3 Low priority content for the page, however information could be added to the website footer, meaning that it would appear as tier 3 content on ALL pages.

RESPECT THE GRID! The Squarespace fluid engine is based on a 24 column grid.

WIREFRAME

The 24 column grid system is a popular approach that involves dividing a webpage layout into 24 equal columns. By using an invisible grid, designers can achieve a balanced and consistent layout that helps to guide the user's eye and create a sense of hierarchy. The 24 column grid allows for more flexibility in design.

A rapid 'sketch' mockup of key page designs.

Wireframes can be built using a variety of software and traditional methods. Our favourite approach is to utilise the giant chalkboard walls at PixelHaze Studio. This hands-on approach allows us to ideate and iterate quickly, with the freedom to sketch out our ideas, making adjustments and corrections as we go. The chalkboard walls provide a space for collaboration and experimentation, fostering a creative and dynamic environment that helps bring our ideas to life.

This system is often used in responsive web design, where the layout needs to adapt to different screen sizes, and can be customised to fit the specific needs of the project.

9

EMBRACE THE INFINITE GAME Simon Sinek's inspirational book, The Infinite Game, offers a unique perspective on business strategy and how to approach challenges in a never-ending process.

When it comes to web design and running a website, the concept of an infinite game can be applied to help create a vision for the site and keep the team motivated to continually improve and grow their audience, even after achieving specific goals.

In web design, it is easy to get bogged down in the finite game of achieving short-term objectives and completing specific missions. These objectives could be anything from launching a new product to improving website traffic or increasing conversion rates. While these finite goals are essential, they are temporary and will eventually be achieved. The problem is that once these goals are reached, motivating the team to keep pushing forward can become a challenge.

The infinite game, on the other hand, is focused on the long-term vision of the website. This vision cannot be achieved and completed in any set timeframe and is a continuous process of growth and improvement.

Here's how you can play the infinite game alongside measuring finite missions and objectives: WEBSITE VISION: To be the go-to resource for those frustrated with software, providing concise jargon-free answers to complex problems in the digital realm.

WEBSITE MISSION: To gain 10,000 views per month from UK customers by 2025.

Whereas the vision plays the infinite game and cannot be effectively measured with statistics, the mission can be tracked

by KPIs (Key Performance Indicators) - clear, measurable factors that will give you a sense of where you are on the journey.

YOU CAN HAVE BOTH!

10

SQUARESPACE FEATURES

"Features are important, but they should never come at the expense of usability or simplicity."

STEVE JOBS

11

SQUARESPACE ALWAYS CHANGES The world of web design is in a constant state of evolution, and Squarespace is no exception.

As of the time of writing this book, there have been significant developments to the website builder platform, making it more powerful and versatile than ever before. However, keeping up with the latest trends and techniques can be a daunting task, and that's where this book comes in.

We've compiled some of our best time-saving hacks to help you navigate the Squarespace platform more efficiently.

While the pace of software as a service (SAAS) is relentless, we will endeavour to continually update and develop our shortcuts and tips over the coming years. This means that even though Squarespace is constantly evolving, you can trust that the information in this book will stay relevant and up-to-date as we update with each edition.

It's important to note that, as with any rapidly changing software, there may be updates to Squarespace that alter the effectiveness of specific shortcuts or features outlined in this publication. However, we are committed to staying on top of these changes and updating this book accordingly so that you always have the most accurate and helpful information at your fingertips.

The good news is that I have tried and tested many shortcuts and tips in this book over the past eight years. This means you can trust that the information provided is based on real-world experience and has been refined over time to provide the most efficient and effective methods for navigating the Squarespace platform.

So, whether you're a beginner or a FLU seasoned Squarespace user, this book ID E NGI will provide you with invaluable information NE you can practice immediately.

SQSP 7.1

LIST BLOCKS ME

12

MB

ERS

H IP

S

ALREADY LOST? We may be able to help.

1. Find our growing range of Squarespace templates at PixelHaze.Store 2. We can coach you through the process at PixelHaze.Academy 3. Or we can design your website for you at PixelHaze.Studio

A HUGE, EVER-GROWING ONLINE COURSE FOR EVERYTHING SQUARESPACE. ENROLL AT: CAMPUS.PIXELHAZE.ACADEMY

20%

OFF!

GET A 20% DISCOUNT ON YOUR FIRST ANNUAL/MONTHLY SQUARESPACE PLAN! 1. Create a free trial in Squarespace: https://squarespace.syuh.net/pixelhaze 2. When subscribing to your first plan, use our voucher code to get a 20% discount on your first month/year plan: PixelHaze20

13

FLUID ENGINE Squarespace has introduced a novel drag-and-drop editor to facilitate the arrangement of content on selected website pages.

The new page design system, Fluid Engine, resolves feedback from customers who have experienced confusion when navigating through the platform's previous page layout options, specifically 'spacers'.

This formerly established method has been renamed as the 'Classic Editor' by Squarespace, which is also still available on the platform for those who do not want to make the leap just yet.

Fluid Engine functionality is limited to page layout design. Many core Squarespace features remain unaffected, including page creation, menu arrangement, site-wide design customisation, hyperlink generation, image uploading and form configuration. The Squarespace blog editor is another feature that still uses the Classic Editor.

HERE ARE THREE MAIN BENEFITS OF FLUID ENGINE IN SQUARESPACE: 1. Ease of Use: Fluid Engine is designed to be more intuitive and user-friendly than the previous page layout options. With drag-and-drop functionality and an improved interface, users can create and modify page layouts more quickly and efficiently.

2. Consistency and Flexibility: Fluid Engine allows for greater consistency and flexibility in page layout design, helping users to maintain a cohesive look and feel across multiple pages on their site. The 24-column grid system (an upgrade on the 12-column grid in the classic editor) gives designers greater control over the placement and sizing of page elements, allowing for highly customisable layouts.

3. Time-Saving: With the ability to save favourite section designs, users can quickly add sections to their pages without having to recreate them from scratch, saving time and effort. This feature benefits those frequently using specific design elements, enabling them to maintain a cohesive design and save time on repetitive tasks.

14

BLOGGING WITH SQUARESPACE Blogging is a powerful tool for businesses and individuals to share their expertise, connect with their audience, and establish a solid online presence.

A well-maintained blog will also help you optimise your website to perform better on search engines (SEO).

Squarespace offers an intuitive platform for creating and publishing blog content that is visually appealing and easy to use.

SEO TIP Regularly updated websites perform better on search engines because their algorithms prioritise fresh and relevant content, which is more likely to be found on websites that consistently publish new and informative content.

Whether you're a seasoned blogger or just getting started, several tips and tricks can help you make the most of your Squarespace blog.

HERE ARE OUR TOP 5 TIPS FOR BLOGGING WITH SQUARESPACE: 1. Choose a Clean and Simple Template: Opt for a template that's easy to navigate and doesn't detract from your content.

2. Optimise for SEO: Take advantage of Squarespace's built-in SEO tools by optimising blog posts with keywords, meta descriptions, and tags.

3. Use High-Quality Images: Make your content visually appealing by including highquality images and using Squarespace's image editor to tweak them.

4. Keep Posts Short and Sweet: Keep posts concise, ensuring readers stay engaged and are not overwhelmed.

5. Include Call-to-Actions: Encourage reader engagement by including a call-to-action (CTA) at the end of each blog post.

ARE YOU FULLY COMMITTED? Blogging is like cranking up a flywheel, building momentum month after month, and only those who are committed to the long haul and truly enjoy the process should consider this approach.

15

E-COMMERCE PRO TIP

Selling online can be a challenging endeavour that requires a combination of tenacity and composure.

While Squarespace is a robust e-commerce engine that continues to improve each year, it is not a magic solution that can guarantee success on its own. You will need to optimise your product pages, set up payment and shipping options, create a user-friendly website design, and actively promote your store.

However, with a determined mindset and a patient, strategic approach, you can leverage Squarespace's features to build a successful online business.

Focus on providing a great customer experience, from fast and reliable shipping to responsive customer support, to help build a loyal customer base and drive repeat sales.

If you can build a solid foundation, based on a strong business culture, the sales will follow.

HERE ARE OUR TOP 5 TIPS FOR SELLING ONLINE WITH SQUARESPACE: 1. Optimize product pages: Ensure your product pages include high-quality images, detailed descriptions, and pricing information. Use keywords in your product titles and descriptions to help improve your search engine rankings and drive more traffic to your site.

2. Set up payment and shipping options: Squarespace supports a range of payment and shipping options, including PayPal, Stripe, and USPs. Choose the best options for your business and ensure they are set up correctly before launching your store.

3. Make it easy to navigate: Your online store should be easy to navigate, with clear categories and a simple search function. Use Squarespace's drag-and-drop page builder to create a clear, organised layout. Ensure your menus and navigation links are easy to find.

4. Promote your store: Once your online store is set up, you can promote it to your target audience. Use social media, email marketing, and other channels to drive traffic to your site, and consider offering special promotions or discounts to encourage customers to make their first purchase.

5. Use analytics to track performance: Squarespace offers built-in analytics tools that will enable you to track key metrics such as website traffic, sales, and customer behaviour. Use these insights to optimise your store over time and make data-driven decisions to improve your online business.

16

E-COMMERCE COMPARISON Squarespace has developed into a powerhouse e-commerce platform, ideal for small and medium-sized businesses looking for a foothold in their market.

In this section, we will look at the pros and cons of Squarespace compared to other leading e-commerce platforms like Shopify.

GUIDELINE This table is intended as a general comparison between Squarespace ecommerce and other ecommerce platforms. The pros and cons may vary depending on specific business needs and preferences.

SQUARESPACE

OTHER E-COMMERCE

PROS

PROS

User-Friendly Interface

Wide Range of Third-Party Integrations

Built-In SEO Tools

Customisable Checkout Pages

All-In-One Platform

More Advanced Ecommerce Functionality

Professional Templates

Larger Developer Community

24/7 Customer Support

Greater Flexibility for Customisation

CONS

CONS

Limited Payment Options

Steeper Learning Curve for Beginners

Limited App Store

Additional Costs for Advanced Features

Limited Customisation Options

More Complex Management System

Limited Shipping Options

May Require Technical Expertise for Maintenance

Not suitable for large inventories (2,000+ unique products).

May Require Developer Assistance for Customisation

17

SUMMARY BLOCKS Squarespace summary blocks are a type of content block that allows users to display a summary of content from another area of their website, such as blog posts or events, in a customisable grid or list format on another page of their website.

By allowing for the easy display of dynamic content, summary blocks can add a professional and interactive finish to a website, providing visitors with an engaging browsing experience and keeping them on the website for longer periods of time.

ADVANCED TIP If you want to display all other pages in a section (other than the current page), you can use tags, numbering each. Then filter the summary block, using every other page number.

If this is confusing, our team can help in a short 12-1 session!

HERE ARE OUR TOP 5 SUMMARY BLOCK TIPS: 1. Show recent posts on the homepage: Squarespace summary blocks can display the most recent posts on the website homepage.

2. Display related stories on blog pages: Summary blocks can display related stories at the bottom of a blog page.

3. Feature products anywhere on the website: Squarespace summary blocks can be used to feed featured products anywhere on the website.

4. Cross-link multiple services: Summary blocks can be used to cross-link multiple services.

5. Build a simple directory: Squarespace summary blocks can be used to build a simple directory with a dedicated search.

SUMMARY BLOCKS ARE USED EXTENSIVELY THROUGHOUT OUR WEBSITES.

18

LIST BLOCKS Lists are a well-hidden yet handy feature of Squarespace. The ‘List’ content section allows for additional functionality to your website without the need for complex code.

This feature can be found by going on to any of your pages, adding a new section, and then finding the item called 'lists'. There are several different formats which can be handy in a range of scenarios. This feature is only available in Squarespace 7.1.

THERE ARE THREE MAIN LIST FORMATS: Simple List, Banner Slideshow Carousel.

HERE ARE SOME EXAMPLE DESIGNS USING LIST BLOCKS

19

PRO TIP You can use a list block to quickly create a uniform 'meet the team' page structure. This is ideal if you don't want long, detailed bios for your team members.

PRE-FLIGHT CHECKLIST

"We choose to go to the Moon" JOHN F. KENNEDY

20

GOING LIVE Launching a website requires careful planning and preparation to ensure it's optimised for success.

Our PixelHaze pre-flight checklist outlines the steps before making your Squarespace website live, including fixing broken links, optimising load times, and reviewing content.

STEP

MOBILE FIRST These days it is common practice to begin by designing for mobile devices and then scaling up to larger desktop screens. Don't leave it until this stage.

TASK

STATUS

1

Test for broken links and fix them before launching the website.

2

Review all content on the website for errors and typos before going live.

3

Check mobile and tablet views for all pages.

4

Check address and contact details, and ensure contact forms are going to be sent to the correct email address.

5

Add a favicon (small icon in browser).

6

Set up 301 redirects (if applicable) to ensure that visitors are directed to the correct pages if upgrading from a previous website.

7

Select an appropriate Squarespace hosting plan for your website's needs.

8

Enable the cookie banner.

9

Apply the PixelHaze discount voucher to save on your hosting plan.

10

Purchase or hook up your desired domain name to your Squarespace website.

11

Double-check all website settings and content before switching your website to 'live' mode.

21

SQUARESPACE AND SEO While Squarespace is known for its userfriendly interface and sleek design templates, we should consider how it impacts search engine optimisation (SEO).

Squarespace performs well on search engines for over 90% of cases with good SEO practices, and its suitability should only be questioned in highly competitive markets. With the proper techniques and strategies, Squarespace can be optimised to improve search engine rankings and drive more organic traffic to your website.

A BALANCING ACT A high performance website is often about striking the balance between page load speed and impact, ensuring that the website is both fast and visually appealing to users.

We sometimes need to prioritise one over the other, but it is important not to tip the scales too far in either direction.

HERE ARE OUR TOP 5 TIPS FOR OPTIMISING SQUARESPACE: 1. Optimise website structure: Use clear and descriptive page titles, URLs, and headers incorporating relevant keywords.

2. Create high-quality content: Offer value to your audience with original content optimised with targeted keywords and phrases.

3. Use built-in SEO tools: Utilise Squarespace's meta descriptions, alt text for images, and page descriptions to provide search engines with additional context about your content.

4. Build quality backlinks: Increase your website's authority and improve search engine rankings by building quality backlinks from reputable and relevant websites.

5. Monitor website performance: Use Squarespace's analytics tools to make datadriven decisions and continuously improve your SEO strategy.

Persistence and patience are key to gaining a foothold in search engines, as improving your website's search engine rankings and increasing organic traffic can take time and consistent effort. In a competitive environment, it can take several years and a persistent, ever improving strategy to compete for the top spot on Google.

22

SQUARESPACE OUR TOP TIPS

"The more one shares, the more one has."

LEONARD NIMOY

23

SQUARESPACE TOP TIPS DUPLICATE PAGES If you have a page on your Squarespace site that you want to replicate, rather than starting from scratch, you can easily duplicate it. This can save you significant time, especially if you have multiple pages with the same basic layout.

THE STYLE EDITOR The style editor in Squarespace allows you to quickly make changes to your site's fonts, colours, and other elements without digging through multiple menus.

With just a few clicks, you can make global changes to your site's design using the style editor.

THE ASSET LIBRARY The Squarespace asset library allows you to organise and manage your site's images and files easily. By taking advantage of the asset library features, such as tags and folders, you can quickly find and use the required images.

24

SQUARESPACE TOP TIPS BUY OR CREATE TEMPLATES If you have a page design that you use frequently, consider creating a template to use as a starting point for future pages. This can save you time by eliminating the need to recreate the same design from scratch. You can also purchase ready-made templates from PixelHaze Store :) FAVOURITE SECTIONS One new time-saving feature is 'Favourite sections'. This allows you to save and use your favourite section designs in other page layouts, maintaining a consistent look and feel across multiple pages.

OVERLAPPING WINDOWS Overlapping browser windows can be a time-saving hack for Squarespace, especially on smaller screens. You can quickly switch between different pages with a single click instead of moving your cursor all the way up to the browser tab.

25

SQUARESPACE SHORTCUTS

"Speed is useful only if you are running in the right direction."

JOEL BARKER

26

NAVIGATION SHORTCUTS Let us begin by exploring efficient ways to navigate the Squarespace Admin.

We have compiled a comprehensive list of helpful navigation and search shortcuts that will enable you to locate what you need and save precious time.

By mastering these techniques, you can streamline your workflow and achieve your objectives efficiently.

Trust me, once you become familiar with these essential shortcuts, you will wonder how you managed without them.

UNABLE TO LOG IN? Sometimes the quick login feature is disabled. To find the setting, go to: settings > advanced > escape key You can also log in via squarespace.com or by entering '/config' at the end of your Squarespace website address (URL).

FOR WINDOWS & MAC Log in to your Squarespace website

Esc

Open/close the full preview

Esc

Hide/show the Home menu

Esc

Return to the Home menu

Double-click the arrow at the top of any panel.

Search for a panel

/ or ?

Quick search tool to find a panel in the Squarespace admin area. This could be used to find domain settings or connected accounts.

Highlight an element

Tab

Move to the previously highlighted element

Shift + Tab

Select the highlighted element or content

Space

Open the block menu (when selected)

Enter/Return

27

SQUARESPACE FLUID ENGINE DID YOU KNOW?

The 2022 introduction of Fluid Engine revolutionised the Squarespace design experience, providing designers with greater control and flexibility.

You can click, hold and drag your mouse over multiple blocks allowing you to move them at the same time.

You can also duplicate multiple blocks simultaneously,

The shortcuts in this section have been carefully curated to ensure that working with the Fluid Engine is an effortless and productive experience, enabling you to design and launch your website quickly.

MAC

WINDOWS

Select a block

Tab

Tab

Select the previous block

Shift + Tab

Shift + Tab

Select all blocks in a section

⌘+A

Ctrl + A

Delete selected block(s)

Delete

Delete

Move block

Arrow keys

Arrow keys

Resise block

⌘ + arrow keys

Ctrl + arrow keys

Move block forward/backward

Shift + up/down arrow key

Shift + up/down arrow key

Move block up/down (mobile)

Option + up/down arrow key

Alt + up/down arrow key

Duplicate block

⌘+D

Ctrl + D

Copy block

⌘+C

Ctrl + C

Paste block

⌘+V

Ctrl + V

Show grid

G

G

28

PAGE EDITING As you add content blocks to your website, the structure can quickly become complex and challenging to navigate.

That's where these essential shortcuts come in.

Whether you're at the beginning stages of your site design or have a complex layout with numerous content blocks, these shortcuts will help you stay in control and streamline your workflow.

PRO TIP You can create intricate layouts in each blog post and simply duplicate them to keep a consistent theme throughout your website.

We like to create a template for each blog post layout and save it as draft.

By using these shortcuts, you can easily organise and adjust your content blocks, ensuring that your Squarespace site remains well-structured and easy to navigate for you and your visitors.

FOR WINDOWS & MAC Add a blog post, product, event, or another collection item

When a collection page is open: Space

Find a block

Search at the top of the Block Menu instead of scrolling when adding a block. For example, try image, audio, or summary.

Resise an image incrementally

Press and hold Shift while dragging an image block cropping handle to resise the image in 20pixel increments for more precise resising.

Add a blog post, product, event, or another collection item

When a collection page is open: Space

29

JARGON BUSTER

"Time to translate technical twaddle" PIXELHAZE

30

JARGON BUSTER JARGON

WHAT THE &£!@ DOES THAT MEAN?!

Above the fold

The area of a webpage that is visible without having to scroll down.

Backend

The part of a website that is not visible to users, but controls the functionality and database management.

Blog

A website or section of a website where regularly updated content is posted in a diary-like format.

CMS

Content Management System - a software application used to manage the creation and modification of digital content.

Cookie

A small text file that is stored on a user's computer by a website, containing information about the user's activity on that website.

CTA

Call-to-Action - a marketing term referring to an element on a website designed to encourage a user to take a specific action, such as filling out a form or making a purchase.

Frontend

The part of a website that is visible to users, including design, layout, and content.

Hero image

A large, full-width image that appears prominently at the top of a webpage.

Jumbo Footer

A footer section on a website that is significantly larger and more detailed than a traditional footer. Jumbo footers often include multiple columns with various types of content, such as links, social media icons, contact information, and copyright notices.

Landing page

A standalone webpage explicitly designed to encourage a user to take a specific action, such as filling out a form or making a purchase.

Masthead

The top section of a website, typically containing the logo, main navigation menu, and any other key branding or design elements. The masthead is often fixed in place so that it remains visible as the user scrolls down the page.

Mega Menu

A type of drop-down menu that displays a large number of links or content options in a multi-column layout. Mega menus are often used on larger websites with complex navigational structures to help users find the information they need more quickly and easily.

31

JARGON BUSTER JARGON

WHAT THE &£!@ DOES THAT MEAN?!

Mobile-first

A design approach that prioritises designing for mobile devices first, then scaling up to larger devices, such as desktops or tablets, to ensure that a website is optimised for viewing on a variety of devices.

Responsive design

A design approach that ensures a website is optimised for viewing on a variety of devices, including desktops, tablets, and mobile devices, by adjusting the layout and content based on the screen size.

SAAS

Software As A Service - browser-based software applications, usually billed monthly or annually.

SEO

Search Engine Optimisation - the practice of improving a website's visibility and ranking in search engine results pages, typically through optimising content and technical aspects of the website.

Squarespace List Block

A content block in Squarespace that allows users to display a list of content, such as blog posts, products, or events, on another page of their website in a customisable format.

SSL

Secure Sockets Layer - a security protocol used to establish an encrypted connection between a web server and a user's browser, ensuring that all data transferred between the two is secure and private.

Summary Block

A content block in Squarespace that allows users to display a summary of content from another area of their website, such as blog posts or events, in a customisable grid or list format on another page of their website.

Thumbnail

A small image that represents a larger image or video. Thumbnails are often used as previews or links to larger media files.

UI

User Interface - the part of a website or application that the user interacts with, including menus, buttons, forms, and other elements.

UX

User Experience - the overall experience a user has while interacting with a website or application, including ease of use, navigation, and visual design.

Vlog

A blog that is primarily composed of video content.

Website builder

A software tool or online platform that allows users to design and build their own website without needing advanced coding skills or technical knowledge.

32

A LITTLE ABOUT US...

In a world where technological innovation accelerates at a relentless, remorseless rate; we are the beacon of light for those who are cut off, drifting in the dark.

Where giant tech firms widen the gap and seize control of the markets; we fight tooth and nail for the little guy.

Where the education gap widens between urban and rural areas; we shall build our little islands of creativity and innovation, in the most obscure places.

SOME DAY, WE WILL BRIDGE THE GAP!

Our purpose is to demystify technology, translate technical twaddle, and create clarity from chaos.

If you feel like you're drowning in a sea of technical jargon, let us help you navigate the waters and make sense of it all.

PixelHaze.Store

PixelHaze.Academy PixelHaze.Studio PixelHaze@YouTube

THE LITTLE

SQUARESPACE HANDBOOK

$6.99 Written by Elwyn Davies Designed and published by PixelHaze © PixelHaze 2023, All Rights Reserved.

PixelHaze is an independent company and is not associated in any way with Squarespace.