Getting Started with Webflow

Webflow is an easy to use, no-code website builder that has a free starter plan. With Webflow, you can easily design and host a paywall webpage and quickly create iterations.

In addition, we've created a clonable Webflow project that contains lots of common paywall elements for you to copy to your hearts desire.

Creating a Webflow Account

If you’re new to Webflow, you’ll need to create a new account. Head to the Webflow website and click the Get started – it’s free button:

Next, fill out your name, click through the setup screens and hit the Finish button. It doesn’t matter what responses you give to their setup questions:

You’ll redirect to a website building tutorial but you can ignore that for now and revisit it at a later date. If you signed up via email, you’ll need to verify your email address by following the instructions in the email they’ve sent you before you continue.

Exploring the Clonable Project

Visit our clonable Webflow project, and click Clone project:

Enter a name for your project and click Clone project:

You’ll see a website builder that contains loads of different elements that you might see in a mobile paywall. When building your own paywall, you can cherry pick useful elements from here and copy and paste them into your own design:

Click Page: All Components in the top left to bring up the Pages panel. This shows you the structure of your website:

Here, each page contains a different paywall design. To maintain organisation and reduce Webflow cost, we recommend having one project that contains separate pages for each paywall design, organised in different folders.

Click the Simple Checklist (Calm) page:

You’ll see a paywall based on the Calm app paywall design:

Click the 7-Day Free Trial text, and click the cog wheel in the top right to open the Element Settings panel. In Custom Attributes, you’ll see a custom attribute added to it:

This is known as a data tag. These are at the core of Superwall's paywall configuration and you'll learn all about them in the next section.


Did this page help you?