Creating Dynamic Pages
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 creatingdynamic 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: ADynamic Category Pageis a single page that contains all of the items you choose to display from a collection. ADynamic Item Pageis 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 andSEO. 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 theContent Managerbutton.
Wix Add Content Elements Menu
ClickAdd Content Elements, andChoose Template.
Wix Create New Page Menu
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
Wix Sidebar and Dynamic 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.
Wix Dynamic All Page Display
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
Wix Sidebar and Dynamic Item 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 theunique URLfor 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!
Wix Dynamic Item Page Display
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!
'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.'
Complete Payment to Unlock Full Guide & Source Code
You are viewing the 30% preview. Join TopCourseAI Pro to unlock the remaining 70% of this article, unblur all code snippets, and gain full access to all 412 technical projects and guides.
Ready to access the complete step-by-step tutorial?
Gain full unhindered access to all 412 technical projects and guides, unblur all source code snippets, and download runnable scripts.
Creating Custom Swag Merchandise Using Generative AI
Next BlueprintCreating a React App
Related Blueprints & Guides
View all 166 →Accessibility on the Platform
Codecademy is committed to providing a high-quality learning experience for all learners. That includes accommodating different usage forms such as auditory, motor, or visual restrictions, limited hardware, or other acce...
Web developmentAffordances, Signifiers, and Clickability
For users on the web, the mouse click is perhaps the most fundamental human-computer interaction. The webbecamethe web partially through the power ofhypertext, or text in one document that links to other documents or res...
Web developmentAuthentication and OAuth
Authenticationis the process used by applications to determine and confirm identities of users. It ensures that the correct content is shown to users. More importantly, it ensures that incorrect content is secured and u...
Ready to build production-grade AI systems?
Enjoyed this guide? Continue exploring our library of 166+ production blueprints, multi-agent swarms, and autonomous agent systems with 100% unblurred, executable source code.