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.

Adding dynamic pages

First, make sure you’ve set up a collection in the Content Manager.

You can create dynamic pages by choosing Add New Page from the Pages panel, or by opening the Content Manager panel and clicking on the Collections tab. Choose the 3 dots beside the collection you want to create dynamic pages for.

You’ll see 3 options for creating dynamic pages:

A blank dynamic page page: this creates a blank page that you design from scratch to display content from your collection. It appears in your Pages panel as "Collection Name" (First Field Name).
A dynamic item page: this option comes with some preset design elements. The content each item page displays corresponds to an item in your collection. It appears on your site's Pages panel as "Collection Name" (First Field Name).
A dynamic list page: this type of page lists all of your collection items as a menu where visitors can navigate to each item page. It appears on your site's Pages panel as "Collection Name" (All).

The Content Manager is open to the left side of the editor with the collections tab highlighted. In the collections tab we see one called Projects and a dropdown is open displaying the different options for creating dynamic pages

Designing a dynamic page

When you add dynamic pages, you only need to design the page once. Dynamic pages have the same design and layout, but display different content from each item in your collection.

When you design a blank or dynamic item page, think of each element you add as a placeholder for a corresponding field in your collection. For example, you'll probably need a text element to display the title field, an image element to display the image, etc.

A dynamic page is open in the editor with a title, body text, additional text elements and an image. The title is selected and the Connect to Data icon is blue to indicate that it is connected to a collection

Navigating between dynamic pages

When you have a dynamic page open, a dropdown bar appears at the top where you can navigate between item pages. One page is created for each item in the collection. They’ll have the same design, but different content. If you add another item to the collection a new page is automatically created.

A dynamic page is visible in the editor, and there is a dropdown open at the top of the page showing the different dynamic pages you can navigate to

Connecting elements to a collection

When you add a dynamic page, a dynamic page dataset is automatically created that’s connected to your collection. Dynamic page datasets create a unique URL for each item in a collection, and can only access one item per page.

If you use a preset, the elements will be connected automatically once the page is added. If you use a blank dynamic page, you have to connect each element to the relevant field. To do this, select the element and from the floating action bar choose Connect to Data. Choose the dynamic page dataset from the Connect a dataset dropdown, then under Connection Options connect the element to the corresponding field from the collection.

For both blank dynamic pages or dynamic item pages, you’ll need to connect any new element you add to the collection using the dataset.

A dynamic page open in the editor with a title, body text, additional text elements and an image. The title is selected and a Connect Text panel is visible showing that the title is connected to the projects dataset and to the project name field

Linking to a dynamic page

When you add a dynamic page and a unique URL is created for each item, these are stored as a new field in your collection. The URL tells the dynamic page dataset which content to retrieve. To link to dynamic pages from somewhere else on your site—like from the home page, a menu or a dynamic list page—select the element you want visitors to click on and connect it to the dynamic page.

A home page is showing a Repeater with three items. Each items has an image, text and a button that says view project. The button is selected and the Connect Repeater panel is open, where from the dropdown the click action is being connected to the Projects dynamic page

Using multiple datasets

When you create a dynamic item page, a dynamic page dataset is automatically added and only retrieves the content from one collection item per page. It can’t access content from the rest of the collection.

If you want to display certain content from other items in the collection, or content from a different collection, you can add another dataset to a dynamic page.

To add another dataset, select the element you want to connect. Click on Connect to Data, then create a new dataset. Select the properties you want and connect the elements to the relevant field.

Note: when you have multiple datasets on a page, you can filter one dataset based on the other dataset. For example, filter to show only the items with the same field type from both datasets. Learn more about how to do that here.

On a dynamic page there is a section showing related projects displayed in the repeater. There are two datasets on the page. The dataset settings for one of them is open, showing that there are two filters applied to it

Follow these steps in the editor

Open exercise template →

Connect the Repeater items on the home page. (Note: If you’ve done the exercise from the datasets lesson already, you can use that template and skip this step.) Select the Repeater and click on the Connect to Data icon. In the panel that appears, choose Create Dataset. Choose the “Projects collection” and give it a name. Connect each component: the image to the “Main Image” field, title text to the “Project Name” field and subject text to the “Project Type” field.
Add a dynamic page. Go to the Content Manager panel and open the Collections tab. Next to the “Projects” collection, click on the 3 dots and choose Add Dynamic Item Page.
Add an element. Drag a text element to the dynamic page and design it however you’d like.
Connect the text element to the collection. Click on the text element and choose Connect to Data. Connect the text element to the “Project type” field.
Link to the dynamic page. From the home page, click on the “view projects” button in the Repeater. Click on Connect to Data and under Click action connects to select the projects (project name) dynamic page.
Preview the site. From the home page click on the “view project” button. You’ll be redirected to the relevant dynamic page. Go back to the home page and try this on a different item.

Transcript

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.