KreativePro Masterclass
Hello, {first_name}
Create & Sync Data
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.


Import, Create and Sync Data with Editor X

In this lesson, we learn how to import, create and sync data 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

Hey guys. Now that we've seen the content manager interface, we're ready to start creating our data for our homepage slider. The first thing is I'm going to want a description of course, and a summary. So we, we're gonna first need a couple of titles. I'm going to create these ones pretty quickly here.

First one is movies. You're going to need games for now. I'm going to keep this summary empty. The next field type that we want is an image. So we're going to need a cover. Poster of some sort, we're going to create that as the field type image. Pretty simple. If, you know, if you remember the design that we have, we created this really cool number system.

So that's 1, 2, 3, 4, 5. So that would be, just be the order of how we're going to sort them by. We can change this field type to a number. And then finally, we're going to create a couple of fields, one for the URL so that we know. Where we're going to send this to. And also if we're going to have a button we're going to need to create the label.

So the label could be something like button label. Very, very simple. This is just a text field. It's not sensitive data. So we can just leave that. All right. And so now that we have that in there, we can start adding the content of course, and uploading every single image. Again, if you remember, I've already uploaded these images here.

So for example, this, for the movie, we can swap that out here. The order would just be like this 1, 2, 3, and then we have number five. We can sort these by, uh, if we want it by the field types or order them like this. So from low to high, now we have movies. First games. Let's go ahead and add the images for each one.

This would be games. Now doing this will take some time. So what I recommend you guys do, if you're working off a different database and you need to import the content over into our, into our page, what you could do instead is basically remove all these fields. And instead, what I'm going to do is I'm going to click on this three dots and I'm going to import items from a CSV file.

And this is where we want to map out each field to the data that's found on the CSV. It's actually really simple. All you have to do. Select the image, make sure that that is mapping out to the correct, uh, field. In this case, its image. You can see some examples. That your house is empty, but the button labels are pretty good.

So let's click next. It's just going to show us a little quick preview, making sure that everything looks good. Okay. And then we click import. There we go. So now we have the data correctly mapped to each of the fields in our content manager. Alright. And so what we want to do is now connect or sync this.

With our slider. And in order to do that, we need to head over to our design. And because this is already a repeater, all we really have to do is sync that repeater to that content. But the way this works is using a sort of like a bridge. This bridge is called a dataset. If we go over to our content manager under the add content elements, we can.

Grab the dataset. It's going to act as that little bridge between what we have here as a repeater with, uh, our content going to stick around with you as you scroll down. But this data set is not configured yet. So as you can see how I'm kind of moving this. Let me just zoom out here just a little bit.

And, uh, there, we, we have a little bit more space to play with from here. We can decide how we're going to connect this to that. The Peter, did you click under settings? It's going to ask, what collection do you want to use on this data set. We're going to go ahead and select featured column. We're going to call it.

I don't know. We can even call it like bridge one if we want it to. Uh, but in this case, just call it featured for the simplicity of it. The mode is going to be read only meaning we're only going to pull this data and display, so we're not gonna actually connect, uh, submit any content to that collection.

It's just gonna. Read it and then displayed the number of items we want to display. So let's just keep that to 12th and it gives us a couple of options to filter and sort, now let's not worry about this yet. Let's just make sure that we have this dataset connected to this repeater. All right. So now that we have that set up, we want to.

Our actual repeater element, then selecting the repeater. We can manage the items or simply use this little icon here to connect to data. And what that's going to do, it's going to open up a kind of a tool. That's going to show up what data set do we want to connect this repeater to? And because we've already dropped in our data set.

We can select the featured, which is the name that we gave to this dataset. And then we can choose right from here. What are the components? What are the actual layers in our card that we want to connect to? Now we can go one by one basically, and using this little icon, we can connect this field to a specific data, right?

So for example, connect this to a feature data set, and then the text. We can choose from any of the elements studies in our collection. We're going to use the number in our collection list. When you connect any element to the dataset. It's not really going to show right away what the content is unless we click preview.

But one thing I really like about editor X is that they basically let you select the, the repeater itself. So for example, if I change, if I click on the report, Then look at the connection items. I don't have to go one by one. I can do it all entirely from here. So that's really neat. I can go in here and select the image that I want to use.

In this case. I'm going to use the image collection field. You can decide what out text to use in this case. I'm going to use the title. We're going to go back to our connection. Okay for the button again, this button has both the label and the action. So what we want to do is select the URL and then the label is going to be the button label.

It's very simple. And again, this text will be the summary, the actual summary that we need to connect it to. Just like that. There we go. So now, if we preview this design, thanks to the dataset that we created, all the content that we're pulling is now pulled from our data base, which is really cool. So you can see here, you have the image, you have the title, the summary.

And all the buttons have their own unique label, which is awesome. This is exactly what we're trying to do. And I'm really excited about the possibilities that we can do with this amazing content management system. This makes sense, and we can start applying it in more advanced scenarios. So let's jump to our next lesson and talk about.

Dynamic pages. I'll see you there.

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...