Squarespace Fluid Engine Landing Page Tutorial (+ Smooth Scroll Code)

In less than 30 mins, we are going to create a unique landing page design from scratch using the Fluid Engine page builder. Timestamps + code snippets below ?

Fluid Engine is the new grid-based, drag-and-drop editor used for designing Squarespace pages. The UX is a dream allowing you to drag and snap any content – be it text, images or buttons – onto a simple grid system.

## Tutorial Overview ##
We start the tutorial by planning our long-scrolling landing page, adding the required page sections, then integrating our content. We then move on to refining the color scheme, spicing up the page with fun design elements and finally end with adding a header navigation that smooth scrolls to the page sections. It’s a cracking tutorial!

## Code Snippets ##
Anchor point code snippets found in here:
https://onepagelove.com/fluid-engine#code

## Tutorial Timestamps ##
00:00 Tutorial Overview
00:46 Migration from Squarespace 7.0 to 7.1
01:09 Planning your landing page sections
01:27 What content do I need? Where does it go?
02:10 Starting with a blank Fluid Engine page canvas
02:44 Adding pre-designed Fluid Engine page sections
04:06 Creating a Z-layout flow
06:17 Integrating content (text, images, products)
07:40 Dragging elements within the Fluid Engine grid
08:00 How to handpick good testimonials
09:22 Adding product range
12:50 Color customization
14:30 Alternate section background colors
15:10 Adding unique design flare
15:20 Inserting scrolling text
17:56 Overlap elements, reorder to front/back
18:55 Adding unique image shapes
21:10 Integrating header call-to-action button
21:50 Insert page scroll anchor points (via code snippet)
22:45 Adding custom header navigation to page sections
25:22 Mobile optimization
28:40 Coupon OPL10 for 10% off Squarespace

## Tutorial: How to setup Squarespace Member Areas & monetize your content
https://youtu.be/A9xmjXt25RE

### 10% Off Coupon: OPL10 ###
https://onepagelove.com/opl10
Squarespace has been kind enough to give viewers the exclusive coupon OPL10 for 10% Off your first website or domain purchase. There is a free 14-day trial with no credit card needed, so you can try risk free.

## Hey! I'm Rob Hope ##
Website: https://robhope.com
Twitter: https://twitter.com/robhope