Menu
CMS is a content management system that allows you to create the content structures visually.
For instance, if you want to create a list of cards you no longer have to create each card individually, CMS allows you to create one card and multiply it with all the settings and design properties applied. After that you can connect data through the Sizze tables and change the details inside it, all the changes made in tables will appear in the art board.
On the left side bar there are two types of pages:
Pages - is the place where the static pages are stored.
CMS page - is where the dynamic pages will appear.
Try the following example with us. We will create a list of user profiles with the detail pages of the users.
1. Firstly, 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 collection table.
.png)
2. After inserting preset go to Data, click on the block on the art board, after that a 'connect table with list' button will appear on the Data section. Click on the button and you will see how the block turned into a list.
.png)
3. Now you can add content to the rows, like text, an image simply dragging them to rows.
4. You can customize the borders, padding and other design properties. In our case we added a photograph and the name of the user. You only need to add a photo and the text to one of the rows, the changes you made will automatically be applied to others.
.png)
5. Next, connect each element of the list to a table column by selecting an element from the layers panel or by double clicking on the element you need and then select a column name on the Data panel. Further, when you add additional rows through the table, the list will automatically expand on the art board, keeping all the settings of the previous list elements. The magic of the CMS is that it makes components out of the data so you won’t need to customize them every time.
6. Let’s add a button to our list, just drag it into one of the list rows and customize if necessary. After the above steps, you can make this button a functional element moving to another page using an action feature, go to ‘action' on the right sidebar of the interface, select the button and click on ‘move to cms page’.
7. As we mentioned earlier, the CMS page is a detail page that will store dynamic data, in our case, user information. The next step is to add detailed information about the user: photo, contact details, country etc.
9. After adding, connect the entered information with a column in our table. To do this, click on an element on the art board and click on the column you need.
10. Done! You now have a list of users with a detail page for each, a button that opens the detail page. Further, you can add to or modify your list by simply adding new columns to the table.
