Resources

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

☰

Home

Forum

Blog

Github

Login

Signup

Made in Builder

Getting Started with Builder

Builder.io can be customized to meet all kinds of needs, from simple headless data models to full on landing page building. You can choose to allow complete free-form control of Builder.io content or limit it to your design system components.

Icon for Next.js

Try our Next.js starter

For the easiest getting started path, try our Next.js starter with step by step instructions

Landing pages quick start

Adding landing page building support is one of the easiest ways to unlock a ton of power out of Builder. You can allow users to create new pages with unique URLs for anything they need.

In this quick start example, we will set up freeform landing page building for any site with just a few lines of code.

When a request to your site comes to a URL you don't otherwise have a route for, make a request to Builder's HTML API (or use a framework-specific SDK, such as React, Next.js, Gatsby, Angular, etc) passing in the requested URL and your API key.

If Builder matches a page for this URL, return the page contents between your header and footer. Otherwise, send (or redirect to) your 404 page.

All Builder spaces have a built in "page" model that we will use in the examples below.

Next, you'll need to setup your page model's preview URL to point to your localhost (and when deployed update to your live or QA site) for on-site previewing and editing

And that's it!

You've just added the ability to create custom landing pages to your site. See this guide to extend this example for SEO optimizing your landing pages by requiring custom titles, descriptions, and other meta info.

You can do a ton more with Builder.io than just landing pages. See our guide on creating custom models to learn how to use Builder.io on any page using component models, data models, or a number of other advanced techniques.

Featured Tutorials

Creating a site-wide ribbon

Creating a blog with Builder and React

Creating a landing page in Builder

Builder content model types

It's important to understand that Builder supports three main model types:

Use pages to Build to manage entire pages, like:

  • Homepage
  • Content pages (about, partners, etc)
  • Blog pages
  • Landing pages

Use Sections to Build and parts around your site or app

  • Announcement bars
  • Product editorial
  • Collection heros
  • Cart upsells

Use targeting to show different content on different pages and to different users

Use Data to control structured data like

  • Navigation links
  • Product information
  • Blog post authors

Usage

Models represent areas of your site. They could represent a type of page, a section of a page, or data to load into your pages.To create a model, head over to builder.io/models and hit + New Model . You can also create custom fields for any page type to add additional data to render (such as SEO and meta tags) or for custom queries using our APIs.

Below are the three model types:

Page models

For drag+drop full pages

Section models

For drag+drop page sections

Data models

For custom structured data

Page models

Page models are great for building custom pages. They require a URL to be chosen for each page and allow drag+drop editing using the standard components as well as your custom components. By default pages are chosen by their chosen URL via targeting

Every Builder space comes default with one page model - which is all most need. You can customize this model with custom fields too, for instance for meta tags.

You can also create custom page models too, for instance if some pages on your site should have different settings. For instance at Builder.io, we have a page model for landing pages, as well as a separate page model for our docs (like the one you are reading now!) that have some different required fields

Structuring your site

One of the easiest ways to get started is to add landing page building to your site. Once you have that, you can start adding editable sections across your site, and use targeting to choose the right content for the right users

Here are some examples we recommend for how to structure various pages on your site

Additional framework support:

Was this article helpful?