KreativePro Masterclass
Hello, {first_name}
Custom Grids
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 Custom Grids

In this lesson, we create a fun sticky interaction and explore Editor X custom grids.

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

All right. Before we get into the actual products, we need to replace our coolest, sticky shape with a real transparent video and finish the overview section. That's removed the shape, and instead we're going to use the. We're going to set the wave to about 400 by 400 pixels. Now inside, we're going to drop any transparent video.

Let's make sure we attach it to the container. Then it's stretch. Let's replace it. There's plenty of options. I'm going to search for crystal, huh? This one looks pretty cool. Be sure to remove the border in our container, then hit preview. Here we go. Looks good. What we want to do is have it float above our hero section.

We can do this by giving it a bit of negative margin to the top. You'll notice though, that's the hero still above and it's getting cropped. Let's go ahead and open up our layers. And make sure our hero's section is sent all the way to the back. This way. Our floating video will now pop right on top.

Let's just track that and put it on top of our sticky container. Let's center it, adjust the containers top margin to minus three.

And there we go. This looks great for the overview. We want to add a nice intro to what this is. So I'm going to insert a cool virtual reality statue photo, and we don't want to expand it because it'll start looking pixelated. Remember the containers has a fixed height of 1500 pixels and the offset graphic is about 700 pixels.

So we'll want to expand it a hundred percent wide, but then give it a fixed height of a thousand pixels. We align it to the top and left and adjusted enough for us to see the triangular dense. Great. For the overview, we can repurpose what we did with the. Let's go ahead and copy and paste the stack and simply change the text.

Well, once we adjust the size to about 50% and align it to the left side, we also want to swap the logo with another shape. So what if we browse this media? Filter basic shapes typing the search box arrow.

And yeah, I'm liking this one a lot because it matches the style in my feet, my mood board, it's pretty small. So let's adjust the size in, align it to the left. We could even add a link so that it scrolls back up to the top of the page.

Let's bring back in that accent, color to the title. There we go. Just like that. And let's align everything to the left and give our stack container a bit of left margin. So, you know, it's not directly hitting the edge. Another really cool feature in editor X is the ability to change the focus of an image.

So for example, right now, the text is not quite readable because the statue is directly in the middle. But if we changed the focus, say to the bottom, left it slightly moves and gives us a bit more room for the tax, the left to fit nicely.

Yeah. This looks pretty good. Before we dive into creating our products, I'd like to add a couple of VR brands in the top, right? We're going to do this using a three column grid container. We want to select our parents section and let's add a grid from our layout panel.

By default, it comes with a white background. So let's quickly remove that drop in a basic shape and change it to one of our brand logos from the media library.

Well, once you duplicate and align them under each. What's happening is each column acts as an invisible placeholder giving its children the possibility to be docked anywhere within its boundaries. By click adjust grid, then click edit grid. We suddenly see everything else faded and our grid settings teak complete prior.

You have the gap settings in the bottom to give a bit of air between columns and rows, and then you have the actual grip, which lets us customize to the granular level each individual column for now it's using the unit fraction to measure the column. This is a fluid. And it's basically splitting the entire grid into three fractions or 100% each, if we click the vertical row settings, we can see that there some minimum height let's change that to auto.

Then I want to make sure the grate uses a fixed size. So it doesn't scale the logos dramatically. As I resized the viewport.

Okay. As you can see, grades are pretty cool, but we just need to know when or how to use them correctly. For example, let's go ahead and apply the last section. This one, we're going to do a grid of two roads.

And let's add in our product titles. I want to style them with heading one

and we want to align them in their corresponding growth.

Now, once you start adding visuals like the headsets and other summaries within each one of these. So we could set the height of our great road to be 125 each.

I found that when the site grows, it can become a bit tricky to manage. So instead I found best to simply insert containers within each row. Then what we can do is just simply move all the elements directly into these containers. The biggest reason it really is because I can access. The height attribute quickly from the inspector panel, rather than having to make a lot of clicks to finally getting to the grid mode.

So let's go ahead and insert all the graphics we need in here. We could add in these cooler three diagonal slashes right behind the title, and we can insert a couple of our own stock photos. I'm going to speed through these, but you'll start noticing a lot of what we've learned so far. We're basically adjusting elements around the canvas and designing our way directly with editor.

This process would be pretty much the same in any other design tool. Since we have two different products, I thought it'd be cool to give some contrast between each one. You'll see how I'm using these floating VR headsets in between each section to make everything stand out.

Let's go ahead and preview. Once you're feeling good with your design, we can start thinking about animations in how each element will appear as you scroll down. We've got a lot of contrasting elements and great use of. So far we've learned about grits and polished our sticky, transparent video with negative margins and stacking down limits.

I think we're ready to jump to the next lesson and tackle later. So you're 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...