The 3 Types of Website Builders & How Builders Rank

Published on
Updated on

There are 3 different types of website platforms, ranging from highly opinionated with many abstractions to unopinionated with minimal abstractions.

"Types of website builders" with 3 browser windows and progressively more advanced contents

Website builders fall into three categories, from least flexible to most flexible:

  1. Type 1: Fixed layout, basic styles (Shopify)
  2. Type 2: Custom layout, basic styles (Duda)
  3. Type 3: Full layout & style control (Webstudio – that's us 👋 )

First, I'll discuss these categories to help you choose the best website builder for you. While doing this, you'll also see examples of website platforms for each category.

Then, I'll briefly discuss several other ways website builders can be classified.

Types of Website Builders

You won't find these categories in a textbook or tutorial because, as far as I know, I created them.

After playing with most website builders, I found that each platform was built in one of these three ways.

Please note that each platform doesn't always follow 100% of the rules I define, rather, it closely aligns with them.

Also, the best website builders don't align to a specific category. Sure, Type 3 provides the most control, but a beginner may find that overkill and prefer the simplicity of Type 1.

For each type of website builder, the following will be covered:

  • Things you can't do with it
  • How to build with it
  • Who it's for
  • List of website platforms
  • How to link an image (this is a good and simple example to show how the platforms differ)

Type 1: Fixed layout, basic styles

"Type 1 fixed layout, basic styles" and screenshot of a type 1 website builder

A Type 1 website builder provides fields to fill out and simple style options. The user can only select from preconfigured sections and has limited styling options.

Here's what that looks like:

Things you can't do on a Type 1 platform:

  • Define rows
  • Define columns
  • Add widgets to the predefined regions
  • Set styles beyond basic design, such as colors and font sizes
  • Usually, you can't define specific sizes like 20px, instead you select from S, M, L
  • Implement a specific design you have in mind, as you won't have that level of control
  • Select H1-H6
  • Use/customize a CMS

How you build on a Type 1 platform:

  • Add preconfigured sections such as "Text + Image", which are customized by filling out fields
  • Usually, you have a small level of control over the sections, such as toggling whether the image is on the left or right
  • Either fill out some global styles, such as your brand's primary color, or fill out styles for each section using the very limited options

Who/what Type 1 is for:

  • Beginners
  • Highly specific niches, as the sections they provide are likely what you need
  • Non-critical sites

Type 1 website platforms:

  • Shopify
  • Podia
  • Tilda
  • GoDaddy
  • Weebly

You likely can't unless the predefined section has a link option for the image.

Type 2: Custom layout, basic styles

"Type 2 Custom layout, basic styles" and screenshot of a type 2 website builder

A Type 2 website builder provides some level of control over the regions on the canvas, the types of content that go in them, and limited styling options.

Here's what that looks like:

Things you can't do on a Type 2 platform:

  • Nest rows/columns within each other (or go beyond one level)
  • Nest widgets/components within each other (for example, adding an image within a heading element)
  • Control CSS units such as changing px to rem or vh.
  • Control many CSS properties/style options
  • Control layout properties such as flex, grid, block, etc.
  • Define classes, tokens, or another method of keeping styles in sync (beyond global elements like titles and links)
  • Use a raw div (instead, you use opinionated sections like columns)
  • Configure which fields from the CMS to display on an overview grid
  • Control container width
  • Set semantic tags for search engine optimization and accessibility
  • Set aria labels

How you build on a Type 2 platform:

  • Set styles on global elements such as H1-H6 and links
  • Typically add rows and columns
  • Select from already designed sections and customize them (optionally)
  • Manually enter your styles on each section, such as padding
  • Drag and drop editor enabling you to add opinionated widgets rather than raw components
  • If a customizable CMS is offered, it's useful for simple types of content like team members. Laying out a list of team members is done using a predefined widget like "gallery", not by selecting the fields you want to display.

Who/what Type 2 is for:

  • Beginners to intermediate
  • Agencies that build simpler websites
  • When you need to get the website done quickly
  • People who are using Type 1 and can't achieve what they want

Type 2 website platforms:

Many of these platforms are vastly different from each other but generally follow a Type 2 approach.

Add an image, open the image settings, and enable the link option.

Type 3: Full layout & style control

"Type 3 Full layout & style control" and screenshot of a type 3 website builder

A Type 3 website builder is as advanced as they come, providing the raw building blocks to build a website, such as divs, and a style panel that enables control over many or all CSS properties, such as display and position.

Here's what that looks like:

Things you can't do on a Type 3 platform:

How you build on a Type 3 platform:

  • Add divs to the canvas to build a structure
  • Use the display property to control the layout of the structure
  • Nest many divs to build the proper structure
  • Add raw components/elements to the canvas
  • Use section and page templates to speed up the build process while preserving low-level access (optionally)
  • Control most or all CSS properties and units
  • Add all the fields you want from the CMS in an overview grid
  • Use a variety of SEO tools for optimal presence in search engines

Who/what Type 3 is for:

  • Intermediate to advanced
  • Agencies
  • Enterprises
  • Freelancers
  • Bespoke solutions

Type 3 website platforms:

Add a link, then add an image nested within the link.

Other ways to categorize website builders

The above categorizations are concerned with how the building and styling work. However, there are other ways to divide up the platforms.

Self-hosted vs. cloud/SaaS

Some website platforms you have to host yourself, like Drupal, others are hosted for you, like Webflow, and the most flexible platforms allow you to choose, like Webstudio.

  • Self-hosted – You download the software, research web hosting, put it on the server, and keep it up to date.
  • Cloud/SaaS – You sign up and create a project – no maintenance, no updating, just building. Cloud providers typically offer varying levels of customer support too.
  • BothOpen source website builders provide you with a choice. Do you want to manage it on your own servers or use the provided cloud?

Open source vs. closed source

Whether or not the platform makes its code available.

  • Open source – Platforms with source code that is publicly available, allowing users to modify, customize, and distribute as needed.
  • Closed source – Limiting customization and requiring reliance on the provider for updates, support, and pricing.

By purpose

Not every website builder is created for the same use case. Most website builders have a combination of one or more of the following:

  • Page builder – Tools for visually designing web pages without coding, often using drag-and-drop interfaces.
  • Content management system (CMS) – Designed to manage and organize content, making it easy to create, edit, and publish content.
  • Ecommerce – Platforms that offer features for building and managing online stores, including product listings, shopping carts, and payment processing. While many platforms provide online store functionality, most don't specialize in it.
  • Funnel builder – Tools focused on creating sales funnels, which guide visitors through a series of steps towards a specific goal, like a purchase or sign-up.
  • Membership – Platforms that support creating and managing membership sites, allowing for user registration, subscription management, and restricted content.
  • Landing pages – Tools optimized for creating standalone web pages designed for specific marketing campaigns, often used for lead generation or product promotion.

By user type

Some platforms provide tools for specific audiences.

  • Beginners – Easy website builder with a minimal learning curve.
  • Agencies – May have features to invite clients, bill them, control permissions, etc.
  • Designers – Tools to provide designers the freedom to create what they want.
  • Technical users – Typically involve a steeper learning curve with more functionality and flexibility.
  • Enterprise solutions – Robust platforms for large-scale websites with complex needs that hold security and compliance certifications.

Pricing model

  • Free/freemium – Free website builders offer limited bandwidth and or features.
  • Subscription – Platforms that require a recurring subscription fee.
  • One-time purchase – Builders with a one-time fee.

The different types of website platforms range from highly opinionated with many abstractions (Type 1) to unopinionated with minimal abstractions (Type 3).

At Webstudio, we are building the most Type 3 platform on the market.

Get started for free!

Last 30 days

Cloudflare logo
174.2M
Requests
Cloudflare logo
19.2 TB
Data served
Github logo
26
Issues closed
Github logo
96
Merged PRs

Built to scale

Total

Webstudio logo
110.2K
Projects
Github star
6.5K
GitHub stars
Discord logo
4.3K
Discord members
Webstudio logo
66.9K
Users
globe