Online website builders have come a long way since I started One Page Love back in 2008.

We can now create landing pages for our products and services, without any prior coding knowledge, all by ourselves.

However, design customization has always been a pain point. Websites often look similar to their template starting points and trying to move page elements can cause havoc.

This all ends today with Fluid Engine – the new grid-based, drag-and-drop editor used for designing Squarespace pages.

It’s incredibly easy to drag and snap any content (text, images, buttons) on a simple grid system. This allows anyone to get the professional design results they’re looking for, while looking like a bespoke website design.

Here is a great video overview of Fluid Engine in action and below that I’ve demonstrated 10 features I think make Fluid Engine a game-changer:

 

---

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.)

---

Ok, here are 10 highlights I think you should know about Fluid Engine:

1. The background grid appears when you drag elements

As you drag, the background grid becomes visible within a page section you are working on. Tip: Make the grid stay visible by pressing G on your keyboard. Press G again to hide the grid.

2. Resize elements within the grid by dragging their sides or corners

Use the grid background to guide content blocks to seamlessly resize within rows and columns:

3. Easily overlap elements

Simply drag text or images over one another:

4. Reposition any overlapping element to the foreground or background

Arrange content blocks to overlap, and send them forwards or backwards:

5. Easily align images within blocks

Left, center or right align images to evenly distribute them or perfectly stack them alongside each other:

6. Mobile has it’s own unique grid design, if you want

Create independent mobile layouts vs. desktop. Both use the same grid system. Note how I switch between the two layouts a couple of times, iterating on the mobile design until it was perfect. What a pleasure:

7. Customize grid settings, per page section

Each page section allows you to choose from presets, or manually adjust grid row count, column width, and spacing.

8. Multi-select elements and move all

Select a group of content blocks and move them together without breaking placements:

9. Create full-bleed sections

Arrange content blocks or set a section background to appear flush to the edges of a browser screen, or span edge-to-edge.

10. Have fun with dozens of image shapes!

Last but not least, easily round image corners or explore the beautiful, contemporary shape options. Once happy with your shape, simple snap them to the section grid:

---

FAQ: How do I know if I have Fluid Engine on my Squarespace website?

New customers who start a website trial, plus existing website customers using the latest version of Squarespace (7.1) already have Fluid Engine enabled.

Fluid Engine is only available to English speaking countries right now but rolling out to all 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

I hope you enjoyed this breakdown on how to create a contemporary landing page using the dynamic Fluid Engine! Props to Squarespace for creating a platform where we can create unique landing page designs, with ease. In case you missed it, I recently published a tutorial on How to sell your first online course using Squarespace.

* 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]