KreativePro Masterclass
Hello, {first_name}
Dynamic Pages
Learn to Build Websites with Editor X
Oops! Something went wrong while submitting the form.
Browse Lessons

Access our premium community including bonus tutorials, project files & weekly resources.


Editor X Dynamic Pages

In this lesson, we dive deep into dynamic pages with Editor X.

Try out Editor X for FREE


Being the best means investing in the best, no matter what level you are at, this course will take you through the entire process you need to be able to implement an idea and turn it into a fully functional business.
Manasés Padilla
Photographer & Entrepreneur
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
Noel Hale
Founder of Slush Monkeys®
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
Mae Green
Product Designer @ Dropbox

I'd like to do is create the dynamic pages, but in order to do that, we need to have the content that we're going to play with. For example, Uh, collection, uh, create a collection called movies or catalog, and this movie's content is going to be just site content. We're just going to keep it like this.

We're eventually going to do games and TV shows and all that. But for the purposes of this lesson, I want to just keep it simple. When we create this, I'm going to import data that I've already collected from a CSB. So we're going to do the same thing here, import from a file. Okay, this looks good. All right.

So now that we have both casts and generous, we need to start creating references to these movies. So let's go ahead and add a new, uh, field. New field type. This field type is going to be for the cast members and we're going to create a multi reference. We're going to choose the multi reference fields to look for.

Past saved that. Hey, and we want to do the same thing for genera now, genera, we don't need to do a multi reference. Just be a regular reference because we can only choose one right here. Save. There we go. So we have two types of multi reference fields. That we can start using right here. We can even move these.

I think we can move these over so that they are more accessible, right? It's fun. Same here. We can move the genera all the way over here. Cover the year. Okay. And then for the cast members

and this starting to look good, we start doing that eventually with all of our database for collecting and relating all these other collections over into our primary movies. Okay. So once that's done what I'd like to do. Is create a new page based on, or create a new dynamic page. If we can head over to our site pages, if we click add new page, we can select dynamic page.

Let's go ahead and add a page based on our collections. We have different templates, but I interested in your collection and we're going to do that with this one, which is movies. So what this is going to do, it's at interacts. It's going to create. The title and the listings view, and it's going to pull everything for us together.

Notice here we have dynamic all. So all of our images, all of our movies are being displayed really nice, of course, because this is a repeater. We can start customizing. All these buttons or the layout and design we can of course bring in our, our masters in here. So for example, we can show this on the page.

We can show the footer and all we'd really have to do is customize the background color.

So I've went ahead and customize both the movies, all page and the movies, title page. Again, you're going to see here. Very simple things that I did. I added space for the title of the movie, the year, the cover. We have a little bit of text for the summary. I went ahead and also created another repeater. So this is a repeater with.

The actual movie page and what school here is that we can connect this to a data set, which I have right here that will pull the cast members that are related to this particular movie. So it's actually really simple. All we have to do is make sure we have a repeat. And here I have like the cover for the actor, the label, and notice that if I select the connection icon, I can pull up here what data set it's being used.

So it's just basically pulling the data from the collection cap. You can see here, I gave it a name it's a read only, and I'm limiting it to only six items. And here's where it gets interesting on the filters within filters. We have a filter for us to make sure that it only shows if the cast member is part of the actual movie item.

Now this movie item is the data set. It's color. It's now talking to another data set so you can see here. I have another data set. This data set is taking care of all the content for this particular movie. So movies item, and they can talk to each other using those filters. And you can see here, the filter is actually making sure that the cast member, the cast listing that it's going to display.

It's only going to show if it matches is the current movie item dataset. And that's it. Once you preview this and let's say we. Go to one of our movies, for example, Lord of the rings. Yeah, there we go. So we have here the title of the movie, a couple of buttons. And then if we scroll down, we have a repeater that it's only pulling the actors from our database.

We also have a couple of buttons and these buttons are basically going to be our pageant. So by simply using the connect icon, we can have an action so that it can go to the next dynamic page. And the same goes with the previous dynamic page. So whenever you're creating buttons that need to link out, you don't use this link icon.

You use the connector icon. You can create a proper action. To another dynamic page. So what I mean by that is if we head over to our movies, all page, you'll notice here. What I've created is just the side section. So a vertical section that contains a repeater of all our generous that has this style. And I've connected this with the dataset generous.

So over here, it's all it's doing is pulling all the generous. There's no filters. There's no sorting at all. It's just pulling the data and then dumping it here for us to use. We're going to see that it's asking, where do we want to look? Out for what is the action when you click this button? So basically we want to make sure that when they click it, it takes us to debt dynamic page, pretty simple, right?

And the same goes with the listings of movies here. I have a repeater it's just creating a grid of all the movies, and we're basically making sure that all the elements here on the cover, the title of the. Are all connected correctly to this data set and under settings, I have up to 40 display items at read only.

So in this case, I'm going to list out all the movies based on the year, and then making sure that they all start from C to a, and because these are numbers, this will show the movies for, from the newest to the oldest. So this looks pretty good. We have all the generous that we have created, right. They are all linking out to their own dynamic page.

And here we have the boobies you can see here. It's very simple. We have the movies based on the year. So the latest one, and if you click on any of these, it will automatically take us to that dynamic. That we have created. So right here, you can also use this little floating navigation system to browse between each movie, just to make sure that you have all the correct, um, data going through, or you can skip just by using the dropdown directly.

So I think that's pretty handy now for the actual generous paint. So if we hit over here to the dynamic page, we created four generous. It's basically grabbing the same design from all of the movies listings. And the only difference here is that we're creating a different type of, of dataset, right? We're creating a data set for the generous items.

So here, this, this title is no longer browse on movies. It's actually pulling from that dataset generous item. And then for generous lists, we still need that for the, you know, for the menu on the left nav bar. And then for the movies, we're actually going to filter that all the movies that we're going to show here are filtered by the current generous items.

So if we click on their settings, we can see here that the filter itself. So anything that matches the current genera, it's gonna appear on our, on our page, on this dynamic page. So check this out.

Okay. We have a beautiful database running entirely with the power of editor X. All right. I think we have enough and we're ready to go to our next lesson and learn about collecting data from the. Let's check it out.

Coming Soon

Editor X
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor
KreativePro Masterclass Bundle

Access our premium community including bonus tutorials, project files & weekly resources.

Welcome to the Tribe! 💜 Something cool is coming your way...