Chapter 2 of 3: Getting started with WebFlow

WebFlow empowers you to build beautiful and functional websites without writing code. 

So let’s say you followed our Figma tutorial in chapter 1 and designed a landing page. Next, you need to get started with WebFlow. But how?

Just follow our WebFlow tutorial for beginners.

1. Create your WebFlow account

Open the WebFlow design to code tool and sign up for a free account. This allows you to create two pages to test the platform. Upgraded plans offer more features for complex projects.

Once signed in, set up a new WebFlow workspace. This will be your central location for all your WebFlow projects.

WebFlow environment combines a visual canvas with a control panel. Here’s a quick rundown:

1. Designer canvas: Drag and drop elements here to build your website’s layout.
2. Navigator panel: Quickly move between different sections of your website.
3. Styles panel: Control fonts, colors and spacing to define your website’s look and feel.
4. Elements panel: Find all the building blocks for your website, like buttons, text boxes, images and more.

2. Consider WebFlow content models

In WebFlow, the content management system (CMS) is built around the concept of a content model, which defines the structure and organization of your website’s dynamic content.

Before you start building your website, plan your WebFlow content model capacity. By understanding WebFlow limitations, you can make informed decisions about using WebFlow CMS for your website project and ensure it meets your current and future content management needs.

Imagine a filing cabinet in your office. Each drawer holds a specific type of document (e.g., invoices, contracts and reports). Similarly, in WebFlow, collections act like drawers, grouping related content items of the same content type. For example, you might have a collection named “Blog Posts” that stores all your individual blog posts. Each blog post within this collection is a unique content item with its own title, author, date and content body.

While there’s no restriction on the number of collections you can create, WebFlow development has: 

1. A limit on the number of content items (individual pieces of content) you can store within your CMS. The exact limit depends on your WebFlow plan:

• Free plan: 50 items
• Basic plan: No items
• CMS plan: 2,000 items (most common)
• Business plan: 10,000 items

This limit shouldn’t be an issue for most basic websites. However, if you anticipate managing a massive amount of content (e.g., thousands of blog posts or product listings), you might need to consider alternative solutions or explore a custom Enterprise plan. 

2. A limit on the number of collection list elements you can use per page. This limitation is in place to ensure fast loading speeds for our projects and to prevent the creation of slow-loading websites. The maximum limit for collection lists is 20 per page. 

Let’s see how this restriction plays out in the resource center context. In the example below, you can see the number of collection list elements on a single page, which is 16. If we need to include more types of resources or add a filtration category (e.g., by topic, by industry or by solution), we’re limited to just four additional lists.

If you’re unsure if any of WebFlow plans can handle your specific content needs, it’s always best to consult their resources or contact their support team.

📚Read more 👉 Uncertain if WebFlow is the right fit for you? Check out our guide on selecting the perfect CMS.

3. Choose hosting and domain services in WebFlow

When it comes to publishing website from Figma and making it accessible online, there are two key things to consider: hosting and domain. 

WebFlow hosting

Hosting, in the context of websites, refers to the service of storing your website’s data and files on a special computer system called a server. WebFlow provides built-in hosting for your website. This means you don’t need to purchase separate hosting services or manage servers yourself. Hosting is included in the monthly billing. If you fail to pay your monthly subscription, your website will no longer be hosted on the internet.

WebFlow is primarily designed for its built-in hosting environment. However, you do have the option to self-host your WebFlow website, but it comes with certain limitations and considerations. Without Webflow hosting, you can’t access built-in CMS or e-commerce tools, so you need alternative solutions. Also, changes made in the Webflow designer require manual code export and upload, which can be time-consuming and prone to errors.

WebFlow domain 

A domain is the unique web address people will use to access your website (e.g., “yourbusiness.com”). WebFlow doesn’t offer this kind of domain registration service. You’ll need to purchase a domain name from a registrar such as Google Domains, GoDaddy or Namecheap. 

WebFlow offers the option to publish your site to a subdomain (e.g., “yourbusiness.webflow.io”) for free. However, using a custom domain name gives your website a more professional and memorable brand identity.

With your Figma design ready and your Webflow workspace set up, you can now move on to the final chapter, where you can bring your landing page live. 

Still need help with WebFlow development?

Webflow offers a powerful design environment, but it can be time-consuming and challenging, especially if you’re new to web design. Don’t let the complexity hold you back. Need assistance with your account setup? Explore our WebFlow services to discover how we can guide you through every step of the process.