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:

29462946

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:

29462946

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:

29462946

Enter a name for your project and click Clone project:

29462946

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:

26902690

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

580580

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:

26902690

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

26902690

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:

29462946

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?