14 of 25 - Editor X Repeaters and Hover Interactions

what's going on guys let's give a huge shout out to editor x for sponsoring this video and let's jump in 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 layouters with extra powers basically a layouter lets us create 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 slider i'm going to drag this into our section and before we stretch that out i want to change the background color alright 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 it we can stretch over to 100 of the parent container and uh let's go ahead and start swapping out those icons notice that i'm adding padding around the container instead of using margins so that i can actually see the padding added in the container 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 block 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 100 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 add panel and simply look for our repeater 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 manage items and change layout the number of items you want to display any margins or vertical margins you like to add within each one the alignment and the direction it's similar to how layouters work but it has some extra powers for example let's go ahead and change this to a slider notice we get a scroll bar it's a little hard to see these items because they share the same background color i'm going to fade this just a little bit and let's go ahead and make each one of those 33 percent 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 bar 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 alright so there's no margins anywhere let's stretch it out to 100 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 grid 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 430 pixels you can see right here that that's it it's not gonna go past 430 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 percent within the header i'm gonna 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 grid let me change the background to transparent so that it's easier to see those ghost lines 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 grid i want to make this align 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 body 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 we 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 this 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 in a 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 rows and 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 add a background of black and then change the opacity to about 45 47 we can get real creative here for example i'm adding an empty container and adding a border of opacity 50 then i'm placing the image stretched but behind the border just like that alright go ahead and open up our inspector panel and on the right we have the interaction settings let's create an on-hover interaction again you can choose from a transition that's pre-defined but in this case we're gonna go with a custom interaction okay and you have a pop-up for the timing another pop-up here for the state's interactions initial and over additional settings in our properties or attributes so we can adjust any element attributes and decide whether it's initial or on over what we really want to do is make sure we choose the hover 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 70 pixels if i open this up you can see the 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 all right the next thing is maybe we want to have that button disappear in our initial state so let's have that be at zero opacity 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 hover it's just going to reset back to its position so let's play that wow that's really nice it's very simple we just created a hover 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 zero percent opacity and then change that to a hundred percent on hover 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 hover state be on scale let's give this maybe and twenty percent on both x and y just make sure that they're both the same so it's proportionate and let's give that a try nice okay wow yeah this is looking good check it out because it's a repeater we only have to create the interactions once and i can't wait to see what you guys come up with there's a lot of cool stuff coming out soon in editor x and so hopefully what you've learned so far touches the basics of what you need to get started [Music]

Channel: Neftali Loria

Views: 616

Keywords: editor x, editor x academy, editor x course, editor x how to, editor x masterclass, editor x tutorial, learn editor x, wix, wix editor x

Id: Az6es0-huDI

Length: 10min 27sec (627 seconds)

Published: Sat Jul 31 2021