Creating Dynamic Pages
What are Dynamic Pages?
Collections are tools to help you store information that you would want to use on your website. You’ve seen that you can use collections to create a dataset that directly interacts with page elements.
Understanding how page elements, datasets, and collections work together, is also helpful information to have when creating dynamic pages. Dynamic pages allow you to use a single design layout to create multiple pages, each displaying an item from your collection.
The two key components that make up dynamic pages are: A Dynamic Category Page is a single page that contains all of the items you choose to display from a collection. A Dynamic Item Page is a single page for each individual item on the dynamic category page.
Dynamic pages are great because they automatically handle a lot of things for you. For instance: Each item gets its own URL and SEO. If an item is modified in the collection, it will be modified on the page after refreshing. If an item is added to the collection, a new item page is added. If an item is deleted from collection, the corresponding item page is also deleted. If the design is changed on one page, it is changed on all of the pages.
Set up
Creating a dynamic page can be done through the Content Manager button.
Click Add Content Elements, and Choose Template.
A menu titled “Create a New Page” will open, where you can choose a template for the dynamic pages you’ll be creating. This window is split into two sections, “Your Content” and “Templates”. The examples that follow will be based on a “Bikes” collection. After selecting the correct collection and waiting for Wix to create your dynamic pages you should see two new pages. In your Site Structure sidebar, there is a dynamic category (All) page and a dynamic item (Title) page.
Dynamic Category (All) Page
The first new page is the dynamic category (All) page. The “(All)” signifies that this page shows multiple items from your collection. Navigate to the page by clicking on the name in the sidebar. Notice that there is a dataset and a repeat element, with other elements inside, already generated for you. If you click on the repeater element, you’ll see that it, and the items in it, are already connected to data from your collection! This is the magic of dynamic pages. Preview the page to see this wizardry in action.
The repeater displays images from the Image field, and the titles from the Title field of your collection. You can also add new elements and connect them to additional fields in your collection later down the line. But what about the “More” button? This is a link that is automatically generated to take the user to a dynamic item page with more specific item details.
Dynamic Item (Title) Page
The second new page in your Site Structure sidebar is the dynamic item (Title) page. The “(Title)” signifies that this page shows a single item, based on the “Title” field from the collection. This can change to any other field in your collection, and will be used in the unique URL for that particular item.
Like the dynamic category page, the dynamic item page is already connected to data. You have the ability to make changes on a single item page that will carry over to the rest of the item pages. For example: Changing the design of one page will change the design of all the pages. The addition of a new element can be connected to the dataset, and will appear on each item page with its own related data.
This is the magic of dynamic item pages! Preview a page to see the content from your collection. You can see how an entire page dedicated to an item can be useful when presenting large amounts of information. And having design consistency between the pages is icing on the cake!
Wrap Up
With dynamic pages, you’re able to highlight your collection much faster than if you were to try to do everything individually. This time saving measure also helps you in the long run as you continue to add more and more items to your collection — you don’t have to worry about having to manually add items, dynamic pages do it for you. Try out dynamic pages in your own Wix sites and enjoy the benefits of being able to share your content without worrying about the set up or maintenance!
Author
'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'
Meet the full teamRelated articles
- Article
Connecting Page Elements to a Dataset
In Wix, you can display and gather content with page elements and datasets. When these items are in place, you can easily make the connection between your database and the pages on your site. - Article
Dataset Basics
Wix has a database built into the editor that allows you to store data, and use it to display content. They’ve made the challenging part of database management a breeze with their Content Manager, collections, and datasets.
Learn more on Codecademy
- Free course
Create a Professional Website with Velo by Wix
From beginners to experienced web developers, Wix offers a wide range of solutions to quickly create a website that you can proudly share.Beginner Friendly17 hours - Free course
Velo by Wix: Working with Data
Work with JavaScript collection types, arrays and objects and incorporate these skills into Velo.Beginner Friendly6 hours