In this lesson, we explore Editor X design and layout inspector panels.
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!
whenever we're using tools like big ma or Adobe XD, we're presented with a canvas or in this case, a frame. If we created a circle for example, and move it around. Notice how Figma is automatically detecting exact position of that element based on the left and top of our parent's frame, this is called docking and editor X uses the same thing when placing objects on our canvas.
This is perhaps why I believe this is a true visual editor. The ability to choose. Where we want to dock and object for responsive behavior is exactly what we'll be doing with our inspector tool. Let's go ahead and open up our position settings. If we select the statue, we see it aligned nicely to the center in our docking panel.
We can see that because the little.is field blue, both horizontally. And for let's say I move it just slightly. Notice what happens similar to how Figma works. This object now change its position to be docked to the top end, right of its parents container. This becomes evident as we resize our canvas. You can play with a dock and handles all you want, but all you're doing is sledding editor.
What will steer this object as you scale the viewport right below our docking anchors, we have the margin values. These can be set in fixed pixels or fluid percentage values. Generally speaking, it is best to keep these fluid because they will react to the parents. Let's say you make the section a bit taller.
Since the top margin was set as pixel, the object will never align to the. Instead it obeys those pixels from the top. I find it easier to use the shortcut position icons to always take care of any object. Alignments. These margins can also use negative numbers you want to feel comfortable doing. So if you want your designs to really pop overlapping elements from section to section is super trendy, but be aware that in some cases you might break a thing.
For example, if you change the statutes left margin to minus 100%, it completely disappears from our view. And this is bound to happen. So a way to fix this is by opening up our layers panel, command out, selecting the children's transparent video and double check. Your margins are not in those negative numbers.
Another simple way to do this is by clicking the three little dots and select restore to viewport. Let's create another blank section below and change the color to blue. If we select our statue and this time we change its bottom margin to minus 50%, we can see how this element sits exactly between one section and the other within the hierarchy.
This element still lives in the top section. This brings me to the idea of overflowing contents. The name kind of says it all. If we select the section and under size, we can choose to show hive or scroll hiding, acts like a mask. So nothing will ever appear outside its four walls. This is used frequently with horizontal sliders.
Scroll basically turns this entire container as a scrollable viewport, to help you reveal the excess space needed to see the hidden elements. You'll see this use frequently in, in pop-ups or you know, like maybe this helps. They are actually using overflow scroll to let you navigate all these links in order to reveal a scroll bar, your content needs to be longer than its parent's height.
So you can have the direction be vertical or horizontal and even decide to hide the scroll. Let's restore our graphics just for a minute. And, uh, one thing you'll notice is that the inspectors properties will always change based on the, what element you select. For example, sections and containers have an additional property called pad.
Think of padding as the space you're adding the inward, let's say for example, we remove the minimum height of our section. You can type in none or zero. This will make the size of that section hug its contents. If the statue height grows. So will the parent section, we'll see this more often in later lessons, but the cool thing is we can force a bit of spacing just by adding a hundred pixels from the top.
And. To finalize. I want to show you something really cool, but to do this, we'll need a couple more sections. Let's go ahead and make each of these a hundred VH. Let's go ahead and duplicate our titles with command. And drag them into each section below to avoid dragging each time you duplicate them, you can simply copy with command C and paste it in the section below.
This will automatically bring those alignment properties too. Yeah.
Okay. So now that these are all set, we can make our top nav bar follow us as we scroll the page down and we do it using the scroll effects and simply select fixed. There we go. Pretty simple. Let's add a white background. Nice much better. Anything set to fixed. We'll always have priority in the hierarchy and it will appear above everything else by toggling the overlap.
Next section, it'll push the first section up and have the NAF bar start directly on top of it. Sticky works very similar, but it won't show until you preview. And it only sticks relative to the parent. All right. So let's use the history title and let's align it to the top. Change this to sticky, then click preview.
It'll stick around based on the 100 VH, we sat on those other sections. We can even give it some offset margin, like 50 pixels to cover the difference of our fixed staff bar.
Okay, check this out. I'm going to add more Greek figure statues
and make sure we arrange them. So that title is always behind them.
Click preview and wallah. We got ourselves a really cool way to present different sections.
To wrap this up, let's create some anchor links in our top navigation bar, click on the menu in our nav bar section and click manage menu. Okay. Let's quickly add a couple of links. We'll want to select the. And then it'll ask what page and which anchor. So the only anchor available is the top of the page.
That's okay. Let's go back and add some Anchorage to each section, scroll down, select each section and you'll see in our inspector panel, the property called. Toggle it on and let's call it history. We'll do this with all other sections. All we have to do is go back to the top menu and add in our anchor links.
Go ahead and hit preview and try it out. Sweet. Wow. We've covered a lot of features and I think we're ready to take it to the next level. So let's go.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS