Getting Started with Models
In Builder, you structure your site content with models. These can be created and edited from the models tab in your dashboard.
Builder.io has a powerful concept of model types that unlock a ton of power. Read more about the 3 main model types to know below, and see our best practices guide for ways to use these models to structure your site
Use pages to Build to manage entire pages, like:
- Content pages (about, partners, etc)
- Blog pages
- Landing pages
Use Data to control structured data like
- Navigation links
- Product information
- Blog post authors
For drag+drop page sections
For custom structured data
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
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
What is editing like for each model type?
Editing occurs between your site header and footer, and can build out the full page
Editing occurs in the part of the page you added your Builder section.
Use targeting to target different content of the section on different pages or for different users
Enter data into structured fields
Structuring your site with models
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
What is a model?
In Builder, a model represents a piece of your site that you want to update dynamically with multiple content entries via a single code installation. This is useful for use cases like targeting - e.g. having one piece of content for mobile and another for desktop. This also works well for creating dynamic landing pages, by embedding the component code one time and creating new entries targeting new URLs. Below, we will go over:
- Models & fields
- Creating a custom model
- A/B testing
- Targeting & scheduling
Models & testing
A good example of using a custom model is the page model. This generally has two custom fields. The title, which is some text you can enter for the title that when you’re using the APIs for Builder, you’ll want to take the title data attribute and insert it into the title tag for your page for SEO purposes. As well as the description field, it is up to you if you want to use that for the meta description tag. You can add your own custom fields if you want to. At the top there are some quick code previews on how to pull and use these models.
Now, if you create a new page or edit an existing page, you can view and edit these custom fields on the page. If you made any fields required, they will appear red until that field is updated. If you don’t complete the required fields, you will not be able to publish your page.
Creating a custom model
Lets go over to Shopstyle.com, and lets say they’ve already made pages in Builder, but now they want to control other areas of the website with some Builder drag and drop content to give their marketers freedom of what they want to present and how they want to do it. Let's make a new custom model. Navigate to the models page, and create a new component. Were going to call this bottom slide up. Once you create this you’ll see the documentation and how to use it. You can just pull the latest bottom slide up content by hitting the HTML API.
You can also add custom fields that your marketers could input that you might use in the API response to dictate how this displays or other options. But for now, we are going to keep this basic. Just by creating a component model you get the full drag and drop editor and all of the APIs to pull the content and the SDKs. For instance, if you’re using react, you just have to enter “<BuilderComponent name="bottom-slide-up" />” where you want the content to be displayed, and it will fetch and display.
Now that we’ve made this model, let’s create some content. Navigate back to the content section and create a new page. You will notice “bottom slide up” is now an option. Select this, and create your content and publish it.
Targeting & scheduling
We are going to use targeting and scheduling to decide which page is going to show when. For targeting, we can say anything we know about our users (e.g. locale). You can target off of anything. For our example we are going to target off of URL that starts with “/browse/men”. Now, if a user is at this URL, this slide up will appear. Lets say you want to have a slide up only appear for a certain amount of time (e.g. a one day sale), you can schedule this page for a certain date and time. Now, this slide up will only appear for the date selected.