In this lesson, we create a slider with custom hover interactions and the power of Editor X repeaters.
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.
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!
Let's focus on building out the movies and games section using the power of repeaters. Remember, this lesson is part of the third module and it's all about getting our hands dirty with editor X, looking back at our wireframe that we created in Figma. We created a slider for the movies and games. So these are kind of like cards that can scroll with our mouse.
And what we want to do is take a look at creating this with dynamic data as well. In editor X, we can do that using repeaters, and you can think of repeaters like layout errors with extra power. Basically a layout or lets us straight rows columns and even sliders. But with repeaters, we can inject real dynamic data from our content management system.
Before we go and do that though, we need to make sure that we have a new section created. So go ahead and add a grid so we can play around with both the header and the actual. Going to drag this into our section. And before we stretch that out, I want to change the background color. All right. So check this out.
Let's change this background to black. And before we stretch everything out, I'm going to select the section and give it a little bit of padding. Just like that. Now, if I stretch the grid, now I've created this really cool border around it. Like we did with the hero. We want to make sure we continue that consistency across the layout.
The next thing I want to do is take care of that header of this section, the header. We want to create an empty box where we can start dumping or dragging. The title, a little summary and maybe an icon. And again, you can see here that once you've stretched an element, you can't really change the values. I want to take advantage of things that I've already done previously in my design.
So let's go ahead and copy this stack that we created and let's go and paste it in our new container. Make sure that we align it to the top left. And the moment we start changing some of the margins, it starts detecting that we can style this to be a little bit different, so that at least we can read the text.
We might change this later. So don't worry about. We can stretch over to a hundred percent of the parent container. And let's go ahead and start swapping out those icons.
I'm adding panning around the container instead of using Martins so that I can actually see the padding added in the country.
I want to make sure we give enough space in our second row of our grid. So by clicking settings, let's make sure that the minimum height is 500 pixels and go ahead and drop in a box or a container within this. This is going to hold our repeater, this box. I'm going to give it a minimum of 500 pixels and make sure that there's no top margins or right margins.
Let's give it a hundred percent width. Now for the purpose of this demo, I'm going to just change the background to give a little bit of contrast. We can open up our ad panel and simply look for our record. There we go. If we use our breadcrumbs to select the actual repeater, because remember every repeater has items within it, we can see a set of options.
We have managed items and change layout, the number of items who want to display any margins or vertical margins select to add within each one, the alignment and the direction.
It's similar to how lasers work, but it has some extra powers. For example, let's go ahead and change this to a slider note. As we get a scroll bar, it's a little hard to see this items because they share the same background color. I'm going to feed this just a little bit and let's go ahead and make each one of those 33%.
Go ahead and open our configurations. And you'll notice we have the option to add additional margin between each item. You even have an option to show or hide the scroll. You'll see that each item is there. If we change the minimum height of each of one of these, maybe let's make them 500 and I'm going to make sure that this whole repeater is aligned to the top and to the left.
All right. So there's no margins anywhere. That's stretch it out to a hundred percent so that it's always going to have those three items expand to whatever the parents with is within each card. I'm going to apply a. I want to create a custom one because the way I want to design this is by having both a top section and then a body section within this card.
So let's say for example, I made this card for 130 pixels. You can see right here. But that's it. It's not going to go past four 30. And if I adjust the grid, everything is using fraction unit. I'm just going to focus on the middle one, which we can give 80% within the header. I'm going to need at least 170 pixels.
And then we can give 330 for the body just like that. So this is starting to look good. Notice how every item is now repeating what I've done in the first grade. Let me change the background to transparent so that it's easier to see those ghosts. This is where it gets exciting with repeaters. Let's go ahead and add a title and notice how, as I drag this title across different areas of our item, the other ones are also going to follow along.
For example, in that top header of our. I want to make this allowing to the bottom. So I'm docking it all the way to the bottom and I'm going to change the text style. Okay. There we go. For the rest of the items, you can just change them to whatever. Don't worry about that yet. We're going to change that with dynamic content later, we're going to do the same thing with the bottom.
We're duplicating all the elements and just styling them, making sure that we have them all stacked, real nice. We can start removing some of these items using the manage items, menu, and if we want it, we don't have to connect it to real data. We can create as many items as for need, manually change the text.
And it's just a way for us to see and test out the slider functionality. Go ahead and preview. There we go. And if we scroll to the right, we can see how nice this looks to finish this up. Guys, let's add any background image. And what we want to do is make sure we stretch this image all the way, and we want to make sure that we stretch it out within all the different roles.
In columns just like that. And we can change these images to the ones we already exported from Figma, but let's make sure that the text is readable. So let's select the image out of background of black and then change the opacity to about 45, 40 7%. We can get real creative here. For example, I'm adding an empty container and adding a border of capacity 50%, then I'm placing the image stretched, but behind the border, Just like that.
Alright, go ahead. Ahead and open up our inspector panel and on the right, we have the interaction settings. Let's create an on over interaction. Again, you can choose from a transition that's predefined, but in this case, we're going to go with a custom interaction. Okay. And, uh, you have a pop-up for the timing.
Another pop-up here for the states and tracks. Initial and Hovar additional settings in our properties or attributes, so we can adjust any element attributes and decide whether it's initial or on Homer. What we really want to do is make sure we choose the Homer state because we want this element to move down on over.
So as soon as I do that, it automatically created a timing entry. And so you can see here, my translation in the y-axis is at 76. If I opened this up, you can see that duration that it takes for it to move to that spot. And then any easing that we would like to have as it's moving down, right. This thing is maybe we want to have that button disappear in our initial state.
So let's have that be at zero Pasadena.
And then we can choose the entire stack that contains both the title and description. And in our initial window, we can actually translate or move this to 50 pixel value. So it's moving it downward. And then on hoever, it's just going to reset back to its position. So let's play that. That's really nice.
It's very simple. We just created a Hoover interaction. Like I mentioned earlier, guys, you can get really creative for example, on the layers panel, the border that we mentioned earlier, I can actually set that border for it to have an initial state, to be at 0% opacity and then change that to a hundred percent on that.
And, you know, it's just the very subtle stuff, but we can add into this. For example, the last thing I'd like to do is make the image actually grow into place. So maybe we can have the whole real estate be on sale. Let's give this maybe 120% on both X and Y just make sure that they're both the same. So it's proportionate and let's give it a try.
Nice. Okay. Wow. Yeah, this is looking good. Check it out because it's a repeater. We only had to create the interactions once and I can't wait to see when you guys come on. There's a lot of cool stuff coming out soon and editor X. And so hopefully what you've learned so far touches the basics of what you need to get stuff.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS