In this lesson, we'll take a look at the power behind Editor X layouters.
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!
We're going to build out our features section and we're going to do that. Using the power of grids and lay out lay owners are pretty cool. Let me show you. If we go to our quick add panel, under layout tools, we see a category of layout where we can choose from a predefined template. Yeah.
For example, we can use this one, which has a three layout grid. You can see here, it added a new section for us, and it's similar to our design and Figma. So all we really need to do is start customizing. We see the layers has a container for the title, a stack for the summary and even a button. Why don't we go ahead and add in our own button that we have in our design library.
So right under design libraries, if you remember, we had added a simple button for us to repurpose. Let's go ahead and change this to movies and games and expanded just a little bit so that it fits. In our texts. We want to simply change this to stream VR network, which is just a subtitle. We can customize the text, also using the little editing pop-up for example, here, I'd like to change this to a heading three or maybe heading two, so that it really.
And don't worry about the sizing yet. That's adding some character spaces.
What we want to do is because this is part of a stack we can play around with the size. Let's make sure this is a hundred percent. And also the actual stack itself, we can make it at 75%. Notice how that one is a little bit bigger than the summary. So let's do the same thing here, 75% from the summary and make sure that the docking is top and left and the margin is always the same.
So this should be 10%. And this one also should be at 10. Now what's happening. It's not taking it because it's not documented. As soon as we dock it to the left and change the margin, it's going to match the summary for summary. Let's clean this up a little bit. That's changed the paragraph to one it's a little bit bigger, which I like, and it's removed this excess.
Okay. This looks good. Now for the image on the right, we can browse our library. We're looking for a portrait photos so that it matches nice. And
yeah, this one looks pretty good. There we go. So if we preview this, Hmm, yeah, this is looking good. And I think we can, I think the only thing we need to change is the margin in that features title. It seems that there's a gap and that happens sometimes with fonts that you import they're not properly designed for web.
So all we got to do is select the actual title and add in some negative margins.
Let's just add five more. Yeah. Okay. That's much better. Now we can see how the VR hens are sitting behind. So if we open up our layer section, let's quickly rename this to features. And if we start moving these sections up and down, the only thing we're changing is the hierarchy, but we're not changing the arrangement or order.
We need to send this feature section all the way to the back. That way, the section above it will be able to overlap on top, just like this. All right. So what I'd like to show you guys, is that when you work with grids or layouts, You have several options. Now, if you notice this image is extending all the way to the bottom again, because this is a grid we can have elements extend across.
So let's go ahead and open up the gray area. And while I'm selecting this image, I can change the row start and end point. And notice how it starts from the second column to the third column. You can play around with this as much as you want. What I want to do is add in that parallax effect again, into this image and let's click preview.
So now we have this beautiful effect, including these floating elements, making this design feel fresh and modern. All right, guys, let's go ahead and play with more layouts. We can go in here and simply adding a layout or a mosaic, it's going to simply fall on top of our current section. So the best way to do this.
And instead, just simply select the little blue icon in the bottom. We add in a layout or, and from there we can choose what type of layout or we want either our Messiah or a three grid or four grid. We can play around with this layout. By simply using this plus icon to increase the size of each column.
And editor X will basically take care of the Masonic design, which is really, really useful. If we click on change layouts, we get a pop-up with some settings, we can change two rows or change the columns. You can always change the sizing using this little plus and minus icons on each individual block.
Every block behaves like its own container. So you can see. We can apply a grid. If you think it makes sense in your design, you can also remove them by simply deleting the blocks or by right clicking and adding additional items into your layout. One thing I want to do is make sure we have zero margins on our settings.
The reason why it's, because it's easier for me to explain how layout or work. So for now, I'm just going to change some colors. And I'm going to add in a couple of numbers here so that you get a better idea of how this really works. No matter what size you have on each one of these, you can always click the equalized button to have them match the same size or fit within the same container.
So for example, here, each one of these is 25%, but if it gives a hundred percent to the final fourth, right? The rest of the items will equalize the width to match the mosaic design that we've chosen over here. We can change the direction of the flow of how these items behave. Once you feel good about the design, you can start adding margins back so that you can get a better sense of separation from each of these blocks.
I'm going to go ahead and quickly modify the container of this element into a real content. Okay. So for example, here, I'm going to change to our real title. I'm going to go ahead and add in it. Yeah.
Important thing here. I want to show you is when you put in any element within these blocks, you can play with margins, all you want, but at the end of the day, you want to make a solid foundation for your website. So if we select our parent block, Maybe start adding some padding on the top and left making sure that the content wraps itself in there without having to worry about all these margin left and right in the docking system, I think this will really help you in the future workflow.
All right. So this looks good, but let's go ahead and make this stack and expand to a hundred percent of our parent container. There we go. And we're going to do the same thing, but on the other side, so let's duplicate this, move it around, make sure that we follow the same guidelines of docking to the left and notice how, because this is part of a layout or we can start stretching these elements out just to see how things behave.
You can always go back to the layout or configuration and simply change everything back by using the equalized button.
So let's add some panning in that third block. So we can do that individually or by hitting this little lock icon, it'll apply whatever value you put in there to all different sides.
I'm going to swap out the. And this is what I love about stacks is that you can just drag any elements, move it around at different hierarchy, and it just snaps into place. This is going to make your life so much easier. Make sure that you add in the correct margin values so that it gives that nice spacing.
And then for the middle, I think let's just go ahead and add in an image. For this lesson, I want to focus on the testimonial. I'm thinking here, this is a New York times little quotes. So I'm going to export this logo. Let's give it to this section in minimum height of 600 and change this back to white so that our text and logo pops real well.
I think what we can do here is add a nice quote shape. And we can browse through the library that editor X provides. We can just simply search for something like quotes. And if we don't find anything, you know, you can filter by vector art, which gives us a little bit more variation. All right. So this first one seems like a good fit for our design and it even has this little grungy styling to it.
Let's change the color to our primary. Now we can scale this to a fixed or fluid value to make sure we sent you this in our container. So position it docked entirely in the middle. We have no margins and we can start adding contents. So here, I'm going to add our first quilt.
We can stretch this out a hundred percent and make sure that we sent her this entirely docked in the middle.
I'm gonna do, I'm just going to change the font so that we have a highlight on stream BR just like that change, maybe the font size so that the entire thing fits well within a hundred words. And finally, I want to go ahead and that the logo, the images that we bring in sometimes get propped off, but simple way to fix this is by stretching it out and stretching it back down.
This will automatically fix the proportion of that image. We'll see another way to reset that image in another lesson for now, let's go ahead and select both of these alums. And stack them together, make sure that we center them. And once we have that, we can preview and boom, look at that. Okay. All right.
So why don't you guys give it a try? It's really simple. And you can get really cool results. So let's get into our next lesson and check out the movies and games.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS