In this lesson, we explore the correct flow and hierarchy of our Editor X elements.
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!
So all these graphics we currently have in our cannabis are sitting within a section. The way editor X sees them SSN. They were within a folder called section. Let me show you if we open up the layers panel, you'll notice we have a simple hierarchy. Currently. Everything is inside this page, including the header section and footer.
If I open up the section layer, you'll see another three elements, which are now children of that section layer. This is known as the parenting model. So check this up. If I move these elements and start rearranging. You'll notice how the very top layer will always be the one that sits above everything else.
You can also use these three dots to arrange them, or by simply right. Clicking the elements and changing the arrangement options. So remember these layers are in the same level or group, so they are called siblings, but are also children of that section. Building out sites with this parenting model is a common practice.
And it's basically using the box model. Imagine a box within a box within a box. It's basically the way websites have been built for the past 15 years. But come on flow in our layers should always be pages, sections, containers, then elements, which are images or. Trust me following this approach will guarantee happiness.
When you build out your site, take a look at the logo we made earlier. We simply drag that elements straight into the header. Now check out the layers panel. Editor X automatically attaches it there for us. Attaching and detaching can be done simply by dragging the element outside its container. Please note you can't do the same thing using the layers panel.
I personally wish you could because they wouldn't resemble how other design tools work. Okay. Let me add an empty container. Um, notice how the blue outline around the container lights up aside position the elements above it. One important thing to keep in mind is that dragging elements around can lead to layout problems.
Changing the hierarchy of elements in one break point will effect all other break points too, but don't worry. This will be easier to understand when we get our hands dirty in the next module. This text is now child of the container and the container is the child of the section. This will come in handy when we have the layers panel collapsed.
Okay. Maybe we would have a lot of layers. You'll be able to find parents quickly and change its properties. Using the inspector panel to finalize. We need to talk about sections and the arrangements. For example, you can create both horizontal and vertical sections to create a vertical section. You can click outside the canvas and these little blue hotspots appear.
These are useful. If you're creating a side menu, like a Wiki curriculum or documentary. What I want you to remember is that these vertical sections have priority over horizontal sections. Meaning anything you've put on them will always be above everything else. Let's change the background color, and let's drag the edge to expand it.
Notice how everything gets pushed out. You can even swap it by right clicking and select move. Right. Nice. Okay. So horizontal sections work the same way by selecting the canvas. We can click on the blue button above or below, and every section you add will come by default with a minimum height of 500 pixels editor X lets us play with three types of measurements, the viewport fixed or fluid, you can see.
By opening up our inspector panel, big size is measured in pixels. So for example, one pixel will always equal one pixel in every computer, no matter what, think of them as power units, because they will always stay true, no matter what device our visitors are using fluid in the other hand are those units that are relative to the parent.
Those are measured in percentage values. Take our text element. For example, if I change that to a hundred percent. It'll expand all the way to fit the sections with now, the funny thing is horizontal sections will always be fluid, meaning a hundred percent of its parents and the directs grays them out and labels the width as auto.
Now, if you click on the vertical section, we just created, you'll notice this one allows us to use a fixed measurement in pixels, which is great because if we want a sidebar, whenever we preview this page and resize the candidate. It'll always stay true to the size, no matter what the last unit of measurement I like to cover is the viewport width and height.
If I turn this vertical section with two fluid, you'll notice it does not use the percentage value, but a VW instead. And it's referring to the browser's viewport with, or in this case, the candidate. If I changed the value to 50 VW, this simply means 50% of the canvas. The same goes with B H it'll always scale to the height of the viewport.
All right. So let's add a hundred VH to our new blank section. Notice how it expands to total size of the current canvas. The math is actually happening behind the scenes. Anytime. If browser is resized, this unit of measurement will be constantly updating the layout. I think that's pretty cool. Why don't we practice a bit more and discover the rest of the inspector panel.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS