Dynamic pages.

Dynamic pages are site pages that display different content while keeping the same design and layout. Any dynamic page that you add is connected to a collection in your Content Manager. You can design the page once and automatically create as many additional pages as you want by adding content to the collection.

Dynamic pages are site pages that display different content while keeping the same design and layout. Any dynamic page that you add is connected to a collection in your Content Manager. You can design the page once and automatically create as many additional pages as you want by adding content to the collection.

Let’s explore how to create dynamic pages on Editor X.


Dynamic pages are site pages that change their content but keep the same design and layout. On Editor X, any dynamic page you add is connected to a collection in the Content Manager, so you can design the page once and automatically create additional ones by adding items to the collection. They’re useful for displaying content like real estate listings, blog posts, or in this example, to showcase a project portfolio.


Let’s dive in.


On this home page we’re showing some information about our projects in a Repeater. But we have more detail about each one stored in a collection in the Content Manager, which we want to display on individual pages that visitors can click into.


Let’s take a look at the collection, which we can access here.


In this collection the data about each project is organized in rows, which are called items. Our items include the project name, a detailed description, the type of project and a gallery of images.


To display all of this content, we’ll create a dynamic page that’s connected to this collection.


There are 3 types of dynamic pages we can add: a blank one, a Dynamic Item Page that’s pre-populated with some design elements, or a Dynamic List Page to show a preview of all the items from a collection.


We’ll choose a blank page and design it ourselves.


Okay, so our dynamic page was generated. You can see from this dropdown that each item in the collection is listed and we can navigate between them here.


We can find the dynamic page–which is like the blueprint all of our item pages get their design from–in the Pages panel.


We’ll design this like any other page, the difference here is we only have to design it once and the changes we make will apply to all of the item pages. Let’s skip ahead a little…okay, we’ve created our design with placeholder content.


Next we’ll connect each element to the content in our collection with the dynamic pages dataset. This dataset—which is called “projects item”—was automatically added when we created the dynamic pages, and this is what pulls our content so it displays in the design. To learn more about datasets, check out our datasets lesson.


Each element here has a corresponding field in our content collection. So we’ll select each one and choose Connect to Data, then choose which field it connects to.


When we connect the elements, only the content from one item in the collection is displayed. That’s because a dynamic pages dataset works differently from a regular one, and in this case can only access one collection item per page.


We’ll also connect this pro gallery to the image gallery from our collection, which shows up in the dropdown as its own mini-dataset.


There’s also this “related projects” section at the bottom of the page, which we’ll come back to later.

Now we’ve got all of our elements connected. And if we click from one page to another, you’ll notice that each page is showing different content based on the collection item it’s connected to.


So how will site visitors access these pages? You can link to them from somewhere else on your site, like in this case with buttons on the home page.


If we take a look at our collection, a new field was added with a unique link for each item when we created the dynamic page. You can see the field here.


So we can connect the buttons right to the dataset. We’ll select the button, and under Connection Options we’ll connect the click action to our projects dataset.


Let’s publish the site and see how it works. On the home page, we can click into a project and on its dynamic page we’ll see all of the unique information about it. If we go back and choose another project, the page has the same design and layout, but the content is different.


Let’s take a closer look at this page URL. The URL determines which item’s data displays on the page.

The first part here is static–it’s included in the URL regardless of what content is displaying. The second part of the URL is dynamic, and this is what determines what content the dynamic page dataset receives.


We'll try the URL for another item page.


It’s the same story here—the first part of the URL is the same as the last page, but the second one identifies this unique project and only the content from this project is appearing on this page.


Let’s go back to the editor and see how else we can customize our dynamic page. We’ll head to the “related projects” section from earlier. We want this Repeater to show projects that are the same project type as the one on the current page.


This means we need to display multiple items from our collection, but we can’t use the existing dynamic page dataset because it only has access to one item at a time. So we’ll need to create another dataset that can access all the items in the projects collection. We’ll name the dataset “related projects”, and connect each item to its corresponding field.


The Repeater automatically displayed all the projects from our collection, but we want to show 3 at a time. We’ll change that in the Dataset Settings.


Different types of projects are displayed here, but let’s tailor the experience and only present the same type of projects as the one on our current page.


We can do this by adding a filter to filter out the projects that aren’t related to the one on the page.

Both datasets on this page are based off the same collection and one of the fields is “project type”. We want the project type of the related items to match the project type on the dynamic page. So we’ll choose that field, set the Condition to Is which means the fields have to match, filter it against our other dataset and choose the same field from the dynamic pages dataset.


When we apply the filter, you can see the items in the Repeater change. Any items with a different project type to the one on this page are filtered out, and only the ones with an identical project type are displayed.


You might have noticed the same page we’re on is showing up under related projects, which we don’t want. So we’ll add a second filter.


This time, we’ll choose the project name field, set the condition so it isn’t the same, choose our other dataset, and choose the project name field again so that the project in the Repeater with the same name as the page we’re on is filtered out.


Let’s preview one more time. Starting on the home page, we’ll click on a project. Everything on this dynamic page looks great, and under “related items” everything is displayed the way we want. We’ll look at another project page. This one looks perfect as well.



Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.

NEXT VIDEOS

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

VIDEO LIBRARY

Title

Learn how to add new sections, rearrange them & flip them to vertical.

Watch Now

LESSONS & EXERCISES

Title

Learn how to work with sections—the building blocks of your site.

Start Lesson

VIDEO LIBRARY

Title

Get to know where you control size, position and behavior of all elements.

Watch Now

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.

See all results ▶