How to build a unique landing page design with Fluid Engine by Squarespace

In less than 30 mins, we are going to create a beautiful and unique landing page design from scratch using the Fluid Engine page builder.

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.

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!

One Page Love Exclusive Coupon

Yay! Squarespace has been kind enough to give One Page Love readers 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.)

Tutorial Index:

• 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

FAQ: How much does Fluid Engine cost?

There is no additional cost if you have a Squarespace 7.1 account. If you are new to Squarespace, Fluid Engine is available with all new account sign ups starting at $16/month (if paid annually).

FAQ: What is the code snippet for the smooth scroll?

From the main navigation, link to the page section anchors using a hashtag URL like this: #testimonials

Add your anchor point using this code snippet:

<a name="testimonials"></a>

Then simply replace the word testimonials with the relevant page section name.

If the smooth scroll movement is not working, using the Squarespace main navigation head to Settings → Advanced → Code Injection and paste this code in the Header code area:


<style>
html {
scroll-behavior: smooth;
}
</style>


That should activate an elegant smooth scroll behavior on all links that link within the same long page.

FAQ: Can I use Fluid Engine if I have Squarespace 7.0?

Unfortunately not. Only new customers who start a website trial, plus existing website customers using the latest version of Squarespace (7.1) already have Fluid Engine enabled. If you have Squarespace 7.0 please find the Squarespace 7.1 migration guide here.

Fluid Engine is only currently available to English speaking countries but will be rolling out to additional countries over the next few months.

When you click Edit on the page, Fluid Engine sections have an Add Block button in the top-left corner. When you click and drag a block, a grid should appear in the background.

FAQ: What are the benefits of using Squarespace?

Squarespace is a leading online website builder. What sets them apart is their superior level of design and award-winning customer support team available 24/7. Other main benefits are:

• No Website Hosting Needed - their platform is fast and secure.
• Online Content Management - all edits are done within your browser, no software needed.
• Easily Drag and Drop Images - unlimited galleries with unlimited bandwidth.
• Free Domain Name - when registering for your first website, if you pay annually (renews at standard rate).
• Beautifully Responsive - all templates work for all devices, so you only have to design your website once. Test and preview how your website will appear on a range of screen sizes.
• Blog Sections - can easily be added for content marketing and to share your journey.
• Commerce Solutions - are an upgrade away if you want to start selling products.
• Email Marketing - gather email addresses, send marketing emails and analyze the reader email activity.
• Member Areas - create private website sections only accessible to signed-up or paying members.
• Scheduling - add an online scheduler to your site to diversify your revenue with professional services or classes.

That’s a wrap! Don’t forget your 10% Off coupon*: OPL10

That’s a wrap! Don’t forget your 10% Off coupon: OPL10

Ok, that’s a wrap creating a full landing page built from scratch using the new Fluid Engine editor by Squarespace. What a breeze to create a truly unique design; props to Squarespace for continuously innovating their platform. In case you missed it, I recently published a tutorial on How to Setup Squarespace Member Areas & monetize your content.

* The OPL10 coupon offer only applies to first payment of subscription on Squarespace, does not apply to future recurring payments or monthly plans, and may not be combined with any other offer codes or discounts.

Much love,
Rob

Twitter: @robhope
Email: [email protected]