Hey, it's Ethan from Wix Studio. Let's talk about how to use the CMS—I'll walk you through setting up collections, adding content, and making dynamic pages.
We're building a site with a fold connected to the CMS that showcases all the projects from a collection. Each project links to its own page, thanks to dynamic pages. You can see that it's the same design for each page, and as I browse through items, the content updates automatically.
The content we’ll be working with comes straight from the collection. A content collection is like a database that stores and manages site content connected to your design. Imagine it’s a spreadsheet, with columns for different content types (like text and images) and rows for each item.
Now we can get started.
Here's the homepage, and this is where I'll show off my projects. It's set up with a repeater, but we haven't added the content yet—that's coming up with the CMS. So first, let's add the CMS to our site.
Once we've added the CMS, you can either kick things off with a preset such as team, projects and more, which include a collection and dynamic pages.
or, you can create your own collection.
You have some more options here: create a collection using AI, import a CSV, or start from scratch. For today's example, let's start from scratch.
Let's go ahead and name our collection 'Projects'
Next up, we'll add content fields needed for each project, like text for the description and an image field for the cover image. This sets up the structure for our collection. I'll also add a few more fields to make sure we have all the info we need for each project.
Now that the structure is ready, I'll add content and images for each project.
Each row is an item. I can always come back to this collection to add new items or update existing content whenever needed.
My projects collection is good to go. I want each project to have its own page on my site, and we'll connect those now.
so let's add a dynamic page from the CMS tab from the chosen collection.
There are a few types to pick from. There's the item page, which comes with some layout options, or, I can design it from scratch and connect it myself.
Let's go with the item page.
A dynamic page is a type of web page created to display content from a CMS collection. They allow you to create websites that can efficiently handle a large amount of content while maintaining a consistent design and user experience.
With dynamic pages, I just design the project page once, and it automatically creates a new page for each item in my collection. The dynamic item page auto-connects to your collection fields. You can display more fields, design your page, and link them to the right spots.
For example, I want to have another textbox to include the collaborators that worked on this project. So i’ll add the element here—
and then i’ll head over to my CMS, add another field that I’ll call “Collaborator” and fill in the data.
Next, to connect the text box to the new field, we’ll use the Connection tab in the Properties panel.
The other two text elements are already linked to their corresponding collection fields using the dataset. This dataset was added when we created the dynamic page, and it connects the stored content in the collection to the page elements.
The image is also linked to its relevant field. Each element can be connected to its matching field type in the collection, so image fields show up, while others are kept disabled.
My dynamic item page now showcases individual projects. Each item in the collection becomes its own page so when I use the floating bar I can navigate between them and the content will update accordingly. If I add more items to the collection, they’ll appear here.
Now, I need a spot where all my projects can be showcased, so I can link to their pages.
This section should feature all the projects. Right now, we've got a repeater set up in the homepage, but it doesn't have any content yet.
I want to show content from the collection, so I'll connect the repeater to a dataset. I'll select the repeater, click 'Connect,' and choose 'Add a Dataset.' I'll link it to the 'Projects' collection, call it Projects, and create it.
Cool, it’s connected. The amount of items have updated. Now I’ll connect each repeater element to the collection fields, starting with linking the title to this text field—all the items are updated. I’ll continue connecting the rest of the elements to the relevant fields.
Looks great. Now we'll link the button to the dynamic page. It'll automatically connect to the right dynamic page, so clicking an item takes you to the page with all the relevant content. When connecting the button to the dataset, be sure to use the action connections, not the link panel on the button itself.
From the dataset settings, you can control filtering, sorting, as well as the number of items displayed in the repeater from the dataset settings.
Time to preview the site! Everything's displaying correctly, and clicking each item takes me to the right page. With CMS collections, dynamic pages, and datasets, you have endless possibilities to create the logic you want.
Lastly, the entry points to the CMS are pretty simple. You can access your collection from right here in the Editor, or you can also access your CMS collections straight from the dashboard without jumping into the Editor—this comes in handy when working with collaborators and clients.
Either way, any updates to your website content happen automatically. Pretty cool, right?
To learn more about what you can do with Wix Studio, check out the Wix Studio Academy.
