Academy
CMS Collections

CMS Collections

CMS is a content management system that allows you to create the content structures visually. CMS allows you to create a card and multiply it with all the settings and design properties applied. After that you can connect data through Sizze tables or Google Sheets. If you want to enrich your app with great content, please take a look at the tutorials below.

Summary

Hello Sizziers, the given tutorials will help you to obtain the basic knowledge on the CMS list and its functions!

Here's the wrap up of the videos for your convenience:

First, go to the presets tab on the left side bar - choose CMS preset, it will insert a block that you need to connect with a table.

Next we click on the CMS block on the art board, go to the data tab in the right menu and click on a create a collection button, it will create a collection and connect it with the table.

Now we can work with the collection. We nest elements in one of the inner blocks of the collection. You can nest text, images, or frames into a collection.

Let's start designing our collection. You can adjust padding, change color, and apply other properties in the design panel.

After we set up our collection, we go data and set up the first column. The first column we have is a text column, and we set properties for it, in our case, headings.

Now let's bind the text to the table. In the same way, you need to bind each item in the collection to the corresponding column in the table. After binding, the changes made to the table will appear in your collection on the art board.

For example, we will create an additional text column to link data to the design. Next, we fill in the cells in the table, select the text layer and connect it to the corresponding column of the table by clicking on the radio button with the name of the column.

We create another column for images, so we select images in the column type. Next, we expand our table and upload the images in accordance with the name. And by the same analogy, we bind it to the column.

Our main collection of cards is ready, now we can create one detailed page whose properties will be applied automatically to all pages. The detail page must be created in CMS Pages as it is dynamic.

After we have created a detailed page, we can apply the feature of switching from a static page to a dynamic one through an action. This transition feature applies to the entire collection at once. 

To do this, we select the card frame and click on the action and select the move to cms page action type, and then click on add action button.

You can view the detailed pages by switching the rows in the collections tab.

Great job, we created a collection of cards with a transition to a detailed page using CMS Preset. For all questions, write to us at support@sizze.io or study our documentation, you will find all links in the description.

Get started

Related courses

2 videos • Begginer

Figma connection

View
15 videos • Advanced

Presets

View
8 videos • Begginer

Publishing to Stores

View