Skip to content
Chapter 02 of 04 · 3 lessons · ~28 min

Designing Pages

Design pages with Fluid Engine, understand sections and blocks, and set fonts and colors for the whole site.

YOUR PROGRESS0%
/ Lessons in this chapter
03
Squarespace Fluid Engine Tutorial How to use Fluid Engine's grid to place, resize and layer blocks, and how to design a separate mobile layout. Coming soon
04
Squarespace Sections and Blocks Explained How sections and blocks fit together and which ones to use for a portfolio site. Coming soon
05
How to Change Fonts and Colors in Squarespace How to use Site Styles to set fonts, colors, buttons and spacing across your whole site. Coming soon

Chapter practice task

Task: Design a home page with Fluid Engine and a consistent site style

  1. Set your fonts, color palette and button style in Site Styles.
  2. Build a home page with a hero, selected work, a short about section and a contact call to action.
  3. Use Fluid Engine to arrange blocks on desktop, then adjust the mobile layout.
  4. Apply section color themes so sections alternate subtly.

By the end of this chapter

  • You can arrange blocks precisely with Fluid Engine
  • You understand the difference between sections and blocks
  • Your site uses consistent fonts, colors and buttons everywhere

Quick answers for this chapter

What is Fluid Engine?

Squarespace’s drag-and-drop editor for sections. You place blocks on a grid and resize them freely, with a separate mobile layout.

Do mobile changes affect desktop?

In Fluid Engine, layout changes on mobile don’t change the desktop layout. Content changes (text, images) apply to both.

Where do I change fonts?

In Site Styles (the paintbrush icon in edit mode), under Fonts.