Create A New Content Model

Once you have Content Model Builder enabled, you can create a new content model from there.

Click button "Create Definition" near the top left:

Then give your content type a name in the pop up modal:

Hit "Create" and you can find the new content model in the list. Click into it to make it more interesting with the Content Model Builder:

As you can see in the above image, there are two tabs -- "UI" and "JSON". CloudCMS provides you with two ways to build a content type builder. If you are an editor and fancy building it with simple actions like drag and drop, UI builder is for you; if you are a developer and enjoy the flexibility to just code it out yourself, go ahead and switch to "JSON" tab.

On the top right, there are two buttons -- "Preview" and "Save". It's always nice to see what the content model is eventually going to look like while you are building it, and "Preview" lets you do that. "Save", as it indicates, will save all the changes you've made for this content model. Note: You do NOT need to save to preview.

Build with UI

In the left side nav, you can see a list of pre-defined Field Templates. Each template has a simple description of it so that you can determine which is the right one to meet your need. Then, simply drag and drop the template from the left nav to the white area:

You will be asked for a unique name for this new field. Put it in and hit "Done".

After giving your new field a name, a "Configuration" section shows up on the right. Here you can customize the field with configurations on multiple factors. "Configuration" also differs between different Field Templates.

If you leave the configuration form empty, you will get a very basic field (hit "Preview" to have a glance):

After dragging in a "Content" field template and configure both field, now hit "Preview" and the content Model looks more interesting:

Once you are happy with the way it looks, hit "Save" to save all the efforts.

By the way, while you are modifying the UI but just wondering what's going on in "JSON", feel free to switch to "JSON" tab and you will be able to see all the changes you made in the UI are reflected here:

Build with JSON

In the picture above, there are two JSON editors -- "Definition" and "Form". The convention here follows Alpaca Forms documentation.

Notice that there's an "Apply" button. After a little bit of messing around in the JSON editors, if you hope to discard all the changes, there's no need of an action. If you hope to see what it's like in UI or to Preview it, hit the "Apply" button first to apply the changes in JSON editors.

Then switch back to UI and you can see:

Or hit Preview and you can see:

Then if you are really happy with it, hit "Save" to actually save the changes.